From 96837bd349c24e5691cda4ec428d441bdb04cee6 Mon Sep 17 00:00:00 2001
From: Nathan Bruer <allada@chromium.org>
Date: Tue, 3 Jul 2018 10:03:19 -0700
Subject: [PATCH] Transformer changes to work properly with scaling

---
 src/shapes/Transformer.js | 40 +++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/shapes/Transformer.js b/src/shapes/Transformer.js
index 9bdcb5f6..6b5627fa 100644
--- a/src/shapes/Transformer.js
+++ b/src/shapes/Transformer.js
@@ -1,6 +1,9 @@
 (function(Konva) {
   'use strict';
 
+  var BASE_BOX_WIDTH = 10;
+  var BASE_BOX_HEIGHT = 10;
+
   var ATTR_CHANGE_LIST = [
     'resizeEnabledChange',
     'rotateHandlerOffsetChange'
@@ -304,10 +307,10 @@
         fill: 'white',
         strokeWidth: 1,
         name: name,
-        width: 10,
-        height: 10,
-        offsetX: 5,
-        offsetY: 5,
+        width: BASE_BOX_WIDTH,
+        height: BASE_BOX_HEIGHT,
+        offsetX: BASE_BOX_WIDTH / 2,
+        offsetY: BASE_BOX_HEIGHT / 2,
         dragDistance: 0
       });
       var self = this;
@@ -339,7 +342,7 @@
         // var dy = -pos.y + center.y;
 
         // var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
-        var scale = tr.getAbsoluteScale();
+        var scale = tr.getNode().getAbsoluteScale();
         // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
         var isMirrored = (scale.y * scale.x) < 0;
         var cursor = getCursor(name, rad, isMirrored);
@@ -655,6 +658,15 @@
     },
     update: function() {
       var attrs = this._getNodeRect();
+      var node = this.getNode();
+      var scale = {x: 1, y: 1};
+      if (node && node.getParent()) {
+        scale = node.getParent().getAbsoluteScale();
+      }
+      var invertedScale = {
+        x: 1 / scale.x,
+        y: 1 / scale.y
+      };
       var width = attrs.width;
       var height = attrs.height;
 
@@ -665,53 +677,65 @@
       this.findOne('.top-left').setAttrs({
         x: -padding,
         y: -padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
       });
       this.findOne('.top-center').setAttrs({
         x: width / 2,
         y: -padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
         x: width + padding,
         y: -padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
         x: -padding,
         y: height / 2,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
       });
       this.findOne('.middle-right').setAttrs({
         x: width + padding,
         y: height / 2,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
       });
       this.findOne('.bottom-left').setAttrs({
         x: -padding,
         y: height + padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
       });
       this.findOne('.bottom-center').setAttrs({
         x: width / 2,
         y: height + padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
         x: width + padding,
         y: height + padding,
+        scale: invertedScale,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
       });
 
+      var scaledRotateHandlerOffset =
+          -this.rotateHandlerOffset() * Math.abs(invertedScale.y);
       this.findOne('.rotater').setAttrs({
         x: width / 2,
-        y: -this.rotateHandlerOffset() * Konva.Util._sign(height),
+        y: scaledRotateHandlerOffset * Konva.Util._sign(height),
+        scale: invertedScale,
         visible: this.rotateEnabled()
       });
 
       this.findOne('.back').setAttrs({
-        width: width,
-        height: height,
+        width: width * scale.x,
+        height: height * scale.y,
+        scale: invertedScale,
         visible: this.lineEnabled()
       });
     },