mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
1656 lines
53 KiB
JavaScript
1656 lines
53 KiB
JavaScript
suite('Container', function() {
|
|
|
|
// ======================================================
|
|
test('clip', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
clip: {x:0, y:0, width:stage.getWidth() / 2, height:100}
|
|
});
|
|
var group = new Konva.Group();
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle',
|
|
draggable: true
|
|
});
|
|
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
group.add(circle);
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('adder validation', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
group.add(circle);
|
|
layer.draw();
|
|
|
|
// disassemble the tree
|
|
circle.remove();
|
|
group.remove();
|
|
layer.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
stage.add(stage);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding stage to stage');
|
|
stage.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
stage.add(group);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding group to stage');
|
|
group.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
stage.add(circle);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding shape to stage');
|
|
circle.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
layer.add(stage);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding stage to layer');
|
|
stage.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
layer.add(layer);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding layer to layer');
|
|
layer.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
group.add(stage);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding stage to group');
|
|
stage.remove();
|
|
|
|
// ===================================
|
|
var errorThrown = false;
|
|
try {
|
|
group.add(layer);
|
|
} catch(err) {
|
|
errorThrown = true;
|
|
}
|
|
assert.equal(errorThrown, true, 'error should have been thrown when adding layer to group');
|
|
layer.remove();
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('add layer then group then shape', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
// these should all pass because they are valid
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
group.add(circle);
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('add shape then stage then layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
group.add(circle);
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
});
|
|
|
|
// ======================================================
|
|
test('select shape by id and name', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
id: 'myLayer'
|
|
});
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myRect'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var node;
|
|
node = stage.find('#myCircle')[0];
|
|
assert.equal(node.className, 'Circle', 'className should be Circle');
|
|
node = layer.find('.myRect')[0];
|
|
assert.equal(node.className, 'Rect', 'className should be rect');
|
|
node = layer.find('#myLayer')[0];
|
|
assert.equal(node, undefined, 'node should be undefined');
|
|
node = stage.find('#myLayer')[0];
|
|
assert.equal(node.nodeType, 'Layer', 'node type should be Layer');
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('select shape by name with "-" char', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'bounding-box'
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var node = stage.find('.bounding-box')[0];
|
|
assert.equal(node, rect);
|
|
});
|
|
|
|
// ======================================================
|
|
test('select shape by id and name with findOne', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
id: 'myLayer'
|
|
});
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myRect'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var node;
|
|
node = stage.findOne('#myCircle');
|
|
assert.equal(node, circle);
|
|
node = layer.findOne('.myRect');
|
|
assert.equal(node, rect);
|
|
node = layer.findOne('#myLayer');
|
|
assert.equal(node, undefined, 'node should be undefined');
|
|
node = stage.findOne('#myLayer');
|
|
assert.equal(node, layer, 'node type should be Layer');
|
|
});
|
|
|
|
// ======================================================
|
|
test('select shapes with multiple selectors', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
id: 'myLayer'
|
|
});
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myRect'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
assert.equal(layer.find('#myCircle, .myRect').length, 2, 'should be 2 items in the array');
|
|
assert.equal(layer.find('#myCircle, .myRect')[0]._id, circle._id, 'circle id is wrong');
|
|
assert.equal(layer.find('#myCircle, .myRect')[1]._id, rect._id, 'rect id is wrong');
|
|
|
|
assert.equal(layer.find('#myCircle, Circle, .myRect, Rect').length, 4, 'should be 4 items in the array');
|
|
assert.equal(layer.find('#myCircle, Circle, .myRect, Rect')[0]._id, circle._id, 'circle id is wrong');
|
|
assert.equal(layer.find('#myCircle, Circle, .myRect, Rect')[1]._id, circle._id, 'circle id is wrong');
|
|
assert.equal(layer.find('#myCircle, Circle, .myRect, Rect')[2]._id, rect._id, 'rect id is wrong');
|
|
assert.equal(layer.find('#myCircle, Circle, .myRect, Rect')[3]._id, rect._id, 'rect id is wrong');
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('set x on an array of nodes', 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,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var shapes = layer.find('.myShape');
|
|
|
|
assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
|
|
|
|
shapes.each(function(node) {
|
|
node.setX(200);
|
|
});
|
|
|
|
layer.draw();
|
|
|
|
shapes.each(function(node) {
|
|
assert.equal(node.getX(), 200, 'shape x should be 200');
|
|
});
|
|
});
|
|
|
|
// ======================================================
|
|
test('set fill on array by Shape-selector', 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,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var shapes = layer.find('Shape');
|
|
|
|
assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
|
|
|
|
shapes.each(function(node) {
|
|
node.setFill('gray');
|
|
});
|
|
|
|
layer.draw();
|
|
|
|
shapes.each(function(node) {
|
|
assert.equal(node.getFill(), 'gray', 'shape x should be 200');
|
|
});
|
|
});
|
|
|
|
// ======================================================
|
|
test('add listener to an array of nodes', 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,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var shapes = layer.find('.myShape');
|
|
|
|
assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
|
|
var a = 0;
|
|
shapes.on('mouseover', function() {
|
|
a++;
|
|
});
|
|
circle.fire('mouseover');
|
|
assert.equal(a, 1, 'listener should have fired for circle');
|
|
rect.fire('mouseover');
|
|
assert.equal(a, 2, 'listener should have fired for rect');
|
|
});
|
|
|
|
// ======================================================
|
|
test('test ids and names hashes', 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,
|
|
id: 'myCircle3'
|
|
});
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myRect3'
|
|
});
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
|
|
assert.equal(Konva.ids['myCircle3'].getId(), 'myCircle3', 'circle id not in ids hash');
|
|
assert.equal(Konva.names['myRect3'][0].getName(), 'myRect3', 'rect name not in names hash');
|
|
|
|
circle.setId('newCircleId');
|
|
assert.notEqual(Konva.ids['newCircleId'], undefined, 'circle not in ids hash');
|
|
assert.equal(Konva.ids['myCircle3'], undefined, 'old circle id key is still in ids hash');
|
|
|
|
rect.setName('newRectName');
|
|
assert.notEqual(Konva.names['newRectName'][0], undefined, 'new rect name not in names hash');
|
|
assert.equal(Konva.names['myRect3'], undefined, 'old rect name is still in names hash');
|
|
});
|
|
|
|
// ======================================================
|
|
test('add layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
});
|
|
|
|
// ======================================================
|
|
test('remove all children from layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
var circle1 = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var circle2 = new Konva.Circle({
|
|
x: 300,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
group.add(circle1);
|
|
group.add(circle2);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
assert.equal(layer.children.length, 1, 'layer should have 1 children');
|
|
assert.equal(group.children.length, 2, 'group should have 2 children');
|
|
|
|
layer.removeChildren();
|
|
layer.draw();
|
|
|
|
assert.equal(layer.children.length, 0, 'layer should have 0 children');
|
|
assert.equal(group.children.length, 2, 'group still should have 2 children');
|
|
});
|
|
|
|
// ======================================================
|
|
test('destroy all children from layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
name: 'layerName',
|
|
id: 'layerId'
|
|
});
|
|
var group = new Konva.Group();
|
|
var circle1 = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'circleName',
|
|
id: 'circleId'
|
|
});
|
|
|
|
var circle2 = new Konva.Circle({
|
|
x: 300,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
group.add(circle1);
|
|
group.add(circle2);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
assert.equal(layer.children.length, 1, 'layer should have 1 children');
|
|
assert.equal(group.children.length, 2, 'group should have 2 children');
|
|
assert(Konva.names.circleName.length > 0, 'circleName should be in names hash');
|
|
assert.equal(Konva.ids.circleId.getId(), 'circleId', 'layerId should be in ids hash');
|
|
|
|
layer.destroyChildren();
|
|
layer.draw();
|
|
|
|
assert.equal(layer.children.length, 0, 'layer should have 0 children');
|
|
assert.equal(group.children.length, 0, 'group should have 0 children');
|
|
assert.equal(Konva.names.circleName, undefined, 'circleName should not be in names hash');
|
|
assert.equal(Konva.ids.circleId, undefined, 'layerId should not be in ids hash');
|
|
});
|
|
|
|
// ======================================================
|
|
test('add group', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
group.add(circle);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
});
|
|
|
|
// ======================================================
|
|
test('create two groups, move first group', function() {
|
|
var stage = addStage();
|
|
var greenLayer = new Konva.Layer();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenGroup = new Konva.Group();
|
|
var blueGroup = new Konva.Group();
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: stage.getWidth() / 2 - 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
draggable: true
|
|
});
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: stage.getWidth() / 2 + 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
greenGroup.add(greencircle);
|
|
blueGroup.add(bluecircle);
|
|
greenLayer.add(greenGroup);
|
|
blueLayer.add(blueGroup);
|
|
stage.add(greenLayer);
|
|
stage.add(blueLayer);
|
|
|
|
blueLayer.removeChildren();
|
|
var blueGroup2 = new Konva.Group();
|
|
var bluecircle2 = new Konva.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
blueGroup2.add(bluecircle2);
|
|
blueLayer.add(blueGroup2);
|
|
blueLayer.draw();
|
|
blueGroup2.setPosition(100, 0);
|
|
blueLayer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('node type selector', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var fooLayer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
|
|
var blue = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var red = new Konva.Rect({
|
|
x: 250,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'red'
|
|
});
|
|
|
|
group.add(red);
|
|
layer.add(blue);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
stage.add(fooLayer);
|
|
|
|
assert.equal(stage.find('Shape').length, 2, 'stage should have 2 shapes');
|
|
assert.equal(layer.find('Shape').length, 2, 'layer should have 2 shapes');
|
|
assert.equal(group.find('Shape').length, 1, 'layer should have 2 shapes');
|
|
|
|
assert.equal(stage.find('Layer').length, 2, 'stage should have 2 layers');
|
|
assert.equal(stage.find('Group').length, 1, 'stage should have 1 group');
|
|
|
|
assert.equal(layer.find('Group').length, 1, 'layer should have 1 group');
|
|
assert.equal(layer.find('Shape').length, 2, 'layer should have 2 shapes');
|
|
assert.equal(layer.find('Layer').length, 0, 'layer should have 0 layers');
|
|
|
|
assert.equal(fooLayer.find('Group').length, 0, 'layer should have 0 groups');
|
|
assert.equal(fooLayer.find('Shape').length, 0, 'layer should have 0 shapes');
|
|
|
|
assert.equal(group.find('Shape').length, 1, 'group should have 1 shape');
|
|
assert.equal(group.find('Layer').length, 0, 'group should have 0 layers');
|
|
assert.equal(group.find('Group').length, 0, 'group should have 0 groups');
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('node and shape type selector', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var layer2 = new Konva.Layer();
|
|
var fooLayer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
|
|
var blue = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var red = new Konva.Rect({
|
|
x: 150,
|
|
y: 75,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'red'
|
|
});
|
|
|
|
var green = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green'
|
|
});
|
|
|
|
var blueCircle = new Konva.Circle({
|
|
x: 350,
|
|
y: 75,
|
|
radius: 40,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var redCircle = new Konva.Circle({
|
|
x: 400,
|
|
y: 125,
|
|
radius: 40,
|
|
fill: 'red'
|
|
});
|
|
|
|
var textpath = new Konva.TextPath({
|
|
y: 35,
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
fill: 'orange',
|
|
fontSize: '18',
|
|
fontFamily: 'Arial',
|
|
text: 'The quick brown fox jumped over the lazy dog\'s back',
|
|
data: "M 10,10 300,150 550,150"
|
|
});
|
|
|
|
var path = new Konva.Path({
|
|
x: 200,
|
|
y: -75,
|
|
data: 'M200,100h100v50z',
|
|
fill: '#ccc',
|
|
stroke: '#333',
|
|
strokeWidth: 2,
|
|
shadowColor: 'black',
|
|
shadowBlur: 2,
|
|
shadowOffset: [10, 10],
|
|
shadowOpacity: 0.5
|
|
});
|
|
|
|
var poly = new Konva.RegularPolygon({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
sides: 5,
|
|
radius: 50,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
name: 'foobar'
|
|
});
|
|
|
|
group.add(red);
|
|
group.add(redCircle);
|
|
layer.add(blue);
|
|
layer.add(green);
|
|
layer.add(blueCircle);
|
|
layer.add(group);
|
|
layer2.add(textpath);
|
|
layer2.add(path);
|
|
layer2.add(poly);
|
|
stage.add(layer);
|
|
stage.add(layer2);
|
|
stage.add(fooLayer);
|
|
|
|
assert.equal(stage.find('Shape').length, 8, 'stage should have 5 shapes');
|
|
assert.equal(stage.find('Layer').length, 3, 'stage should have 2 layers');
|
|
assert.equal(stage.find('Group').length, 1, 'stage should have 1 group');
|
|
assert.equal(stage.find('Rect').length, 3, 'stage should have 3 rects');
|
|
assert.equal(stage.find('Circle').length, 2, 'stage should have 2 circles');
|
|
assert.equal(stage.find('RegularPolygon').length, 1, 'stage should have 1 regular polygon');
|
|
assert.equal(stage.find('TextPath').length, 1, 'stage should have 1 text path');
|
|
assert.equal(stage.find('Path').length, 1, 'stage should have 1 path');
|
|
|
|
assert.equal(layer.find('Shape').length, 5, 'layer should have 5 shapes');
|
|
assert.equal(layer.find('Layer').length, 0, 'layer should have 0 layers');
|
|
assert.equal(layer.find('Group').length, 1, 'layer should have 1 group');
|
|
assert.equal(layer.find('Rect').length, 3, 'layer should have 3 rects');
|
|
assert.equal(layer.find('Circle').length, 2, 'layer should have 2 circles');
|
|
assert.equal(layer.find('RegularPolygon').length, 0, 'layer should have 0 regular polygon');
|
|
assert.equal(layer.find('TextPath').length, 0, 'layer should have 0 text path');
|
|
assert.equal(layer.find('Path').length, 0, 'layer should have 0 path');
|
|
|
|
assert.equal(layer2.find('Shape').length, 3, 'layer2 should have 3 shapes');
|
|
assert.equal(layer2.find('Layer').length, 0, 'layer2 should have 0 layers');
|
|
assert.equal(layer2.find('Group').length, 0, 'layer2 should have 0 group');
|
|
assert.equal(layer2.find('RegularPolygon').length, 1, 'layer2 should have 1 regular polygon');
|
|
assert.equal(layer2.find('TextPath').length, 1, 'layer2 should have 1 text path');
|
|
assert.equal(layer2.find('Path').length, 1, 'layer2 should have 1 path');
|
|
|
|
assert.equal(fooLayer.find('Shape').length, 0, 'layer should have 0 shapes');
|
|
assert.equal(fooLayer.find('Group').length, 0, 'layer should have 0 groups');
|
|
assert.equal(fooLayer.find('Rect').length, 0, 'layer should have 0 rects');
|
|
assert.equal(fooLayer.find('Circle').length, 0, 'layer should have 0 circles');
|
|
|
|
assert.equal(group.find('Shape').length, 2, 'group should have 2 shape');
|
|
assert.equal(group.find('Layer').length, 0, 'group should have 0 layers');
|
|
assert.equal(group.find('Group').length, 0, 'group should have 0 groups');
|
|
assert.equal(group.find('Rect').length, 1, 'group should have 1 rects');
|
|
assert.equal(group.find('Circle').length, 1, 'gropu should have 1 circles');
|
|
});
|
|
|
|
// ======================================================
|
|
test('test find() selector by adding shapes with multiple names', 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',
|
|
name: 'red rectangle',
|
|
id: 'rectId'
|
|
});
|
|
var circle = new Konva.Circle({
|
|
x: 50,
|
|
y: 50,
|
|
radius: 20,
|
|
fill: 'red',
|
|
name: 'red circle',
|
|
id: 'circleId'
|
|
});
|
|
|
|
group.add(rect);
|
|
group.add(circle);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
assert.equal(stage.find('.rectangle')[0], rect, 'problem with shape name selector');
|
|
assert.equal(layer.find('.rectangle')[0], rect, 'problem with shape name selector');
|
|
assert.equal(group.find('.rectangle')[0], rect, 'problem with shape name selector');
|
|
|
|
assert.equal(stage.find('.circle')[0], circle, 'problem with shape name selector');
|
|
assert.equal(layer.find('.circle')[0], circle, 'problem with shape name selector');
|
|
assert.equal(group.find('.circle')[0], circle, 'problem with shape name selector');
|
|
|
|
assert.equal(stage.find('.red')[0], rect, 'problem with shape name selector');
|
|
assert.equal(stage.find('.red')[1], circle, 'problem with shape name selector');
|
|
assert.equal(layer.find('.red')[0], rect, 'problem with shape name selector');
|
|
assert.equal(layer.find('.red')[1], circle, 'problem with shape name selector');
|
|
assert.equal(group.find('.red')[0], rect, 'problem with shape name selector');
|
|
assert.equal(group.find('.red')[1], circle, 'problem with shape name selector');
|
|
|
|
assert.equal(stage.find('.groupName')[0], group, 'problem with group name selector');
|
|
assert.equal(layer.find('.groupName')[0], group, 'problem with group name selector');
|
|
|
|
assert.equal(stage.find('.layerName')[0], layer, 'problem with layer name selector');
|
|
});
|
|
|
|
|
|
// ======================================================
|
|
test('test find() selector by adding shape, then group, then layer', 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'
|
|
});
|
|
|
|
group.add(rect);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
assert.equal(stage.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(stage.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(layer.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(layer.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(group.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(group.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
|
|
assert.equal(stage.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(stage.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
assert.equal(layer.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(layer.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
|
|
assert.equal(stage.find('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
|
|
assert.equal(stage.find('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
|
|
});
|
|
|
|
// ======================================================
|
|
test('test find() selector by adding group, then shape, then layer', 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.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(stage.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(layer.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(layer.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(group.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(group.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
|
|
assert.equal(stage.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(stage.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
assert.equal(layer.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(layer.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
|
|
assert.equal(stage.find('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
|
|
assert.equal(stage.find('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
|
|
});
|
|
|
|
// ======================================================
|
|
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();
|
|
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);
|
|
stage.add(layer);
|
|
group.add(rect);
|
|
|
|
assert.equal(stage.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(stage.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(layer.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(layer.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(group.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(group.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
|
|
assert.equal(stage.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(stage.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
assert.equal(layer.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(layer.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
|
|
assert.equal(stage.find('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
|
|
assert.equal(stage.find('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
|
|
});
|
|
|
|
// ======================================================
|
|
test('test find() selector by adding layer, then group, then shape', 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'
|
|
});
|
|
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
group.add(rect);
|
|
|
|
assert.equal(stage.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(stage.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(layer.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(layer.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
assert.equal(group.find('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
|
|
assert.equal(group.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
|
|
|
|
assert.equal(stage.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(stage.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
assert.equal(layer.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
|
|
assert.equal(layer.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
|
|
|
|
assert.equal(stage.find('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
|
|
assert.equal(stage.find('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
|
|
|
|
test('warn on invalid selector', 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'
|
|
});
|
|
|
|
stage.add(layer);
|
|
layer.add(group);
|
|
group.add(rect);
|
|
layer.draw();
|
|
|
|
var counter = 0;
|
|
var oldWarn = Konva.Util.warn;
|
|
Konva.Util.warn = function() {
|
|
counter += 1;
|
|
};
|
|
|
|
// forgot dot
|
|
group.find('rectName');
|
|
assert.equal(counter > 0, true);
|
|
Konva.Util.warn = oldWarn;
|
|
});
|
|
|
|
// ======================================================
|
|
test('add layer then shape', 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,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
stage.add(layer);
|
|
layer.add(circle);
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue layer on top of green layer with setZIndex', function() {
|
|
var stage = addStage();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenLayer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueLayer.add(bluecircle);
|
|
greenLayer.add(greencircle);
|
|
|
|
stage.add(blueLayer);
|
|
stage.add(greenLayer);
|
|
|
|
blueLayer.setZIndex(1);
|
|
|
|
//console.log(greenLayer.getZIndex());
|
|
|
|
assert.equal(greenLayer.getZIndex(), 0, 'green layer should have z index of 0');
|
|
assert.equal(blueLayer.getZIndex(), 1, 'blue layer should have z index of 1');
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue layer on top of green layer with moveToTop', function() {
|
|
var stage = addStage();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenLayer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueLayer.add(bluecircle);
|
|
greenLayer.add(greencircle);
|
|
|
|
stage.add(blueLayer);
|
|
stage.add(greenLayer);
|
|
|
|
blueLayer.moveToTop();
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('move green layer below blue layer with moveToBottom', function() {
|
|
var stage = addStage();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenLayer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueLayer.add(bluecircle);
|
|
greenLayer.add(greencircle);
|
|
|
|
stage.add(blueLayer);
|
|
stage.add(greenLayer);
|
|
|
|
greenLayer.moveToBottom();
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('move green layer below blue layer with moveDown', function() {
|
|
var stage = addStage();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenLayer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueLayer.add(bluecircle);
|
|
greenLayer.add(greencircle);
|
|
|
|
stage.add(blueLayer);
|
|
stage.add(greenLayer);
|
|
greenLayer.moveDown();
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue layer above green layer with moveUp', function() {
|
|
var stage = addStage();
|
|
var blueLayer = new Konva.Layer();
|
|
var greenLayer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueLayer.add(bluecircle);
|
|
greenLayer.add(greencircle);
|
|
|
|
stage.add(blueLayer);
|
|
stage.add(greenLayer);
|
|
blueLayer.moveUp();
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue circle on top of green circle with moveToTop', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
layer.add(greencircle);
|
|
stage.add(layer);
|
|
|
|
assert.equal(bluecircle.getZIndex(), 0, 'blue circle should have zindex 0 before relayering');
|
|
assert.equal(greencircle.getZIndex(), 1, 'green circle should have zindex 1 before relayering');
|
|
|
|
bluecircle.moveToTop();
|
|
|
|
assert.equal(bluecircle.getZIndex(), 1, 'blue circle should have zindex 1 after relayering');
|
|
assert.equal(greencircle.getZIndex(), 0, 'green circle should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('move green circle below blue circle with moveDown', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
layer.add(greencircle);
|
|
stage.add(layer);
|
|
|
|
assert.equal(bluecircle.getZIndex(), 0, 'blue circle should have zindex 0 before relayering');
|
|
assert.equal(greencircle.getZIndex(), 1, 'green circle should have zindex 1 before relayering');
|
|
|
|
greencircle.moveDown();
|
|
|
|
assert.equal(bluecircle.getZIndex(), 1, 'blue circle should have zindex 1 after relayering');
|
|
assert.equal(greencircle.getZIndex(), 0, 'green circle should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('layer layer when only one layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
stage.add(layer);
|
|
|
|
|
|
assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveDown();
|
|
assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveToBottom();
|
|
assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveUp();
|
|
assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveToTop();
|
|
assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
|
|
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue group on top of green group with moveToTop', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var greenGroup = new Konva.Group();
|
|
var blueGroup = new Konva.Group();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueGroup.add(bluecircle);
|
|
greenGroup.add(greencircle);
|
|
|
|
layer.add(blueGroup);
|
|
layer.add(greenGroup);
|
|
stage.add(layer);
|
|
|
|
assert.equal(blueGroup.getZIndex(), 0, 'blue group should have zindex 0 before relayering');
|
|
assert.equal(greenGroup.getZIndex(), 1, 'green group should have zindex 1 before relayering');
|
|
|
|
blueGroup.moveToTop();
|
|
|
|
assert.equal(blueGroup.getZIndex(), 1, 'blue group should have zindex 1 after relayering');
|
|
assert.equal(greenGroup.getZIndex(), 0, 'green group should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('move blue group on top of green group with moveUp', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var greenGroup = new Konva.Group();
|
|
var blueGroup = new Konva.Group();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Konva.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
blueGroup.add(bluecircle);
|
|
greenGroup.add(greencircle);
|
|
|
|
layer.add(blueGroup);
|
|
layer.add(greenGroup);
|
|
stage.add(layer);
|
|
|
|
assert.equal(blueGroup.getZIndex(), 0, 'blue group should have zindex 0 before relayering');
|
|
assert.equal(greenGroup.getZIndex(), 1, 'green group should have zindex 1 before relayering');
|
|
|
|
blueGroup.moveUp();
|
|
|
|
assert.equal(blueGroup.getZIndex(), 1, 'blue group should have zindex 1 after relayering');
|
|
assert.equal(greenGroup.getZIndex(), 0, 'green group should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('add and moveTo should work same way (depend on parent)', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var greenGroup = new Konva.Group();
|
|
var blueGroup = new Konva.Group();
|
|
|
|
var bluecircle = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
bluecircle.moveTo(blueGroup);
|
|
|
|
layer.add(blueGroup);
|
|
layer.add(greenGroup);
|
|
stage.add(layer);
|
|
|
|
assert.equal(blueGroup.getChildren().length, 1, 'blue group should have only one children');
|
|
blueGroup.add(bluecircle);
|
|
assert.equal(blueGroup.getChildren().length, 1, 'blue group should have only one children after adding node twice');
|
|
|
|
greenGroup.add(bluecircle);
|
|
assert.equal(blueGroup.getChildren().length, 0, 'blue group should not have children');
|
|
assert.equal(greenGroup.getChildren().length, 1, 'green group should have only one children');
|
|
|
|
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
test('getChildren may use filter function', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group();
|
|
|
|
var circle1 = new Konva.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
var circle2 = circle1.clone();
|
|
group.add(circle1).add(circle2);
|
|
|
|
var rect = new Konva.Rect({
|
|
name : 'test'
|
|
});
|
|
group.add(rect);
|
|
|
|
var circles = group.getChildren(function(node){
|
|
return node.getClassName() === 'Circle';
|
|
});
|
|
assert.equal(circles.length, 2, 'group has two circle children');
|
|
assert.equal(circles.indexOf(circle1) > -1, true);
|
|
assert.equal(circles.indexOf(circle2) > -1, true);
|
|
|
|
var testName = group.getChildren(function(node){
|
|
return node.name() === 'test';
|
|
});
|
|
|
|
assert.equal(testName.length, 1, 'group has one children with test name');
|
|
|
|
layer.add(group);
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
test('add multiple nodes to container', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var circle1 = new Konva.Circle({
|
|
x: 0,
|
|
y: 0,
|
|
radius: 10,
|
|
fill: 'red'
|
|
});
|
|
var circle2 = new Konva.Circle({
|
|
x: 0,
|
|
y: 0,
|
|
radius: 10,
|
|
fill: 'white'
|
|
});
|
|
var circle3 = new Konva.Circle({
|
|
x: 0,
|
|
y: 0,
|
|
radius: 10,
|
|
fill: 'blue'
|
|
});
|
|
layer.add(circle1, circle2, circle3);
|
|
assert.equal(layer.getChildren().length, 3, 'layer has exactly three children');
|
|
});
|
|
|
|
test('getClientRect - test empty case', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
var group = new Konva.Group({
|
|
x : 10,
|
|
y : 10
|
|
});
|
|
group.add(new Konva.Group());
|
|
assert.deepEqual(group.getClientRect(), {x:10, y:10, width: 0, height:0});
|
|
|
|
});
|
|
|
|
test.skip('getClientRect - test layer', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var group1 = new Konva.Group();
|
|
var group2 = new Konva.Group();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 50,
|
|
y: 100,
|
|
width: 200,
|
|
height: 75,
|
|
fill: 'red'
|
|
});
|
|
|
|
group1.add(rect);
|
|
layer.add(group1);
|
|
layer.add(group2);
|
|
stage.add(layer);
|
|
|
|
assert.deepEqual(layer.getClientRect(), {x: 50, y: 100, width: 200, height: 75});
|
|
|
|
});
|
|
});
|