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}
/>
+ : }
+ onClick={handleSetShouldShowBoundingBox}
+ isDisabled={isStaging}
+ />
{
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') {