diff --git a/src/Animation.js b/src/Animation.js index df109c7c..02c45e34 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -50,6 +50,33 @@ getLayers: function() { return this.layers; }, + /** + * add layer. Returns true if the layer was added, and false if it was not + * @name addLayer + * @methodOf Kinetic.Animation.prototype + * @param {Kinetic.Layer} layer + */ + addLayer: function(layer) { + var layers = this.layers, + len, n; + + if (layers) { + len = layers.length; + + // don't add the layer if it already exists + for (n = 0; n < len; n++) { + if (layers[n]._id === layer._id) { + return false; + } + } + } + else { + this.layers = []; + } + + this.layers.push(layer); + return true; + }, /** * determine if animation is running or not. returns true or false * @name isRunning @@ -143,7 +170,7 @@ } // if animation object has a function, execute it if(func) { - func(anim.frame); + func.call(anim, anim.frame); } } } diff --git a/src/Layer.js b/src/Layer.js index 149345fc..f0f473ec 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -14,6 +14,13 @@ this._initLayer(config); }; + Kinetic.Layer.batchAnim = new Kinetic.Animation(function() { + if (this.getLayers().length === 0) { + this.stop(); + } + this.setLayers([]); + }); + Kinetic.Layer.prototype = { _initLayer: function(config) { this.nodeType = 'Layer'; @@ -28,8 +35,7 @@ /** * get intersection object that contains shape and pixel data * @name getIntersection - * @methodOf Kinetic.Stage.prototype - * @param {Object} pos point object + * @methodOf Kinetic.Layer.prototype */ getIntersection: function() { var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)), @@ -56,6 +62,19 @@ return null; }, + /** + * get batch draw + * @name batchDraw + * @methodOf Kinetic.Layer.prototype + */ + batchDraw: function() { + var batchAnim = Kinetic.Layer.batchAnim; + batchAnim.addLayer(this); + + if (!batchAnim.isRunning()) { + batchAnim.start(); + } + }, drawScene: function(canvas) { var canvas = canvas || this.getCanvas(); diff --git a/tests/js/unit/animationTests.js b/tests/js/unit/animationTests.js index 0fcdf586..03d72300 100644 --- a/tests/js/unit/animationTests.js +++ b/tests/js/unit/animationTests.js @@ -4,7 +4,7 @@ Test.Modules.ANIMATION = { * animation because it's accessing the global animation object which could * be modified by other unit tests */ - 'ANIMATION - test start and stop': function(containerId) { + 'test start and stop': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -53,5 +53,49 @@ Test.Modules.ANIMATION = { anim.stop(); test(a.animations.length === 0, 'should be no animations running'); + }, + 'batch draw': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var rect = new Kinetic.Rect({ + x: 200, + y: 100, + width: 100, + height: 50, + fill: 'green', + stroke: 'black', + strokeWidth: 4 + }); + + layer.add(rect); + stage.add(layer); + + draws = 0; + + layer.on('draw', function() { + console.log('draw') + draws++; + }); + + layer.draw(); + layer.draw(); + layer.draw(); + + test(draws === 3, 'draw count should be 3'); + + layer.batchDraw(); + layer.batchDraw(); + layer.batchDraw(); + + test(Kinetic.Layer.batchAnim.getLayers().length === 1, 'batch animation should only have one layer'); + + // since batch draw is async, we need to test the draw count with a timeout + setTimeout(function() { + test(draws === 4, 'draw count should be 4'); + }, 200); } };