From e032ab117917cfab8a8850d12166d85d67515b32 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:47:23 +1000
Subject: [PATCH] fix(ui): ensure compositing rect is rendered correctly

This fixes an issue uncovered by the previous commit in which we do not exit filter/select-object on save-as.
---
 .../CanvasEntity/CanvasEntityAdapterBase.ts   | 16 +++++++++++
 .../CanvasEntityObjectRenderer.ts             | 28 ++++++++++++++-----
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts
index 56aa3c7b87..4f638ce332 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts
@@ -529,6 +529,22 @@ export abstract class CanvasEntityAdapterBase<
     }
     this.log.trace(isVisible ? 'Showing' : 'Hiding');
     this.konva.layer.visible(isVisible);
+    if (isVisible) {
+      /**
+       * When a layer is created and initially not visible, its compositing rect won't be set up properly. Then, when
+       * we show it in this method, it the layer will not render as it should.
+       *
+       * For example, if an inpaint mask is created via select-object while the isolated layer preview feature is
+       * enabled, it will be hidden on its first render, and the compositing rect will not be sized/positioned/filled.
+       * When next show the layer, the its underlying objects will be rendered directly, without the compositing rect
+       * providing the correct fill.
+       *
+       * The simplest way to ensure this doesn't happen is to always update the compositing rect when showing the layer.
+       */
+      this.renderer.updateCompositingRectSize();
+      this.renderer.updateCompositingRectPosition();
+      this.renderer.updateCompositingRectFill();
+    }
     this.renderer.syncKonvaCache();
   };
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts
index 222dcba555..10ae1831b3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts
@@ -223,10 +223,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       return;
     }
 
-    this.log.trace('Updating compositing rect fill');
+    if (
+      !this.konva.compositing ||
+      (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance')
+    ) {
+      return;
+    }
 
-    assert(this.konva.compositing, 'Missing compositing rect');
-    assert(this.parent.state.type === 'inpaint_mask' || this.parent.state.type === 'regional_guidance');
+    this.log.trace('Updating compositing rect fill');
 
     const fill = this.parent.state.fill;
 
@@ -252,9 +256,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       return;
     }
 
-    this.log.trace('Updating compositing rect size');
+    if (
+      !this.konva.compositing ||
+      (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance')
+    ) {
+      return;
+    }
 
-    assert(this.konva.compositing, 'Missing compositing rect');
+    this.log.trace('Updating compositing rect size');
 
     const scale = this.manager.stage.unscale(1);
 
@@ -274,9 +283,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       return;
     }
 
-    this.log.trace('Updating compositing rect position');
+    if (
+      !this.konva.compositing ||
+      (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance')
+    ) {
+      return;
+    }
 
-    assert(this.konva.compositing, 'Missing compositing rect');
+    this.log.trace('Updating compositing rect position');
 
     this.konva.compositing.rect.setAttrs({
       ...this.manager.stage.getScaledStageRect(),