Expose Snap Threshold and Move Snap Settings to BBox Panel

Author: blessedcoolant

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -36,6 +36,7 @@ const boundingBoxPreviewSelector = createSelector(
       tool,
       stageCoordinates,
       shouldSnapToGrid,
+      gridSnapThreshold,
     } = canvas;
 
     return {
@@ -49,6 +50,7 @@ const boundingBoxPreviewSelector = createSelector(
       stageDimensions,
       stageScale,
       shouldSnapToGrid,
+      gridSnapThreshold,
       tool,
       stageCoordinates,
       boundingBoxStrokeWidth: (isMouseOverBoundingBox ? 8 : 1) / stageScale,
@@ -80,6 +82,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     stageDimensions,
     stageScale,
     shouldSnapToGrid,
+    gridSnapThreshold,
     tool,
     boundingBoxStrokeWidth,
     hitStrokeWidth,
@@ -111,8 +114,8 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       const dragX = e.target.x();
       const dragY = e.target.y();
 
-      const newX = roundToMultiple(dragX, 64);
-      const newY = roundToMultiple(dragY, 64);
+      const newX = roundToMultiple(dragX, gridSnapThreshold);
+      const newY = roundToMultiple(dragY, gridSnapThreshold);
 
       e.target.x(newX);
       e.target.y(newY);
@@ -124,7 +127,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
         })
       );
     },
