From 0f66753aa144caf935e88c811078fc38d8b5afe4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:36:34 +1000
Subject: [PATCH] fix(ui): control adapter translate & scale

---
 .../konva/CanvasControlAdapter.ts             | 13 ++++++++--
 .../controlLayers/konva/CanvasManager.ts      |  1 +
 .../store/controlAdaptersReducers.ts          | 25 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlAdapter.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlAdapter.ts
index 40e4db2910..a69f4f3283 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlAdapter.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasControlAdapter.ts
@@ -43,11 +43,11 @@ export class CanvasControlAdapter {
     this.transformer.on('transformend', () => {
       this.manager.stateApi.onScaleChanged(
         { id: this.id, scale: this.group.scaleX(), x: this.group.x(), y: this.group.y() },
-        'layer'
+        'control_adapter'
       );
     });
     this.transformer.on('dragend', () => {
-      this.manager.stateApi.onPosChanged({ id: this.id, x: this.group.x(), y: this.group.y() }, 'layer');
+      this.manager.stateApi.onPosChanged({ id: this.id, x: this.group.x(), y: this.group.y() }, 'control_adapter');
     });
     this.layer.add(this.transformer);
 
@@ -57,6 +57,15 @@ export class CanvasControlAdapter {
 
   async render(controlAdapterState: ControlAdapterEntity) {
     this.controlAdapterState = controlAdapterState;
+
+    // Update the layer's position and listening state
+    this.group.setAttrs({
+      x: controlAdapterState.x,
+      y: controlAdapterState.y,
+      scaleX: 1,
+      scaleY: 1,
+    });
+
     const imageObject = controlAdapterState.processedImageObject ?? controlAdapterState.imageObject;
 
     let didDraw = false;
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
index 9af9613239..22d5413c8a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
@@ -249,6 +249,7 @@ export class CanvasManager {
     if (
       this.isFirstRender ||
       state.controlAdapters.entities !== this.prevState.controlAdapters.entities ||
+      state.tool.selected !== this.prevState.tool.selected ||
       state.selectedEntityIdentifier?.id !== this.prevState.selectedEntityIdentifier?.id
     ) {
       log.debug('Rendering control adapters');
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlAdaptersReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlAdaptersReducers.ts
index 2c1750a5c1..28402f4861 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlAdaptersReducers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlAdaptersReducers.ts
@@ -15,6 +15,7 @@ import type {
   ControlNetData,
   Filter,
   ProcessorConfig,
+  ScaleChangedArg,
   T2IAdapterConfig,
   T2IAdapterData,
 } from './types';
@@ -72,6 +73,30 @@ export const controlAdaptersReducers = {
     ca.x = x;
     ca.y = y;
   },
+  caScaled: (state, action: PayloadAction<ScaleChangedArg>) => {
+    const { id, scale, x, y } = action.payload;
+    const ca = selectCA(state, id);
+    if (!ca) {
+      return;
+    }
+    if (ca.imageObject) {
+      ca.imageObject.x *= scale;
+      ca.imageObject.y *= scale;
+      ca.imageObject.height *= scale;
+      ca.imageObject.width *= scale;
+    }
+
+    if (ca.processedImageObject) {
+      ca.processedImageObject.x *= scale;
+      ca.processedImageObject.y *= scale;
+      ca.processedImageObject.height *= scale;
+      ca.processedImageObject.width *= scale;
+    }
+    ca.x = x;
+    ca.y = y;
+    ca.bboxNeedsUpdate = true;
+    state.layers.imageCache = null;
+  },
   caBboxChanged: (state, action: PayloadAction<{ id: string; bbox: IRect | null }>) => {
     const { id, bbox } = action.payload;
     const ca = selectCA(state, id);