From c62ede5878d8b4a8ec4fbb9018e9e849519d0473 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 23 Aug 2024 20:24:40 +1000
Subject: [PATCH] fix(ui): filter preview offset

---
 .../features/controlLayers/konva/CanvasFilterModule.ts    | 3 ++-
 .../features/controlLayers/konva/CanvasObjectRenderer.ts  | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts
index 3f1274c5306..a0900210487 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts
@@ -79,7 +79,7 @@ export class CanvasFilterModule {
       this.imageState = imageDTOToImageObject(imageDTO);
       adapter.renderer.clearBuffer();
 
-      await adapter.renderer.setBuffer(this.imageState);
+      await adapter.renderer.setBuffer(this.imageState, true);
 
       adapter.renderer.hideObjects();
       this.$isProcessing.set(false);
@@ -131,6 +131,7 @@ export class CanvasFilterModule {
     if (adapter) {
       adapter.renderer.clearBuffer();
       adapter.renderer.showObjects();
+      adapter.transformer.updatePosition();
       this.$adapter.set(null);
     }
     this.imageState = null;
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
index 6d4d6a017f6..b9d9dab456f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
@@ -390,12 +390,18 @@ export class CanvasObjectRenderer {
   /**
    * Sets the buffer object state to render.
    * @param objectState The object state to set as the buffer.
+   * @param resetBufferOffset Whether to reset the buffer's offset to 0,0. This is necessary when previewing filters.
+   * When previewing a filter, the buffer object is an image of the same size as the entity, so it should be rendered
+   * at the top-left corner of the entity.
    * @returns A promise that resolves to a boolean, indicating if the object was rendered.
    */
-  setBuffer = async (objectState: AnyObjectState): Promise<boolean> => {
+  setBuffer = async (objectState: AnyObjectState, resetBufferOffset: boolean = false): Promise<boolean> => {
     this.log.trace('Setting buffer');
 
     this.bufferState = objectState;
+    if (resetBufferOffset) {
+      this.konva.bufferGroup.offset({ x: 0, y: 0 });
+    }
     return await this.renderBufferObject();
   };