removed load() method from stage. Added Kinetic.Node.create() which creates a node from a json string. This essentially allows us to deserialize any node, including a stage, layers, groups, and shapes.

dist/kinetic-core.js

@@ -2278,6 +2278,52 @@ Kinetic.Node._addGetter = function(constructor, attr) {
         return this.attrs[attr];
     };
 };
+/**
+ * create node with JSON string.  De-serializtion does not generate custom
+ *  shape drawing functions, images, or event handlers (this would make the
+ * 	serialized object huge).  If your app uses custom shapes, images, and
+ *  event handlers (it probably does), then you need to select the appropriate
+ *  shapes after loading the stage and set these properties via on(), setDrawFunc(),
+ *  and setImage()
+ * @name create
+ * @methodOf Kinetic.Node
+ * @param {String} JSON string
+ */
+Kinetic.Node.create = function(json, container) {
+    return this._createNode(JSON.parse(json), container);
+};
+Kinetic.Node._createNode = function(obj, container) {
+    var type;
+
+    // determine type
+    if(obj.nodeType === 'Shape') {
+        // add custom shape
+        if(obj.shapeType === undefined) {
+            type = 'Shape';
+        }
+        // add standard shape
+        else {
+            type = obj.shapeType;
+        }
+    }
+    else {
+        type = obj.nodeType;
+    }
+    
+    // if container was passed in, add it to attrs
+    if (container) {
+    	obj.attrs.container = container;
+    }
+    
+    var no = new Kinetic[type](obj.attrs);
+    if(obj.children) {
+        for(var n = 0; n < obj.children.length; n++) {
+            no.add(this._createNode(obj.children[n]));
+        }
+    }
+
+    return no;
+};
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
@@ -2815,57 +2861,6 @@ Kinetic.Stage.prototype = {
         this._setStageDefaultProperties();
         this.setAttrs(this.defaultNodeAttrs);
     },
-    /**
-     * load stage with JSON string.  De-serializtion does not generate custom
-     *  shape drawing functions, images, or event handlers (this would make the
-     * 	serialized object huge).  If your app uses custom shapes, images, and
-     *  event handlers (it probably does), then you need to select the appropriate
-     *  shapes after loading the stage and set these properties via on(), setDrawFunc(),
-     *  and setImage()
-     * @name load
-     * @methodOf Kinetic.Stage.prototype
-     * @param {String} JSON string
-     */
-    load: function(json) {
-        this.reset();
-
-        function loadNode(node, obj) {
-            var children = obj.children;
-            if(children !== undefined) {
-                for(var n = 0; n < children.length; n++) {
-                    var child = children[n];
-                    var type;
-
-                    // determine type
-                    if(child.nodeType === 'Shape') {
-                        // add custom shape
-                        if(child.shapeType === undefined) {
-                            type = 'Shape';
-                        }
-                        // add standard shape
-                        else {
-                            type = child.shapeType;
-                        }
-                    }
-                    else {
-                        type = child.nodeType;
-                    }
-
-                    var no = new Kinetic[type](child.attrs);
-                    node.add(no);
-                    loadNode(no, child);
-                }
-            }
-        }
-
-        var obj = JSON.parse(json);
-
-        // copy over stage properties
-        this.attrs = obj.attrs;
-
-        loadNode(this, obj);
-        this.draw();
-    },
     /**
      * get mouse position for desktop apps
      * @name getMousePosition

src/Node.js

@@ -1055,6 +1055,52 @@ Kinetic.Node._addGetter = function(constructor, attr) {
         return this.attrs[attr];
     };
 };
+/**
+ * create node with JSON string.  De-serializtion does not generate custom
+ *  shape drawing functions, images, or event handlers (this would make the
+ * 	serialized object huge).  If your app uses custom shapes, images, and
+ *  event handlers (it probably does), then you need to select the appropriate
+ *  shapes after loading the stage and set these properties via on(), setDrawFunc(),
+ *  and setImage()
+ * @name create
+ * @methodOf Kinetic.Node
+ * @param {String} JSON string
+ */
+Kinetic.Node.create = function(json, container) {
+    return this._createNode(JSON.parse(json), container);
+};
+Kinetic.Node._createNode = function(obj, container) {
+    var type;
+
+    // determine type
+    if(obj.nodeType === 'Shape') {
+        // add custom shape
+        if(obj.shapeType === undefined) {
+            type = 'Shape';
+        }
+        // add standard shape
+        else {
+            type = obj.shapeType;
+        }
+    }
+    else {
+        type = obj.nodeType;
+    }
+    
+    // if container was passed in, add it to attrs
+    if (container) {
+    	obj.attrs.container = container;
+    }
+    
+    var no = new Kinetic[type](obj.attrs);
+    if(obj.children) {
+        for(var n = 0; n < obj.children.length; n++) {
+            no.add(this._createNode(obj.children[n]));
+        }
+    }
+
+    return no;
+};
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);

