now removing color key from shapes hash when a shape is removed from the stage

dist/kinetic-core.js

@@ -2538,8 +2538,8 @@ Kinetic.Container.prototype = {
             }
 
             // do extra stuff if needed
-            if(this._remove !== undefined) {
+            if(child._remove !== undefined) {
-                this._remove(child);
+                child._remove();
             }
         }
 
@@ -3061,21 +3061,6 @@ Kinetic.Stage.prototype = {
             layer.draw();
         }
     },
-    /**
-     * remove layer from stage
-     * @param {Layer} layer
-     */
-    _remove: function(layer) {
-        /*
-         * remove canvas DOM from the document if
-         * it exists
-         */
-        try {
-            this.content.removeChild(layer.canvas.element);
-        }
-        catch(e) {
-        }
-    },
     /**
      * add layer to stage
      * @param {Layer} layer
@@ -3469,6 +3454,10 @@ Kinetic.Stage.prototype = {
         this.touchPos = undefined;
         this.tapStart = false;
 
+        /*
+         * ids and names hash needs to be stored at the stage level to prevent
+         * id and name collisions between multiple stages in the document
+         */
         this.ids = {};
         this.names = {};
         this.dragAnim = new Kinetic.Animation();
@@ -3676,6 +3665,21 @@ Kinetic.Layer.prototype = {
         }
         return canvas.toDataURL(mimeType, quality);
     },
+    /**
+     * remove layer from stage
+     */
+    _remove: function() {
+        /*
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.getStage().content.removeChild(this.canvas.element);
+        }
+        catch(e) {
+            Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
+        }
+    },
     __draw: function(canvas) {
         if(this.attrs.clearBeforeDraw) {
             canvas.clear();
@@ -4084,6 +4088,9 @@ Kinetic.Shape.prototype = {
         var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
         return p[3] > 0;
     },
+    _remove: function() {
+        delete Kinetic.Global.shapes[this.colorKey];
+    },
     __draw: function(canvas) {
         if(this.attrs.drawFunc) {
             var stage = this.getStage();

src/Container.js

@@ -122,8 +122,8 @@ Kinetic.Container.prototype = {
             }
 
             // do extra stuff if needed
-            if(this._remove !== undefined) {
+            if(child._remove !== undefined) {
-                this._remove(child);
+                child._remove();
             }
         }
 

src/Layer.js

@@ -170,6 +170,21 @@ Kinetic.Layer.prototype = {
         }
         return canvas.toDataURL(mimeType, quality);
     },
+    /**
+     * remove layer from stage
+     */
+    _remove: function() {
+        /*
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.getStage().content.removeChild(this.canvas.element);
+        }
+        catch(e) {
+            Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
+        }
+    },
     __draw: function(canvas) {
         if(this.attrs.clearBeforeDraw) {
             canvas.clear();

src/Shape.js

@@ -335,6 +335,9 @@ Kinetic.Shape.prototype = {
         var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
         return p[3] > 0;
     },
+    _remove: function() {
+        delete Kinetic.Global.shapes[this.colorKey];
+    },
     __draw: function(canvas) {
         if(this.attrs.drawFunc) {
             var stage = this.getStage();

src/Stage.js

@@ -402,21 +402,6 @@ Kinetic.Stage.prototype = {
             layer.draw();
         }
     },
-    /**
-     * remove layer from stage
-     * @param {Layer} layer
-     */
-    _remove: function(layer) {
-        /*
-         * remove canvas DOM from the document if
-         * it exists
-         */
-        try {
-            this.content.removeChild(layer.canvas.element);
-        }
-        catch(e) {
-        }
-    },
     /**
      * add layer to stage
      * @param {Layer} layer
@@ -810,6 +795,10 @@ Kinetic.Stage.prototype = {
         this.touchPos = undefined;
         this.tapStart = false;
 
+        /*
+         * ids and names hash needs to be stored at the stage level to prevent
+         * id and name collisions between multiple stages in the document
+         */
         this.ids = {};
         this.names = {};
         this.dragAnim = new Kinetic.Animation();

tests/js/unitTests.js

@@ -1,6 +1,6 @@
 Test.prototype.tests = {
     ////////////////////////////////////////////////////////////////////////
-    //  STAGE tests
+    //  STAGE testsf
     ////////////////////////////////////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////////
 
@@ -594,29 +594,31 @@ Test.prototype.tests = {
             name: 'myRect'
         });
         
+        var circleColorKey = circle.colorKey;
+        var rectColorKey = rect.colorKey;
+        
         layer.add(circle);
         layer.add(rect);
         stage.add(layer);
 
-        var node = stage.get('#myCircle')[0];
-        var nodes = stage.get('.myRect');
-
         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');
 		
-        var node = stage.get('#myCircle')[0];
+        layer.remove(circle);
-        var parent = node.getParent();
-
-        parent.remove(node);
 
         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');
 
-        var parent = nodes[0].getParent();
+        layer.remove(rect);
-        parent.remove(nodes[0]);
 
         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');	
     },
     'STAGE - test ids and names hashes': function(containerId) {
         var stage = new Kinetic.Stage({