lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

setZIndex now correctly reorders layer canvases

Browse Source
This commit is contained in:
ericdrowell 2012-10-05 18:59:03 -07:00
parent f5d4228f3b
commit 3f8801a494
5 changed files with 85 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Oct 03 2012
* Date: Oct 05 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -3597,6 +3597,20 @@ Kinetic.Layer.prototype = {
this.bufferCanvas.element.style.display = 'none';
}
},
setZIndex: function(index) {
Kinetic.Node.prototype.setZIndex.call(this, index);
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
},
moveToTop: function() {
Kinetic.Node.prototype.moveToTop.call(this);
var stage = this.getStage();
@ -3641,7 +3655,7 @@ Kinetic.Layer.prototype = {
}
},
getLayer: function() {
return this;
return this;
},
/**
* Creates a composite data URL. If MIME type is not
@ -3678,7 +3692,7 @@ Kinetic.Layer.prototype = {
* remove layer from stage
*/
remove: function() {
Kinetic.Node.prototype.remove.call(this);
Kinetic.Node.prototype.remove.call(this);
/*
* remove canvas DOM from the document if
* it exists

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

File diff suppressed because one or more lines are too long

18
src/Layer.js
View File

@ -145,6 +145,20 @@ Kinetic.Layer.prototype = {
this.bufferCanvas.element.style.display = 'none';
}
},
setZIndex: function(index) {
Kinetic.Node.prototype.setZIndex.call(this, index);
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
},
moveToTop: function() {
Kinetic.Node.prototype.moveToTop.call(this);
var stage = this.getStage();
@ -189,7 +203,7 @@ Kinetic.Layer.prototype = {
}
},
getLayer: function() {
return this;
return this;
},
/**
* Creates a composite data URL. If MIME type is not
@ -226,7 +240,7 @@ Kinetic.Layer.prototype = {
* remove layer from stage
*/
remove: function() {
Kinetic.Node.prototype.remove.call(this);
Kinetic.Node.prototype.remove.call(this);
/*
* remove canvas DOM from the document if
* it exists

2
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

51
tests/js/unitTests.js
View File

@ -4468,6 +4468,51 @@ Test.prototype.tests = {
console.log(stage.getStage());
},
'LAYERING - 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');
}
});
},
'LAYERING - move blue layer on top of green layer with moveToTop': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -4546,7 +4591,7 @@ Test.prototype.tests = {
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToBottom is not working');
}
});
},
@ -4586,7 +4631,7 @@ Test.prototype.tests = {
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveDown is not working');
}
});
},
@ -4626,7 +4671,7 @@ Test.prototype.tests = {
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveToTop is not working');
warn(dataUrls['blue on top of green'] === dataUrl, 'layer moveUp is not working');
}
});
},