From 3f1fba0f35fe1e005c6ced8cf43b8b7482611329 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 19 Jul 2024 13:20:29 +1000
Subject: [PATCH] fix(ui): transform tool seems to be working

---
 .../controlLayers/konva/CanvasLayer.ts        | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
index e3073df65b..0420700a9e 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
@@ -76,31 +76,31 @@ export class CanvasLayer {
     this.konva.group.add(this.konva.interactionRect);
     this.konva.group.add(this.konva.bbox);
 
-    this.konva.transformer.on('transform', () => {
-      console.log(this.konva.interactionRect.position());
-      this.konva.objectGroup.setAttrs({
-        scaleX: this.konva.interactionRect.scaleX(),
-        scaleY: this.konva.interactionRect.scaleY(),
-        // rotation: this.konva.interactionRect.rotation(),
-        x: this.konva.interactionRect.x(),
-        t: this.konva.interactionRect.y(),
-      });
-    });
+    // this.konva.transformer.on('transform', () => {
+    //   console.log(this.konva.interactionRect.position());
+    //   this.konva.objectGroup.setAttrs({
+    //     scaleX: this.konva.interactionRect.scaleX(),
+    //     scaleY: this.konva.interactionRect.scaleY(),
+    //     // rotation: this.konva.interactionRect.rotation(),
+    //     x: this.konva.interactionRect.x(),
+    //     t: this.konva.interactionRect.y(),
+    //   });
+    // });
     this.konva.transformer.on('transformend', () => {
       console.log(this.bbox);
       this.bbox = {
-        x: this.konva.interactionRect.x(),
-        y: this.konva.interactionRect.y(),
-        width: this.konva.interactionRect.width() * this.konva.interactionRect.scaleX(),
-        height: this.konva.interactionRect.height() * this.konva.interactionRect.scaleY(),
+        x: this.bbox.x * this.konva.group.scaleX(),
+        y: this.bbox.y * this.konva.group.scaleY(),
+        width: this.bbox.width * this.konva.group.scaleX(),
+        height: this.bbox.height * this.konva.group.scaleY(),
       };
       console.log(this.bbox);
       this.renderBbox();
       this.manager.stateApi.onScaleChanged(
         {
           id: this.id,
-          scale: this.konva.objectGroup.scaleX(),
-          position: { x: this.konva.objectGroup.x(), y: this.konva.objectGroup.y() },
+          scale: this.konva.group.scaleX(),
+          position: { x: this.konva.group.x(), y: this.konva.group.y() },
         },
         'layer'
       );
@@ -297,8 +297,7 @@ export class CanvasLayer {
         // this.konva.objectGroup.cache();
       }
       // Activate the transformer
-      this.konva.transformer.nodes([this.konva.interactionRect]);
-      this.konva.transformer.enabledAnchors(['top-left', 'top-right', 'bottom-left', 'bottom-right']);
+      this.konva.transformer.nodes([this.konva.group]);
       this.konva.transformer.forceUpdate();
       this.konva.transformer.visible(true);
     } else if (selectedTool === 'move') {
@@ -308,8 +307,7 @@ export class CanvasLayer {
         // this.konva.objectGroup.cache();
       }
       // Activate the transformer
-      this.konva.transformer.nodes([this.konva.interactionRect]);
-      this.konva.transformer.enabledAnchors([]);
+      this.konva.transformer.nodes([]);
       this.konva.transformer.forceUpdate();
       this.konva.transformer.visible(false);
     } else if (isSelected) {