From 36862be2aadcba21c04091c92b5562931688ab42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 5 Jul 2024 10:44:47 +1000
Subject: [PATCH] fix(ui): set buffered rect color to full alpha

---
 .../controlLayers/konva/CanvasInpaintMask.ts  |  4 ++-
 .../controlLayers/konva/CanvasRegion.ts       |  5 +++-
 .../controlLayers/konva/CanvasTool.ts         | 25 +++++++++----------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts
index 0f14cc4fd9..63a932eac9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts
@@ -76,6 +76,8 @@ export class CanvasInpaintMask {
     if (this.drawingBuffer) {
       if (this.drawingBuffer.type === 'brush_line') {
         this.drawingBuffer.color = RGBA_RED;
+      } else if (this.drawingBuffer.type === 'rect_shape') {
+        this.drawingBuffer.color = RGBA_RED;
       }
 
       await this.renderObject(this.drawingBuffer, true);
@@ -92,7 +94,7 @@ export class CanvasInpaintMask {
     } else if (this.drawingBuffer.type === 'eraser_line') {
       this.manager.stateApi.onEraserLineAdded2({ id: this.id, eraserLine: this.drawingBuffer }, 'inpaint_mask');
     } else if (this.drawingBuffer.type === 'rect_shape') {
-      this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'layer');
+      this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'inpaint_mask');
     }
     this.setDrawingBuffer(null);
   }
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts
index 90111cfa22..609e5447ba 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts
@@ -76,7 +76,10 @@ export class CanvasRegion {
     if (this.drawingBuffer) {
       if (this.drawingBuffer.type === 'brush_line') {
         this.drawingBuffer.color = RGBA_RED;
+      } else if (this.drawingBuffer.type === 'rect_shape') {
+        this.drawingBuffer.color = RGBA_RED;
       }
+
       await this.renderObject(this.drawingBuffer, true);
       this.updateGroup(true);
     }
@@ -91,7 +94,7 @@ export class CanvasRegion {
     } else if (this.drawingBuffer.type === 'eraser_line') {
       this.manager.stateApi.onEraserLineAdded2({ id: this.id, eraserLine: this.drawingBuffer }, 'regional_guidance');
     } else if (this.drawingBuffer.type === 'rect_shape') {
-      this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'layer');
+      this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'regional_guidance');
     }
     this.setDrawingBuffer(null);
   }
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts
index 54a9501559..76145f954b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts
@@ -121,7 +121,6 @@ export class CanvasTool {
     const currentFill = this.manager.stateApi.getCurrentFill();
     const selectedEntity = this.manager.stateApi.getSelectedEntity();
     const cursorPos = this.manager.stateApi.getLastCursorPos();
-    const lastMouseDownPos = this.manager.stateApi.getLastMouseDownPos();
     const isDrawing = this.manager.stateApi.getIsDrawing();
     const isMouseDown = this.manager.stateApi.getIsMouseDown();
 
@@ -215,18 +214,18 @@ export class CanvasTool {
         this.brush.group.visible(false);
         this.eraser.group.visible(true);
         // this.rect.group.visible(false);
-      // } else if (cursorPos && lastMouseDownPos && tool === 'rect') {
-      //   this.rect.fillRect.setAttrs({
-      //     x: Math.min(cursorPos.x, lastMouseDownPos.x),
-      //     y: Math.min(cursorPos.y, lastMouseDownPos.y),
-      //     width: Math.abs(cursorPos.x - lastMouseDownPos.x),
-      //     height: Math.abs(cursorPos.y - lastMouseDownPos.y),
-      //     fill: rgbaColorToString(currentFill),
-      //     visible: true,
-      //   });
-      //   this.brush.group.visible(false);
-      //   this.eraser.group.visible(false);
-      //   this.rect.group.visible(true);
+        // } else if (cursorPos && lastMouseDownPos && tool === 'rect') {
+        //   this.rect.fillRect.setAttrs({
+        //     x: Math.min(cursorPos.x, lastMouseDownPos.x),
+        //     y: Math.min(cursorPos.y, lastMouseDownPos.y),
+        //     width: Math.abs(cursorPos.x - lastMouseDownPos.x),
+        //     height: Math.abs(cursorPos.y - lastMouseDownPos.y),
+        //     fill: rgbaColorToString(currentFill),
+        //     visible: true,
+        //   });
+        //   this.brush.group.visible(false);
+        //   this.eraser.group.visible(false);
+        //   this.rect.group.visible(true);
       } else {
         this.brush.group.visible(false);
         this.eraser.group.visible(false);