refactored get() and add() node methods. much cleaner now.

dist/kinetic-core.js

@@ -1250,11 +1250,47 @@ Kinetic.Container.prototype = {
             this.remove(this.children[0]);
         }
     },
+    /**
+     * add node to container
+     * @param {Node} child
+     */
+    add: function(child) {
+        child._id = Kinetic.GlobalObject.idCounter++;
+        child.index = this.children.length;
+        child.parent = this;
+
+        this.children.push(child);
+
+        var stage = child.getStage();
+        if(stage === undefined) {
+            var go = Kinetic.GlobalObject;
+            go.tempNodes.push(child);
+        }
+        else {
+            stage._addId(child);
+            stage._addName(child);
+
+            /*
+             * pull in other nodes that are now linked
+             * to a stage
+             */
+            var go = Kinetic.GlobalObject;
+            go._pullNodes(stage);
+        }
+
+        // do extra stuff if needed
+        if(this._add !== undefined) {
+            this._add(child);
+        }
+
+        // chainable
+        return this;
+    },
     /**
      * remove child from container
      * @param {Node} child
-     */ 
+     */
-    _remove: function(child) {
+    remove: function(child) {
         if(child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
@@ -1275,6 +1311,14 @@ Kinetic.Container.prototype = {
             this._setChildrenIndices();
             child = undefined;
         }
+
+        // do extra stuff if needed
+        if(this._remove !== undefined) {
+            this._remove(child);
+        }
+
+        // chainable
+        return this;
     },
     /**
      * return an array of nodes that match the selector.  Use '#' for id selections
@@ -1368,34 +1412,6 @@ Kinetic.Container.prototype = {
             }
         }
     },
-    /**
-     * add node to container
-     * @param {Node} child
-     */
-    _add: function(child) {
-        child._id = Kinetic.GlobalObject.idCounter++;
-        child.index = this.children.length;
-        child.parent = this;
-
-        this.children.push(child);
-
-        var stage = child.getStage();
-        if(stage === undefined) {
-            var go = Kinetic.GlobalObject;
-            go.tempNodes.push(child);
-        }
-        else {
-            stage._addId(child);
-            stage._addName(child);
-
-            /*
-             * pull in other nodes that are now linked
-             * to a stage
-             */
-            var go = Kinetic.GlobalObject;
-            go._pullNodes(stage);
-        }
-    },
     /**
      * set children indices
      */
@@ -1719,46 +1735,6 @@ Kinetic.Stage.prototype = {
         loadNode(this, obj);
         this.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);
-        }
-        catch(e) {
-        }
-        this._remove(layer);
-        
-        return this;
-    },
-    /**
-     * add layer to stage
-     * @param {Layer} layer
-     */
-    add: function(layer) {
-        layer.canvas.width = this.attrs.width;
-        layer.canvas.height = this.attrs.height;
-        this._add(layer);
-
-        // draw layer and append canvas to container
-        layer.draw();
-        this.content.appendChild(layer.canvas);
-        
-        /*
-         * set layer last draw time to zero
-         * so that throttling doesn't take into account
-         * the layer draws associated with adding a node
-         */
-        layer.lastDrawTime = 0;
-        
-        return this;
-    },
     /**
      * get mouse position for desktop apps
      * @param {Event} evt
@@ -1835,6 +1811,40 @@ Kinetic.Stage.prototype = {
     getDOM: function() {
         return this.content;
     },
+    /**
+     * 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);
+        }
+        catch(e) {
+        }
+    },
+    /**
+     * add layer to stage
+     * @param {Layer} layer
+     */
+    _add: function(layer) {
+        layer.canvas.width = this.attrs.width;
+        layer.canvas.height = this.attrs.height;
+
+        // draw layer and append canvas to container
+        layer.draw();
+        this.content.appendChild(layer.canvas);
+        
+        /*
+         * set layer last draw time to zero
+         * so that throttling doesn't take into account
+         * the layer draws associated with adding a node
+         */
+        layer.lastDrawTime = 0;
+    },
     /**
      * detect event
      * @param {Shape} shape
@@ -2482,23 +2492,6 @@ Kinetic.Layer.prototype = {
     getContext: function() {
         return this.context;
     },
-    /**
-     * add a node to the layer.  New nodes are always
-     * placed at the top.
-     * @param {Node} node
-     */
-    add: function(child) {
-        this._add(child);
-        return this;
-    },
-    /**
-     * remove a child from the layer
-     * @param {Node} child
-     */
-    remove: function(child) {
-        this._remove(child);
-        return this;
-    },
     /**
      * private draw children
      */
