fix transformer on parent transform change. close #834

konva.js

@@ -2684,6 +2684,8 @@
        */
       Node.prototype._clearSelfAndDescendantCache = function (attr) {
           this._clearCache(attr);
+          // trigger clear cache, so transformer can use it
+          this.fire('clearCache');
           // skip clearing if node is cached with canvas
           // for performance reasons !!!
           if (this.isCached()) {
@@ -3881,7 +3883,7 @@
        * node.fire('click', null, true);
        */
       Node.prototype.fire = function (eventType, evt, bubble) {
-          evt = evt || {};
+          if (evt === void 0) { evt = {}; }
           evt.target = evt.target || this;
           // bubble
           if (bubble) {
@@ -14681,7 +14683,9 @@
       'offsetXChange',
       'offsetYChange',
       'transformsEnabledChange',
-      'strokeWidthChange'
+      'strokeWidthChange',
+      // listen to cache changes
+      'clearCache'
   ]
       .map(function (e) { return e + ("." + EVENTS_NAME); })
       .join(' ');

src/Node.ts

@@ -267,6 +267,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    */
   _clearSelfAndDescendantCache(attr?: string) {
     this._clearCache(attr);
+    // trigger clear cache, so transformer can use it
+    this.fire('clearCache');
 
     // skip clearing if node is cached with canvas
     // for performance reasons !!!
@@ -1652,8 +1654,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // fire click event that bubbles
    * node.fire('click', null, true);
    */
-  fire(eventType, evt, bubble?) {
-    evt = evt || {};
+  fire(eventType, evt: any = {}, bubble?) {
     evt.target = evt.target || this;
     // bubble
     if (bubble) {

src/shapes/Transformer.ts

@@ -70,7 +70,9 @@ var TRANSFORM_CHANGE_STR = [
   'offsetXChange',
   'offsetYChange',
   'transformsEnabledChange',
-  'strokeWidthChange'
+  'strokeWidthChange',
+  // listen to cache changes
+  'clearCache'
 ]
   .map(e => e + `.${EVENTS_NAME}`)
   .join(' ');

test/unit/Node-test.js

@@ -1904,7 +1904,7 @@ suite('Node', function() {
       clicks.push('layer');
     });
     // fire event with bubbling
-    circle.fire('click', null, true);
+    circle.fire('click', undefined, true);
 
     //console.log(clicks);
 
@@ -2074,7 +2074,7 @@ suite('Node', function() {
       clicks.push('layer');
     });
 
-    circle.fire('click', null, true);
+    circle.fire('click', undefined, true);
 
     assert.equal(clicks[0], 'circle');
     assert.equal(clicks[1], 'layer');
@@ -2138,7 +2138,7 @@ suite('Node', function() {
       assert.equal(e.currentTarget, circle);
       fired = true;
     });
-    circle.fire('click', null, true);
+    circle.fire('click', undefined, true);
     assert.equal(fired, true);
   });
 
@@ -2169,7 +2169,7 @@ suite('Node', function() {
       assert.equal(e.currentTarget, group);
       fired = true;
     });
-    circle.fire('click', null, true);
+    circle.fire('click', undefined, true);
     assert.equal(fired, true);
   });
   // ======================================================

test/unit/shapes/Transformer-test.js

@@ -1083,6 +1083,7 @@ suite('Transformer', function() {
       });
       layer.add(tr);
       layer.draw();
+
       throw 1;
       done();
     });
@@ -1903,6 +1904,33 @@ suite('Transformer', function() {
     assert.equal(stage.content.style.cursor, 'nwse-resize');
   });
 
+  test('changing parent transform should recalculate transformer attrs', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+    layer.draw();
+
+    layer.scaleX(2);
+    layer.draw();
+
+    assert.equal(tr.width(), 200);
+  });
+
   test.skip('check fit and correct cursor on rotated parent', function() {
     var stage = addStage();
     var layer = new Konva.Layer({
@@ -3312,13 +3340,20 @@ suite('Transformer', function() {
       rotation: Konva.getAngle(90)
     });
 
-    assert.equal(tr.x(), rect1.x());
-    assert.equal(tr.y(), rect1.y());
-    assert.equal(tr.width(), rect1.width() + rect2.width());
-    assert.equal(tr.height(), rect1.height() + rect2.width());
-    assert.equal(tr.rotation(), 90);
     layer.draw();
 
+    assert.equal(rect1.x(), 100);
+    assert.equal(rect1.y(), 0);
+    assert.equal(rect1.width() + rect2.width(), 100);
+    assert.equal(rect1.height() + rect2.width(), 100);
+    assert.equal(rect1.rotation(), 90);
+
+    assert.equal(rect2.x(), 50);
+    assert.equal(rect2.y(), 50);
+    assert.equal(rect2.width() + rect2.width(), 100);
+    assert.equal(rect2.height() + rect2.width(), 100);
+    assert.equal(tr.rotation(), 90);
+
     tr._fitNodesInto({
       x: 100,
       y: 100,