tweaked throttling algo and added unit tests

dist/kinetic-core.js

@@ -870,12 +870,17 @@ Kinetic.Node.prototype = {
         go._addAnimation(anim);
 
         // subscribe to onFinished for first tween
-        trans.tweens[0].onFinished = function() {
+        trans.onFinished = function() {
+            // remove animation
             go._removeAnimation(anim);
-            this.transAnim = undefined;
+            that.transAnim = undefined;
+
+            // callback
             if(config.callback !== undefined) {
                 config.callback();
             }
+
+            anim.node.draw();
         };
         // auto start
         trans.start();
@@ -2205,6 +2210,7 @@ Kinetic.Layer.prototype = {
             this.lastDrawTime = time;
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
+                this.drawTimeout = undefined;
             }
         }
         /*
@@ -2213,10 +2219,15 @@ Kinetic.Layer.prototype = {
          */
         else if(this.drawTimeout === undefined) {
             var that = this;
+            /*
+             * if timeout duration is too short, we will
+             * get a lot of unecessary layer draws.  Make sure
+             * that the timeout is slightly more than the throttle
+             * amount
+             */
             this.drawTimeout = setTimeout(function() {
                 that.draw();
-                clearTimeout(that.drawTimeout);
+            }, throttle + 10);
-            }, 5);
         }
     },
     /**
@@ -3462,6 +3473,18 @@ Kinetic.Transition = function(node, config) {
             }
         }
     }
+
+    var finishedTweens = 0;
+    var that = this;
+    for(var n = 0; n < this.tweens.length; n++) {
+        var tween = this.tweens[n];
+        tween.onFinished = function() {
+            finishedTweens++;
+            if(finishedTweens >= that.tweens.length) {
+                that.onFinished();
+            }
+        };
+    }
 };
 /*
  * Transition methods
@@ -3786,7 +3809,7 @@ Kinetic.Tweens = {
         return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
     },
     'elastic-ease-in-out': function(t, b, c, d, a, p) {
-    	// added s = 0
+        // added s = 0
         var s = 0;
         if(t === 0) {
             return b;

src/Layer.js

@@ -44,6 +44,7 @@ Kinetic.Layer.prototype = {
             this.lastDrawTime = time;
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
+                this.drawTimeout = undefined;
             }
         }
         /*
@@ -52,10 +53,15 @@ Kinetic.Layer.prototype = {
          */
         else if(this.drawTimeout === undefined) {
             var that = this;
+            /*
+             * if timeout duration is too short, we will
+             * get a lot of unecessary layer draws.  Make sure
+             * that the timeout is slightly more than the throttle
+             * amount
+             */
             this.drawTimeout = setTimeout(function() {
                 that.draw();
-                clearTimeout(that.drawTimeout);
+            }, throttle + 10);
-            }, 5);
         }
     },
     /**

src/Node.js

@@ -694,12 +694,17 @@ Kinetic.Node.prototype = {
         go._addAnimation(anim);
 
         // subscribe to onFinished for first tween
-        trans.tweens[0].onFinished = function() {
+        trans.onFinished = function() {
+            // remove animation
             go._removeAnimation(anim);
-            this.transAnim = undefined;
+            that.transAnim = undefined;
+
+            // callback
             if(config.callback !== undefined) {
                 config.callback();
             }
+
+            anim.node.draw();
         };
         // auto start
         trans.start();

src/util/Transition.js

@@ -28,6 +28,18 @@ Kinetic.Transition = function(node, config) {
             }
         }
     }
+
+    var finishedTweens = 0;
+    var that = this;
+    for(var n = 0; n < this.tweens.length; n++) {
+        var tween = this.tweens[n];
+        tween.onFinished = function() {
+            finishedTweens++;
+            if(finishedTweens >= that.tweens.length) {
+                that.onFinished();
+            }
+        };
+    }
 };
 /*
  * Transition methods
@@ -352,7 +364,7 @@ Kinetic.Tweens = {
         return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
     },
     'elastic-ease-in-out': function(t, b, c, d, a, p) {
-    	// added s = 0
+        // added s = 0
         var s = 0;
         if(t === 0) {
             return b;

tests/js/Test.js

@@ -10,7 +10,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
-    this.testOnly = '';
+    this.testOnly = 'TRANSITION - all transition types';
     this.counter = 0;
 }
 /**

tests/js/functionalTests.js

@@ -27,7 +27,7 @@ Test.prototype.tests = {
             easing: 'bounce-ease-out'
         });
     },
-    /*
+   
      'TRANSITION - all transition types': function(containerId) {
      document.getElementById(containerId).style.height = '300px';
 
@@ -61,7 +61,7 @@ Test.prototype.tests = {
 
      stage.add(layer);
      },
-     */
+  
     'TRANSITION - transition callback': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,

tests/js/unitTests.js

@@ -2594,7 +2594,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var rect = new Kinetic.Rect({
-            x: 200,
+            x: 0,
             y: 100,
             width: 100,
             height: 50,
@@ -2609,7 +2609,7 @@ Test.prototype.tests = {
         var amplitude = 150;
         var period = 1000;
         // in ms
-        var centerX = 200;
+        var centerX = 0;
 
         stage.onFrame(function(frame) {
             rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
@@ -2628,6 +2628,8 @@ Test.prototype.tests = {
             x: 300,
             duration: 1,
             callback: function() {
+            	test(rect.getX() === 300, 'rect x is not 300');
+            	
                 test(go.animations.length === 0, 'should be no animations running');
                 test(stage.animRunning === false, 'animRunning should be false');