Fixes for boundBoxFunc of Konva.Transformer.

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 5.0.3 - 2020-05-01
+
+* Fixes for `boundBoxFunc` of `Konva.Transformer`.
+
 ## 5.0.2 - 2020-04-23
 
 * Deatach fixes for `Konva.Transformer`

src/shapes/Transformer.ts

@@ -1024,6 +1024,29 @@ export class Transformer extends Group {
     this.getLayer().batchDraw();
   }
   _fitNodeInto(node: Node, newAttrs, evt) {
+    var pure = node.getClientRect({
+      skipTransform: true,
+      skipShadow: true,
+      skipStroke: this.ignoreStroke()
+    });
+
+    const parentTransform = node
+      .getParent()
+      .getAbsoluteTransform()
+      .copy();
+    parentTransform.invert();
+    const invertedPoint = parentTransform.point({
+      x: newAttrs.x,
+      y: newAttrs.y
+    });
+
+    var absScale = node.getParent().getAbsoluteScale();
+
+    newAttrs.x = invertedPoint.x;
+    newAttrs.y = invertedPoint.y;
+    newAttrs.width /= absScale.x;
+    newAttrs.height /= absScale.y;
+
     if (this.boundBoxFunc()) {
       const oldAttrs = this.__getNodeShape(
         node,
@@ -1043,28 +1066,8 @@ export class Transformer extends Group {
     const parentRot = Konva.getAngle(node.getParent().getAbsoluteRotation());
     node.rotation(Util._getRotation(newAttrs.rotation - parentRot));
 
-    var pure = node.getClientRect({
-      skipTransform: true,
-      skipShadow: true,
-      skipStroke: this.ignoreStroke()
-    });
-
-    const parentTransform = node
-      .getParent()
-      .getAbsoluteTransform()
-      .copy();
-    parentTransform.invert();
-    const invertedPoint = parentTransform.point({
-      x: newAttrs.x,
-      y: newAttrs.y
-    });
-    newAttrs.x = invertedPoint.x;
-    newAttrs.y = invertedPoint.y;
     var absScale = node.getParent().getAbsoluteScale();
 
-    pure.width *= absScale.x;
-    pure.height *= absScale.y;
-
     var scaleX = pure.width ? newAttrs.width / pure.width : 1;
     var scaleY = pure.height ? newAttrs.height / pure.height : 1;
 

test/unit/shapes/Transformer-test.js

@@ -2771,8 +2771,6 @@ suite('Transformer', function() {
       });
       layer.draw();
 
-      console.log(start, end);
-
       // move from start to end
       tr.simulateMouseDown(start);
       tr.simulateMouseMove(end);
@@ -4073,7 +4071,12 @@ suite('Transformer', function() {
 
   test('boundBoxFox should work in local coordinates', function() {
     var stage = addStage();
-    var layer = new Konva.Layer();
+    var layer = new Konva.Layer({
+      x: 10,
+      y: 10,
+      scaleX: 2,
+      scaleY: 2
+    });
     stage.add(layer);
 
     var rect1 = new Konva.Rect({
@@ -4108,6 +4111,13 @@ suite('Transformer', function() {
             height: 50,
             rotation: 0
           });
+          assert.deepEqual(newBox, {
+            x: 0,
+            y: 0,
+            width: 50,
+            height: 50,
+            rotation: 0
+          });
         } else {
           assert.deepEqual(oldBox, {
             x: 50,
@@ -4116,6 +4126,13 @@ suite('Transformer', function() {
             height: 50,
             rotation: 0
           });
+          assert.deepEqual(newBox, {
+            x: 50,
+            y: 50,
+            width: 50,
+            height: 50,
+            rotation: 0
+          });
         }
         return newBox;
       }
@@ -4123,10 +4140,10 @@ suite('Transformer', function() {
     layer.add(tr);
 
     tr._fitNodesInto({
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
+      x: 10,
+      y: 10,
+      width: 200,
+      height: 200,
       rotation: 0
     });
   });