fixed drawing bug related to new throttle feature

dist/kinetic-core.js

@@ -1041,7 +1041,7 @@ Kinetic.Container.prototype = {
     /**
      * remove child from container
      * @param {Node} child
-     */
+     */ 
     _remove: function(child) {
         if(child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
@@ -1233,8 +1233,6 @@ Kinetic.Stage = function(config) {
     });
 
     this.nodeType = 'Stage';
-    this.ids = {};
-    this.names = {};
 
     /*
      * if container is a string, assume it's an id for
@@ -1251,21 +1249,8 @@ Kinetic.Stage = function(config) {
     this.container = config.container;
     this.content = document.createElement('div');
     this.dblClickWindow = 400;
-    this.clickStart = false;
-    this.targetShape = undefined;
-    this.targetFound = false;
-    this.mouseoverShape = undefined;
-    this.mouseoutShape = undefined;
 
-    // desktop flags
+    this._setDefaults();
-    this.mousePos = undefined;
-    this.mouseDown = false;
-    this.mouseUp = false;
-
-    // mobile flags
-    this.touchPos = undefined;
-    this.touchStart = false;
-    this.touchEnd = false;
 
     // set stage id
     this._id = Kinetic.GlobalObject.idCounter++;
@@ -1274,8 +1259,6 @@ Kinetic.Stage = function(config) {
     this._listen();
     this._prepareDrag();
 
-    this.anim = undefined;
-
     var go = Kinetic.GlobalObject;
     go.stages.push(this);
     this._addId(this);
@@ -1431,6 +1414,38 @@ Kinetic.Stage.prototype = {
         }
         return JSON.stringify(addNode(this));
     },
+    /**
+     * reset stage to default state
+     */
+    reset: function() {
+        // remove children
+        this.removeChildren();
+
+        // reset stage defaults
+        this._setDefaults();
+
+        // reset node attrs
+        this.setDefaultAttrs({
+            visible: true,
+            listening: true,
+            name: undefined,
+            alpha: 1,
+            x: 0,
+            y: 0,
+            scale: {
+                x: 1,
+                y: 1
+            },
+            rotation: 0,
+            centerOffset: {
+                x: 0,
+                y: 0
+            },
+            dragConstraint: 'none',
+            dragBounds: {},
+            draggable: false
+        });
+    },
     /**
      * load stage with JSON string.  De-serializtion does not generate custom
      *  shape drawing functions, images, or event handlers (this would make the
@@ -2084,6 +2099,30 @@ Kinetic.Stage.prototype = {
             var baseEvent = types[n];
             this.content.addEventListener(baseEvent, handler, false);
         }
+    },
+    /**
+     * set defaults
+     */
+    _setDefaults: function() {
+        this.clickStart = false;
+        this.targetShape = undefined;
+        this.targetFound = false;
+        this.mouseoverShape = undefined;
+        this.mouseoutShape = undefined;
+
+        // desktop flags
+        this.mousePos = undefined;
+        this.mouseDown = false;
+        this.mouseUp = false;
+
+        // mobile flags
+        this.touchPos = undefined;
+        this.touchStart = false;
+        this.touchEnd = false;
+
+        this.ids = {};
+        this.names = {};
+        this.anim = undefined;
     }
 };
 // Extend Container and Node
@@ -2135,6 +2174,17 @@ Kinetic.Layer.prototype = {
             this._draw();
             this.lastDrawTime = time;
         }
+        /*
+         * if we cannot draw the layer due to throttling,
+         * try to redraw the layer in the near future
+         */
+        else if(this.drawTimeout === undefined) {
+            var that = this;
+            this.drawTimeout = setTimeout(function() {
+                that.draw();
+                clearTimeout(that.drawTimeout);
+            }, 5);
+        }
     },
     /**
      * set throttle

src/Layer.js

@@ -43,6 +43,17 @@ Kinetic.Layer.prototype = {
             this._draw();
             this.lastDrawTime = time;
         }
+        /*
+         * if we cannot draw the layer due to throttling,
+         * try to redraw the layer in the near future
+         */
+        else if(this.drawTimeout === undefined) {
+            var that = this;
+            this.drawTimeout = setTimeout(function() {
+                that.draw();
+                clearTimeout(that.drawTimeout);
+            }, 5);
+        }
     },
     /**
      * set throttle

src/Stage.js

@@ -18,8 +18,6 @@ Kinetic.Stage = function(config) {
     });
 
     this.nodeType = 'Stage';
-    this.ids = {};
-    this.names = {};
 
     /*
      * if container is a string, assume it's an id for
@@ -36,21 +34,8 @@ Kinetic.Stage = function(config) {
     this.container = config.container;
     this.content = document.createElement('div');
     this.dblClickWindow = 400;
-    this.clickStart = false;
-    this.targetShape = undefined;
-    this.targetFound = false;
-    this.mouseoverShape = undefined;
-    this.mouseoutShape = undefined;
 
-    // desktop flags
+    this._setDefaults();
-    this.mousePos = undefined;
-    this.mouseDown = false;
-    this.mouseUp = false;
-
-    // mobile flags
-    this.touchPos = undefined;
-    this.touchStart = false;
-    this.touchEnd = false;
 
     // set stage id
     this._id = Kinetic.GlobalObject.idCounter++;
@@ -59,8 +44,6 @@ Kinetic.Stage = function(config) {
     this._listen();
     this._prepareDrag();
 
-    this.anim = undefined;
-
     var go = Kinetic.GlobalObject;
     go.stages.push(this);
     this._addId(this);
@@ -216,6 +199,38 @@ Kinetic.Stage.prototype = {
         }
         return JSON.stringify(addNode(this));
     },
+    /**
+     * reset stage to default state
+     */
+    reset: function() {
+        // remove children
+        this.removeChildren();
+
+        // reset stage defaults
+        this._setDefaults();
+
+        // reset node attrs
+        this.setDefaultAttrs({
+            visible: true,
+            listening: true,
+            name: undefined,
+            alpha: 1,
+            x: 0,
+            y: 0,
+            scale: {
+                x: 1,
+                y: 1
+            },
+            rotation: 0,
+            centerOffset: {
+                x: 0,
+                y: 0
+            },
+            dragConstraint: 'none',
+            dragBounds: {},
+            draggable: false
+        });
+    },
     /**
      * load stage with JSON string.  De-serializtion does not generate custom
      *  shape drawing functions, images, or event handlers (this would make the
@@ -869,6 +884,30 @@ Kinetic.Stage.prototype = {
             var baseEvent = types[n];
             this.content.addEventListener(baseEvent, handler, false);
         }
+    },
+    /**
+     * set defaults
+     */
+    _setDefaults: function() {
+        this.clickStart = false;
+        this.targetShape = undefined;
+        this.targetFound = false;
+        this.mouseoverShape = undefined;
+        this.mouseoutShape = undefined;
+
+        // desktop flags
+        this.mousePos = undefined;
+        this.mouseDown = false;
+        this.mouseUp = false;
+
+        // mobile flags
+        this.touchPos = undefined;
+        this.touchStart = false;
+        this.touchEnd = false;
+
+        this.ids = {};
+        this.names = {};
+        this.anim = undefined;
     }
 };
 // Extend Container and Node

tests/js/unitTests.js

@@ -91,6 +91,33 @@ Test.prototype.tests = {
         var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":12,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
         test(stage.toJSON() === expectedJson, 'problem with serialization');
     },
+    'STAGE - reset 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,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":12,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
+        test(stage.toJSON() === expectedJson, 'problem with serialization');
+    },
     'STAGE - test getAttrs()': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,