fix some Konva.Transformer bugs

CHANGELOG.md

@@ -6,7 +6,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * Typescript fixes
-* Experimental pointer events support. Do `Konva._pointerEventsEnabled = true;` to enable 
+* Experimental pointer events support. Do `Konva._pointerEventsEnabled = true;` to enable
+* Fix some `Konva.Transformer` bugs.
 
 ## [3.2.6][2019-05-09]
 

src/shapes/Transformer.ts

@@ -404,8 +404,8 @@ export class Transformer extends Group {
     var width = attrs.width;
     var height = attrs.height;
     var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
-    this.sin = height / hypotenuse;
-    this.cos = width / hypotenuse;
+    this.sin = Math.abs(height / hypotenuse);
+    this.cos = Math.abs(width / hypotenuse);
 
     window.addEventListener('mousemove', this._handleMouseMove);
     window.addEventListener('touchmove', this._handleMouseMove);
@@ -449,8 +449,13 @@ export class Transformer extends Group {
             Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
         );
 
-        x = newHypotenuse * this.cos;
-        y = newHypotenuse * this.sin;
+        var reverse =
+          this.findOne('.top-left').x() > this.findOne('.bottom-right').x()
+            ? -1
+            : 1;
+
+        x = newHypotenuse * this.cos * reverse;
+        y = newHypotenuse * this.sin * reverse;
 
         this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
         this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
@@ -464,8 +469,13 @@ export class Transformer extends Group {
             Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
         );
 
-        x = newHypotenuse * this.cos;
-        y = newHypotenuse * this.sin;
+        var reverse =
+          this.findOne('.top-right').x() < this.findOne('.top-left').x()
+            ? -1
+            : 1;
+
+        x = newHypotenuse * this.cos * reverse;
+        y = newHypotenuse * this.sin * reverse;
 
         this.findOne('.top-right').x(x);
         this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
@@ -485,8 +495,13 @@ export class Transformer extends Group {
             Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
         );
 
-        x = newHypotenuse * this.cos;
-        y = newHypotenuse * this.sin;
+        var reverse =
+          this.findOne('.top-right').x() < this.findOne('.bottom-left').x()
+            ? -1
+            : 1;
+
+        x = newHypotenuse * this.cos * reverse;
+        y = newHypotenuse * this.sin * reverse;
 
         this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
         this.findOne('.bottom-left').y(y);
@@ -505,8 +520,13 @@ export class Transformer extends Group {
             Math.pow(this.findOne('.bottom-right').y(), 2)
         );
 
-        x = newHypotenuse * this.cos;
-        y = newHypotenuse * this.sin;
+        var reverse =
+          this.findOne('.top-left').x() > this.findOne('.bottom-right').x()
+            ? -1
+            : 1;
+
+        x = newHypotenuse * this.cos * reverse;
+        y = newHypotenuse * this.sin * reverse;
 
         this.findOne('.bottom-right').x(x);
         this.findOne('.bottom-right').y(y);

test/unit/shapes/Transformer-test.js

@@ -932,6 +932,58 @@ suite('Transformer', function() {
     assert.equal(rect.scaleY(), 1);
   });
 
+  test.only('keep ratio should allow negative scaling', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 150,
+      y: 10,
+      draggable: true,
+      width: 50,
+      height: 50,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+    layer.draw();
+
+    var anchor = tr.findOne('.top-right');
+    var pos = anchor.getAbsolutePosition();
+
+    stage.simulateMouseDown({
+      x: pos.x,
+      y: pos.y
+    });
+    var box = stage.content.getBoundingClientRect();
+    // debugger;
+    tr._handleMouseMove({
+      target: anchor,
+      clientX: box.left + pos.x - 100,
+      clientY: box.top + pos.y + 100
+    });
+
+    // here is duplicate, because transformer is listening window events
+    tr._handleMouseUp({
+      clientX: box.left + pos.x - 100,
+      clientY: box.top + pos.y + 100
+    });
+    stage.simulateMouseUp({
+      x: pos.x - 100,
+      y: pos.y + 100
+    });
+
+    assert.equal(rect.scaleX(), -1);
+    assert.equal(rect.scaleY(), -1);
+
+    throw '';
+  });
+
   test('can add padding with rotation', function() {
     var stage = addStage();
     var layer = new Konva.Layer();