From ba5cf07ab89d2729d7eb2ea09564a6010165e7e5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Jul 2024 17:46:05 +1000
Subject: [PATCH] fix(ui): transforming when axes flipped

---
 .../controlLayers/konva/CanvasLayer.ts        | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
index 8fa63c6a0b..19adc309cb 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
@@ -554,15 +554,14 @@ export class CanvasLayer {
   }
 
   async resetScale() {
-    this.konva.objectGroup.scaleX(1);
-    this.konva.objectGroup.scaleX(1);
-    this.konva.objectGroup.rotation(0);
-    this.konva.bbox.scaleX(1);
-    this.konva.bbox.scaleX(1);
-    this.konva.bbox.rotation(0);
-    this.konva.interactionRect.scaleX(1);
-    this.konva.interactionRect.scaleX(1);
-    this.konva.interactionRect.rotation(0);
+    const attrs = {
+      scaleX: 1,
+      scaleY: 1,
+      rotation: 0,
+    };
+    this.konva.objectGroup.setAttrs(attrs);
+    this.konva.bbox.setAttrs(attrs);
+    this.konva.interactionRect.setAttrs(attrs);
   }
 
   async applyTransform() {
@@ -570,11 +569,14 @@ export class CanvasLayer {
 
     this.isTransforming = false;
     const objectGroupClone = this.konva.objectGroup.clone();
-    const blob = await konvaNodeToBlob(objectGroupClone, objectGroupClone.getClientRect());
+    const interactionRectClone = this.konva.interactionRect.clone();
+    const rect = interactionRectClone.getClientRect();
+    const blob = await konvaNodeToBlob(objectGroupClone, rect);
+    console.log('transform rect', rect);
     previewBlob(blob, 'transformed layer');
     const imageDTO = await uploadImage(blob, `${this.id}_transform.png`, 'other', true, true);
     const { dispatch } = getStore();
-    dispatch(layerRasterized({ id: this.id, imageDTO, position: this.konva.interactionRect.position() }));
+    dispatch(layerRasterized({ id: this.id, imageDTO, position: { x: rect.x, y: rect.y } }));
     this.isTransforming = false;
     this.resetScale();
   }