lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

layer reordering now correctly reorders scene canvases

Browse Source
This commit is contained in:
Eric Rowell 2012-08-25 22:26:25 -07:00
parent 20f2158afb
commit ddfcab2d55
5 changed files with 195 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dist/kinetic-core.js vendored
View File

@ -1681,6 +1681,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.push(this); this.parent.children.push(this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.appendChild(this.canvas.element);
}
}
}, },
/** /**
* move node up * move node up
@ -1689,9 +1697,25 @@ Kinetic.Node.prototype = {
*/ */
moveUp: function() { moveUp: function() {
var index = this.index; var index = this.index;
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this); this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
}
}
}, },
/** /**
* move node down * move node down
@ -1704,6 +1728,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this); this.parent.children.splice(index - 1, 0, this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
}
} }
}, },
/** /**
@ -1716,6 +1748,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.unshift(this); this.parent.children.unshift(this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, stage.getChildren()[1].canvas.element);
}
}
}, },
/** /**
* set zIndex * set zIndex

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

40
src/Node.js
View File

@ -516,6 +516,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.push(this); this.parent.children.push(this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.appendChild(this.canvas.element);
}
}
}, },
/** /**
* move node up * move node up
@ -524,9 +532,25 @@ Kinetic.Node.prototype = {
*/ */
moveUp: function() { moveUp: function() {
var index = this.index; var index = this.index;
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this); this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
}
}
}, },
/** /**
* move node down * move node down
@ -539,6 +563,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this); this.parent.children.splice(index - 1, 0, this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
}
} }
}, },
/** /**
@ -551,6 +583,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.unshift(this); this.parent.children.unshift(this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, stage.getChildren()[1].canvas.element);
}
}
}, },
/** /**
* set zIndex * set zIndex

10
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

114
tests/js/unitTests.js
View File

@ -1,5 +1,5 @@
Test.prototype.tests = { Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////Fp ////////////////////////////////////////////////////////////////////////
// STAGE tests // STAGE tests
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
@ -332,7 +332,7 @@ Test.prototype.tests = {
var startDataUrl = layer.toDataURL(); var startDataUrl = layer.toDataURL();
warn(startDataUrl === urls[0], 'start data url is incorrect'); //warn(startDataUrl === urls[0], 'start data url is incorrect');
test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle'); test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
//console.log(stage.toJSON()) //console.log(stage.toJSON())
@ -348,7 +348,7 @@ Test.prototype.tests = {
layer.draw(); layer.draw();
var endDataUrl = layer.toDataURL(); var endDataUrl = layer.toDataURL();
warn(endDataUrl === urls[0], 'end data url is incorrect'); //warn(endDataUrl === urls[0], 'end data url is incorrect');
}, },
'STAGE - load stage with custom shape using json': function(containerId) { 'STAGE - load stage with custom shape using json': function(containerId) {
@ -980,8 +980,6 @@ Test.prototype.tests = {
layer.draw(); layer.draw();
}, },
'LAYER - set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) { 'LAYER - set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
var urls = dataUrls['LAYER - set clearBeforeDraw to false'];
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -1015,12 +1013,11 @@ Test.prototype.tests = {
stage.toDataURL({ stage.toDataURL({
callback: function(dataUrl) { callback: function(dataUrl) {
warn(urls[0] === dataUrl, 'stage data url is incorrect'); warn(dataUrls['stacked green circles'] === dataUrl, 'stacked green circles stage data url is incorrect');
} }
}); });
warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect'); warn(dataUrls['stacked green circles'] === layer.toDataURL(), 'stacked green circles layer data url is incorrect');
warn(urls[1] === group.toDataURL(), 'group data url is incorrect');
warn(urls[1] === circle.toDataURL(), 'shape data url is incorrect');
}, },
'LAYER - add layer': function(containerId) { 'LAYER - add layer': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -1825,7 +1822,6 @@ Test.prototype.tests = {
imageObj.src = '../assets/scorpion-sprite.png'; imageObj.src = '../assets/scorpion-sprite.png';
}, },
'Node - node caching': function(containerId) { 'Node - node caching': function(containerId) {
var urls = dataUrls['Node - node caching'];
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -1885,12 +1881,10 @@ Test.prototype.tests = {
layer.add(cachedShape); layer.add(cachedShape);
cachedShape.createImageBuffer(function() { cachedShape.createImageBuffer(function() {
layer.draw(); layer.draw();
warn(dataUrls['regular and cahced polygon'] === layer.toDataURL(), 'regular and cached polygon layer data url is incorrect');
warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect'); //document.body.appendChild(layer.bufferCanvas.element)
document.body.appendChild(layer.bufferCanvas.element)
}); });
} }
}); });
@ -4334,6 +4328,12 @@ Test.prototype.tests = {
stage.add(greenLayer); stage.add(greenLayer);
blueLayer.moveToTop(); blueLayer.moveToTop();
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
}
});
}, },
'LAYERING - move green layer below blue layer with moveToBottom': function(containerId) { 'LAYERING - move green layer below blue layer with moveToBottom': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -4369,6 +4369,92 @@ Test.prototype.tests = {
stage.add(greenLayer); stage.add(greenLayer);
greenLayer.moveToBottom(); greenLayer.moveToBottom();
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
}
});
},
'LAYERING - 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.Ellipse({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var greencircle = new Kinetic.Ellipse({
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 moveToTop is not working');
}
});
},
'LAYERING - 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.Ellipse({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var greencircle = new Kinetic.Ellipse({
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 moveToTop is not working');
}
});
}, },
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
// ANIMATION tests // ANIMATION tests