From 6eed5ad531a7f1d838d0b00c5ca8c164f691f872 Mon Sep 17 00:00:00 2001
From: Jennifer Player <chainchompa@gmail.com>
Date: Thu, 11 Apr 2024 19:53:02 -0400
Subject: [PATCH] added button for hiding bounding box

---
 invokeai/frontend/web/public/locales/en.json  |  2 ++
 .../IAICanvasToolbar/IAICanvasToolbar.tsx     | 34 ++++++++++++++++++-
 .../features/canvas/hooks/useCanvasHotkeys.ts | 14 --------
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 5454c72e68..0a76c3ed1f 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1424,6 +1424,7 @@
         "eraseBoundingBox": "Erase Bounding Box",
         "eraser": "Eraser",
         "fillBoundingBox": "Fill Bounding Box",
+        "hideBoundingBox": "Hide Bounding Box",
         "initialFitImageSize": "Fit Image Size on Drop",
         "invertBrushSizeScrollDirection": "Invert Scroll for Brush Size",
         "layer": "Layer",
@@ -1441,6 +1442,7 @@
         "saveMask": "Save $t(unifiedCanvas.mask)",
         "saveToGallery": "Save To Gallery",
         "scaledBoundingBox": "Scaled Bounding Box",
+        "showBoundingBox": "Show Bounding Box",
         "showCanvasDebugInfo": "Show Additional Canvas Info",
         "showGrid": "Show Grid",
         "showResultsOn": "Show Results (On)",
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 5642269bda..686577b4a7 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -13,7 +13,13 @@ import {
 } from 'features/canvas/store/actions';
 import { $canvasBaseLayer, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { resetCanvas, resetCanvasView, setIsMaskEnabled, setLayer } from 'features/canvas/store/canvasSlice';
+import {
+  resetCanvas,
+  resetCanvasView,
+  setIsMaskEnabled,
+  setLayer,
+  setShouldShowBoundingBox,
+} from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
 import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
 import { memo, useCallback, useMemo } from 'react';
@@ -23,6 +29,8 @@ import {
   PiCopyBold,
   PiCrosshairSimpleBold,
   PiDownloadSimpleBold,
+  PiEyeBold,
+  PiEyeSlashBold,
   PiFloppyDiskBold,
   PiHandGrabbingBold,
   PiStackBold,
@@ -44,6 +52,7 @@ const IAICanvasToolbar = () => {
   const isStaging = useAppSelector(isStagingSelector);
   const { t } = useTranslation();
   const { isClipboardAPIAvailable } = useCopyImageToClipboard();
+  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
 
   const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
     postUploadAction: { type: 'SET_CANVAS_INITIAL_IMAGE' },
@@ -61,6 +70,18 @@ const IAICanvasToolbar = () => {
     []
   );
 
+  useHotkeys(
+    'shift+h',
+    () => {
+      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [shouldShowBoundingBox]
+  );
+
   useHotkeys(
     ['r'],
     () => {
@@ -125,6 +146,10 @@ const IAICanvasToolbar = () => {
     $tool.set('move');
   }, []);
 
+  const handleSetShouldShowBoundingBox = useCallback(() => {
+    dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+  }, [dispatch, shouldShowBoundingBox]);
+
   const handleResetCanvasView = useCallback(
     (shouldScaleTo1 = false) => {
       const canvasBaseLayer = $canvasBaseLayer.get();
@@ -212,6 +237,13 @@ const IAICanvasToolbar = () => {
           isChecked={tool === 'move' || isStaging}
           onClick={handleSelectMoveTool}
         />
+        <IconButton
+          aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
+          onClick={handleSetShouldShowBoundingBox}
+          isDisabled={isStaging}
+        />
         <IconButton
           aria-label={`${t('unifiedCanvas.resetView')} (R)`}
           tooltip={`${t('unifiedCanvas.resetView')} (R)`}
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
index 4e10cbbde6..ae23b7034c 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
@@ -10,7 +10,6 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   clearMask,
   setIsMaskEnabled,
-  setShouldShowBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
 import { isInteractiveTarget } from 'features/canvas/util/isInteractiveTarget';
@@ -21,7 +20,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 const useInpaintingCanvasHotkeys = () => {
   const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
   const isStaging = useAppSelector(isStagingSelector);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
   const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid);
@@ -79,18 +77,6 @@ const useInpaintingCanvasHotkeys = () => {
     }
   );
 
-  useHotkeys(
-    'shift+h',
-    () => {
-      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
-    },
-    {
-      enabled: () => !isStaging,
-      preventDefault: true,
-    },
-    [activeTabName, shouldShowBoundingBox]
-  );
-
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {