lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:31:15 +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

50
dist/kinetic-core.js vendored
View File

@ -1197,7 +1197,7 @@ requestAnimFrame = (function(callback) {
* @param {Number} [config.dragBounds.left]
*/
Kinetic.Node = function(config) {
this._nodeInit(config);
this._nodeInit(config);
};
Kinetic.Node.prototype = {
@ -1227,7 +1227,7 @@ Kinetic.Node.prototype = {
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -1681,6 +1681,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.push(this);
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
@ -1689,9 +1697,25 @@ Kinetic.Node.prototype = {
*/
moveUp: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
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
@ -1704,6 +1728,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this);
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.unshift(this);
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

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

File diff suppressed because one or more lines are too long

50
src/Node.js
View File

@ -32,7 +32,7 @@
* @param {Number} [config.dragBounds.left]
*/
Kinetic.Node = function(config) {
this._nodeInit(config);
this._nodeInit(config);
};
Kinetic.Node.prototype = {
@ -62,7 +62,7 @@ Kinetic.Node.prototype = {
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -516,6 +516,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.push(this);
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
@ -524,9 +532,25 @@ Kinetic.Node.prototype = {
*/
moveUp: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
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
@ -539,6 +563,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this);
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.unshift(this);
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

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 = {
////////////////////////////////////////////////////////////////////////Fp
////////////////////////////////////////////////////////////////////////
// STAGE tests
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
@ -332,7 +332,7 @@ Test.prototype.tests = {
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');
//console.log(stage.toJSON())
@ -348,7 +348,7 @@ Test.prototype.tests = {
layer.draw();
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) {
@ -980,8 +980,6 @@ Test.prototype.tests = {
layer.draw();
},
'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({
container: containerId,
width: 578,
@ -1015,12 +1013,11 @@ Test.prototype.tests = {
stage.toDataURL({
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(urls[1] === group.toDataURL(), 'group data url is incorrect');
warn(urls[1] === circle.toDataURL(), 'shape data url is incorrect');
warn(dataUrls['stacked green circles'] === layer.toDataURL(), 'stacked green circles layer data url is incorrect');
},
'LAYER - add layer': function(containerId) {
var stage = new Kinetic.Stage({
@ -1825,7 +1822,6 @@ Test.prototype.tests = {
imageObj.src = '../assets/scorpion-sprite.png';
},
'Node - node caching': function(containerId) {
var urls = dataUrls['Node - node caching'];
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1885,12 +1881,10 @@ Test.prototype.tests = {
layer.add(cachedShape);
cachedShape.createImageBuffer(function() {
layer.draw();
warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
warn(dataUrls['regular and cahced polygon'] === layer.toDataURL(), 'regular and cached polygon 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);
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) {
var stage = new Kinetic.Stage({
@ -4369,6 +4369,92 @@ Test.prototype.tests = {
stage.add(greenLayer);
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