From 37ac7d8ed5ce5e665dc162aebf0264f58789d480 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 6 Jun 2024 17:03:28 +1000
Subject: [PATCH] feat(ui): do not fill brush preview when drawing

---
 .../src/features/controlLayers/components/StageComponent.tsx | 5 ++++-
 .../features/controlLayers/konva/renderers/toolPreview.ts    | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index ab9adfc0c5..dcead425f6 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -74,6 +74,7 @@ const useStageRenderer = (
   const tool = useStore($tool);
   const lastCursorPos = useStore($lastCursorPos);
   const lastMouseDownPos = useStore($lastMouseDownPos);
+  const isDrawing = useStore($isDrawing);
   const brushColor = useAppSelector(selectBrushColor);
   const selectedLayer = useAppSelector(selectSelectedLayer);
   const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]);
@@ -249,7 +250,8 @@ const useStageRenderer = (
       state.globalMaskLayerOpacity,
       lastCursorPos,
       lastMouseDownPos,
-      state.brushSize
+      state.brushSize,
+      isDrawing
     );
   }, [
     asPreview,
@@ -262,6 +264,7 @@ const useStageRenderer = (
     lastMouseDownPos,
     state.brushSize,
     renderers,
+    isDrawing,
   ]);
 
   useLayoutEffect(() => {
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts b/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
index 1acef92666..5cf963334f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
@@ -88,7 +88,8 @@ export const renderToolPreview = (
   globalMaskLayerOpacity: number,
   cursorPos: Vector2d | null,
   lastMouseDownPos: Vector2d | null,
-  brushSize: number
+  brushSize: number,
+  isDrawing: boolean
 ): void => {
   const layerCount = stage.find(selectRenderableLayers).length;
   // Update the stage's pointer style
@@ -133,7 +134,7 @@ export const renderToolPreview = (
       x: cursorPos.x,
       y: cursorPos.y,
       radius: brushSize / 2,
-      fill: rgbaColorToString(brushColor),
+      fill: isDrawing ? '' : rgbaColorToString(brushColor),
       globalCompositeOperation: tool === 'brush' ? 'source-over' : 'destination-out',
     });