From 7069bf9e0c64c8c3cb58003b345aaf223cc9ede6 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 19 May 2013 21:07:43 -0700 Subject: [PATCH] stage tweens now work correctly. getChildren() and getLayers() now return a Kinetic.Collection. added toArray() method to Kinetic.Collection --- src/Animation.js | 4 ++- src/Container.js | 13 +++++---- src/Node.js | 4 +-- src/Stage.js | 8 +++--- src/Tween.js | 11 +++++--- src/Util.js | 12 +++++++++ tests/js/functionalTests.js | 6 ++--- tests/js/manualTests.js | 53 ++++++++++++++++++++++++++++--------- 8 files changed, 78 insertions(+), 33 deletions(-) diff --git a/src/Animation.js b/src/Animation.js index fb448f63..676024bc 100644 --- a/src/Animation.js +++ b/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 diff --git a/src/Container.js b/src/Container.js index a56a0432..f642213e 100644 --- a/src/Container.js +++ b/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 - for(var key in this.children) { - node.add(this.children[key].clone()); - } + this.getChildren().each(function(no) { + node.add(no.clone()); + }); return node; }, /** diff --git a/src/Node.js b/src/Node.js index 067a64ae..495d2ff3 100644 --- a/src/Node.js +++ b/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']); })(); diff --git a/src/Stage.js b/src/Stage.js index be3790ec..da15c072 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -323,13 +323,13 @@ return null; }, /** - * get layers + * returns a {@link Kinetic.Collection} of layers * @method * @memberof Kinetic.Stage.prototype */ - getLayers: function() { - return this.getChildren(); - }, + getLayers: function() { + return this.getChildren(); + }, _setPointerPosition: function(evt) { if(!evt) { evt = window.event; diff --git a/src/Tween.js b/src/Tween.js index 85f91538..dfc5366e 100644 --- a/src/Tween.js +++ b/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) { diff --git a/src/Util.js b/src/Util.js index b54d1636..dbf39441 100644 --- a/src/Util.js +++ b/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, diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 712ce9ba..5aff5012 100644 --- a/tests/js/functionalTests.js +++ b/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'); diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js index e2cd5d7f..9e24add9 100644 --- a/tests/js/manualTests.js +++ b/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(); + } };