fixed clear transition bug

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Mar 19 2012
+ * Date: Mar 20 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -70,7 +70,7 @@ Kinetic.GlobalObject = {
 
             for(var i = 0; i < stage.children.length; i++) {
                 var layer = stage.children[i];
-                if(layer.isTransitioning) {
+                if(layer.transitions.length > 0) {
                     return true;
                 }
             }
@@ -164,20 +164,13 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    _removeTransition: function(transition) {
+    _clearTransition: function(node) {
-        var layer = transition.node.getLayer();
+        var layer = node.getLayer();
-        var id = transition.id;
         for(var n = 0; n < layer.transitions.length; n++) {
-            if(layer.transitions[n].id === id) {
+            if(layer.transitions[n].node.id === node.id) {
-                layer.transitions.splice(0, 1);
+                layer.transitions.splice(n, 1);
-                // exit loop
-                n = layer.transitions.length;
             }
         }
-
-        if(layer.transitions.length === 0) {
-            layer.isTransitioning = false;
-        }
     },
     _runFrames: function() {
         for(var n = 0; n < this.stages.length; n++) {
@@ -199,7 +192,7 @@ Kinetic.GlobalObject = {
                     transition.time += this.frame.timeDiff;
                     if(transition.time >= transition.config.duration * 1000) {
                         this._endTransition.apply(transition);
-                        this._removeTransition(transition);
+                        this._clearTransition(transition.node);
                         if(transition.config.callback !== undefined) {
                             transition.config.callback();
                         }
@@ -709,7 +702,7 @@ Kinetic.Node.prototype = {
          * This make it easy to start new transitions without
          * having to explicitly cancel old ones
          */
-        layer._clearTransition(this);
+        Kinetic.GlobalObject._clearTransition(this);
 
         for(var key in config) {
             if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@@ -737,7 +730,6 @@ Kinetic.Node.prototype = {
             starts: starts
         });
 
-        layer.isTransitioning = true;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**
@@ -1655,7 +1647,6 @@ Kinetic.Layer = function(config) {
     this.canvas.style.position = 'absolute';
     this.transitions = [];
     this.transitionIdCounter = 0;
-    this.isTransitioning = false;
 
     // call super constructors
     Kinetic.Container.apply(this, []);
@@ -1717,10 +1708,10 @@ Kinetic.Layer.prototype = {
     /**
      * clear transition if one is running
      */
-    _clearTransition: function(shape) {
+    _clearTransition: function(node) {
         for(var n = 0; n < this.transitions.length; n++) {
             var transition = this.transitions[n];
-            if(transition.node.id === shape.id) {
+            if(transition.node.id === node.id) {
                 Kinetic.GlobalObject._removeTransition(transition);
             }
         }

src/GlobalObject.js

@@ -42,7 +42,7 @@ Kinetic.GlobalObject = {
 
             for(var i = 0; i < stage.children.length; i++) {
                 var layer = stage.children[i];
-                if(layer.isTransitioning) {
+                if(layer.transitions.length > 0) {
                     return true;
                 }
             }
@@ -136,20 +136,13 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    _removeTransition: function(transition) {
+    _clearTransition: function(node) {
-        var layer = transition.node.getLayer();
+        var layer = node.getLayer();
-        var id = transition.id;
         for(var n = 0; n < layer.transitions.length; n++) {
-            if(layer.transitions[n].id === id) {
+            if(layer.transitions[n].node.id === node.id) {
-                layer.transitions.splice(0, 1);
+                layer.transitions.splice(n, 1);
-                // exit loop
-                n = layer.transitions.length;
             }
         }
-
-        if(layer.transitions.length === 0) {
-            layer.isTransitioning = false;
-        }
     },
     _runFrames: function() {
         for(var n = 0; n < this.stages.length; n++) {
@@ -171,7 +164,7 @@ Kinetic.GlobalObject = {
                     transition.time += this.frame.timeDiff;
                     if(transition.time >= transition.config.duration * 1000) {
                         this._endTransition.apply(transition);
-                        this._removeTransition(transition);
+                        this._clearTransition(transition.node);
                         if(transition.config.callback !== undefined) {
                             transition.config.callback();
                         }

src/Layer.js

@@ -16,7 +16,6 @@ Kinetic.Layer = function(config) {
     this.canvas.style.position = 'absolute';
     this.transitions = [];
     this.transitionIdCounter = 0;
-    this.isTransitioning = false;
 
     // call super constructors
     Kinetic.Container.apply(this, []);
@@ -78,10 +77,10 @@ Kinetic.Layer.prototype = {
     /**
      * clear transition if one is running
      */
-    _clearTransition: function(shape) {
+    _clearTransition: function(node) {
         for(var n = 0; n < this.transitions.length; n++) {
             var transition = this.transitions[n];
-            if(transition.node.id === shape.id) {
+            if(transition.node.id === node.id) {
                 Kinetic.GlobalObject._removeTransition(transition);
             }
         }

src/Node.js

@@ -455,7 +455,7 @@ Kinetic.Node.prototype = {
          * This make it easy to start new transitions without
          * having to explicitly cancel old ones
          */
-        layer._clearTransition(this);
+        Kinetic.GlobalObject._clearTransition(this);
 
         for(var key in config) {
             if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@@ -483,7 +483,6 @@ Kinetic.Node.prototype = {
             starts: starts
         });
 
-        layer.isTransitioning = true;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**

tests/js/Test.js

@@ -10,7 +10,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
-    this.testOnly = '';
+    this.testOnly = 'TRANSITION - ease-in, ease-out, ease-in-out hovers';
     this.counter = 0;
 }
 /**

tests/js/functionalTests.js

@@ -251,6 +251,82 @@ Test.prototype.tests = {
         stage.add(layer);
 
     },
+    'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {
+        function addHovers(shape, easing) {
+            shape.on("mouseover", function() {
+                this.transitionTo({
+                    scale: {
+                        x: 1.5,
+                        y: 1.5 
+                    },
+                    duration: 1,
+                    easing: easing
+                });
+            });
+            shape.on("mouseout", function() {
+                this.transitionTo({
+                    scale: {
+                        x: 1,
+                        y: 1
+                    },
+                    duration: 1,
+                    easing: easing
+                });
+            });
+        }
+        var stage = new Kinetic.Stage(containerId, 578, 200);
+        var layer = new Kinetic.Layer();
+        var greenBox = new Kinetic.Rect({
+            x: 50,
+            y: stage.height / 2 - 25,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            centerOffset: {
+                x: 50,
+                y: 25
+            }
+        });
+
+        var blueBox = new Kinetic.Rect({
+            x: stage.width / 2 - 50,
+            y: stage.height / 2 - 25,
+            width: 100,
+            height: 50,
+            fill: 'blue',
+            stroke: 'black',
+            strokeWidth: 4,
+            centerOffset: {
+                x: 50,
+                y: 25
+            }
+        });
+
+        var redBox = new Kinetic.Rect({
+            x: 428,
+            y: stage.height / 2 - 25,
+            width: 100,
+            height: 50,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4,
+            centerOffset: {
+                x: 50,
+                y: 25
+            }
+        });
+
+        addHovers(greenBox, "ease-in");
+        addHovers(blueBox, "ease-out");
+        addHovers(redBox, "ease-in-out");
+
+        layer.add(greenBox);
+        layer.add(blueBox);
+        layer.add(redBox);
+        stage.add(layer);
+    },
     'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
         var stage = new Kinetic.Stage(containerId, 578, 200);
         var layer = new Kinetic.Layer();