Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

added button for hiding bounding box

Browse Source
This commit is contained in:
Jennifer Player 2024-04-11 19:53:02 -04:00 committed by psychedelicious
parent 24f2cde862
commit 6eed5ad531
3 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

@ -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)",

34
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -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)`}

14
invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -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') {