fixed bug related to multiple removals of same node

dist/kinetic-core.js

@@ -960,12 +960,15 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     _remove: function(child) {
-        if(child.name !== undefined) {
+        if(this.children[child.index].id == child.id) {
-            this.childrenNames[child.name] = undefined;
+            if(child.name !== undefined) {
+                this.childrenNames[child.name] = undefined;
+            }
+
+            this.children.splice(child.index, 1);
+            this._setChildrenIndices();
+            child = undefined;
         }
-        this.children.splice(child.index, 1);
-        this._setChildrenIndices();
-        child = undefined;
     },
     /**
      * draw children
@@ -1193,8 +1196,7 @@ Kinetic.Stage.prototype = {
                         // then revert to previous no-parameter image/png behavior
                         callback(bufferLayer.getCanvas().toDataURL(mimeType, quality));
                     }
-                    catch(exception)
+                    catch(exception) {
-                    {
                         callback(bufferLayer.getCanvas().toDataURL());
                     }
                 }
@@ -1210,8 +1212,15 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     remove: function(layer) {
-        // remove layer canvas from dom
+        /*
-        this.content.removeChild(layer.canvas);
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.content.removeChild(layer.canvas);
+        }
+        catch(e) {
+        }
         this._remove(layer);
     },
     /**

src/Container.js

@@ -40,12 +40,15 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     _remove: function(child) {
-        if(child.name !== undefined) {
+        if(this.children[child.index].id == child.id) {
-            this.childrenNames[child.name] = undefined;
+            if(child.name !== undefined) {
+                this.childrenNames[child.name] = undefined;
+            }
+
+            this.children.splice(child.index, 1);
+            this._setChildrenIndices();
+            child = undefined;
         }
-        this.children.splice(child.index, 1);
-        this._setChildrenIndices();
-        child = undefined;
     },
     /**
      * draw children

src/Stage.js

@@ -166,8 +166,7 @@ Kinetic.Stage.prototype = {
                         // then revert to previous no-parameter image/png behavior
                         callback(bufferLayer.getCanvas().toDataURL(mimeType, quality));
                     }
-                    catch(exception)
+                    catch(exception) {
-                    {
                         callback(bufferLayer.getCanvas().toDataURL());
                     }
                 }
@@ -183,8 +182,15 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     remove: function(layer) {
-        // remove layer canvas from dom
+        /*
-        this.content.removeChild(layer.canvas);
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.content.removeChild(layer.canvas);
+        }
+        catch(e) {
+        }
         this._remove(layer);
     },
     /**

tests/js/unitTests.js

@@ -184,6 +184,83 @@ Test.prototype.tests = {
         stage.add(layer);
         stage.remove(layer);
     },
+    'STAGE - remove shape multiple times': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var shape1 = new Kinetic.Circle({
+            x: 150,
+            y: 100,
+            radius: 50,
+            fill: 'green',
+            name: 'myCircle'
+        });
+
+        var shape2 = new Kinetic.Circle({
+            x: 250,
+            y: 100,
+            radius: 50,
+            fill: 'green',
+            name: 'myCircle'
+        });
+
+        layer.add(shape1);
+        layer.add(shape2);
+        stage.add(layer);
+
+        test(layer.getChildren().length === 2, 'layer should have two children');
+
+        layer.remove(shape1);
+        layer.remove(shape1);
+
+        test(layer.getChildren().length === 1, 'layer should have two children');
+
+        layer.draw();
+
+    },
+    'STAGE - remove layer multiple times': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer1 = new Kinetic.Layer();
+        var layer2 = new Kinetic.Layer();
+
+        var shape1 = new Kinetic.Circle({
+            x: 150,
+            y: 100,
+            radius: 50,
+            fill: 'green',
+            name: 'myCircle'
+        });
+
+        var shape2 = new Kinetic.Circle({
+            x: 250,
+            y: 100,
+            radius: 50,
+            fill: 'green',
+            name: 'myCircle'
+        });
+
+        layer1.add(shape1);
+        layer2.add(shape2);
+        stage.add(layer1);
+        stage.add(layer2);
+
+        test(stage.getChildren().length === 2, 'stage should have two children');
+
+        stage.remove(layer1);
+        stage.remove(layer1);
+
+        test(stage.getChildren().length === 1, 'stage should have one child');
+
+        stage.draw();
+
+    },
     ////////////////////////////////////////////////////////////////////////
     //  LAYERS tests
     ////////////////////////////////////////////////////////////////////////