feat: ✨ invert scroll direction for brush size

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

@@ -1818,6 +1818,7 @@
         "eraseBoundingBox": "Erase Bounding Box",
         "eraser": "Eraser",
         "fillBoundingBox": "Fill Bounding Box",
+        "invertBrushSizeScrollDirection": "Invert Scroll for Brush Size",
         "layer": "Layer",
         "limitStrokesToBox": "Limit Strokes to Box",
         "mask": "Mask",

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

@@ -18,6 +18,7 @@ import {
   setShouldAutoSave,
   setShouldCropToBoundingBoxOnSave,
   setShouldDarkenOutsideBoundingBox,
+  setShouldInvertBrushSizeScrollDirection,
   setShouldRestrictStrokesToBox,
   setShouldShowCanvasDebugInfo,
   setShouldShowGrid,
@@ -40,6 +41,7 @@ const IAICanvasSettingsButtonPopover = () => {
   const shouldAutoSave = useAppSelector((s) => s.canvas.shouldAutoSave);
   const shouldCropToBoundingBoxOnSave = useAppSelector((s) => s.canvas.shouldCropToBoundingBoxOnSave);
   const shouldDarkenOutsideBoundingBox = useAppSelector((s) => s.canvas.shouldDarkenOutsideBoundingBox);
+  const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
   const shouldShowCanvasDebugInfo = useAppSelector((s) => s.canvas.shouldShowCanvasDebugInfo);
   const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid);
   const shouldShowIntermediates = useAppSelector((s) => s.canvas.shouldShowIntermediates);
@@ -76,6 +78,10 @@ const IAICanvasSettingsButtonPopover = () => {
     (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)),
     [dispatch]
   );
+  const handleChangeShouldInvertBrushSizeScrollDirection = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldInvertBrushSizeScrollDirection(e.target.checked)),
+    [dispatch]
+  );
   const handleChangeShouldAutoSave = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldAutoSave(e.target.checked)),
     [dispatch]
@@ -144,6 +150,13 @@ const IAICanvasSettingsButtonPopover = () => {
                 <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
                 <Checkbox isChecked={shouldRestrictStrokesToBox} onChange={handleChangeShouldRestrictStrokesToBox} />
               </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.invertBrushSizeScrollDirection')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldInvertBrushSizeScrollDirection}
+                  onChange={handleChangeShouldInvertBrushSizeScrollDirection}
+                />
+              </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
                 <Checkbox isChecked={shouldShowCanvasDebugInfo} onChange={handleChangeShouldShowCanvasDebugInfo} />

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -15,6 +15,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
   const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld);
   const brushSize = useAppSelector((s) => s.canvas.brushSize);
+  const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
 
   return useCallback(
     (e: KonvaEventObject<WheelEvent>) => {
@@ -28,10 +29,16 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
       // checking for ctrl key is pressed or not,
       // so that brush size can be controlled using ctrl + scroll up/down
 
+      // Invert the delta if the property is set to true
+      let delta = e.evt.deltaY;
+      if (shouldInvertBrushSizeScrollDirection) {
+        delta = -delta
+      }
+
       if ($ctrl.get() || $meta.get()) {
         // This equation was derived by fitting a curve to the desired brush sizes and deltas
         // see https://github.com/invoke-ai/InvokeAI/pull/5542#issuecomment-1915847565
-        const targetDelta = Math.sign(e.evt.deltaY) * 0.7363 * Math.pow(1.0394, brushSize);
+        const targetDelta = Math.sign(delta) * 0.7363 * Math.pow(1.0394, brushSize);
         // This needs to be clamped to prevent the delta from getting too large
         const finalDelta = clamp(targetDelta, -20, 20);
         // The new brush size is also clamped to prevent it from getting too large or small
@@ -67,7 +74,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
         dispatch(setStageCoordinates(newCoordinates));
       }
     },
-    [stageRef, isMoveStageKeyHeld, stageScale, dispatch, brushSize]
+    [stageRef, isMoveStageKeyHeld, brushSize, dispatch, stageScale, shouldInvertBrushSizeScrollDirection]
   );
 };
 

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

@@ -65,6 +65,7 @@ const initialCanvasState: CanvasState = {
   shouldAutoSave: false,
   shouldCropToBoundingBoxOnSave: false,
   shouldDarkenOutsideBoundingBox: false,
+  shouldInvertBrushSizeScrollDirection: false,
   shouldLockBoundingBox: false,
   shouldPreserveMaskedArea: false,
   shouldRestrictStrokesToBox: true,
@@ -220,6 +221,9 @@ export const canvasSlice = createSlice({
     setShouldDarkenOutsideBoundingBox: (state, action: PayloadAction<boolean>) => {
       state.shouldDarkenOutsideBoundingBox = action.payload;
     },
+    setShouldInvertBrushSizeScrollDirection: (state, action: PayloadAction<boolean>) => {
+      state.shouldInvertBrushSizeScrollDirection = action.payload;
+    },
     clearCanvasHistory: (state) => {
       state.pastLayerStates = [];
       state.futureLayerStates = [];
@@ -674,6 +678,7 @@ export const {
   setShouldAutoSave,
   setShouldCropToBoundingBoxOnSave,
   setShouldDarkenOutsideBoundingBox,
+  setShouldInvertBrushSizeScrollDirection,
   setShouldPreserveMaskedArea,
   setShouldShowBoundingBox,
   setShouldShowCanvasDebugInfo,

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

@@ -120,6 +120,7 @@ export interface CanvasState {
   shouldAutoSave: boolean;
   shouldCropToBoundingBoxOnSave: boolean;
   shouldDarkenOutsideBoundingBox: boolean;
+  shouldInvertBrushSizeScrollDirection: boolean;
   shouldLockBoundingBox: boolean;
   shouldPreserveMaskedArea: boolean;
   shouldRestrictStrokesToBox: boolean;