-    [dispatch, shouldSnapToGrid]
+    [dispatch, shouldSnapToGrid, gridSnapThreshold]
   );
 
   const handleOnTransform = useCallback(() => {

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -7,7 +7,6 @@ import {
   setShouldShowCanvasDebugInfo,
   setShouldShowGrid,
   setShouldShowIntermediates,
-  setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
@@ -18,8 +17,6 @@ import IAICheckbox from 'common/components/IAICheckbox';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
 import ClearCanvasHistoryButtonModal from '../ClearCanvasHistoryButtonModal';
-import { ChangeEvent } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 export const canvasControlsSelector = createSelector(
   [canvasSelector],
@@ -60,24 +57,8 @@ const IAICanvasSettingsButtonPopover = () => {
     shouldShowCanvasDebugInfo,
     shouldShowGrid,
     shouldShowIntermediates,
-    shouldSnapToGrid,
   } = useAppSelector(canvasControlsSelector);
 
-  useHotkeys(
-    ['n'],
-    () => {
-      dispatch(setShouldSnapToGrid(!shouldSnapToGrid));
-    },
-    {
-      enabled: true,
-      preventDefault: true,
-    },
-    [shouldSnapToGrid]
-  );
-
-  const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setShouldSnapToGrid(e.target.checked));
-
   return (
     <IAIPopover
       trigger="hover"
@@ -102,11 +83,6 @@ const IAICanvasSettingsButtonPopover = () => {
           isChecked={shouldShowGrid}
           onChange={(e) => dispatch(setShouldShowGrid(e.target.checked))}
         />
-        <IAICheckbox
-          label="Snap to Grid"
-          isChecked={shouldSnapToGrid}
-          onChange={handleChangeShouldSnapToGrid}
-        />
         <IAICheckbox
           label="Darken Outside Selection"
           isChecked={shouldDarkenOutsideBoundingBox}

frontend/src/features/canvas/store/canvasSlice.ts

@@ -82,6 +82,7 @@ const initialCanvasState: CanvasState = {
   shouldShowStagingImage: true,
   shouldShowStagingOutline: true,
   shouldSnapToGrid: true,
+  gridSnapThreshold: 64,
   shouldUseInpaintReplace: false,
   stageCoordinates: { x: 0, y: 0 },
   stageDimensions: { width: 0, height: 0 },
@@ -452,6 +453,9 @@ export const canvasSlice = createSlice({
     setShouldSnapToGrid: (state, action: PayloadAction<boolean>) => {
       state.shouldSnapToGrid = action.payload;
     },
+    setGridSnapThreshold: (state, action: PayloadAction<number>) => {
+      state.gridSnapThreshold = action.payload;
+    },
     setShouldAutoSave: (state, action: PayloadAction<boolean>) => {
       state.shouldAutoSave = action.payload;
     },
@@ -825,6 +829,7 @@ export const {
   setShouldShowStagingImage,
   setShouldShowStagingOutline,
   setShouldSnapToGrid,
+  setGridSnapThreshold,
   setShouldUseInpaintReplace,
   setStageCoordinates,
   setStageDimensions,

frontend/src/features/canvas/store/canvasTypes.ts

@@ -129,6 +129,7 @@ export interface CanvasState {
   shouldShowStagingImage: boolean;
   shouldShowStagingOutline: boolean;
   shouldSnapToGrid: boolean;
+  gridSnapThreshold: number;
   shouldUseInpaintReplace: boolean;
   stageCoordinates: Vector2d;
   stageDimensions: Dimensions;

frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -1,16 +1,30 @@
+import { ChangeEvent } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import IAISlider from 'common/components/IAISlider';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  setBoundingBoxDimensions,
+  setGridSnapThreshold,
+  setShouldSnapToGrid,
+} from 'features/canvas/store/canvasSlice';
 import _ from 'lodash';
+import IAICheckbox from 'common/components/IAICheckbox';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 const selector = createSelector(
   canvasSelector,
   (canvas) => {
-    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = canvas;
+    const {
+      boundingBoxDimensions,
+      boundingBoxScaleMethod: boundingBoxScale,
+      shouldSnapToGrid,
+      gridSnapThreshold,
+    } = canvas;
     return {
+      shouldSnapToGrid,
+      gridSnapThreshold,
       boundingBoxDimensions,
       boundingBoxScale,
     };
@@ -24,7 +38,8 @@ const selector = createSelector(
 
 const BoundingBoxSettings = () => {
   const dispatch = useAppDispatch();
-  const { boundingBoxDimensions } = useAppSelector(selector);
+  const { boundingBoxDimensions, shouldSnapToGrid, gridSnapThreshold } =
+    useAppSelector(selector);
 
   const handleChangeWidth = (v: number) => {
     dispatch(
@@ -62,6 +77,29 @@ const BoundingBoxSettings = () => {
     );
   };
 
+  const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setShouldSnapToGrid(e.target.checked));
+
+  const handleChangeGridSnapThreshold = (v: number) => {
+    dispatch(setGridSnapThreshold(v));
+  };
+
+  const handleResetGridSnapThreshold = () => {
+    dispatch(setGridSnapThreshold(64));
+  };
+
+  useHotkeys(
+    ['n'],
+    () => {
+      dispatch(setShouldSnapToGrid(!shouldSnapToGrid));
+    },
+    {
+      enabled: true,
+      preventDefault: true,
+    },
+    [shouldSnapToGrid]
+  );
+
   return (
     <Flex direction="column" gap="1rem">
       <IAISlider
@@ -90,6 +128,27 @@ const BoundingBoxSettings = () => {
         withInput
         withReset
       />
+      <IAICheckbox
+        label="Snap Bounding Box to Grid (N)"
+        isChecked={shouldSnapToGrid}
+        onChange={handleChangeShouldSnapToGrid}
+      />
+      <IAISlider
+        label={'Snap Threshold'}
+        min={2}
+        max={256}
+        step={2}
+        value={gridSnapThreshold}
+        onChange={handleChangeGridSnapThreshold}
+        handleReset={handleResetGridSnapThreshold}
+        isSliderDisabled={!shouldSnapToGrid}
+        isInputDisabled={!shouldSnapToGrid}
+        isResetDisabled={!shouldSnapToGrid}
+        sliderNumberInputProps={{ max: 4096 }}
+        withSliderMarks
+        withInput
+        withReset
+      />
     </Flex>
   );
 };