src/Stage.js

@@ -138,57 +138,6 @@ Kinetic.Stage.prototype = {
         this._setStageDefaultProperties();
         this.setAttrs(this.defaultNodeAttrs);
     },
-    /**
-     * load stage with JSON string.  De-serializtion does not generate custom
-     *  shape drawing functions, images, or event handlers (this would make the
-     * 	serialized object huge).  If your app uses custom shapes, images, and
-     *  event handlers (it probably does), then you need to select the appropriate
-     *  shapes after loading the stage and set these properties via on(), setDrawFunc(),
-     *  and setImage()
-     * @name load
-     * @methodOf Kinetic.Stage.prototype
-     * @param {String} JSON string
-     */
-    load: function(json) {
-        this.reset();
-
-        function loadNode(node, obj) {
-            var children = obj.children;
-            if(children !== undefined) {
-                for(var n = 0; n < children.length; n++) {
-                    var child = children[n];
-                    var type;
-
-                    // determine type
-                    if(child.nodeType === 'Shape') {
-                        // add custom shape
-                        if(child.shapeType === undefined) {
-                            type = 'Shape';
-                        }
-                        // add standard shape
-                        else {
-                            type = child.shapeType;
-                        }
-                    }
-                    else {
-                        type = child.nodeType;
-                    }
-
-                    var no = new Kinetic[type](child.attrs);
-                    node.add(no);
-                    loadNode(no, child);
-                }
-            }
-        }
-
-        var obj = JSON.parse(json);
-
-        // copy over stage properties
-        this.attrs = obj.attrs;
-
-        loadNode(this, obj);
-        this.draw();
-    },
     /**
      * get mouse position for desktop apps
      * @name getMousePosition

tests/js/unitTests.js

@@ -5884,14 +5884,8 @@ Test.prototype.tests = {
         test(circle.toJSON() === expectedJson, 'problem with serialization');
     },
     'SERIALIZATION - load stage using json': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
         var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
-        stage.load(json);
+        var stage = Kinetic.Node.create(json, containerId);
 
         test(stage.toJSON() === json, "problem loading stage with json");
     },
@@ -5949,12 +5943,6 @@ Test.prototype.tests = {
 
     },
     'SERIALIZATION - load stage with custom shape using json': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
         var drawTriangle = function(context) {
             context.beginPath();
             context.moveTo(200, 50);
@@ -5965,7 +5953,8 @@ Test.prototype.tests = {
             this.stroke(context);
         };
         var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
-        stage.load(json);
+        
+        var stage = Kinetic.Node.create(json, containerId);
 
         stage.get('#myTriangle').apply('setDrawFunc', drawTriangle);
 
@@ -6004,14 +5993,10 @@ Test.prototype.tests = {
     'SERIALIZATION - load stage with an image': function(containerId) {
         var imageObj = new Image();
         imageObj.onload = function() {
-            var stage = new Kinetic.Stage({
-                container: containerId,
-                width: 578,
-                height: 200
-            });
-
             var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"draggable":false,"id":"darth","width":438,"height":300},"nodeType":"Shape","shapeType":"Image"}]}]}';
-            stage.load(json);
+            var stage = Kinetic.Node.create(json, containerId);
+            
+            test(stage.toJSON(), json, 'problem loading stage json with image');
             stage.get('#darth').apply('setImage', imageObj);
             stage.draw();
         };