fixed up unit serialization tests. cleaned up constructor jsdoc comments. fixed Ellipse setRadius method

dist/kinetic-core.js

@@ -1246,13 +1246,6 @@ requestAnimFrame = (function(callback) {
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
@@ -1277,8 +1270,6 @@ Kinetic.Node.prototype = {
                 x: 0,
                 y: 0
             },
-            dragConstraint: 'none',
-            dragBounds: {},
             draggable: false
         };
 
@@ -2660,13 +2651,7 @@ Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Stage = function(config) {
     this._initStage(config);
@@ -3480,13 +3465,7 @@ Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Layer = function(config) {
     this._initLayer(config);
@@ -3745,13 +3724,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Group = function(config) {
     this._initGroup(config);
@@ -4531,13 +4504,7 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    }
+    },
-};
-Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
-
-// add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
-
     /**
      * set radius
      * @name setRadius
@@ -4550,6 +4517,15 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
      *  defines the horizontal radius and the y component
      *  defines the vertical radius
      */
+    setRadius: function() {
+        var pos = Kinetic.Type._getXY([].slice.call(arguments));
+        this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
+    }
+};
+Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGetters(Kinetic.Ellipse, ['radius']);
 
 /**
  * get radius

src/Group.js

@@ -22,13 +22,7 @@
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Group = function(config) {
     this._initGroup(config);

src/Layer.js

@@ -25,13 +25,7 @@
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Layer = function(config) {
     this._initLayer(config);

src/Node.js

@@ -23,13 +23,6 @@
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
@@ -54,8 +47,6 @@ Kinetic.Node.prototype = {
                 x: 0,
                 y: 0
             },
-            dragConstraint: 'none',
-            dragBounds: {},
             draggable: false
         };
 

src/Stage.js

@@ -25,13 +25,7 @@
  * @param {Number} [config.offset.x]
  * @param {Number} [config.offset.y]
  * @param {Boolean} [config.draggable]
- * @param {String} [config.dragConstraint] can be vertical, horizontal, or none.  The default
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
- *  is none
- * @param {Object} [config.dragBounds]
- * @param {Number} [config.dragBounds.top]
- * @param {Number} [config.dragBounds.right]
- * @param {Number} [config.dragBounds.bottom]
- * @param {Number} [config.dragBounds.left]
  */
 Kinetic.Stage = function(config) {
     this._initStage(config);

src/shapes/Ellipse.js

@@ -38,13 +38,7 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    }
+    },
-};
-Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
-
-// add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
-
     /**
      * set radius
      * @name setRadius
@@ -57,6 +51,15 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
      *  defines the horizontal radius and the y component
      *  defines the vertical radius
      */
+    setRadius: function() {
+        var pos = Kinetic.Type._getXY([].slice.call(arguments));
+        this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
+    }
+};
+Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGetters(Kinetic.Ellipse, ['radius']);
 
 /**
  * get radius

tests/js/Test.js

@@ -7,20 +7,25 @@ function startTimer() {
   before = date.getTime();
 
 }
+
 function endTimer(str) {
   var date = new Date();
   after = date.getTime();
   var diff = after - before;
   console.log(str + ': ' + diff + 'ms');
 }
+
 function warn(condition, message) {
   test(condition, message, true);
 }
+
 function test(condition, message, warn) {
   if(!condition) {
     if(warn) {
+      if(testCounter.style.backgroundColor != 'red') {
         testCounter.style.backgroundColor = 'orange';
         testCounter.style.color = 'black';
+      }
       console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
     }
     else {
@@ -34,9 +39,11 @@ function test(condition, message, warn) {
 
   testCounter.innerHTML = numTests;
 }
+
 function log(message) {
   console.log("LOG: " + message);
 }
+
 /**
  * Test constructor
  */
@@ -46,6 +53,7 @@ function Test() {
   testCounter.id = 'testCounter';
   document.getElementsByTagName('body')[0].appendChild(testCounter);
 }
+
 /**
  * Test methods
  */

tests/js/unitTests.js

@@ -181,35 +181,6 @@ Test.prototype.tests = {
         group.add(circle);
         layer.draw();
     },
-    'STAGE - serialize stage': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-        var circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4,
-            name: 'myCircle',
-            draggable: true
-        });
-
-        stage.add(layer);
-        layer.add(group);
-        group.add(circle);
-        layer.draw();
-
-        var expectedJson = '{"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
-
-        //console.log(stage.toJSON())
-        //test(stage.toJSON() === expectedJson, 'problem with serialization');
-    },
     'STAGE - reset stage': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -285,98 +256,6 @@ Test.prototype.tests = {
 
         test(stage.getDOM().className === 'kineticjs-content', 'stage DOM class name is wrong');
     },
