From fdbc244dbe4ce099ad9f3bc85b3580fc042a2baf Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 23 Oct 2024 14:48:05 +1000 Subject: [PATCH] tidy(ui): `autoProcessFilter` -> `autoProcess` It's used for more than filters now. --- .../components/CanvasAutoProcessSwitch.tsx | 24 +++++++++++++++++ .../components/Filters/Filter.tsx | 10 +++---- .../Filters/FilterAutoProcessSwitch.tsx | 27 ------------------- .../SegmentAnything/SegmentAnything.tsx | 10 +++---- .../CanvasEntity/CanvasEntityFilterer.ts | 10 +++---- .../konva/CanvasSegmentAnythingModule.ts | 10 +++---- .../store/canvasSettingsSlice.ts | 14 +++++----- 7 files changed, 51 insertions(+), 54 deletions(-) create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/CanvasAutoProcessSwitch.tsx delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAutoProcessSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAutoProcessSwitch.tsx new file mode 100644 index 0000000000..7137fb3b6d --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAutoProcessSwitch.tsx @@ -0,0 +1,24 @@ +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { selectAutoProcess, settingsAutoProcessToggled } from 'features/controlLayers/store/canvasSettingsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +export const CanvasAutoProcessSwitch = memo(() => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const autoProcess = useAppSelector(selectAutoProcess); + + const onChange = useCallback(() => { + dispatch(settingsAutoProcessToggled()); + }, [dispatch]); + + return ( + + {t('controlLayers.filter.autoProcess')} + + + ); +}); + +CanvasAutoProcessSwitch.displayName = 'CanvasAutoProcessSwitch'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx index 0c65eba6f6..6740a1caa9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx @@ -2,14 +2,14 @@ import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-librar import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus'; +import { CanvasAutoProcessSwitch } from 'features/controlLayers/components/CanvasAutoProcessSwitch'; import { CanvasOperationIsolatedLayerPreviewSwitch } from 'features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch'; -import { FilterAutoProcessSwitch } from 'features/controlLayers/components/Filters/FilterAutoProcessSwitch'; import { FilterSettings } from 'features/controlLayers/components/Filters/FilterSettings'; import { FilterTypeSelect } from 'features/controlLayers/components/Filters/FilterTypeSelect'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer'; import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer'; -import { selectAutoProcessFilter } from 'features/controlLayers/store/canvasSettingsSlice'; +import { selectAutoProcess } from 'features/controlLayers/store/canvasSettingsSlice'; import type { FilterConfig } from 'features/controlLayers/store/filters'; import { IMAGE_FILTERS } from 'features/controlLayers/store/filters'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; @@ -26,7 +26,7 @@ const FilterContent = memo( const isCanvasFocused = useIsRegionFocused('canvas'); const isProcessing = useStore(adapter.filterer.$isProcessing); const hasProcessed = useStore(adapter.filterer.$hasProcessed); - const autoProcessFilter = useAppSelector(selectAutoProcessFilter); + const autoProcess = useAppSelector(selectAutoProcess); const onChangeFilterConfig = useCallback( (filterConfig: FilterConfig) => { @@ -81,7 +81,7 @@ const FilterContent = memo( {t('controlLayers.filter.filter')} - + @@ -93,7 +93,7 @@ const FilterContent = memo( onClick={adapter.filterer.processImmediate} isLoading={isProcessing} loadingText={t('controlLayers.filter.process')} - isDisabled={!isValid || autoProcessFilter} + isDisabled={!isValid || autoProcess} > {t('controlLayers.filter.process')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx deleted file mode 100644 index 9305b6994b..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - selectAutoProcessFilter, - settingsAutoProcessFilterToggled, -} from 'features/controlLayers/store/canvasSettingsSlice'; -import { memo, useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; - -export const FilterAutoProcessSwitch = memo(() => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); - const autoProcessFilter = useAppSelector(selectAutoProcessFilter); - - const onChangeAutoProcessFilter = useCallback(() => { - dispatch(settingsAutoProcessFilterToggled()); - }, [dispatch]); - - return ( - - {t('controlLayers.filter.autoProcess')} - - - ); -}); - -FilterAutoProcessSwitch.displayName = 'FilterAutoProcessSwitch'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SegmentAnything/SegmentAnything.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SegmentAnything/SegmentAnything.tsx index 4a88a5decb..0cb8458001 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SegmentAnything/SegmentAnything.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SegmentAnything/SegmentAnything.tsx @@ -2,13 +2,13 @@ import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-librar import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus'; +import { CanvasAutoProcessSwitch } from 'features/controlLayers/components/CanvasAutoProcessSwitch'; import { CanvasOperationIsolatedLayerPreviewSwitch } from 'features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch'; -import { FilterAutoProcessSwitch } from 'features/controlLayers/components/Filters/FilterAutoProcessSwitch'; import { SegmentAnythingPointType } from 'features/controlLayers/components/SegmentAnything/SegmentAnythingPointType'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer'; import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer'; -import { selectAutoProcessFilter } from 'features/controlLayers/store/canvasSettingsSlice'; +import { selectAutoProcess } from 'features/controlLayers/store/canvasSettingsSlice'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -22,7 +22,7 @@ const SegmentAnythingContent = memo( const isCanvasFocused = useIsRegionFocused('canvas'); const isProcessing = useStore(adapter.segmentAnything.$isProcessing); const hasPoints = useStore(adapter.segmentAnything.$hasPoints); - const autoProcessFilter = useAppSelector(selectAutoProcessFilter); + const autoProcess = useAppSelector(selectAutoProcess); useRegisteredHotkeys({ id: 'applySegmentAnything', @@ -59,7 +59,7 @@ const SegmentAnythingContent = memo( {t('controlLayers.segment.autoMask')} - + @@ -72,7 +72,7 @@ const SegmentAnythingContent = memo( isLoading={isProcessing} loadingText={t('controlLayers.segment.process')} variant="ghost" - isDisabled={!hasPoints || autoProcessFilter} + isDisabled={!hasPoints || autoProcess} > {t('controlLayers.segment.process')} diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts index c9f44c0222..552d69fd5c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts @@ -4,7 +4,7 @@ import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konv import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; import { getPrefixedId } from 'features/controlLayers/konva/util'; -import { selectAutoProcessFilter } from 'features/controlLayers/store/canvasSettingsSlice'; +import { selectAutoProcess } from 'features/controlLayers/store/canvasSettingsSlice'; import type { FilterConfig } from 'features/controlLayers/store/filters'; import { getFilterForModel, IMAGE_FILTERS } from 'features/controlLayers/store/filters'; import type { CanvasImageState } from 'features/controlLayers/store/types'; @@ -58,14 +58,14 @@ export class CanvasEntityFilterer extends CanvasModuleBase { this.subscriptions.add( this.$filterConfig.listen(() => { - if (this.manager.stateApi.getSettings().autoProcessFilter && this.$isFiltering.get()) { + if (this.manager.stateApi.getSettings().autoProcess && this.$isFiltering.get()) { this.process(); } }) ); this.subscriptions.add( - this.manager.stateApi.createStoreSubscription(selectAutoProcessFilter, (autoPreviewFilter) => { - if (autoPreviewFilter && this.$isFiltering.get()) { + this.manager.stateApi.createStoreSubscription(selectAutoProcess, (autoProcess) => { + if (autoProcess && this.$isFiltering.get()) { this.process(); } }) @@ -97,7 +97,7 @@ export class CanvasEntityFilterer extends CanvasModuleBase { } this.$isFiltering.set(true); this.manager.stateApi.$filteringAdapter.set(this.parent); - if (this.manager.stateApi.getSettings().autoProcessFilter) { + if (this.manager.stateApi.getSettings().autoProcess) { this.processImmediate(); } }; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts index 0e43fe5e7c..6aa7c94e7e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts @@ -7,7 +7,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; import { CanvasObjectImage } from 'features/controlLayers/konva/CanvasObject/CanvasObjectImage'; import { addCoords, getKonvaNodeDebugAttrs, getPrefixedId, offsetCoord } from 'features/controlLayers/konva/util'; -import { selectAutoProcessFilter } from 'features/controlLayers/store/canvasSettingsSlice'; +import { selectAutoProcess } from 'features/controlLayers/store/canvasSettingsSlice'; import type { CanvasImageState, Coordinate, @@ -247,13 +247,13 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase { }) ); - // When the points change, process them if autoProcessFilter is enabled + // When the points change, process them if autoProcess is enabled this.subscriptions.add( this.$points.listen((points) => { if (points.length === 0) { return; } - if (this.manager.stateApi.getSettings().autoProcessFilter && this.$isSegmenting.get()) { + if (this.manager.stateApi.getSettings().autoProcess && this.$isSegmenting.get()) { this.process(); } }) @@ -261,11 +261,11 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase { // When auto-process is enabled, process the points if they have not been processed this.subscriptions.add( - this.manager.stateApi.createStoreSubscription(selectAutoProcessFilter, (autoProcessFilter) => { + this.manager.stateApi.createStoreSubscription(selectAutoProcess, (autoProcess) => { if (this.$points.get().length === 0) { return; } - if (autoProcessFilter && this.$isSegmenting.get() && !this.$hasProcessed.get()) { + if (autoProcess && this.$isSegmenting.get() && !this.$hasProcessed.get()) { this.process(); } }) diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts index f19e2ff1fa..d5d5587625 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts @@ -48,9 +48,9 @@ type CanvasSettingsState = { */ outputOnlyMaskedRegions: boolean; /** - * Whether to automatically process the filter when the filter configuration changes. + * Whether to automatically process the operations like filtering and auto-masking. */ - autoProcessFilter: boolean; + autoProcess: boolean; /** * The snap-to-grid setting for the canvas. */ @@ -91,7 +91,7 @@ const initialState: CanvasSettingsState = { color: { r: 31, g: 160, b: 224, a: 1 }, // invokeBlue.500 sendToCanvas: false, outputOnlyMaskedRegions: false, - autoProcessFilter: true, + autoProcess: true, snapToGrid: true, showProgressOnCanvas: true, bboxOverlay: false, @@ -132,8 +132,8 @@ export const canvasSettingsSlice = createSlice({ settingsOutputOnlyMaskedRegionsToggled: (state) => { state.outputOnlyMaskedRegions = !state.outputOnlyMaskedRegions; }, - settingsAutoProcessFilterToggled: (state) => { - state.autoProcessFilter = !state.autoProcessFilter; + settingsAutoProcessToggled: (state) => { + state.autoProcess = !state.autoProcess; }, settingsSnapToGridToggled: (state) => { state.snapToGrid = !state.snapToGrid; @@ -177,7 +177,7 @@ export const { settingsInvertScrollForToolWidthChanged, settingsSendToCanvasChanged, settingsOutputOnlyMaskedRegionsToggled, - settingsAutoProcessFilterToggled, + settingsAutoProcessToggled, settingsSnapToGridToggled, settingsShowProgressOnCanvasToggled, settingsBboxOverlayToggled, @@ -210,7 +210,7 @@ export const selectOutputOnlyMaskedRegions = createCanvasSettingsSelector( export const selectDynamicGrid = createCanvasSettingsSelector((settings) => settings.dynamicGrid); export const selectBboxOverlay = createCanvasSettingsSelector((settings) => settings.bboxOverlay); export const selectShowHUD = createCanvasSettingsSelector((settings) => settings.showHUD); -export const selectAutoProcessFilter = createCanvasSettingsSelector((settings) => settings.autoProcessFilter); +export const selectAutoProcess = createCanvasSettingsSelector((settings) => settings.autoProcess); export const selectSnapToGrid = createCanvasSettingsSelector((settings) => settings.snapToGrid); export const selectSendToCanvas = createCanvasSettingsSelector((canvasSettings) => canvasSettings.sendToCanvas); export const selectShowProgressOnCanvas = createCanvasSettingsSelector(