From 1aa7cd57c2b057a887f1c8ef13b325f92317e1bd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 06:50:39 +1000
Subject: [PATCH] feat(ui): add invert brush scroll checkbox to control layers
 settings

---
 .../ControlLayersSettingsPopover.tsx          | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
index 89032b7c76..1f3307bdf1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
@@ -1,12 +1,30 @@
-import { Flex, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library';
+import {
+  Checkbox,
+  Flex,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { setShouldInvertBrushSizeScrollDirection } from 'features/canvas/store/canvasSlice';
 import { GlobalMaskLayerOpacity } from 'features/controlLayers/components/GlobalMaskLayerOpacity';
-import { memo } from 'react';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiSettings4Fill } from 'react-icons/ri';
 
 const ControlLayersSettingsPopover = () => {
   const { t } = useTranslation();
-
+  const dispatch = useAppDispatch();
+  const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
+  const handleChangeShouldInvertBrushSizeScrollDirection = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldInvertBrushSizeScrollDirection(e.target.checked)),
+    [dispatch]
+  );
   return (
     <Popover isLazy>
       <PopoverTrigger>
@@ -16,6 +34,13 @@ const ControlLayersSettingsPopover = () => {
         <PopoverBody>
           <Flex direction="column" gap={2}>
             <GlobalMaskLayerOpacity />
+            <FormControl w="full">
+              <FormLabel flexGrow={1}>{t('unifiedCanvas.invertBrushSizeScrollDirection')}</FormLabel>
+              <Checkbox
+                isChecked={shouldInvertBrushSizeScrollDirection}
+                onChange={handleChangeShouldInvertBrushSizeScrollDirection}
+              />
+            </FormControl>
           </Flex>
         </PopoverBody>
       </PopoverContent>