Fixes for Konva.Transformer when parent scale is changed. fix #894

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fixes for `Konva.Transformer` when parent scale is changed
+
 ## 5.0.0 - 2020-03-26
 
 * **New `Konva.Transformer` implementation!**. Old API should work. But I mark this release is `major` (breaking) just for smooth updates. Changes:

src/shapes/Transformer.ts

@@ -351,7 +351,7 @@ export class Transformer extends Group {
     }
   }
   /**
-   * alias to `tr.node(shape)`
+   * alias to `tr.nodes([shape])`/ This method is deprecated and will be removed soon.
    * @method
    * @name Konva.Transformer#attachTo
    * @returns {Konva.Transformer}
@@ -395,9 +395,7 @@ export class Transformer extends Group {
       };
       node.on(additionalEvents, onChange);
       node.on(TRANSFORM_CHANGE_STR, onChange);
-      node.on(`clearCache.${EVENTS_NAME}`, () => {
+      node.on(`clearCache.${EVENTS_NAME}`, onChange);
-        this._resetTransformCache();
-      });
       node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
       this._proxyDrag(node);
     });
@@ -1573,7 +1571,8 @@ Factory.addGetterSetter(Transformer, 'ignoreStroke', false);
 Factory.addGetterSetter(Transformer, 'padding', 0, getNumberValidator());
 
 /**
- * get/set attached node of the Transformer. Transformer will adapt to its size and listen to its events
+ * get/set attached node of the Transformer. Transformer will adapt to its size and listen to its events.
+ * **This method is deprecated and will be removed soon.** Please use `tr.nodes([shape1, shape2]);` instead
  * @method
  * @name Konva.Transformer#Konva.Transformer#node
  * @returns {Konva.Node}
@@ -1598,6 +1597,11 @@ Factory.addGetterSetter(Transformer, 'node');
  *
  * // set
  * transformer.nodes([rect, circle]);
+ * // push new item:
+ *
+ * const oldNodes = transformer.nodes();
+ * const newNodes = oldNodes.concat([newShape]);
+ * transformer.nodes(newNodes);
  */
 
 Factory.addGetterSetter(Transformer, 'nodes');

test/unit/shapes/Transformer-test.js

@@ -174,6 +174,70 @@ suite('Transformer', function() {
     assert.equal(tr.rotation(), rect.rotation());
   });
 
+  test('change transform of parent', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect]
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    assert.equal(tr.x(), 50);
+
+    stage.scaleX(2);
+    stage.scaleY(2);
+
+    // check attrs
+    assert.equal(tr.x(), 100);
+    assert.equal(tr.width(), 200);
+    // check visual
+    var pos = tr.findOne('.top-right').getAbsolutePosition();
+    assert.equal(pos.x, 300);
+
+    stage.draw();
+  });
+
+  // TODO: try to rotate rect manually
+  // it produce the weird result
+  // we need skew here!
+  test.skip('rotated inside scaled (in one direction) parent', function() {
+    var stage = addStage();
+    stage.scaleX(2);
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect]
+    });
+    layer.add(tr);
+
+    layer.draw();
+  });
+
   test('try to fit simple rectangle into negative scale', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -313,7 +377,6 @@ suite('Transformer', function() {
     layer.draw();
     assert.equal(tr.getClassName(), 'Transformer');
 
-    console.log(tr);
     layer.draw();
 
     assert.equal(tr.x(), rect.x());
@@ -986,11 +1049,6 @@ suite('Transformer', function() {
     layer.add(tr);
     layer.draw();
 
-    // rect.on('transform', () => {
-    //   console.log(tr.getActiveAnchor(), tr._anchorDragOffset);
-    // });
-    // throw 1;
-
     var anchor = tr.findOne('.top-right');
     var pos = anchor.getAbsolutePosition();
 
@@ -2635,7 +2693,6 @@ suite('Transformer', function() {
     tests.forEach(test => {
       var start = test[0];
       var end = test[1];
-      console.log(start, end);
       rect.setAttrs({
         x: 0,
         y: 0,
@@ -3446,6 +3503,77 @@ suite('Transformer', function() {
     assert.equal(tr.rotation(), 180);
   });
 
+  test.skip('transform several rotated nodes', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect1 = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 50,
+      height: 50,
+      fill: 'blue',
+      rotation: 45
+    });
+    layer.add(rect1);
+
+    var rect2 = new Konva.Rect({
+      x: 100,
+      y: 100,
+      draggable: true,
+      width: 50,
+      height: 50,
+      fill: 'red',
+      rotation: 120
+    });
+
+    layer.add(rect2);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect1, rect2]
+    });
+    layer.add(tr);
+    layer.draw();
+
+    tr._fitNodesInto({
+      x: 100,
+      y: 0,
+      width: 100,
+      height: 100,
+      rotation: Konva.getAngle(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,
+      width: 100,
+      height: 100,
+      rotation: Konva.getAngle(180)
+    });
+
+    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(), 180);
+  });
+
   test('drag several nodes', function() {
     var stage = addStage();
     var layer = new Konva.Layer();