setZIndex now correctly reorders layer canvases

dist/kinetic-core.js

@@ -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

src/Layer.js

@@ -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

tests/js/unitTests.js

@@ -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');
             }
         });
     },