diff --git a/src/Container.js b/src/Container.js index 87eeed7a..a10e4191 100644 --- a/src/Container.js +++ b/src/Container.js @@ -1,28 +1,8 @@ (function() { - var SPACE = ' ', - TRANSFORM_CHANGE_STR = [ - 'xChange.kinetic', - 'yChange.kinetic', - 'scaleXChange.kinetic', - 'scaleYChange.kinetic', - 'skewXChange.kinetic', - 'skewYChange.kinetic', - 'rotationChange.kinetic', - 'offsetXChange.kinetic', - 'offsetYChange.kinetic' - ].join(SPACE); - Kinetic.Util.addMethods(Kinetic.Container, { __init: function(config) { this.children = new Kinetic.Collection(); Kinetic.Node.call(this, config); - - this.on(TRANSFORM_CHANGE_STR, function() { - var stage = this.getStage(); - if (stage) { - stage._enableNestedTransforms = true; - } - }); }, /** * returns a {@link Kinetic.Collection} of direct descendant nodes diff --git a/src/Context.js b/src/Context.js index 41b7050a..178e9e3f 100644 --- a/src/Context.js +++ b/src/Context.js @@ -227,7 +227,7 @@ var stage = shape.getStage(), m; - if (stage && stage._enableNestedTransforms) { + if (stage && stage.isNestedTransformsEnabled()) { m = shape.getAbsoluteTransform().getMatrix(); } else { diff --git a/src/Layer.js b/src/Layer.js index 7be32f1f..0420f516 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -314,17 +314,16 @@ Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'hitGraphEnabled', true); /** - * enable / disable hit graph + * enable/disable hit graph * @name setHitGraphEnabled * @method * @memberof Kinetic.Layer.prototype - * @param {Boolean} enable + * @param {Boolean} enabled * @returns {Node} */ /** - * get flag which determines if the layer is cleared or not - * before drawing + * determine if hit graph is enabled * @name getHitGraphEnabled * @method * @memberof Kinetic.Layer.prototype diff --git a/src/Stage.js b/src/Stage.js index bedb899f..48417af8 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -642,6 +642,26 @@ baseEvent = types[n]; this.content.addEventListener(baseEvent, handler, false); } + }, + /** + * enable nested transforms + * @method + * @memberof Kinetic.Stage.prototype + * @returns {Node} + */ + enableNestedTransforms: function() { + this.setNestedTransformsEnabled(true); + return this; + }, + /** + * disable nested transforms + * @method + * @memberof Kinetic.Stage.prototype + * @returns {Node} + */ + disableNestedTransforms: function() { + this.setNestedTransformsEnabled(false); + return this; } }); Kinetic.Util.extend(Kinetic.Stage, Kinetic.Container); @@ -655,4 +675,25 @@ * @method * @memberof Kinetic.Stage.prototype */ + + Kinetic.Factory.addGetterSetter(Kinetic.Stage, 'nestedTransformsEnabled', true); + + /** + * enable/disable nested transforms + * @name setNestedTransformsEnabled + * @method + * @memberof Kinetic.Stage.prototype + * @param {Boolean} enabled + * @returns {Node} + */ + + /** + * determine if nested transforms are enabled + * @name getNestedTransformsEnabled + * @method + * @memberof Kinetic.Stage.prototype + * @returns {Boolean} + */ + + Kinetic.Stage.prototype.isNestedTransformsEnabled = Kinetic.Stage.prototype.getNestedTransformsEnabled; })(); diff --git a/test/performance/common/random-squares.js b/test/performance/common/random-squares.js index 73816e6f..e468a67d 100644 --- a/test/performance/common/random-squares.js +++ b/test/performance/common/random-squares.js @@ -118,7 +118,8 @@ stage = new Kinetic.Stage({ container: "container", width: 578, - height: 200 + height: 200, + nestedTransformsEnabled: false }); circlesLayer = new Kinetic.Layer({ hitGraphEnabled: false diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index bdd47642..cec4f474 100644 --- a/test/unit/Container-test.js +++ b/test/unit/Container-test.js @@ -1355,42 +1355,4 @@ suite('Container', function() { layer.draw(); }); - // ====================================================== - test('stage._enableNestedTransforms flag', function(){ - var stage = addStage(); - - var layer = new Kinetic.Layer(); - - var rect = new Kinetic.Rect({ - x: 100, - y: 50, - width: 100, - height: 50, - fill: 'green', - stroke: 'blue' - }); - - layer.add(rect); - stage.add(layer); - - assert.equal(rect.getX(), 100); - assert.equal(rect.getY(), 50); - - var trace = layer.getContext().getTrace(); - //console.log(trace); - assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();'); - - var relaxedTrace = layer.getContext().getTrace(true); - //console.log(relaxedTrace); - assert.equal(relaxedTrace, 'clearRect();save();transform();beginPath();rect();closePath();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();'); - - assert.equal(stage._enableNestedTransforms, false, 'enableNestedTransforms should be false'); - - // changing any container transform property should permanately set the _enableNestedTransforms flag to true - layer.setX(1); - layer.setX(0); - - assert.equal(stage._enableNestedTransforms, true, 'enableNestedTransforms should be true'); - - }); }); \ No newline at end of file diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js index 16d61cc5..e838f40d 100644 --- a/test/unit/Stage-test.js +++ b/test/unit/Stage-test.js @@ -427,4 +427,37 @@ suite('Stage', function() { //console.log(stage.getStage()); }); + + // ====================================================== + test('stage.nestedTransformEnabled', function(){ + var stage = addStage(); + var layer = new Kinetic.Layer(); + var group = new Kinetic.Group(); + var circle = new Kinetic.Circle({ + x: 100, + y: 100, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle', + draggable: true + }); + + group.add(circle); + layer.add(group); + stage.add(layer); + + assert.equal(stage.isNestedTransformsEnabled(), true); + + stage.disableNestedTransforms(); + + assert.equal(stage.isNestedTransformsEnabled(), false); + + stage.enableNestedTransforms(); + + assert.equal(stage.isNestedTransformsEnabled(), true); + + + }); }); \ No newline at end of file