From 196e43b5e5a403664ea2dd438c567684b926bd08 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 24 Aug 2024 11:28:05 +1000
Subject: [PATCH] fix(ui): extraneous entity preview updates

---
 .../konva/CanvasObjectRenderer.ts             | 12 ++++----
 .../controlLayers/konva/CanvasTransformer.ts  | 28 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
index b9d9dab456..f5b7b57404 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
@@ -27,6 +27,7 @@ import type {
 import { imageDTOToImageObject } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import type { GroupConfig } from 'konva/lib/Group';
+import { debounce } from 'lodash-es';
 import { atom } from 'nanostores';
 import type { Logger } from 'roarr';
 import { getImageDTO, uploadImage } from 'services/api/endpoints/images';
@@ -209,9 +210,7 @@ export class CanvasObjectRenderer {
       this.log.trace('Caching object group');
       this.konva.objectGroup.clearCache();
       this.konva.objectGroup.cache({ pixelRatio: 1 });
-      if (!this.parent.transformer.isPendingRectCalculation) {
-        this.parent.renderer.updatePreviewCanvas();
-      }
+      this.parent.renderer.updatePreviewCanvas();
     }
   };
 
@@ -542,7 +541,10 @@ export class CanvasObjectRenderer {
     return imageDTO;
   };
 
-  updatePreviewCanvas = () => {
+  updatePreviewCanvas = debounce(() => {
+    if (this.parent.transformer.isPendingRectCalculation) {
+      return;
+    }
     if (this.parent.transformer.pixelRect.width === 0 || this.parent.transformer.pixelRect.height === 0) {
       return;
     }
@@ -558,7 +560,7 @@ export class CanvasObjectRenderer {
       };
       this.$canvasCache.set({ rect, canvas });
     }
-  };
+  }, 300);
 
   cloneObjectGroup = (attrs?: GroupConfig): Konva.Group => {
     const clone = this.konva.objectGroup.clone();
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
index ac690bd2e8..1df7aa7532 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
@@ -602,7 +602,6 @@ export class CanvasTransformer {
 
     if (this.isPendingRectCalculation) {
       this.syncInteractionState();
-      this.parent.renderer.updatePreviewCanvas();
       return;
     }
 
@@ -613,20 +612,19 @@ export class CanvasTransformer {
       // The layer is fully transparent but has objects - reset it
       this.manager.stateApi.resetEntity({ entityIdentifier: this.parent.getEntityIdentifier() });
       this.syncInteractionState();
-      this.parent.renderer.updatePreviewCanvas();
-      return;
+    } else {
+      this.syncInteractionState();
+      this.update(this.parent.state.position, this.pixelRect);
+      const groupAttrs: Partial<GroupConfig> = {
+        x: this.parent.state.position.x + this.pixelRect.x,
+        y: this.parent.state.position.y + this.pixelRect.y,
+        offsetX: this.pixelRect.x,
+        offsetY: this.pixelRect.y,
+      };
+      this.parent.renderer.konva.objectGroup.setAttrs(groupAttrs);
+      this.parent.renderer.konva.bufferGroup.setAttrs(groupAttrs);
     }
 
-    this.syncInteractionState();
-    this.update(this.parent.state.position, this.pixelRect);
-    const groupAttrs: Partial<GroupConfig> = {
-      x: this.parent.state.position.x + this.pixelRect.x,
-      y: this.parent.state.position.y + this.pixelRect.y,
-      offsetX: this.pixelRect.x,
-      offsetY: this.pixelRect.y,
-    };
-    this.parent.renderer.konva.objectGroup.setAttrs(groupAttrs);
-    this.parent.renderer.konva.bufferGroup.setAttrs(groupAttrs);
     this.parent.renderer.updatePreviewCanvas();
   };
 
@@ -649,8 +647,8 @@ export class CanvasTransformer {
     if (!this.parent.renderer.needsPixelBbox()) {
       this.nodeRect = { ...rect };
       this.pixelRect = { ...rect };
-      this.isPendingRectCalculation = false;
       this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect }, 'Got bbox from client rect');
+      this.isPendingRectCalculation = false;
       this.updateBbox();
       return;
     }
@@ -674,8 +672,8 @@ export class CanvasTransformer {
           this.nodeRect = getEmptyRect();
           this.pixelRect = getEmptyRect();
         }
-        this.isPendingRectCalculation = false;
         this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect, extents }, `Got bbox from worker`);
+        this.isPendingRectCalculation = false;
         this.updateBbox();
       }
     );