From eeca597a0fd7e16b1dfeeaae18086033ac4f675c Mon Sep 17 00:00:00 2001
From: Mike <mike@madebymike.com.au>
Date: Mon, 30 Oct 2023 08:40:54 +0000
Subject: [PATCH 1/3] Fix position jitter when flip enabled false

Rather than disabling the exiting updates when flipEnabled is false I've updated to translate and set scale to an absolute value on the new transform.

This appears to solve the jitter and work otherwise the same as the existing method.
---
 src/shapes/Transformer.ts | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index cb51c97dc..72090f94c 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -973,7 +973,6 @@ export class Transformer extends Group {
       return;
     }
 
-    const allowNegativeScale = this.flipEnabled();
     var t = new Transform();
     t.rotate(Konva.getAngle(this.rotation()));
     if (
@@ -991,10 +990,6 @@ export class Transformer extends Group {
       this._movingAnchorName = this._movingAnchorName.replace('left', 'right');
       this._anchorDragOffset.x -= offset.x;
       this._anchorDragOffset.y -= offset.y;
-      if (!allowNegativeScale) {
-        this.update();
-        return;
-      }
     } else if (
       this._movingAnchorName &&
       newAttrs.width < 0 &&
@@ -1008,10 +1003,6 @@ export class Transformer extends Group {
       this._anchorDragOffset.x -= offset.x;
       this._anchorDragOffset.y -= offset.y;
       newAttrs.width += this.padding() * 2;
-      if (!allowNegativeScale) {
-        this.update();
-        return;
-      }
     }
     if (
       this._movingAnchorName &&
@@ -1028,10 +1019,6 @@ export class Transformer extends Group {
       this._anchorDragOffset.x -= offset.x;
       this._anchorDragOffset.y -= offset.y;
       newAttrs.height += this.padding() * 2;
-      if (!allowNegativeScale) {
-        this.update();
-        return;
-      }
     } else if (
       this._movingAnchorName &&
       newAttrs.height < 0 &&
@@ -1045,10 +1032,6 @@ export class Transformer extends Group {
       this._anchorDragOffset.x -= offset.x;
       this._anchorDragOffset.y -= offset.y;
       newAttrs.height += this.padding() * 2;
-      if (!allowNegativeScale) {
-        this.update();
-        return;
-      }
     }
 
     if (this.boundBoxFunc()) {
@@ -1073,9 +1056,19 @@ export class Transformer extends Group {
     oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
 
     const newTr = new Transform();
-    newTr.translate(newAttrs.x, newAttrs.y);
     newTr.rotate(newAttrs.rotation);
-    newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
+    const newScaleX = newAttrs.width / baseSize;
+    const newScaleY = newAttrs.height / baseSize;
+    if (this.flipEnabled() === false) {
+      newTr.translate(
+        newAttrs.x + (newAttrs.width < 0 ? newAttrs.width : 0),
+        newAttrs.y + (newAttrs.height < 0 ? newAttrs.height : 0)
+      );
+      newTr.scale(Math.abs(newScaleX), Math.abs(newScaleY));
+    } else {
+      newTr.translate(newAttrs.x, newAttrs.y);
+      newTr.scale(newScaleX, newScaleY);
+    }
 
     // now lets think we had [old transform] and n ow we have [new transform]
     // Now, the questions is: how can we transform "parent" to go from [old transform] into [new transform]

From 63924bceee247ad2aacedc2861f0c15edcb6800e Mon Sep 17 00:00:00 2001
From: Mike <mike@madebymike.com.au>
Date: Mon, 30 Oct 2023 21:28:41 +0000
Subject: [PATCH 2/3] Change order of rotation

---
 src/shapes/Transformer.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index 72090f94c..b79ff0e4f 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -1056,17 +1056,19 @@ export class Transformer extends Group {
     oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
 
     const newTr = new Transform();
-    newTr.rotate(newAttrs.rotation);
     const newScaleX = newAttrs.width / baseSize;
     const newScaleY = newAttrs.height / baseSize;
+
     if (this.flipEnabled() === false) {
       newTr.translate(
         newAttrs.x + (newAttrs.width < 0 ? newAttrs.width : 0),
         newAttrs.y + (newAttrs.height < 0 ? newAttrs.height : 0)
       );
+      newTr.rotate(newAttrs.rotation);
       newTr.scale(Math.abs(newScaleX), Math.abs(newScaleY));
     } else {
       newTr.translate(newAttrs.x, newAttrs.y);
+      newTr.rotate(newAttrs.rotation);
       newTr.scale(newScaleX, newScaleY);
     }
 

From 4224b41c5a3f8117006607aaa23abd6736bb7d9d Mon Sep 17 00:00:00 2001
From: Mike <mike@madebymike.com.au>
Date: Mon, 30 Oct 2023 22:46:38 +0000
Subject: [PATCH 3/3] Split translation to make flip work better with rotated
 rects

---
 src/shapes/Transformer.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index b79ff0e4f..959d921ed 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -1060,11 +1060,12 @@ export class Transformer extends Group {
     const newScaleY = newAttrs.height / baseSize;
 
     if (this.flipEnabled() === false) {
+      newTr.translate(newAttrs.x, newAttrs.y);
+      newTr.rotate(newAttrs.rotation);
       newTr.translate(
-        newAttrs.x + (newAttrs.width < 0 ? newAttrs.width : 0),
-        newAttrs.y + (newAttrs.height < 0 ? newAttrs.height : 0)
+        newAttrs.width < 0 ? newAttrs.width : 0,
+        newAttrs.height < 0 ? newAttrs.height : 0
       );
-      newTr.rotate(newAttrs.rotation);
       newTr.scale(Math.abs(newScaleX), Math.abs(newScaleY));
     } else {
       newTr.translate(newAttrs.x, newAttrs.y);