From dcb4a40741bfaf4a4956fd2b0d7ac421fd93ae35 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:36:08 +1000
Subject: [PATCH] fix(ui): regional prompts brush preview wonkiness

---
 .../components/StageComponent.tsx             |  4 ++--
 .../regionalPrompts/util/renderers.ts         | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
index 3b37665922..c41afb749c 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
@@ -19,7 +19,7 @@ import { useCallback, useLayoutEffect } from 'react';
 const log = logger('regionalPrompts');
 const $stage = atom<Konva.Stage | null>(null);
 const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
-  return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color;
+  return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color ?? null;
 });
 
 const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElement | null) => {
@@ -109,7 +109,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
   }, [stage, width, height, wrapper]);
 
   useLayoutEffect(() => {
-    if (!stage || !cursorPosition || !selectedLayerColor) {
+    if (!stage) {
       return;
     }
     renderBrushPreview(stage, state.tool, selectedLayerColor, cursorPosition, state.brushSize);
diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
index b7c03efbe3..73189f4bfb 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
@@ -37,12 +37,13 @@ const mapId = (object: { id: string }) => object.id;
 export const renderBrushPreview = (
   stage: Konva.Stage,
   tool: Tool,
-  color: RgbColor,
-  cursorPos: Vector2d,
+  color: RgbColor | null,
+  cursorPos: Vector2d | null,
   brushSize: number
 ) => {
+  const layerCount = stage.find(`.${REGIONAL_PROMPT_LAYER_NAME}`).length;
   // Update the stage's pointer style
-  stage.container().style.cursor = tool === 'move' ? 'default' : 'none';
+  stage.container().style.cursor = tool === 'move' || layerCount === 0 ? 'default' : 'none';
 
   // Create the layer if it doesn't exist
   let layer = stage.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`);
@@ -59,8 +60,19 @@ export const renderBrushPreview = (
     });
   }
 
-  // The brush preview is hidden when using the move tool
-  layer.visible(tool !== 'move');
+  if (!layer.visible()) {
+    // Rely on the mouseenter and mouseleave events as a "first pass" for brush preview visibility. If it is not visible
+    // inside this render function, we do not want to make it visible again...
+    return;
+  }
+
+  // ...but we may want to hide it if it is visible, when using the move tool or when there are no layers
+  layer.visible(tool !== 'move' && layerCount > 0);
+
+  // No need to render the brush preview if the cursor position or color is missing
+  if (!cursorPos || !color) {
+    return;
+  }
 
   // Create and/or update the fill circle
   let fill = layer.findOne<Konva.Circle>(`#${BRUSH_PREVIEW_FILL_ID}`);