@@ -2555,22 +2548,6 @@ Kinetic.Group = function(config) {
  * Group methods
  */
 Kinetic.Group.prototype = {
-    /**
-     * add node to group
-     * @param {Node} child
-     */
-    add: function(child) {
-        this._add(child);
-        return this;
-    },
-    /**
-     * remove a child node from the group
-     * @param {Node} child
-     */
-    remove: function(child) {
-        this._remove(child);
-        return this;
-    },
     /**
      * draw children
      */

src/Container.js

@@ -27,11 +27,47 @@ Kinetic.Container.prototype = {
             this.remove(this.children[0]);
         }
     },
+    /**
+     * add node to container
+     * @param {Node} child
+     */
+    add: function(child) {
+        child._id = Kinetic.GlobalObject.idCounter++;
+        child.index = this.children.length;
+        child.parent = this;
+
+        this.children.push(child);
+
+        var stage = child.getStage();
+        if(stage === undefined) {
+            var go = Kinetic.GlobalObject;
+            go.tempNodes.push(child);
+        }
+        else {
+            stage._addId(child);
+            stage._addName(child);
+
+            /*
+             * pull in other nodes that are now linked
+             * to a stage
+             */
+            var go = Kinetic.GlobalObject;
+            go._pullNodes(stage);
+        }
+
+        // do extra stuff if needed
+        if(this._add !== undefined) {
+            this._add(child);
+        }
+
+        // chainable
+        return this;
+    },
     /**
      * remove child from container
      * @param {Node} child
-     */ 
+     */
-    _remove: function(child) {
+    remove: function(child) {
         if(child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
@@ -52,6 +88,14 @@ Kinetic.Container.prototype = {
             this._setChildrenIndices();
             child = undefined;
         }
+
+        // do extra stuff if needed
+        if(this._remove !== undefined) {
+            this._remove(child);
+        }
+
+        // chainable
+        return this;
     },
     /**
      * return an array of nodes that match the selector.  Use '#' for id selections
@@ -145,34 +189,6 @@ Kinetic.Container.prototype = {
             }
         }
     },
-    /**
-     * add node to container
-     * @param {Node} child
-     */
-    _add: function(child) {
-        child._id = Kinetic.GlobalObject.idCounter++;
-        child.index = this.children.length;
-        child.parent = this;
-
-        this.children.push(child);
-
-        var stage = child.getStage();
-        if(stage === undefined) {
-            var go = Kinetic.GlobalObject;
-            go.tempNodes.push(child);
-        }
-        else {
-            stage._addId(child);
-            stage._addName(child);
-
-            /*
-             * pull in other nodes that are now linked
-             * to a stage
-             */
-            var go = Kinetic.GlobalObject;
-            go._pullNodes(stage);
-        }
-    },
     /**
      * set children indices
      */

src/Group.js

@@ -20,22 +20,6 @@ Kinetic.Group = function(config) {
  * Group methods
  */
 Kinetic.Group.prototype = {
-    /**
-     * add node to group
-     * @param {Node} child
-     */
-    add: function(child) {
-        this._add(child);
-        return this;
-    },
-    /**
-     * remove a child node from the group
-     * @param {Node} child
-     */
-    remove: function(child) {
-        this._remove(child);
-        return this;
-    },
     /**
      * draw children
      */

src/Layer.js

@@ -112,23 +112,6 @@ Kinetic.Layer.prototype = {
     getContext: function() {
         return this.context;
     },
-    /**
-     * add a node to the layer.  New nodes are always
-     * placed at the top.
-     * @param {Node} node
-     */
-    add: function(child) {
-        this._add(child);
-        return this;
-    },
-    /**
-     * remove a child from the layer
-     * @param {Node} child
-     */
-    remove: function(child) {
-        this._remove(child);
-        return this;
-    },
     /**
      * private draw children
      */

src/Stage.js

@@ -292,46 +292,6 @@ Kinetic.Stage.prototype = {
         loadNode(this, obj);
         this.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);
-        }
-        catch(e) {
-        }
-        this._remove(layer);
-        
-        return this;
-    },
-    /**
-     * add layer to stage
-     * @param {Layer} layer
-     */
-    add: function(layer) {
-        layer.canvas.width = this.attrs.width;
-        layer.canvas.height = this.attrs.height;
-        this._add(layer);
-
-        // draw layer and append canvas to container
-        layer.draw();
-        this.content.appendChild(layer.canvas);
-        
-        /*
-         * set layer last draw time to zero
-         * so that throttling doesn't take into account
-         * the layer draws associated with adding a node
-         */
-        layer.lastDrawTime = 0;
-        
-        return this;
-    },
     /**
      * get mouse position for desktop apps
      * @param {Event} evt
@@ -408,6 +368,40 @@ Kinetic.Stage.prototype = {
     getDOM: function() {
         return this.content;
     },
+    /**
+     * 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);
+        }
+        catch(e) {
+        }
+    },
+    /**
+     * add layer to stage
+     * @param {Layer} layer
+     */
+    _add: function(layer) {
+        layer.canvas.width = this.attrs.width;
+        layer.canvas.height = this.attrs.height;
+
+        // draw layer and append canvas to container
+        layer.draw();
+        this.content.appendChild(layer.canvas);
+        
+        /*
+         * set layer last draw time to zero
+         * so that throttling doesn't take into account
+         * the layer draws associated with adding a node
+         */
+        layer.lastDrawTime = 0;
+    },
     /**
      * detect event
      * @param {Shape} shape