diff --git a/src/Container.js b/src/Container.js index e1009399..e250abdd 100644 --- a/src/Container.js +++ b/src/Container.js @@ -1,8 +1,28 @@ (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 7bc6fcfb..41b7050a 100644 --- a/src/Context.js +++ b/src/Context.js @@ -224,7 +224,15 @@ } }, _applyAncestorTransforms: function(shape) { - var m = shape.getAbsoluteTransform().getMatrix(); + var stage = shape.getStage(), + m; + + if (stage && stage._enableNestedTransforms) { + m = shape.getAbsoluteTransform().getMatrix(); + } + else { + m = shape.getTransform().getMatrix(); + } this.transform(m[0], m[1], m[2], m[3], m[4], m[5]); }, _clip: function(container) { diff --git a/src/Global.js b/src/Global.js index 733c928d..2645e873 100644 --- a/src/Global.js +++ b/src/Global.js @@ -42,7 +42,7 @@ var Kinetic = {}; shapes: {}, listenClickTap: false, inDblClickWindow: false, - + // configurations enableTrace: false, traceArrMax: 100, diff --git a/src/Node.js b/src/Node.js index 231b9bfa..350b4a15 100644 --- a/src/Node.js +++ b/src/Node.js @@ -42,7 +42,7 @@ X = 'x', Y = 'y', - transformChangeStr = [ + TRANSFORM_CHANGE_STR = [ 'xChange.kinetic', 'yChange.kinetic', 'scaleXChange.kinetic', @@ -64,7 +64,7 @@ this.setAttrs(config); // event bindings for cache handling - this.on(transformChangeStr, function() { + this.on(TRANSFORM_CHANGE_STR, function() { this._clearCache(TRANSFORM); that._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM); }); @@ -1251,7 +1251,6 @@ * @memberof Kinetic.Node.prototype */ getTransform: function() { - //return this._getTransform(); return this._getCache(TRANSFORM, this._getTransform); } }); diff --git a/src/Stage.js b/src/Stage.js index b28d97eb..1fcc0185 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -61,6 +61,7 @@ this._id = Kinetic.idCounter++; this._buildDOM(); this._bindContentEvents(); + this._enableNestedTransforms = false; Kinetic.stages.push(this); }, _validateAdd: function(child) { diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index acd688fb..079d179e 100644 --- a/test/unit/Container-test.js +++ b/test/unit/Container-test.js @@ -1354,4 +1354,43 @@ suite('Container', function() { layer.draw(); }); + + // ====================================================== + test.only('Kinetic.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