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) => dispatch(setShouldInvertBrushSizeScrollDirection(e.target.checked)), + [dispatch] + ); return ( @@ -16,6 +34,13 @@ const ControlLayersSettingsPopover = () => { + + {t('unifiedCanvas.invertBrushSizeScrollDirection')} + +