tidy(ui): autoProcessFilter -> autoProcess

It's used for more than filters now.
2026-01-15 03:58:09 -05:00 · 2024-10-23 14:48:05 +10:00
parent 0eea84c90d
commit fdbc244dbe
7 changed files with 51 additions and 54 deletions
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAutoProcessSwitch.tsx
+++ 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 (
+    <FormControl w="min-content">
+      <FormLabel m={0}>{t('controlLayers.filter.autoProcess')}</FormLabel>
+      <Switch size="sm" isChecked={autoProcess} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasAutoProcessSwitch.displayName = 'CanvasAutoProcessSwitch';
--- 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')}
          </Heading>
          <Spacer />
-          <FilterAutoProcessSwitch />
+          <CanvasAutoProcessSwitch />
          <CanvasOperationIsolatedLayerPreviewSwitch />
        </Flex>
        <FilterTypeSelect filterType={config.type} onChange={onChangeFilterType} />
@@ -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')}
          </Button>
--- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterAutoProcessSwitch.tsx
@@ -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 (
-    <FormControl w="min-content">
-      <FormLabel m={0}>{t('controlLayers.filter.autoProcess')}</FormLabel>
-      <Switch size="sm" isChecked={autoProcessFilter} onChange={onChangeAutoProcessFilter} />
-    </FormControl>
-  );
-});
-
-FilterAutoProcessSwitch.displayName = 'FilterAutoProcessSwitch';
--- 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')}
          </Heading>
          <Spacer />
-          <FilterAutoProcessSwitch />
+          <CanvasAutoProcessSwitch />
          <CanvasOperationIsolatedLayerPreviewSwitch />
        </Flex>

@@ -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')}
          </Button>
--- 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();
    }
  };
--- 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();
        }
      })
--- 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(