cleaned up animation and transition interaction

dist/kinetic-core.js

@@ -41,7 +41,6 @@ var Kinetic = {};
 Kinetic.GlobalObject = {
     stages: [],
     idCounter: 0,
-    isAnimating: false,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -64,9 +63,17 @@ Kinetic.GlobalObject = {
     },
     _isaCanvasAnimating: function() {
         for(var n = 0; n < this.stages.length; n++) {
-            if(this.stages[n].isAnimating) {
+            var stage = this.stages[n];
+            if(stage.isAnimating) {
                 return true;
             }
+
+            for(var i = 0; i < stage.children.length; i++) {
+                var layer = stage.children[i];
+                if(layer.isTransitioning) {
+                    return true;
+                }
+            }
         }
         return false;
     },
@@ -111,13 +118,17 @@ Kinetic.GlobalObject = {
     _removeTransition: function(transition) {
         var layer = transition.node.getLayer();
         var id = transition.id;
-
         for(var n = 0; n < layer.transitions.length; n++) {
             if(layer.transitions[n].id === id) {
                 layer.transitions.splice(0, 1);
-                return false;
+                // 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 +182,7 @@ Kinetic.GlobalObject = {
         }
     },
     _animationLoop: function() {
-        if(this.isAnimating) {
+        if(this._isaCanvasAnimating()) {
             this._updateFrameObject();
             this._runFrames();
             var that = this;
@@ -182,12 +193,10 @@ Kinetic.GlobalObject = {
     },
     _handleAnimation: function() {
         var that = this;
-        if(!this.isAnimating && this._isaCanvasAnimating()) {
+        if(this._isaCanvasAnimating()) {
-            this.isAnimating = true;
             that._animationLoop();
         }
-        else if(this.isAnimating && !this._isaCanvasAnimating()) {
+        else {
-            this.isAnimating = false;
             this.frame.lastTime = 0;
         }
     }
@@ -672,6 +681,9 @@ Kinetic.Node.prototype = {
             node: this,
             changes: changes
         });
+        
+        layer.isTransitioning = true;
+        Kinetic.GlobalObject._handleAnimation();
     },
     /**
      * set drag constraint
@@ -885,6 +897,7 @@ Kinetic.Container.prototype = {
  * Stage constructor.  A stage is used to contain multiple layers and handle
  * animations
  * @constructor
+ * @augments Kinetic.Container
  * @param {String|DomElement} cont Container id or DOM element
  * @param {int} width
  * @param {int} height
@@ -1587,7 +1600,8 @@ Kinetic.Layer = function(config) {
     this.canvas.style.position = 'absolute';
     this.transitions = [];
     this.transitionIdCounter = 0;
-
+    this.isTransitioning = false;
+    
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);

src/GlobalObject.js

@@ -13,7 +13,6 @@ var Kinetic = {};
 Kinetic.GlobalObject = {
     stages: [],
     idCounter: 0,
-    isAnimating: false,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -36,9 +35,17 @@ Kinetic.GlobalObject = {
     },
     _isaCanvasAnimating: function() {
         for(var n = 0; n < this.stages.length; n++) {
-            if(this.stages[n].isAnimating) {
+            var stage = this.stages[n];
+            if(stage.isAnimating) {
                 return true;
             }
+
+            for(var i = 0; i < stage.children.length; i++) {
+                var layer = stage.children[i];
+                if(layer.isTransitioning) {
+                    return true;
+                }
+            }
         }
         return false;
     },
@@ -83,13 +90,17 @@ Kinetic.GlobalObject = {
     _removeTransition: function(transition) {
         var layer = transition.node.getLayer();
         var id = transition.id;
-
         for(var n = 0; n < layer.transitions.length; n++) {
             if(layer.transitions[n].id === id) {
                 layer.transitions.splice(0, 1);
-                return false;
+                // 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++) {
@@ -143,7 +154,7 @@ Kinetic.GlobalObject = {
         }
     },
     _animationLoop: function() {
-        if(this.isAnimating) {
+        if(this._isaCanvasAnimating()) {
             this._updateFrameObject();
             this._runFrames();
             var that = this;
@@ -154,12 +165,10 @@ Kinetic.GlobalObject = {
     },
     _handleAnimation: function() {
         var that = this;
-        if(!this.isAnimating && this._isaCanvasAnimating()) {
+        if(this._isaCanvasAnimating()) {
-            this.isAnimating = true;
             that._animationLoop();
         }
-        else if(this.isAnimating && !this._isaCanvasAnimating()) {
+        else {
-            this.isAnimating = false;
             this.frame.lastTime = 0;
         }
     }

src/Layer.js

@@ -16,7 +16,8 @@ Kinetic.Layer = function(config) {
     this.canvas.style.position = 'absolute';
     this.transitions = [];
     this.transitionIdCounter = 0;
-
+    this.isTransitioning = false;
+    
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);

src/Node.js

@@ -470,6 +470,9 @@ Kinetic.Node.prototype = {
             node: this,
             changes: changes
         });
+        
+        layer.isTransitioning = true;
+        Kinetic.GlobalObject._handleAnimation();
     },
     /**
      * set drag constraint

src/Stage.js

@@ -5,6 +5,7 @@
  * Stage constructor.  A stage is used to contain multiple layers and handle
  * animations
  * @constructor
+ * @augments Kinetic.Container
  * @param {String|DomElement} cont Container id or DOM element
  * @param {int} width
  * @param {int} height

tests/js/Test.js

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

tests/js/functionalTests.js

@@ -76,6 +76,10 @@ Test.prototype.tests = {
         });
 
         stage.start();
+        
+        setTimeout(function() {
+        	stage.stop(); 
+        }, 1000);
     },
     'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
         var stage = new Kinetic.Stage(containerId, 578, 200);

tests/js/unitTests.js

@@ -200,6 +200,76 @@ Test.prototype.tests = {
         layer.add(group);
         stage.add(layer);
     },
+    'GROUPS - hide group': function(containerId) {
+        var stage = new Kinetic.Stage(containerId, 578, 200);
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+        var circle = new Kinetic.Circle({
+            x: stage.width / 2,
+            y: stage.height / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        group.add(circle);
+        layer.add(group);
+        stage.add(layer);
+
+        group.hide();
+        layer.draw();
+    },
+    'GROUPS - create two groups, move first group': function(containerId) {
+        var stage = new Kinetic.Stage(containerId, 578, 200);
+        var greenLayer = new Kinetic.Layer();
+        var blueLayer = new Kinetic.Layer();
+        var greenGroup = new Kinetic.Group();
+        var blueGroup = new Kinetic.Group();
+
+        var greenCircle = new Kinetic.Circle({
+            x: stage.width / 2 - 100,
+            y: stage.height / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            draggable: true
+        });
+
+        var blueCircle = new Kinetic.Circle({
+            x: stage.width / 2 + 100,
+            y: stage.height / 2,
+            radius: 70,
+            fill: 'blue',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        greenGroup.add(greenCircle);
+        blueGroup.add(blueCircle);
+        greenLayer.add(greenGroup);
+        blueLayer.add(blueGroup);
+        stage.add(greenLayer);
+        stage.add(blueLayer);
+
+        blueLayer.removeChildren();
+        var blueGroup2 = new Kinetic.Group();
+        var blueCircle2 = new Kinetic.Circle({
+            x: stage.width / 2,
+            y: stage.height / 2,
+            radius: 70,
+            fill: 'blue',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+        blueGroup2.add(blueCircle2);
+        blueLayer.add(blueGroup2);
+        blueLayer.draw();
+
+        blueGroup2.setPosition(100, 0);
+        blueLayer.draw();
+    },
     ////////////////////////////////////////////////////////////////////////
     //  SHAPES tests
     ////////////////////////////////////////////////////////////////////////
@@ -850,26 +920,6 @@ Test.prototype.tests = {
         circle.show();
         layer.draw();
     },
-    'GROUPS - hide group': function(containerId) {
-        var stage = new Kinetic.Stage(containerId, 578, 200);
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-        var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        group.add(circle);
-        layer.add(group);
-        stage.add(layer);
-
-        group.hide();
-        layer.draw();
-    },
     'SHAPES - set shape alpha to 0.5': function(containerId) {
         var stage = new Kinetic.Stage(containerId, 578, 200);
         var layer = new Kinetic.Layer();
@@ -1212,16 +1262,16 @@ Test.prototype.tests = {
             layer.draw();
         });
         test(stage.isAnimating === false, 'stage should not be animating');
-        test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating');
+        test(Kinetic.GlobalObject._isaCanvasAnimating() === false, 'global object should not be animating');
 
         stage.start();
 
         test(stage.isAnimating === true, 'stage should be animating');
-        test(Kinetic.GlobalObject.isAnimating === true, 'global object should be animating');
+        test(Kinetic.GlobalObject._isaCanvasAnimating() === true, 'global object should be animating');
 
         stage.stop();
 
         test(stage.isAnimating === false, 'stage should not be animating');
-        test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating');
+        test(Kinetic.GlobalObject._isaCanvasAnimating() === false, 'global object should not be animating');
     }
 };