Readded Bounding Box Visibility Toggle

Only affects preview. The backend still takes the set bounding box.

frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.scss

@@ -12,6 +12,16 @@
   justify-content: space-between;
   padding: 0.5rem 1rem;
   border-radius: 0.4rem 0.4rem 0 0;
+  align-items: center;
+
+  button {
+    width: 0.5rem !important;
+    height: 1.2rem !important;
+    background: none !important;
+    &:hover {
+      background: none !important;
+    }
+  }
 
   p {
     font-weight: bold;

frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx

@@ -1,7 +1,8 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
-import { BiReset } from 'react-icons/bi';
+
+import { BiHide, BiReset, BiShow } from 'react-icons/bi';
 
 import {
   RootState,
@@ -18,6 +19,7 @@ import {
   InpaintingState,
   setBoundingBoxDimensions,
   setShouldLockBoundingBox,
+  setShouldShowBoundingBox,
   setShouldShowBoundingBoxFill,
 } from '../../../tabs/Inpainting/inpaintingSlice';
 
@@ -27,6 +29,7 @@ const boundingBoxDimensionsSelector = createSelector(
     const {
       canvasDimensions,
       boundingBoxDimensions,
+      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       pastLines,
       futureLines,
@@ -35,6 +38,7 @@ const boundingBoxDimensionsSelector = createSelector(
     return {
       canvasDimensions,
       boundingBoxDimensions,
+      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       pastLines,
       futureLines,
@@ -53,6 +57,7 @@ const BoundingBoxSettings = () => {
   const {
     canvasDimensions,
     boundingBoxDimensions,
+    shouldShowBoundingBox,
     shouldShowBoundingBoxFill,
     shouldLockBoundingBox,
   } = useAppSelector(boundingBoxDimensionsSelector);
@@ -101,10 +106,22 @@ const BoundingBoxSettings = () => {
     );
   };
 
+  const handleShowBoundingBox = () =>
+    dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+
   return (
     <div className="inpainting-bounding-box-settings">
       <div className="inpainting-bounding-box-header">
         <p>Inpaint Box</p>
+        <IAIIconButton
+          aria-label="Toggle Bounding Box Visibility"
+          icon={
+            shouldShowBoundingBox ? <BiShow size={22} /> : <BiHide size={22} />
+          }
+          onClick={handleShowBoundingBox}
+          background={'none'}
+          padding={0}
+        />
       </div>
       <div className="inpainting-bounding-box-settings-items">
         <div className="inpainting-bounding-box-dimensions-slider-numberinput">

frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx

@@ -53,6 +53,7 @@ const InpaintingCanvas = () => {
     maskColor,
     imageToInpaint,
     stageScale,
+    shouldShowBoundingBox,
     shouldShowBoundingBoxFill,
     isDrawing,
     shouldLockBoundingBox,
@@ -300,10 +301,10 @@ const InpaintingCanvas = () => {
                 )}
               </Layer>
               <Layer>
-                {shouldShowBoundingBoxFill && (
+                {shouldShowBoundingBoxFill && shouldShowBoundingBox && (
                   <InpaintingBoundingBoxPreviewOverlay />
                 )}
-                <InpaintingBoundingBoxPreview />
+                {shouldShowBoundingBox && <InpaintingBoundingBoxPreview />}
                 {shouldLockBoundingBox && (
                   <InpaintingCanvasBrushPreviewOutline />
                 )}

frontend/src/features/tabs/Inpainting/inpaintingSlice.ts

@@ -37,6 +37,7 @@ export interface InpaintingState {
   boundingBoxDimensions: Dimensions;
   boundingBoxCoordinate: Vector2d;
   boundingBoxPreviewFill: RgbaColor;
+  shouldShowBoundingBox: boolean;
   shouldShowBoundingBoxFill: boolean;
   lines: MaskLine[];
   pastLines: MaskLine[][];
@@ -63,6 +64,7 @@ const initialInpaintingState: InpaintingState = {
   boundingBoxDimensions: { width: 512, height: 512 },
   boundingBoxCoordinate: { x: 0, y: 0 },
   boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.7 },
+  shouldShowBoundingBox: false,
   shouldShowBoundingBoxFill: false,
   cursorPosition: null,
   lines: [],
@@ -314,6 +316,9 @@ export const inpaintingSlice = createSlice({
     toggleShouldLockBoundingBox: (state) => {
       state.shouldLockBoundingBox = !state.shouldLockBoundingBox;
     },
+    setShouldShowBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowBoundingBox = action.payload;
+    },
   },
 });
 
@@ -340,6 +345,7 @@ export const {
   setNeedsCache,
   setStageScale,
   toggleTool,
+  setShouldShowBoundingBox,
   setShouldShowBoundingBoxFill,
   setIsDrawing,
   setShouldShowBrush,

frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts

@@ -73,6 +73,7 @@ export const inpaintingCanvasSelector = createSelector(
       shouldShowCheckboardTransparency,
       imageToInpaint,
       stageScale,
+      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       isDrawing,
       shouldLockBoundingBox,
@@ -87,6 +88,7 @@ export const inpaintingCanvasSelector = createSelector(
       maskColor,
       imageToInpaint,
       stageScale,
+      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       isDrawing,
       shouldLockBoundingBox,