From cd4f63f2fd6b9f029b72a1c5d3f19b92eecddfbe Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:23:56 +1000
Subject: [PATCH] feat(ui): rect shape preview now has fill

---
 .../controlLayers/konva/renderers/toolPreview.ts   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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 ae085f8ad8..1acef92666 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
@@ -1,5 +1,9 @@
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants';
+import {
+  BBOX_SELECTED_STROKE,
+  BRUSH_BORDER_INNER_COLOR,
+  BRUSH_BORDER_OUTER_COLOR,
+} from 'features/controlLayers/konva/constants';
 import {
   TOOL_PREVIEW_BRUSH_BORDER_INNER_ID,
   TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID,
@@ -54,7 +58,12 @@ const createToolPreviewLayer = (stage: Konva.Stage): Konva.Layer => {
   toolPreviewLayer.add(brushPreviewGroup);
 
   // Create the rect preview - this is a rectangle drawn from the last mouse down position to the current cursor position
-  const rectPreview = new Konva.Rect({ id: TOOL_PREVIEW_RECT_ID, listening: false, stroke: 'white', strokeWidth: 1 });
+  const rectPreview = new Konva.Rect({
+    id: TOOL_PREVIEW_RECT_ID,
+    listening: false,
+    stroke: BBOX_SELECTED_STROKE,
+    strokeWidth: 1,
+  });
   toolPreviewLayer.add(rectPreview);
 
   return toolPreviewLayer;
@@ -153,6 +162,7 @@ export const renderToolPreview = (
       y: Math.min(snappedPos.y, lastMouseDownPos.y),
       width: Math.abs(snappedPos.x - lastMouseDownPos.x),
       height: Math.abs(snappedPos.y - lastMouseDownPos.y),
+      fill: rgbaColorToString(brushColor),
     });
     rectPreview?.visible(true);
   } else {