Add Snap To Grid to Canvas Toolbar + Hotkey

invokeai/frontend/web/public/locales/en.json

@@ -431,6 +431,10 @@
                 "title": "Clear Queue",
                 "desc": "Cancel and clear all queue items."
             },
+            "selectGenerateTab": {
+                "title": "Select the Generate Tab",
+                "desc": "Selects the Generate tab."
+            },
             "selectCanvasTab": {
                 "title": "Select the Canvas Tab",
                 "desc": "Selects the Canvas tab."
@@ -599,6 +603,18 @@
             "toggleNonRasterLayers": {
                 "title": "Toggle Non-Raster Layers",
                 "desc": "Show or hide all non-raster layer categories (Control Layers, Inpaint Masks, Regional Guidance)."
+            },
+            "snapToGrid": {
+                "title": "Snap to Grid",
+                "desc": "Snap the bounding box to canvas grid."
+            },
+            "applySegmentAnything": {
+                "title": "Apply Segment Anything",
+                "desc": "Apply the results of segmentation to the canvas."
+            },
+            "cancelSegmentAnything": {
+                "title": "Cancel Segment Anything",
+                "desc": "Cancel the results of the segmentation."
             }
         },
         "workflows": {

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -13,12 +13,15 @@ import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanv
 import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey';
 import { useCanvasFilterHotkey } from 'features/controlLayers/hooks/useCanvasFilterHotkey';
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
+import { useCanvasSnapToGridHotkey } from 'features/controlLayers/hooks/useCanvasSnapToGridHotkey';
 import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { useCanvasTransformHotkey } from 'features/controlLayers/hooks/useCanvasTransformHotkey';
 import { useCanvasUndoRedoHotkeys } from 'features/controlLayers/hooks/useCanvasUndoRedoHotkeys';
 import { useNextPrevEntityHotkeys } from 'features/controlLayers/hooks/useNextPrevEntity';
 import { memo } from 'react';
 
+import { CanvasToolbarSnappingToolButton } from './CanvasToolbarSnappingToolButton';
+
 export const CanvasToolbar = memo(() => {
   useCanvasResetLayerHotkey();
   useCanvasDeleteLayerHotkey();
@@ -28,6 +31,7 @@ export const CanvasToolbar = memo(() => {
   useCanvasTransformHotkey();
   useCanvasFilterHotkey();
   useCanvasToggleNonRasterLayersHotkey();
+  useCanvasSnapToGridHotkey();
 
   return (
     <Flex w="full" gap={2} alignItems="center" px={2}>
@@ -37,6 +41,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarScale />
         <CanvasToolbarResetViewButton />
         <CanvasToolbarFitBboxToLayersButton />
+        <CanvasToolbarSnappingToolButton />
       </Flex>
       <Divider orientation="vertical" />
       <Flex alignItems="center" h="full">

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSnappingToolButton.tsx

@@ -0,0 +1,33 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { selectSnapToGrid, settingsSnapToGridToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiGridFourBold } from 'react-icons/pi';
+
+export const CanvasToolbarSnappingToolButton = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const isBusy = useCanvasIsBusy();
+  const snapToGrid = useAppSelector(selectSnapToGrid);
+
+  const onClick = useCallback(() => {
+    dispatch(settingsSnapToGridToggled());
+  }, [dispatch]);
+
+  return (
+    <IconButton
+      onClick={onClick}
+      variant="link"
+      alignSelf="stretch"
+      colorScheme={snapToGrid ? 'invokeBlue' : 'gray'}
+      aria-label={t('controlLayers.settings.snapToGrid.label')}
+      tooltip={t('controlLayers.settings.snapToGrid.label')}
+      icon={<PiGridFourBold />}
+      isDisabled={isBusy}
+    />
+  );
+});
+
+CanvasToolbarSnappingToolButton.displayName = 'CanvasToolbarSnappingToolButton';

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasSnapToGridHotkey.ts

@@ -0,0 +1,19 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { settingsSnapToGridToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { useCallback } from 'react';
+
+export const useCanvasSnapToGridHotkey = () => {
+  const dispatch = useAppDispatch();
+
+  const handleToggleSnapToGrid = useCallback(() => {
+    dispatch(settingsSnapToGridToggled());
+  }, [dispatch]);
+
+  useRegisteredHotkeys({
+    id: 'snapToGrid',
+    category: 'canvas',
+    callback: handleToggleSnapToGrid,
+    dependencies: [handleToggleSnapToGrid],
+  });
+};

invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

@@ -123,6 +123,7 @@ export const useHotkeyData = (): HotkeysData => {
     addHotkey('canvas', 'applySegmentAnything', ['enter']);
     addHotkey('canvas', 'cancelSegmentAnything', ['esc']);
     addHotkey('canvas', 'toggleNonRasterLayers', ['shift+h']);
+    addHotkey('canvas', 'snapToGrid', ['shift+s']);
 
     // Workflows
     addHotkey('workflows', 'addNode', ['shift+a', 'space']);
@@ -209,7 +210,7 @@ export const useRegisteredHotkeys = ({ id, category, callback, options, dependen
         enabled: data.isEnabled,
       } satisfies Options;
     }
-    // Otherwise, return the provided optiosn, but override the enabled state.
+    // Otherwise, return the provided options, but override the enabled state.
     return {
       ...options,
       enabled: data.isEnabled ? options.enabled : false,