lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix some docs and tests

Browse Source
This commit is contained in:
Anton Lavrenov
2019-02-20 09:13:39 -05:00
parent c4f21b67a3
commit febdc9e3d4
28 changed files with 200 additions and 1561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
test/unit/Container-test.js
View File

@@ -940,7 +940,7 @@ suite('Container', function() {
strokeWidth: 2,
shadowColor: 'black',
shadowBlur: 2,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.5
});
@@ -1338,40 +1338,6 @@ suite('Container', function() {
);
});
// ======================================================
test('test deprecated get() method', function() {
var stage = addStage();
var layer = new Konva.Layer({
name: 'layerName',
id: 'layerId'
});
var group = new Konva.Group({
name: 'groupName',
id: 'groupId'
});
var rect = new Konva.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rectName',
id: 'rectId'
});
layer.add(group);
group.add(rect);
stage.add(layer);
assert.equal(
stage.get('.rectName')[0].attrs.id,
'rectId',
'problem with shape name selector'
);
});
// ======================================================
test('test find() selector by adding group, then layer, then shape', function() {
var stage = addStage();

2
test/unit/Layer-test.js
View File

@@ -239,7 +239,7 @@ suite('Layer', function() {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: [3, 1],
scale: { x: 3, y: 1 },
draggable: true,
strokeScaleEnabled: false
});

4
test/unit/Node-cache-test.js
View File

@@ -709,9 +709,7 @@ suite('Caching', function() {
var circle = new Konva.Circle({
radius: 10,
// fill: 'white',
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,
@@ -739,9 +737,7 @@ suite('Caching', function() {
var circle = new Konva.Circle({
radius: 10,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,

45
test/unit/Node-test.js
View File

@@ -208,7 +208,7 @@ suite('Node', function() {
// shadow cache
assert.equal(circle._cache.get('hasShadow'), false);
circle.setShadowColor('red');
circle.setShadowOffset(10);
circle.setShadowOffsetX(10);
assert.equal(circle._cache.get('hasShadow'), undefined);
layer.draw();
assert.equal(circle._cache.get('hasShadow'), true);
@@ -1177,43 +1177,6 @@ suite('Node', function() {
assert.equal(stage.children[0], layer);
});
// ======================================================
test('scale shape by half', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
layer.add(circle);
stage.add(layer);
});
// ======================================================
test('scale shape by half then back to 1', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
circle.setScale(1, 1);
layer.add(circle);
stage.add(layer);
});
// ======================================================
test('set offset offset after instantiation', function() {
var stage = addStage();
@@ -3132,7 +3095,7 @@ suite('Node', function() {
stage.add(layer);
assert.equal(stage.content.style.display, 'none');
stage.show();
stage.draw();
assert.equal(stage.content.style.display, '');
@@ -3140,10 +3103,6 @@ suite('Node', function() {
stage.hide();
stage.draw();
assert.equal(stage.content.style.display, 'none');
// TODO: stage hide() fails. also need to find a good way to test this
});
// ======================================================

6
test/unit/Shape-test.js
View File

@@ -81,7 +81,7 @@ suite('Shape', function() {
stroke: 'blue',
strokeWidth: 5,
shadowColor: 'black',
shadowOffset: 10,
shadowOffsetX: 10,
shadowOpacity: 0
});
@@ -327,7 +327,7 @@ suite('Shape', function() {
circle.setFillLinearGradientEndPoint({ x: 35, y: 35 });
circle.setFillLinearGradientColorStops([0, 'red', 1, 'blue']);
circle.setFillLinearGradientStartPoint(null);
circle.setFillLinearGradientStartPoint({ x: 0, y: 0 });
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('repeat');
circle.setFillPatternOffset({ x: 0, y: 0 });
@@ -890,7 +890,7 @@ suite('Shape', function() {
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 20,
shadowOffsetX: 20,
shadowOpacity: 0.2
});

42
test/unit/Stage-test.js
View File

@@ -186,8 +186,7 @@ suite('Stage', function() {
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
id: 'redCircle'
stroke: 'black'
});
layer.add(shape);
layer.draw();
@@ -215,8 +214,7 @@ suite('Stage', function() {
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
id: 'redCircle'
stroke: 'black'
});
var greenCircle = new Konva.Circle({
@@ -225,8 +223,7 @@ suite('Stage', function() {
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
id: 'greenCircle'
stroke: 'black'
});
layer.add(redCircle);
@@ -234,13 +231,13 @@ suite('Stage', function() {
stage.add(layer);
assert.equal(
stage.getIntersection({ x: 300, y: 100 }).getId(),
'greenCircle',
stage.getIntersection({ x: 300, y: 100 }),
greenCircle,
'shape should be greenCircle'
);
assert.equal(
stage.getIntersection({ x: 380, y: 100 }).getId(),
'redCircle',
stage.getIntersection({ x: 380, y: 100 }),
redCircle,
'shape should be redCircle'
);
assert.equal(
@@ -311,8 +308,7 @@ suite('Stage', function() {
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
id: 'redCircle'
stroke: 'black'
});
var greenCircle = new Konva.Circle({
@@ -321,8 +317,7 @@ suite('Stage', function() {
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
id: 'greenCircle'
stroke: 'black'
});
stage.on('contentMousemove', function() {
@@ -338,19 +333,20 @@ suite('Stage', function() {
stage.add(layer);
assert.equal(
stage.getIntersection({ x: 370, y: 93 }).getId(),
'greenCircle',
stage.getIntersection({ x: 370, y: 93 }),
greenCircle,
'shape should be greenCircle'
);
// TODO: this passes in the browser but fails in phantomjs. no idea why.
//assert.equal(stage.getIntersection(371, 93).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(
stage.getIntersection({ x: 372, y: 93 }).getId(),
'redCircle',
stage.getIntersection({ x: 371, y: 93 }),
greenCircle,
'shape should be greenCircle'
);
assert.equal(
stage.getIntersection({ x: 372, y: 93 }),
redCircle,
'shape should be redCircle'
);
//console.log(layer.hitCanvas.context._context.getImageData(1, 1, 1, 1).data)
});
// ======================================================
@@ -684,7 +680,7 @@ suite('Stage', function() {
var layer = new Konva.Layer();
stage.add(layer);
stage.setScale(0.5);
stage.setScaleX(0.5);
stage.draw();
});

6
test/unit/shapes/Image-test.js
View File

@@ -125,7 +125,7 @@ suite('Image', function() {
height: 75,
crop: { x: 186, y: 211, width: 106, height: 74 },
draggable: true,
scale: [0.5, 0.5]
scale: { x: 0.5, y: 0.5 }
});
layer.add(darth);
@@ -186,7 +186,7 @@ suite('Image', function() {
y: 0,
image: imageObj,
draggable: true,
scale: 0.25
scale: { x: 0.25, y: 0.25 }
});
layer.add(tiger);
@@ -218,7 +218,7 @@ suite('Image', function() {
y: 0,
image: imageObj,
draggable: true,
scale: 0.25,
scaleX: 0.25,
opacity: 0.5
});

6
test/unit/shapes/Label-test.js
View File

@@ -16,7 +16,7 @@ suite('Label', function() {
fill: '#bbb',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.2,
lineJoin: 'round',
pointerDirection: 'up',
@@ -124,7 +124,7 @@ suite('Label', function() {
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffsetX: 10,
shadowOpacity: 0.5
})
);
@@ -152,7 +152,7 @@ suite('Label', function() {
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffsetX: 10,
shadowOpacity: 0.5
})
);

4
test/unit/shapes/Line-test.js
View File

@@ -320,7 +320,7 @@ suite('Line', function() {
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
stroke: 'black',
strokeWidth: 10,
draggable: true,
closed: true
@@ -334,7 +334,7 @@ suite('Line', function() {
stage.add(layer);
stage.add(layer2);
layer2.hide();
compareLayers(layer, layer2, 100);
compareLayers(layer, layer2, 150);
// Konva.pixelRatio = undefined;
});

2
test/unit/shapes/Path-test.js
View File

@@ -12,7 +12,7 @@ suite('Path', function() {
strokeWidth: 2,
shadowColor: 'black',
shadowBlur: 2,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.5,
draggable: true
});

10
test/unit/shapes/Star-test.js
View File

@@ -56,7 +56,7 @@ suite('Star', function() {
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOffset: { x: 20, y: 20 },
shadowOpacity: 0.5,
draggable: true
});
@@ -90,7 +90,7 @@ suite('Star', function() {
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOffset: { x: 20, y: 20 },
shadowOpacity: 0.5,
draggable: true
});
@@ -123,12 +123,12 @@ suite('Star', function() {
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
stroke: 'black',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOffset: { x: 20, y: 20 },
shadowOpacity: 0.5,
draggable: true
});
@@ -143,6 +143,6 @@ suite('Star', function() {
height: 100,
width: 100
});
cloneAndCompareLayer(layer, 50);
cloneAndCompareLayer(layer, 100);
});
});

20
test/unit/shapes/Text-test.js
View File

@@ -41,7 +41,7 @@ suite('Text', function() {
height: 100,
shadowColor: 'black',
shadowBlur: 1,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.2,
cornerRadius: 10
});
@@ -62,7 +62,7 @@ suite('Text', function() {
padding: 10,
shadowColor: 'red',
shadowBlur: 1,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.2
});
@@ -71,8 +71,7 @@ suite('Text', function() {
});
// center text box
rect.offset(text.getWidth() / 2, text.getHeight() / 2);
text.offset(text.getWidth() / 2, text.getHeight() / 2);
rect.offsetX(text.getWidth() / 2, text.getHeight() / 2);
group.add(rect);
group.add(text);
@@ -223,13 +222,13 @@ suite('Text', function() {
padding: 10,
shadowColor: 'black',
shadowBlur: 1,
shadowOffset: [10, 10],
shadowOffset: { X: 10, y: 10 },
shadowOpacity: 0.2,
draggable: true
});
// center text box
text.offset(text.getWidth() / 2, text.getHeight() / 2);
text.offsetX(text.getWidth() / 2, text.getHeight() / 2);
layer.add(text);
stage.add(layer);
@@ -257,7 +256,7 @@ suite('Text', function() {
assert.equal(text.getWidth(), 400);
assert.equal(text.getHeight(), 100);
assert(text.getTextWidth() > 0, 'text width should be greater than 0');
assert(text.getTextHeight() > 0, 'text height should be greater than 0');
assert(text.fontSize() > 0, 'text height should be greater than 0');
text.setX(1);
text.setY(2);
@@ -505,7 +504,7 @@ suite('Text', function() {
align: 'center',
shadowColor: 'red',
shadowBlur: 1,
shadowOffset: [10, 10],
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.5,
draggable: true
});
@@ -801,10 +800,7 @@ suite('Text', function() {
ctx.fillText(text.text(), text.x(), text.y() + text.fontSize() / 2);
// TODO: fails on CI, so tol is very large
// TODO: how to make it smaller or skip in CI?
compareLayerAndCanvas(layer, canvas, 256);
// delete Konva.pixelRatio;
compareLayerAndCanvas(layer, canvas, 200);
});
// TODO: how to make correct behavior?

4
test/unit/shapes/TextPath-test.js
View File

@@ -419,7 +419,7 @@ suite('TextPath', function() {
text: 'AV',
fontSize: 60,
data: 'M0,0 L200,0',
getKerning: function(leftChar, rightChar) {
kerningFunc: function(leftChar, rightChar) {
return pairs.hasOwnProperty(leftChar)
? pairs[leftChar][rightChar] || 0
: 0;
@@ -460,7 +460,7 @@ suite('TextPath', function() {
text: 'AV',
fontSize: 60,
data: 'M0,0 L200,0',
getKerning: function(leftChar, rightChar) {
kerningFunc: function(leftChar, rightChar) {
// getter that fails
throw new Error('something went wrong');
}

1
test/unit/shapes/Transformer-test.js
View File

@@ -1702,7 +1702,6 @@ suite('Transformer', function() {
assert.equal(rect.height(), 100);
});
// TODO: current I am not sure how to better resolve that task
test.skip('transformer should skip scale on stroke if strokeScaleEnabled = false', function() {
var stage = addStage();
var layer = new Konva.Layer();