Fix some bugs when Konva.Transformer has padding > 0

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 4.0.11 - 2019-09-17
+
+* Fix some bugs when `Konva.Transformer` has `padding > 0`
+
 ## 4.0.10 - 2019-09-10
 
 * Fix drag position handling

src/shapes/Transformer.ts

@@ -395,7 +395,7 @@ export class Transformer extends Group {
         if (tr.rotateEnabled()) {
           ctx.lineTo(
             this.width() / 2,
-            -tr.rotateAnchorOffset() * Util._sign(this.height())
+            -tr.rotateAnchorOffset() * Util._sign(this.height()) - padding
           );
         }
 
@@ -411,6 +411,7 @@ export class Transformer extends Group {
     var attrs = this._getNodeRect();
     var width = attrs.width;
     var height = attrs.height;
+
     var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
     this.sin = Math.abs(height / hypotenuse);
     this.cos = Math.abs(width / hypotenuse);
@@ -448,13 +449,21 @@ export class Transformer extends Group {
 
     var keepProportion = this.keepRatio() || e.shiftKey;
 
+    var padding = this.padding();
+
     // console.log(keepProportion);
 
     if (this._movingAnchorName === 'top-left') {
       if (keepProportion) {
         newHypotenuse = Math.sqrt(
-          Math.pow(this.findOne('.bottom-right').x() - anchorNode.x(), 2) +
+          Math.pow(
-            Math.pow(this.findOne('.bottom-right').y() - anchorNode.y(), 2)
+            this.findOne('.bottom-right').x() - anchorNode.x() - padding * 2,
+            2
+          ) +
+            Math.pow(
+              this.findOne('.bottom-right').y() - anchorNode.y() - padding * 2,
+              2
+            )
         );
 
         var reverseX =
@@ -470,16 +479,26 @@ export class Transformer extends Group {
         x = newHypotenuse * this.cos * reverseX;
         y = newHypotenuse * this.sin * reverseY;
 
-        this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
+        this.findOne('.top-left').x(
-        this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
+          this.findOne('.bottom-right').x() - x - padding * 2
+        );
+        this.findOne('.top-left').y(
+          this.findOne('.bottom-right').y() - y - padding * 2
+        );
       }
     } else if (this._movingAnchorName === 'top-center') {
       this.findOne('.top-left').y(anchorNode.y());
     } else if (this._movingAnchorName === 'top-right') {
       if (keepProportion) {
         newHypotenuse = Math.sqrt(
-          Math.pow(this.findOne('.bottom-left').x() - anchorNode.x(), 2) +
+          Math.pow(
-            Math.pow(this.findOne('.bottom-left').y() - anchorNode.y(), 2)
+            anchorNode.x() - this.findOne('.bottom-left').x() - padding * 2,
+            2
+          ) +
+            Math.pow(
+              this.findOne('.bottom-left').y() - anchorNode.y() - padding * 2,
+              2
+            )
         );
 
         var reverseX =
@@ -495,8 +514,10 @@ export class Transformer extends Group {
         x = newHypotenuse * this.cos * reverseX;
         y = newHypotenuse * this.sin * reverseY;
 
-        this.findOne('.top-right').x(x);
+        this.findOne('.top-right').x(x + padding);
-        this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
+        this.findOne('.top-right').y(
+          this.findOne('.bottom-left').y() - y - padding * 2
+        );
       }
       var pos = anchorNode.position();
 
@@ -509,10 +530,18 @@ export class Transformer extends Group {
     } else if (this._movingAnchorName === 'bottom-left') {
       if (keepProportion) {
         newHypotenuse = Math.sqrt(
-          Math.pow(this.findOne('.top-right').x() - anchorNode.x(), 2) +
+          Math.pow(
-            Math.pow(this.findOne('.top-right').y() - anchorNode.y(), 2)
+            this.findOne('.top-right').x() - anchorNode.x() - padding * 2,
+            2
+          ) +
+            Math.pow(
+              anchorNode.y() - this.findOne('.top-right').y() - padding * 2,
+              2
+            )
         );
 
+        console.error(newHypotenuse);
+
         var reverseX =
           this.findOne('.top-right').x() < this.findOne('.bottom-left').x()
             ? -1
@@ -526,8 +555,10 @@ export class Transformer extends Group {
         x = newHypotenuse * this.cos * reverseX;
         y = newHypotenuse * this.sin * reverseY;
 
-        this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
+        this.findOne('.bottom-left').x(
-        this.findOne('.bottom-left').y(y);
+          this.findOne('.top-right').x() - x - padding * 2
+        );
+        this.findOne('.bottom-left').y(y + padding);
       }
 
       pos = anchorNode.position();
@@ -539,8 +570,8 @@ export class Transformer extends Group {
     } else if (this._movingAnchorName === 'bottom-right') {
       if (keepProportion) {
         newHypotenuse = Math.sqrt(
-          Math.pow(this.findOne('.bottom-right').x(), 2) +
+          Math.pow(this.findOne('.bottom-right').x() - padding, 2) +
-            Math.pow(this.findOne('.bottom-right').y(), 2)
+            Math.pow(this.findOne('.bottom-right').y() - padding, 2)
         );
 
         var reverseX =
@@ -556,11 +587,10 @@ export class Transformer extends Group {
         x = newHypotenuse * this.cos * reverseX;
         y = newHypotenuse * this.sin * reverseY;
 
-        this.findOne('.bottom-right').x(x);
+        this.findOne('.bottom-right').x(x + padding);
-        this.findOne('.bottom-right').y(y);
+        this.findOne('.bottom-right').y(y + padding);
       }
     } else if (this._movingAnchorName === 'rotater') {
-      var padding = this.padding();
       var attrs = this._getNodeRect();
       x = anchorNode.x() - attrs.width / 2;
       y = -anchorNode.y() + attrs.height / 2;
@@ -629,21 +659,15 @@ export class Transformer extends Group {
       return;
     }
 
-    var absPos = this.findOne('.top-left').getAbsolutePosition(
-      this.getParent()
-    );
-
     var centeredScaling = this.centeredScaling() || e.altKey;
     if (centeredScaling) {
       var topLeft = this.findOne('.top-left');
       var bottomRight = this.findOne('.bottom-right');
-      var topOffsetX = topLeft.x();
+      var topOffsetX = topLeft.x() + padding;
-      var topOffsetY = topLeft.y();
+      var topOffsetY = topLeft.y() + padding;
 
-      var bottomOffsetX = this.getWidth() - bottomRight.x();
+      var bottomOffsetX = this.getWidth() - bottomRight.x() + padding;
-      var bottomOffsetY = this.getHeight() - bottomRight.y();
+      var bottomOffsetY = this.getHeight() - bottomRight.y() + padding;
-
-      // console.log(topOffsetX, topOffsetY, bottomOffsetX, bottomOffsetY);
 
       bottomRight.move({
         x: -topOffsetX,
@@ -654,10 +678,12 @@ export class Transformer extends Group {
         x: bottomOffsetX,
         y: bottomOffsetY
       });
-
-      absPos = topLeft.getAbsolutePosition(this.getParent());
     }
 
+    var absPos = this.findOne('.top-left').getAbsolutePosition(
+      this.getParent()
+    );
+
     x = absPos.x;
     y = absPos.y;
     var width =
@@ -666,8 +692,6 @@ export class Transformer extends Group {
     var height =
       this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
 
-    // console.log(x, y, width, height);
-
     this._fitNodeInto(
       {
         x: x + this.offsetX(),
@@ -696,7 +720,7 @@ export class Transformer extends Group {
     }
   }
   _fitNodeInto(newAttrs, evt) {
-    // waring! in this attrs padding may be included
+    // waring! in this attrs padding is included
     var boundBoxFunc = this.boundBoxFunc();
     if (boundBoxFunc) {
       var oldAttrs = this._getNodeRect();
@@ -827,7 +851,7 @@ export class Transformer extends Group {
       -this.rotateAnchorOffset() * Math.abs(invertedScale.y);
     this.findOne('.rotater').setAttrs({
       x: width / 2,
-      y: scaledRotateAnchorOffset * Util._sign(height),
+      y: scaledRotateAnchorOffset * Util._sign(height) - padding,
       scale: invertedScale,
       visible: this.rotateEnabled()
     });

test/unit/shapes/Transformer-test.js

@@ -884,7 +884,7 @@ suite('Transformer', function() {
     assert.equal(rect.height(), 100);
   });
 
-  test.skip('test padding + keep ratio', function() {
+  test.only('test padding + keep ratio', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -892,22 +892,33 @@ suite('Transformer', function() {
     const rect = new Konva.Rect({
       x: 50,
       y: 50,
-      width: 200,
+      width: 180,
-      height: 10,
+      height: 50,
-      fill: 'red'
+      fill: 'red',
+      draggable: true
     });
     layer.add(rect);
 
     var tr = new Konva.Transformer({
       node: rect,
-      padding: 50,
+      padding: 40,
       keepRatio: true
     });
     layer.add(tr);
     layer.draw();
 
+    var width = rect.width() * rect.scaleX();
+    var height = rect.height() * rect.scaleY();
+
+    rect.on('transformstart transform', () => {
+      var width = rect.width() * rect.scaleX();
+      var height = rect.height() * rect.scaleY();
+    });
+
+    throw '';
+
     stage.simulateMouseDown({
-      x: 200,
+      x: 250,
       y: 150
     });
     var top = stage.content.getBoundingClientRect().top;