-    'STAGE - 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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
-        //stage.load(json);
-
-        //test(stage.toJSON() === json, "problem loading stage with json");
-    },
-    'STAGE - serialize stage with custom shape': function(containerId) {
-        var urls = dataUrls['STAGE - serialize stage with custom shape'];
-
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-
-        var drawTriangle = function(context) {
-            context.beginPath();
-            context.moveTo(200, 50);
-            context.lineTo(420, 80);
-            context.quadraticCurveTo(300, 100, 260, 170);
-            context.closePath();
-            this.fill(context);
-            this.stroke(context);
-        };
-        var triangle = new Kinetic.Shape({
-            drawFunc: drawTriangle,
-            fill: "#00D2FF",
-            stroke: "black",
-            strokeWidth: 4,
-            id: 'myTriangle'
-        });
-
-        group.add(triangle);
-        layer.add(group);
-        stage.add(layer);
-
-        var startDataUrl = layer.toDataURL();
-
-        //warn(startDataUrl === urls[0], 'start data url is incorrect');
-        test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
-
-        //console.log(stage.toJSON())
-        var expectedJson = '{"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
-
-        //console.log(stage.toJSON())
-        //test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
-
-        /*
-         * test redrawing layer after serialization
-         * drawing should be the same
-         */
-        layer.draw();
-
-        var endDataUrl = layer.toDataURL();
-        //warn(endDataUrl === urls[0], 'end data url is incorrect');
-
-    },
-    'STAGE - 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);
-            context.lineTo(420, 80);
-            context.quadraticCurveTo(300, 100, 260, 170);
-            context.closePath();
-            this.fill(context);
-            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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
-        //stage.load(json);
-
-        //var customShape = stage.get('#myTriangle')[0];
-
-        //customShape.setDrawFunc(drawTriangle);
-
-        //stage.draw();
-        //console.log(stage.toJSON());
-        //test(stage.toJSON() === json, "problem loading stage with custom shape json");
-    },
     'EVENTS - test getIntersections': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -974,51 +853,6 @@ Test.prototype.tests = {
         stage.draw();
 
     },
-    'STAGE - serialize 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 layer = new Kinetic.Layer();
-            darth = new Kinetic.Image({
-                x: 200,
-                y: 60,
-                image: imageObj,
-                offset: {
-                    x: 50,
-                    y: imageObj.height / 2
-                },
-                id: 'darth'
-            });
-
-            layer.add(darth);
-            stage.add(layer);
-            var expectedJson = '{"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"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},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
-            //console.log(stage.toJSON())
-            //test(stage.toJSON() === expectedJson, 'problem with serializing stage with image');
-        };
-        imageObj.src = '../assets/darth-vader.jpg';
-    },
-    'STAGE - 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,"listen":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listen":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
-            //stage.load(json);
-            //var image = stage.get('#darth')[0];
-            //image.setImage(imageObj);
-            //stage.draw();
-        };
-        imageObj.src = '../assets/darth-vader.jpg';
-    },
     ////////////////////////////////////////////////////////////////////////
     //  LAYERS tests
     ////////////////////////////////////////////////////////////////////////
@@ -1032,7 +866,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         stage.add(layer);
     },
-    'LAYER - hide layer': function(containerId) {
+    'LAYER - hide show layer': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1562,7 +1396,7 @@ Test.prototype.tests = {
         * methods, such as self, are not serialized, and will therefore avoid
         * circular json errors.
         */
-        //var json = stage.toJSON();
+        var json = stage.toJSON();
     },
     'SHAPE - set fill after instantiation': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -5962,5 +5796,171 @@ Test.prototype.tests = {
                 imageObj.src = url;
             }
         })
+    },
+    /*
+     * Serialization tests
+     */
+    'SERIALIZATION - serialize stage': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        stage.add(layer);
+        layer.add(group);
+        group.add(circle);
+        layer.draw();
+
+        var expectedJson = '{"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"}]}]}]}';
+
+        //console.log(stage.toJSON())
+        test(stage.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);
+
+        test(stage.toJSON() === json, "problem loading stage with json");
+    },
+    'SERIALIZATION - serialize stage with custom shape': function(containerId) {
+        var urls = dataUrls['STAGE - serialize stage with custom shape'];
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+
+        var drawTriangle = function(context) {
+            context.beginPath();
+            context.moveTo(200, 50);
+            context.lineTo(420, 80);
+            context.quadraticCurveTo(300, 100, 260, 170);
+            context.closePath();
+            this.fill(context);
+            this.stroke(context);
+        };
+        var triangle = new Kinetic.Shape({
+            drawFunc: drawTriangle,
+            fill: "#00D2FF",
+            stroke: "black",
+            strokeWidth: 4,
+            id: 'myTriangle'
+        });
+
+        group.add(triangle);
+        layer.add(group);
+        stage.add(layer);
+
+        var startDataUrl = layer.toDataURL();
+
+        //warn(startDataUrl === urls[0], 'start data url is incorrect');
+        test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
+
+        //console.log(stage.toJSON());
+        var expectedJson = '{"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"}]}]}]}';
+
+        //console.log(stage.toJSON())
+        test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
+
+        /*
+         * test redrawing layer after serialization
+         * drawing should be the same
+         */
+        layer.draw();
+
+        var endDataUrl = layer.toDataURL();
+        //warn(endDataUrl === urls[0], 'end data url is incorrect');
+
+    },
+    '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);
+            context.lineTo(420, 80);
+            context.quadraticCurveTo(300, 100, 260, 170);
+            context.closePath();
+            this.fill(context);
+            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);
+
+        stage.get('#myTriangle').apply('setDrawFunc', drawTriangle);
+
+        stage.draw();
+        //console.log(stage.toJSON());
+        test(stage.toJSON() === json, "problem loading stage with custom shape json");
+    },
+    'SERIALIZATION - serialize 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 layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 200,
+                y: 60,
+                image: imageObj,
+                offset: {
+                    x: 50,
+                    y: imageObj.height / 2
+                },
+                id: 'darth'
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            var expectedJson = '{"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"}]}]}';
+            //console.log(stage.toJSON())
+            test(stage.toJSON() === expectedJson, 'problem with serializing stage with image');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    '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);
+            stage.get('#darth').apply('setImage', imageObj);
+            stage.draw();
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
     }
 };