stage tweens now work correctly. getChildren() and getLayers() now return a Kinetic.Collection. added toArray() method to Kinetic.Collection

src/Animation.js

@@ -48,7 +48,9 @@
                 lays = [];
             }
             // if passing in an array of Layers
-            else if (Kinetic.Util._isArray(layers)) {
+            // NOTE: layers could be an array or Kinetic.Collection.  for simplicity, I'm just inspecting
+            // the length property to check for both cases
+            else if (layers.length > 0) {
                 lays = layers;
             }
             // if passing in a Layer

src/Container.js

@@ -1,11 +1,11 @@
 (function() {
     Kinetic.Util.addMethods(Kinetic.Container, {
         _containerInit: function(config) {
-            this.children = [];
+            this.children = new Kinetic.Collection();
             Kinetic.Node.call(this, config);
         },
         /**
-         * get children
+         * returns a {@link Kinetic.Collection} of direct descendant nodes
          * @method
          * @memberof Kinetic.Container.prototype
          */
@@ -149,12 +149,11 @@
         },
         clone: function(obj) {
             // call super method
-            var node = Kinetic.Node.prototype.clone.call(this, obj)
+            var node = Kinetic.Node.prototype.clone.call(this, obj);
 
-            // perform deep clone on containers
+            this.getChildren().each(function(no) {
-            for(var key in this.children) {
+                node.add(no.clone());
-                node.add(this.children[key].clone());
+            });
-            }
             return node;
         },
         /**

src/Node.js

@@ -366,7 +366,7 @@
                     index++;
 
                     if(child.nodeType !== SHAPE) {
-                        nodes = nodes.concat(child.getChildren());
+                        nodes = nodes.concat(child.getChildren().toArray());
                     }
 
                     if(child._id === that._id) {
@@ -1701,5 +1701,5 @@
      */
     Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
     
-    Kinetic.Collection.mapMethods(['on', 'off']);
+    Kinetic.Collection.mapMethods(['on', 'off', 'draw']);
 })();

src/Stage.js

@@ -323,7 +323,7 @@
             return null;
         },
         /**
-         * get layers
+         * returns a {@link Kinetic.Collection} of layers
          * @method
          * @memberof Kinetic.Stage.prototype
          */

src/Tween.js

@@ -55,7 +55,7 @@
 
         this.anim = new Kinetic.Animation(function() {
             that._onEnterFrame();
-        }, node.getLayer());
+        }, node.getLayer() || node.getLayers());
 
         for (key in config) {
             if (blacklist[key] === undefined) {
@@ -141,10 +141,11 @@
          * @memberof Kinetic.Tween.prototype
          */
         reset: function() {
+            var node = this.node;
             this._iterate(function(tween) {
                 tween.reset();
             });
-            this.node.getLayer().draw();
+            (node.getLayer() || node.getLayers()).draw();
         },
         /**
          * seek
@@ -153,10 +154,11 @@
          * @param {Integer} t time in seconds between 0 and the duration
          */
         seek: function(t) {
+            this.node = node;
             this._iterate(function(tween) {
                 tween.seek(t * 1000);
             });
-            this.node.getLayer().draw();
+            (node.getLayer() || node.getLayers()).draw();
         },
         /**
          * pause
@@ -174,10 +176,11 @@
          * @memberof Kinetic.Tween.prototype
          */
         finish: function() {
+            this.node = node;
             this._iterate(function(tween) {
                 tween.finish();
             });
-            this.node.getLayer().draw();
+            (node.getLayer() || node.getLayers()).draw();
         },
         _onEnterFrame: function() {
             this._iterate(function(tween) {

src/Util.js

@@ -32,6 +32,18 @@
             func(this[n], n);
         }
     };
+    /**
+     * convert collection into an array
+     * @method
+     * @memberof Kinetic.Collection.prototype
+     */
+    Kinetic.Collection.prototype.toArray = function() {
+        var arr = [];
+        for(var n = 0; n < this.length; n++) {
+            arr.push(this[n]);
+        }
+        return arr;
+    };
 
     Kinetic.Collection.mapMethods = function(arr) {
         var leng = arr.length,

tests/js/functionalTests.js

@@ -423,12 +423,12 @@ Test.Modules.EVENT = {
 
         layer.on('draw', function(evt) {
             savedEvt = evt;
-            eventNodes.push(this.getNodeType());
+            eventNodes.push(this.getType());
             order.push('layer draw');
         });
         
         stage.on('draw', function(evt) {
-            eventNodes.push(this.getNodeType());
+            eventNodes.push(this.getType());
             order.push('stage draw');
         });
         
@@ -447,7 +447,7 @@ Test.Modules.EVENT = {
         // Note: draw events no longer bubble
         //test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event');
         
-        test(savedEvt.node.getNodeType() === 'Layer', 'event object should contain a node property which is Layer');
+        test(savedEvt.node.getType() === 'Layer', 'event object should contain a node property which is Layer');
         
         //test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw');
 

tests/js/manualTests.js

@@ -1,4 +1,4 @@
-Test.Modules.TRANSITION = {
+Test.Modules.Tween = {
     '!transition position and rotation': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -213,21 +213,50 @@ Test.Modules.TRANSITION = {
 
         tween.play();
 
-        /*
-        var tween2 = new Kinetic.Tween({
-            node: greenBox,
-            duration: 2,
-            x: 200,
-            easing: Kinetic.Easings.BounceEaseOut,
-        });
-
-        tween2.play();
-        */
-
         document.getElementById(containerId).addEventListener('click', function() {
             tween.seek(1.5);
             tween.reverse();
         });
+    },
+    'tween stage': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var greenBox = new Kinetic.Rect({
+            x: 50,
+            y: stage.getHeight() / 2 - 25,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            offset: {
+                x: 50,
+                y: 25
+            }
+        });
+
+        layer.add(greenBox);
+        stage.add(layer);
+
+        var tween = new Kinetic.Tween({
+            node: stage,
+            duration: 2,
+            x: 400,
+            scaleX: 2,
+            scaleY: 2,
+            easing: Kinetic.Easings.BounceEaseOut,
+            yoyo: false,
+            onFinish: function() {
+                console.log('finished!')
+            }
+        });
+
+        tween.play();
+      
     }
 };