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.
konvajs · Oct 30, 2023 · eeca597 · eeca597
1 parent 963119f
commit eeca597
Showing 1 changed file with 12 additions and 19 deletions.
diff --git 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]