mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
1438 lines
45 KiB
JavaScript
1438 lines
45 KiB
JavaScript
Test.Modules.CONTAINER = {
|
|
'add layer then group then shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
var circle = new Kinetic.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();
|
|
},
|
|
'add shape then stage then layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
var circle = new Kinetic.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);
|
|
layer.draw();
|
|
},
|
|
'select shape by id and name': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
id: 'myLayer'
|
|
});
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Kinetic.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.get('#myCircle')[0];
|
|
test(node.shapeType === 'Circle', 'shape type should be Circle');
|
|
node = layer.get('.myRect')[0];
|
|
test(node.shapeType === 'Rect', 'shape type should be rect');
|
|
node = layer.get('#myLayer')[0];
|
|
test(node === undefined, 'node should be undefined');
|
|
node = stage.get('#myLayer')[0];
|
|
test(node.nodeType === 'Layer', 'node type should be Layer');
|
|
|
|
},
|
|
'remove shape by id or name': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Kinetic.Rect({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'purple',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myRect'
|
|
});
|
|
|
|
var circleColorKey = circle.colorKey;
|
|
var rectColorKey = rect.colorKey;
|
|
|
|
layer.add(circle);
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
test(stage.ids.myCircle._id === circle._id, 'circle not in ids hash');
|
|
test(stage.names.myRect[0]._id === rect._id, 'rect not in names hash');
|
|
test(Kinetic.Global.shapes[circleColorKey]._id === circle._id, 'circle color key should be in shapes hash');
|
|
test(Kinetic.Global.shapes[rectColorKey]._id === rect._id, 'rect color key should be in shapes hash');
|
|
|
|
circle.remove();
|
|
|
|
test(stage.ids.myCircle === undefined, 'circle still in hash');
|
|
test(stage.names.myRect[0]._id === rect._id, 'rect not in names hash');
|
|
test(Kinetic.Global.shapes[circleColorKey] === undefined, 'circle color key should not be in shapes hash');
|
|
test(Kinetic.Global.shapes[rectColorKey]._id === rect._id, 'rect color key should be in shapes hash');
|
|
|
|
rect.remove();
|
|
|
|
test(stage.ids.myCircle === undefined, 'circle still in hash');
|
|
test(stage.names.myRect === undefined, 'rect still in hash');
|
|
test(Kinetic.Global.shapes[circleColorKey] === undefined, 'circle color key should not be in shapes hash');
|
|
test(Kinetic.Global.shapes[rectColorKey] === undefined, 'rect color key should not be in shapes hash');
|
|
},
|
|
'set x on an array of nodes': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Kinetic.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.get('.myShape');
|
|
|
|
test(shapes.length === 2, 'shapes array should have 2 elements');
|
|
|
|
shapes.apply('setX', 200);
|
|
|
|
layer.draw();
|
|
|
|
shapes.each(function() {
|
|
test(this.getX() === 200, 'shape x should be 200');
|
|
});
|
|
},
|
|
'set fill on array by Shape-selector': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Kinetic.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.get('Shape');
|
|
|
|
test(shapes.length === 2, 'shapes array should have 2 elements');
|
|
|
|
shapes.apply('setFill', 'gray');
|
|
|
|
layer.draw();
|
|
|
|
shapes.each(function() {
|
|
test(this.getFill() === 'gray', 'shape x should be 200');
|
|
});
|
|
},
|
|
'add listener to an array of nodes': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myShape'
|
|
});
|
|
|
|
var rect = new Kinetic.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.get('.myShape');
|
|
|
|
test(shapes.length === 2, 'shapes array should have 2 elements');
|
|
var a = 0;
|
|
shapes.on('mouseover', function() {
|
|
a++;
|
|
});
|
|
circle.simulate('mouseover');
|
|
test(a === 1, 'listener should have fired for circle');
|
|
rect.simulate('mouseover');
|
|
test(a === 2, 'listener should have fired for rect');
|
|
},
|
|
'test ids and names hashes': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var rect = new Kinetic.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);
|
|
|
|
test(stage.ids['myCircle'].getId() === 'myCircle', 'circle id not in ids hash');
|
|
test(stage.names['myRect'][0].getName() === 'myRect', 'rect name not in names hash');
|
|
|
|
circle.setId('newCircleId');
|
|
test(stage.ids['newCircleId'] !== undefined, 'circle not in ids hash');
|
|
test(stage.ids['myCircle'] === undefined, 'old circle id key is still in ids hash');
|
|
|
|
rect.setName('newRectName');
|
|
test(stage.names['newRectName'][0] !== undefined, 'new rect name not in names hash');
|
|
test(stage.names['myRect'] === undefined, 'old rect name is still in names hash');
|
|
},
|
|
'remove shape without adding its parent to stage': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
id: 'myCircle'
|
|
});
|
|
|
|
var go = Kinetic.Global;
|
|
|
|
test(go.tempNodes[circle._id] === undefined, 'circle shouldn\'t be in the temp nodes hash');
|
|
|
|
layer.add(circle);
|
|
|
|
var node = stage.get('#myCircle')[0];
|
|
|
|
test(node === undefined, 'node should be undefined');
|
|
|
|
test(go.tempNodes[circle._id].attrs.id === 'myCircle', 'circle should be in temp nodes');
|
|
|
|
circle.remove();
|
|
|
|
test(go.tempNodes[circle._id] === undefined, 'circle shouldn\'t be in the temp nodes hash');
|
|
|
|
},
|
|
'remove layer with shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
name: 'myLayer'
|
|
});
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
test(stage.children.length === 1, 'stage should have 1 children');
|
|
test(stage.get('.myLayer')[0] !== undefined, 'layer should exist');
|
|
test(stage.get('.myCircle')[0] !== undefined, 'circle should exist');
|
|
|
|
layer.remove();
|
|
|
|
test(stage.children.length === 0, 'stage should have 0 children');
|
|
test(stage.get('.myLayer')[0] === undefined, 'layer should not exist');
|
|
test(stage.get('.myCircle')[0] === undefined, 'circle should not exist');
|
|
|
|
stage.draw();
|
|
},
|
|
'remove layer with no shapes': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
stage.add(layer);
|
|
layer.remove();
|
|
|
|
test(stage.children.length === 0, 'stage should have 0 children');
|
|
},
|
|
'remove shape multiple times': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var shape1 = new Kinetic.Circle({
|
|
x: 150,
|
|
y: 100,
|
|
radius: 50,
|
|
fill: 'green',
|
|
name: 'myCircle'
|
|
});
|
|
|
|
var shape2 = new Kinetic.Circle({
|
|
x: 250,
|
|
y: 100,
|
|
radius: 50,
|
|
fill: 'green',
|
|
name: 'myCircle'
|
|
});
|
|
|
|
layer.add(shape1);
|
|
layer.add(shape2);
|
|
stage.add(layer);
|
|
|
|
test(layer.getChildren().length === 2, 'layer should have two children');
|
|
|
|
shape1.remove();
|
|
shape1.remove();
|
|
|
|
test(layer.getChildren().length === 1, 'layer should have two children');
|
|
|
|
layer.draw();
|
|
|
|
},
|
|
'remove layer multiple times': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer1 = new Kinetic.Layer();
|
|
var layer2 = new Kinetic.Layer();
|
|
|
|
var shape1 = new Kinetic.Circle({
|
|
x: 150,
|
|
y: 100,
|
|
radius: 50,
|
|
fill: 'green',
|
|
name: 'myCircle'
|
|
});
|
|
|
|
var shape2 = new Kinetic.Circle({
|
|
x: 250,
|
|
y: 100,
|
|
radius: 50,
|
|
fill: 'green',
|
|
name: 'myCircle'
|
|
});
|
|
|
|
layer1.add(shape1);
|
|
layer2.add(shape2);
|
|
stage.add(layer1);
|
|
stage.add(layer2);
|
|
|
|
test(stage.getChildren().length === 2, 'stage should have two children');
|
|
|
|
layer1.remove();
|
|
layer1.remove();
|
|
|
|
test(stage.getChildren().length === 1, 'stage should have one child');
|
|
|
|
stage.draw();
|
|
|
|
},
|
|
'add layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
stage.add(layer);
|
|
},
|
|
'remove all children from layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle1 = new Kinetic.Circle({
|
|
x: 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var circle2 = new Kinetic.Circle({
|
|
x: 300,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(circle1);
|
|
layer.add(circle2);
|
|
stage.add(layer);
|
|
|
|
test(layer.children.length === 2, 'layer should have 2 children');
|
|
|
|
layer.removeChildren();
|
|
layer.draw();
|
|
|
|
test(layer.children.length === 0, 'layer should have 0 children');
|
|
},
|
|
'add group': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
|
|
var circle = new Kinetic.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);
|
|
},
|
|
'create two groups, move first group': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var greenLayer = new Kinetic.Layer();
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenGroup = new Kinetic.Group();
|
|
var blueGroup = new Kinetic.Group();
|
|
|
|
var greencircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2 - 100,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
draggable: true
|
|
});
|
|
|
|
var bluecircle = new Kinetic.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 Kinetic.Group();
|
|
var bluecircle2 = new Kinetic.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();
|
|
},
|
|
'node type selector': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var fooLayer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
|
|
var blue = new Kinetic.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var red = new Kinetic.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);
|
|
|
|
test(stage.get('Shape').length === 2, 'stage should have 2 shapes');
|
|
test(layer.get('Shape').length === 2, 'layer should have 2 shapes');
|
|
test(group.get('Shape').length === 1, 'layer should have 2 shapes');
|
|
|
|
test(stage.get('Layer').length === 2, 'stage should have 2 layers');
|
|
test(stage.get('Group').length === 1, 'stage should have 1 group');
|
|
|
|
test(layer.get('Group').length === 1, 'layer should have 1 group');
|
|
test(layer.get('Shape').length === 2, 'layer should have 2 shapes');
|
|
test(layer.get('Layer').length === 0, 'layer should have 0 layers');
|
|
|
|
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
|
|
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
|
|
|
|
test(group.get('Shape').length === 1, 'group should have 1 shape');
|
|
test(group.get('Layer').length === 0, 'group should have 0 layers');
|
|
test(group.get('Group').length === 0, 'group should have 0 groups');
|
|
|
|
},
|
|
'node and shape type selector': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var layer2 = new Kinetic.Layer();
|
|
var fooLayer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
|
|
var blue = new Kinetic.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var red = new Kinetic.Rect({
|
|
x: 150,
|
|
y: 75,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'red'
|
|
});
|
|
|
|
var green = new Kinetic.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green'
|
|
});
|
|
|
|
var blueCircle = new Kinetic.Circle({
|
|
x: 350,
|
|
y: 75,
|
|
radius: 40,
|
|
fill: 'blue'
|
|
});
|
|
|
|
var redCircle = new Kinetic.Circle({
|
|
x: 400,
|
|
y: 125,
|
|
radius: 40,
|
|
fill: 'red'
|
|
});
|
|
|
|
var textpath = new Kinetic.TextPath({
|
|
y: 35,
|
|
textStroke: 'black',
|
|
textStrokeWidth: 1,
|
|
textFill: '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 Kinetic.Path({
|
|
x: 200,
|
|
y: -75,
|
|
data: 'M200,100h100v50z',
|
|
fill: '#ccc',
|
|
stroke: '#333',
|
|
strokeWidth: 2,
|
|
shadow: {
|
|
color: 'black',
|
|
blur: 2,
|
|
offset: [10, 10],
|
|
opacity: 0.5
|
|
},
|
|
});
|
|
|
|
var poly = new Kinetic.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);
|
|
|
|
test(stage.get('Shape').length === 8, 'stage should have 5 shapes');
|
|
test(stage.get('Layer').length === 3, 'stage should have 2 layers');
|
|
test(stage.get('Group').length === 1, 'stage should have 1 group');
|
|
test(stage.get('Rect').length === 3, 'stage should have 3 rects');
|
|
test(stage.get('Circle').length === 2, 'stage should have 2 circles');
|
|
test(stage.get('RegularPolygon').length === 1, 'stage should have 1 regular polygon');
|
|
test(stage.get('TextPath').length === 1, 'stage should have 1 text path');
|
|
test(stage.get('Path').length === 1, 'stage should have 1 path');
|
|
|
|
test(layer.get('Shape').length === 5, 'layer should have 5 shapes');
|
|
test(layer.get('Layer').length === 0, 'layer should have 0 layers');
|
|
test(layer.get('Group').length === 1, 'layer should have 1 group');
|
|
test(layer.get('Rect').length === 3, 'layer should have 3 rects');
|
|
test(layer.get('Circle').length === 2, 'layer should have 2 circles');
|
|
test(layer.get('RegularPolygon').length === 0, 'layer should have 0 regular polygon');
|
|
test(layer.get('TextPath').length === 0, 'layer should have 0 text path');
|
|
test(layer.get('Path').length === 0, 'layer should have 0 path');
|
|
|
|
test(layer2.get('Shape').length === 3, 'layer2 should have 3 shapes');
|
|
test(layer2.get('Layer').length === 0, 'layer2 should have 0 layers');
|
|
test(layer2.get('Group').length === 0, 'layer2 should have 0 group');
|
|
test(layer2.get('RegularPolygon').length === 1, 'layer2 should have 1 regular polygon');
|
|
test(layer2.get('TextPath').length === 1, 'layer2 should have 1 text path');
|
|
test(layer2.get('Path').length === 1, 'layer2 should have 1 path');
|
|
|
|
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
|
|
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
|
|
test(fooLayer.get('Rect').length === 0, 'layer should have 0 rects');
|
|
test(fooLayer.get('Circle').length === 0, 'layer should have 0 circles');
|
|
|
|
test(group.get('Shape').length === 2, 'group should have 2 shape');
|
|
test(group.get('Layer').length === 0, 'group should have 0 layers');
|
|
test(group.get('Group').length === 0, 'group should have 0 groups');
|
|
test(group.get('Rect').length === 1, 'group should have 1 rects');
|
|
test(group.get('Circle').length === 1, 'gropu should have 1 circles');
|
|
},
|
|
'remove shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle'
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
test(layer.children.length === 1, 'layer should have 1 children');
|
|
|
|
circle.remove();
|
|
|
|
test(layer.children.length === 0, 'layer should have 0 children');
|
|
//test(layer.getChild('myCircle') === undefined, 'shape should be null');
|
|
|
|
layer.draw();
|
|
},
|
|
'test get() selector by adding shape, then group, then layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
name: 'stageName',
|
|
id: 'stageId'
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
name: 'layerName',
|
|
id: 'layerId'
|
|
});
|
|
var group = new Kinetic.Group({
|
|
name: 'groupName',
|
|
id: 'groupId'
|
|
});
|
|
var rect = new Kinetic.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);
|
|
|
|
test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
|
|
test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
|
|
test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
|
|
test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
|
|
},
|
|
'test get() selector by adding group, then shape, then layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
name: 'stageName',
|
|
id: 'stageId'
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
name: 'layerName',
|
|
id: 'layerId'
|
|
});
|
|
var group = new Kinetic.Group({
|
|
name: 'groupName',
|
|
id: 'groupId'
|
|
});
|
|
var rect = new Kinetic.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);
|
|
|
|
test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
|
|
test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
|
|
test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
|
|
test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
|
|
},
|
|
'test get() selector by adding group, then layer, then shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
name: 'stageName',
|
|
id: 'stageId'
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
name: 'layerName',
|
|
id: 'layerId'
|
|
});
|
|
var group = new Kinetic.Group({
|
|
name: 'groupName',
|
|
id: 'groupId'
|
|
});
|
|
var rect = new Kinetic.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);
|
|
|
|
test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
|
|
test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
|
|
test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
|
|
test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
|
|
},
|
|
'test get() selector by adding layer, then group, then shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
name: 'stageName',
|
|
id: 'stageId'
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
name: 'layerName',
|
|
id: 'layerId'
|
|
});
|
|
var group = new Kinetic.Group({
|
|
name: 'groupName',
|
|
id: 'groupId'
|
|
});
|
|
var rect = new Kinetic.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);
|
|
|
|
test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector');
|
|
test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector');
|
|
|
|
test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector');
|
|
test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector');
|
|
|
|
test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
|
|
test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
|
|
|
|
layer.draw();
|
|
},
|
|
'add layer then shape': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.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();
|
|
},
|
|
'move blue layer on top of green layer with setZIndex': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenLayer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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);
|
|
|
|
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
|
|
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
|
|
|
|
stage.toDataURL({
|
|
callback: function(dataUrl) {
|
|
//console.log(dataUrl)
|
|
warn(dataUrls['blue on top of green'] === dataUrl, 'layer setZIndex is not working');
|
|
}
|
|
});
|
|
},
|
|
'move blue layer on top of green layer with moveToTop': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenLayer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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();
|
|
|
|
stage.toDataURL({
|
|
callback: function(dataUrl) {
|
|
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
|
|
}
|
|
});
|
|
},
|
|
'move green layer below blue layer with moveToBottom': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenLayer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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();
|
|
|
|
stage.toDataURL({
|
|
callback: function(dataUrl) {
|
|
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToBottom is not working');
|
|
}
|
|
});
|
|
},
|
|
'move green layer below blue layer with moveDown': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenLayer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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();
|
|
|
|
stage.toDataURL({
|
|
callback: function(dataUrl) {
|
|
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveDown is not working');
|
|
}
|
|
});
|
|
},
|
|
'move blue layer above green layer with moveUp': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var blueLayer = new Kinetic.Layer();
|
|
var greenLayer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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();
|
|
|
|
stage.toDataURL({
|
|
callback: function(dataUrl) {
|
|
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveUp is not working');
|
|
}
|
|
});
|
|
},
|
|
'move blue circle on top of green circle with moveToTop': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
layer.add(greencircle);
|
|
stage.add(layer);
|
|
|
|
test(bluecircle.getZIndex() === 0, 'blue circle should have zindex 0 before relayering');
|
|
test(greencircle.getZIndex() === 1, 'green circle should have zindex 1 before relayering');
|
|
|
|
bluecircle.moveToTop();
|
|
|
|
test(bluecircle.getZIndex() === 1, 'blue circle should have zindex 1 after relayering');
|
|
test(greencircle.getZIndex() === 0, 'green circle should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
},
|
|
'move green circle below blue circle with moveDown': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.Circle({
|
|
x: 280,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
layer.add(greencircle);
|
|
stage.add(layer);
|
|
|
|
test(bluecircle.getZIndex() === 0, 'blue circle should have zindex 0 before relayering');
|
|
test(greencircle.getZIndex() === 1, 'green circle should have zindex 1 before relayering');
|
|
|
|
greencircle.moveDown();
|
|
|
|
test(bluecircle.getZIndex() === 1, 'blue circle should have zindex 1 after relayering');
|
|
test(greencircle.getZIndex() === 0, 'green circle should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
},
|
|
'layer layer when only one layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(bluecircle);
|
|
stage.add(layer);
|
|
|
|
test(layer.getZIndex() === 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveDown();
|
|
test(layer.getZIndex() === 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveToBottom();
|
|
test(layer.getZIndex() === 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveUp();
|
|
test(layer.getZIndex() === 0, 'layer should have zindex of 0');
|
|
|
|
layer.moveToTop();
|
|
test(layer.getZIndex() === 0, 'layer should have zindex of 0');
|
|
|
|
},
|
|
'move blue group on top of green group with moveToTop': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var greenGroup = new Kinetic.Group();
|
|
var blueGroup = new Kinetic.Group();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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);
|
|
|
|
test(blueGroup.getZIndex() === 0, 'blue group should have zindex 0 before relayering');
|
|
test(greenGroup.getZIndex() === 1, 'green group should have zindex 1 before relayering');
|
|
|
|
blueGroup.moveToTop();
|
|
|
|
test(blueGroup.getZIndex() === 1, 'blue group should have zindex 1 after relayering');
|
|
test(greenGroup.getZIndex() === 0, 'green group should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
},
|
|
'move blue group on top of green group with moveUp': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var greenGroup = new Kinetic.Group();
|
|
var blueGroup = new Kinetic.Group();
|
|
|
|
var bluecircle = new Kinetic.Circle({
|
|
x: 200,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'blue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var greencircle = new Kinetic.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);
|
|
|
|
test(blueGroup.getZIndex() === 0, 'blue group should have zindex 0 before relayering');
|
|
test(greenGroup.getZIndex() === 1, 'green group should have zindex 1 before relayering');
|
|
|
|
blueGroup.moveUp();
|
|
|
|
test(blueGroup.getZIndex() === 1, 'blue group should have zindex 1 after relayering');
|
|
test(greenGroup.getZIndex() === 0, 'green group should have zindex 0 after relayering');
|
|
|
|
layer.draw();
|
|
}
|
|
};
|