diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts index 3f1274c530..a090021048 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 6d4d6a017f..b9d9dab456 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 => { + setBuffer = async (objectState: AnyObjectState, resetBufferOffset: boolean = false): Promise => { this.log.trace('Setting buffer'); this.bufferState = objectState; + if (resetBufferOffset) { + this.konva.bufferGroup.offset({ x: 0, y: 0 }); + } return await this.renderBufferObject(); };