diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 0f98fae2b1..ad245191b4 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -610,6 +610,10 @@ "title": "Toggle Non-Raster Layers", "desc": "Show or hide all non-raster layer categories (Control Layers, Inpaint Masks, Regional Guidance)." }, + "fitBboxToLayers": { + "title": "Fit Bbox To Layers", + "desc": "Automatically adjust the generation bounding box to fit visible layers" + }, "fitBboxToMasks": { "title": "Fit Bbox To Masks", "desc": "Automatically adjust the generation bounding box to fit visible inpaint masks" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx index 382c183c0a..017c550d84 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx @@ -1,6 +1,8 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { useIsRegionFocused } from 'common/hooks/focus'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; +import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiResizeBold } from 'react-icons/pi'; @@ -9,9 +11,23 @@ export const CanvasToolbarFitBboxToLayersButton = memo(() => { const { t } = useTranslation(); const canvasManager = useCanvasManager(); const isBusy = useCanvasIsBusy(); + const isCanvasFocused = useIsRegionFocused('canvas'); + const onClick = useCallback(() => { canvasManager.tool.tools.bbox.fitToLayers(); - }, [canvasManager.tool.tools.bbox]); + canvasManager.stage.fitLayersToStage(); + }, [canvasManager.tool.tools.bbox, canvasManager.stage]); + + useRegisteredHotkeys({ + id: 'fitBboxToLayers', + category: 'canvas', + callback: () => { + canvasManager.tool.tools.bbox.fitToLayers(); + canvasManager.stage.fitLayersToStage(); + }, + options: { enabled: isCanvasFocused && !isBusy, preventDefault: true }, + dependencies: [isCanvasFocused, isBusy], + }); return ( { addHotkey('canvas', 'selectColorPickerTool', ['i']); addHotkey('canvas', 'setFillToWhite', ['d']); addHotkey('canvas', 'fitLayersToCanvas', ['mod+0']); - addHotkey('canvas', 'fitBboxToCanvas', ['mod+shift+0', 'shift+s']); + addHotkey('canvas', 'fitBboxToCanvas', ['mod+shift+0']); + addHotkey('canvas', 'fitBboxToLayers', ['shift+n']); addHotkey('canvas', 'setZoomTo100Percent', ['mod+1']); addHotkey('canvas', 'setZoomTo200Percent', ['mod+2']); addHotkey('canvas', 'setZoomTo400Percent', ['mod+3']);