From 7c21819d20489079caa3a0cebf06d822cbfa4f31 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:35:04 +1000
Subject: [PATCH] fix(ui): move CanvasImage's konva image to correct object

---
 .../controlLayers/konva/CanvasImage.ts        | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
index f88ecfd93b..91650fef60 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
@@ -23,9 +23,9 @@ export class CanvasImage {
   konva: {
     group: Konva.Group;
     placeholder: { group: Konva.Group; rect: Konva.Rect; text: Konva.Text };
+    image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
   };
   imageName: string | null;
-  image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
   isLoading: boolean;
   isError: boolean;
 
@@ -63,13 +63,13 @@ export class CanvasImage {
           listening: false,
         }),
       },
+      image: null,
     };
     this.konva.placeholder.group.add(this.konva.placeholder.rect);
     this.konva.placeholder.group.add(this.konva.placeholder.text);
     this.konva.group.add(this.konva.placeholder.group);
 
     this.imageName = null;
-    this.image = null;
     this.isLoading = false;
     this.isError = false;
     this.state = state;
@@ -82,7 +82,7 @@ export class CanvasImage {
       this.isLoading = true;
       this.konva.group.visible(true);
 
-      if (!this.image) {
+      if (!this.konva.image) {
         this.konva.placeholder.group.visible(false);
         this.konva.placeholder.text.text(t('common.loadingImage', 'Loading Image'));
       }
@@ -91,27 +91,27 @@ export class CanvasImage {
       assert(imageDTO !== null, 'imageDTO is null');
       const imageEl = await loadImage(imageDTO.image_url);
 
-      if (this.image) {
-        this.image.setAttrs({
+      if (this.konva.image) {
+        this.konva.image.setAttrs({
           image: imageEl,
         });
       } else {
-        this.image = new Konva.Image({
+        this.konva.image = new Konva.Image({
           name: CanvasImage.IMAGE_NAME,
           listening: false,
           image: imageEl,
           width: this.state.width,
           height: this.state.height,
         });
-        this.konva.group.add(this.image);
+        this.konva.group.add(this.konva.image);
       }
 
       if (this.state.filters.length > 0) {
-        this.image.cache();
-        this.image.filters(this.state.filters.map((f) => FILTER_MAP[f]));
+        this.konva.image.cache();
+        this.konva.image.filters(this.state.filters.map((f) => FILTER_MAP[f]));
       } else {
-        this.image.clearCache();
-        this.image.filters([]);
+        this.konva.image.clearCache();
+        this.konva.image.filters([]);
       }
 
       this.imageName = imageName;
@@ -119,7 +119,7 @@ export class CanvasImage {
       this.isError = false;
       this.konva.placeholder.group.visible(false);
     } catch {
-      this.image?.visible(false);
+      this.konva.image?.visible(false);
       this.imageName = null;
       this.isLoading = false;
       this.isError = true;
@@ -136,13 +136,13 @@ export class CanvasImage {
       if (this.state.image.name !== image.name || force) {
         await this.updateImageSource(image.name);
       }
-      this.image?.setAttrs({ x, y, width, height });
+      this.konva.image?.setAttrs({ x, y, width, height });
       if (filters.length > 0) {
-        this.image?.cache();
-        this.image?.filters(filters.map((f) => FILTER_MAP[f]));
+        this.konva.image?.cache();
+        this.konva.image?.filters(filters.map((f) => FILTER_MAP[f]));
       } else {
-        this.image?.clearCache();
-        this.image?.filters([]);
+        this.konva.image?.clearCache();
+        this.konva.image?.filters([]);
       }
       this.konva.placeholder.rect.setAttrs({ width, height });
       this.konva.placeholder.text.setAttrs({ width, height, fontSize: width / 16 });