fix(ui): control adapter translate & scale

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;

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');

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);