the stage ids and names hashes are now updated correctly whenever a node's id or name changes

dist/kinetic-core.js

@@ -486,6 +486,21 @@ Kinetic.Node = Kinetic.Class.extend({
                 }
             }
         });
+        var that = this;
+        this.on('idChange.kinetic', function(evt) {
+            var stage = that.getStage();
+            if(stage) {
+                stage._removeId(evt.oldVal);
+                stage._addId(that);
+            }
+        });
+        this.on('nameChange.kinetic', function(evt) {
+            var stage = that.getStage();
+            if(stage) {
+                stage._removeName(evt.oldVal, that._id);
+                stage._addName(that);
+            }
+        });
         /*
          * simulate draggable change event
          * to init drag and drop logic from the
@@ -1332,7 +1347,6 @@ Kinetic.Node._addSetter = function(constructor, attr) {
     var that = this;
     var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
     constructor.prototype[method] = function() {
-        var arg;
         if(arguments.length == 1) {
             arg = arguments[0];
         }
@@ -1605,8 +1619,8 @@ Kinetic.Container = Kinetic.Node.extend({
         if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
-                stage._removeId(child);
+                stage._removeId(child.getId());
-                stage._removeName(child);
+                stage._removeName(child.getName(), child._id);
             }
 
             var go = Kinetic.Global;
@@ -2692,9 +2706,9 @@ Kinetic.Stage = Kinetic.Container.extend({
             this.ids[node.attrs.id] = node;
         }
     },
-    _removeId: function(node) {
+    _removeId: function(id) {
-        if(node.attrs.id !== undefined) {
+        if(id !== undefined) {
-            delete this.ids[node.attrs.id];
+            delete this.ids[id];
         }
     },
     _addName: function(node) {
@@ -2706,18 +2720,18 @@ Kinetic.Stage = Kinetic.Container.extend({
             this.names[name].push(node);
         }
     },
-    _removeName: function(node) {
+    _removeName: function(name, _id) {
-        if(node.attrs.name !== undefined) {
+        if(name !== undefined) {
-            var nodes = this.names[node.attrs.name];
+            var nodes = this.names[name];
             if(nodes !== undefined) {
                 for(var n = 0; n < nodes.length; n++) {
                     var no = nodes[n];
-                    if(no._id === node._id) {
+                    if(no._id === _id) {
                         nodes.splice(n, 1);
                     }
                 }
                 if(nodes.length === 0) {
-                    delete this.names[node.attrs.name];
+                    delete this.names[name];
                 }
             }
         }

src/Container.js

@@ -78,8 +78,8 @@ Kinetic.Container = Kinetic.Node.extend({
         if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
-                stage._removeId(child);
+                stage._removeId(child.getId());
-                stage._removeName(child);
+                stage._removeName(child.getName(), child._id);
             }
 
             var go = Kinetic.Global;

src/Node.js

@@ -56,6 +56,21 @@ Kinetic.Node = Kinetic.Class.extend({
                 }
             }
         });
+        var that = this;
+        this.on('idChange.kinetic', function(evt) {
+            var stage = that.getStage();
+            if(stage) {
+                stage._removeId(evt.oldVal);
+                stage._addId(that);
+            }
+        });
+        this.on('nameChange.kinetic', function(evt) {
+            var stage = that.getStage();
+            if(stage) {
+                stage._removeName(evt.oldVal, that._id);
+                stage._addName(that);
+            }
+        });
         /*
          * simulate draggable change event
          * to init drag and drop logic from the
@@ -902,7 +917,6 @@ Kinetic.Node._addSetter = function(constructor, attr) {
     var that = this;
     var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
     constructor.prototype[method] = function() {
-        var arg;
         if(arguments.length == 1) {
             arg = arguments[0];
         }

src/Stage.js

@@ -908,9 +908,9 @@ Kinetic.Stage = Kinetic.Container.extend({
             this.ids[node.attrs.id] = node;
         }
     },
-    _removeId: function(node) {
+    _removeId: function(id) {
-        if(node.attrs.id !== undefined) {
+        if(id !== undefined) {
-            delete this.ids[node.attrs.id];
+            delete this.ids[id];
         }
     },
     _addName: function(node) {
@@ -922,18 +922,18 @@ Kinetic.Stage = Kinetic.Container.extend({
             this.names[name].push(node);
         }
     },
-    _removeName: function(node) {
+    _removeName: function(name, _id) {
-        if(node.attrs.name !== undefined) {
+        if(name !== undefined) {
-            var nodes = this.names[node.attrs.name];
+            var nodes = this.names[name];
             if(nodes !== undefined) {
                 for(var n = 0; n < nodes.length; n++) {
                     var no = nodes[n];
-                    if(no._id === node._id) {
+                    if(no._id === _id) {
                         nodes.splice(n, 1);
                     }
                 }
                 if(nodes.length === 0) {
-                    delete this.names[node.attrs.name];
+                    delete this.names[name];
                 }
             }
         }

tests/js/unitTests.js

@@ -650,7 +650,49 @@ Test.prototype.tests = {
 
         test(stage.ids.myCircle === undefined, 'circle still in hash');
         test(stage.names.myRect === undefined, 'rect still in hash');
+    },
+    'STAGE - test ids and names hashes': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Ellipse({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            id: 'myCircle'
+        });
 
+        var rect = new Kinetic.Rect({
+            x: 300,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'purple',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myRect'
+        });
+
+        layer.add(circle);
+        layer.add(rect);
+        stage.add(layer);
+
+        test(stage.ids['myCircle'].getId() === 'myCircle', 'circle id not in ids hash');
+        test(stage.names['myRect'][0].getName() === 'myRect', 'rect name not in names hash');
+
+        circle.setId('newCircleId');
+        test(stage.ids['newCircleId'].getId() === 'newCircleId', 'circle not in ids hash');
+        test(stage.ids['myCircle'] === undefined, 'old circle id key is still in ids hash');
+
+        rect.setName('newRectName');
+        test(stage.names['newRectName'][0].getName() === 'newRectName', 'new rect name not in names hash');
+        test(stage.names['myRect'] === undefined, 'old rect name is still in names hash');
     },
     'STAGE - set shape and layer alpha to 0.5': function(containerId) {
         var stage = new Kinetic.Stage({