TabActionContext implemented

Author: Attila Cseh

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -4,18 +4,19 @@ import { memo, useEffect } from 'react';
 
 import { useAppDispatch } from '../src/app/store/storeHooks';
 import { modelChanged } from 'features/controlLayers/store/actions';
-import { useParamsDispatch } from 'features/controlLayers/store/paramsSlice';
 /**
  * Initializes some state for storybook. Must be in a different component
  * so that it is run inside the redux context.
  */
 export const ReduxInit = memo(({ children }: PropsWithChildren) => {
-  const dispatch = useParamsDispatch();
+  const dispatch = useAppDispatch();
   useGlobalModifiersInit();
   useEffect(() => {
-    dispatch(modelChanged, {
-      model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' },
-    });
+    dispatch(
+      modelChanged({
+        model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' },
+      })
+    );
   }, [dispatch]);
 
   return children;

invokeai/frontend/web/src/app/store/middleware/actionContextMiddleware.ts

@@ -0,0 +1,24 @@
+import type { Middleware, UnknownAction } from '@reduxjs/toolkit';
+import { injectTabActionContext } from 'app/store/util';
+import { isCanvasInstanceAction } from 'features/controlLayers/store/canvasSlice';
+import { isTabParamsStateAction } from 'features/controlLayers/store/paramsSlice';
+import { selectActiveCanvasId } from 'features/controlLayers/store/selectors';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+
+export const actionContextMiddleware: Middleware = (store) => (next) => (action) => {
+  const currentAction = action as UnknownAction;
+
+  if (isTabActionContextRequired(currentAction)) {
+    const state = store.getState();
+    const tab = selectActiveTab(state);
+    const canvasId = tab === 'canvas' ? selectActiveCanvasId(state) : undefined;
+
+    injectTabActionContext(currentAction, tab, canvasId);
+  }
+
+  return next(action);
+};
+
+const isTabActionContextRequired = (action: UnknownAction) => {
+  return isTabParamsStateAction(action) || isCanvasInstanceAction(action);
+};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts

@@ -1,5 +1,5 @@
 import type { AppStartListening } from 'app/store/store';
-import { paramsDispatch, selectActiveParams, setInfillMethod } from 'features/controlLayers/store/paramsSlice';
+import { selectActiveParams, setInfillMethod } from 'features/controlLayers/store/paramsSlice';
 import { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged } from 'features/system/store/systemSlice';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 
@@ -15,7 +15,7 @@ export const addAppConfigReceivedListener = (startAppListening: AppStartListenin
         // If the selected infill method does not exist, prefer 'lama' if it's in the list, otherwise 'tile'.
         // TODO(psyche): lama _should_ always be in the list, but the API doesn't guarantee it...
         const infillMethod = infill_methods.includes('lama') ? 'lama' : 'tile';
-        paramsDispatch(api, setInfillMethod, infillMethod);
+        dispatch(setInfillMethod(infillMethod));
       }
 
       if (!nsfw_methods.includes('nsfw_checker')) {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -7,12 +7,7 @@ import {
   selectActiveCanvasStagingAreaSessionId,
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraIsEnabledChanged } from 'features/controlLayers/store/lorasSlice';
-import {
-  paramsDispatch,
-  selectActiveParams,
-  syncedToOptimalDimension,
-  vaeSelected,
-} from 'features/controlLayers/store/paramsSlice';
+import { selectActiveParams, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
 import {
   selectActiveCanvas,
@@ -70,7 +65,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         // handle incompatible vae
         const { vae } = params;
         if (vae && vae.base !== newBase) {
-          paramsDispatch(api, vaeSelected, null);
+          dispatch(vaeSelected(null));
           modelsUpdatedDisabledOrCleared += 1;
         }
 
@@ -163,13 +158,13 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         }
       }
 
-      paramsDispatch(api, modelChanged, { model: newModel, previousModel: params.model });
+      dispatch(modelChanged({ model: newModel, previousModel: params.model }));
 
       const modelBase = selectBboxModelBase(state);
 
       if (modelBase !== params.model?.base) {
         // Sync generate tab settings whenever the model base changes
-        paramsDispatch(api, syncedToOptimalDimension);
+        dispatch(syncedToOptimalDimension());
         const sessionId = selectActiveCanvasStagingAreaSessionId(state);
         const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
         const isStaging = selectIsStaging(state);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -6,11 +6,9 @@ import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import {
   clipEmbedModelSelected,
   fluxVAESelected,
-  paramsDispatch,
   refinerModelChanged,
   selectActiveParams,
   t5EncoderModelSelected,
-  toStore,
   vaeSelected,
 } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
@@ -116,7 +114,7 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
     // Only clear the model if we have one currently selected
     if (selectedMainModel !== null) {
       log.debug({ selectedMainModel }, 'No main models available, clearing');
-      paramsDispatch(toStore(state, dispatch), modelChanged, { model: null });
+      dispatch(modelChanged({ model: null }));
     }
     return;
   }
@@ -166,7 +164,7 @@ const handleRefinerModels: ModelHandler = (models, state, dispatch, log) => {
 
   // Else, we need to clear the refiner model
   log.debug({ selectedRefinerModel }, 'Selected refiner model is not available, clearing');
-  paramsDispatch(toStore(state, dispatch), refinerModelChanged, null);
+  dispatch(refinerModelChanged(null));
   return;
 };
 
@@ -190,7 +188,7 @@ const handleVAEModels: ModelHandler = (models, state, dispatch, log) => {
 
   // Else, we need to clear the VAE model
   log.debug({ selectedVAEModel }, 'Selected VAE model is not available, clearing');
-  paramsDispatch(toStore(state, dispatch), vaeSelected, null);
+  dispatch(vaeSelected(null));
   return;
 };
 
@@ -435,14 +433,14 @@ const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedT5EncoderModel, firstModel },
       'No selected T5 encoder model or selected T5 encoder model is not available, selecting first available model'
     );
-    paramsDispatch(toStore(state, dispatch), t5EncoderModelSelected, zParameterT5EncoderModel.parse(firstModel));
+    dispatch(t5EncoderModelSelected(zParameterT5EncoderModel.parse(firstModel)));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedT5EncoderModel) {
     log.debug({ selectedT5EncoderModel }, 'Selected T5 encoder model is not available, clearing');
-    paramsDispatch(toStore(state, dispatch), t5EncoderModelSelected, null);
+    dispatch(t5EncoderModelSelected(null));
     return;
   }
 };
@@ -463,14 +461,14 @@ const handleCLIPEmbedModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedCLIPEmbedModel, firstModel },
       'No selected CLIP embed model or selected CLIP embed model is not available, selecting first available model'
     );
-    paramsDispatch(toStore(state, dispatch), clipEmbedModelSelected, zParameterCLIPEmbedModel.parse(firstModel));
+    dispatch(clipEmbedModelSelected(zParameterCLIPEmbedModel.parse(firstModel)));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedCLIPEmbedModel) {
     log.debug({ selectedCLIPEmbedModel }, 'Selected CLIP embed model is not available, clearing');
-    paramsDispatch(toStore(state, dispatch), clipEmbedModelSelected, null);
+    dispatch(clipEmbedModelSelected(null));
     return;
   }
 };
@@ -491,14 +489,14 @@ const handleFLUXVAEModels: ModelHandler = (models, state, dispatch, log) => {
       { selectedFLUXVAEModel, firstModel },
       'No selected FLUX VAE model or selected FLUX VAE model is not available, selecting first available model'
     );
-    paramsDispatch(toStore(state, dispatch), fluxVAESelected, zParameterVAEModel.parse(firstModel));
+    dispatch(fluxVAESelected(zParameterVAEModel.parse(firstModel)));
     return;
   }
 
   // No available models, we should clear the selected model - but only if we have one selected
   if (selectedFLUXVAEModel) {
     log.debug({ selectedFLUXVAEModel }, 'Selected FLUX VAE model is not available, clearing');
-    paramsDispatch(toStore(state, dispatch), fluxVAESelected, null);
+    dispatch(fluxVAESelected(null));
     return;
   }
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts

@@ -7,7 +7,6 @@ import {
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
-  paramsDispatch,
   selectActiveParams,
   setCfgRescaleMultiplier,
   setCfgScale,
@@ -67,56 +66,56 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
           // we store this as "default" within default settings
           // to distinguish it from no default set
           if (vae === 'default') {
-            paramsDispatch(api, vaeSelected, null);
+            dispatch(vaeSelected(null));
           } else {
             const vaeModel = models.find((model) => model.key === vae);
             const result = zParameterVAEModel.safeParse(vaeModel);
             if (!result.success) {
               return;
             }
-            paramsDispatch(api, vaeSelected, result.data);
+            dispatch(vaeSelected(result.data));
           }
         }
 
         if (vae_precision) {
           if (isParameterPrecision(vae_precision)) {
-            paramsDispatch(api, vaePrecisionChanged, vae_precision);
+            dispatch(vaePrecisionChanged(vae_precision));
           }
         }
 
         if (guidance) {
           if (isParameterGuidance(guidance)) {
-            paramsDispatch(api, setGuidance, guidance);
+            dispatch(setGuidance(guidance));
           }
         }
 
         if (cfg_scale) {
           if (isParameterCFGScale(cfg_scale)) {
-            paramsDispatch(api, setCfgScale, cfg_scale);
+            dispatch(setCfgScale(cfg_scale));
           }
         }
 
         if (!isNil(cfg_rescale_multiplier)) {
           if (isParameterCFGRescaleMultiplier(cfg_rescale_multiplier)) {
-            paramsDispatch(api, setCfgRescaleMultiplier, cfg_rescale_multiplier);
+            dispatch(setCfgRescaleMultiplier(cfg_rescale_multiplier));
           }
         } else {
           // Set this to 0 if it doesn't have a default. This value is
           // easy to miss in the UI when users are resetting defaults
           // and leaving it non-zero could lead to detrimental
           // effects.
-          paramsDispatch(api, setCfgRescaleMultiplier, 0);
+          dispatch(setCfgRescaleMultiplier(0));
         }
 
         if (steps) {
           if (isParameterSteps(steps)) {
-            paramsDispatch(api, setSteps, steps);
+            dispatch(setSteps(steps));
           }
         }
 
         if (scheduler) {
           if (isParameterScheduler(scheduler)) {
-            paramsDispatch(api, setScheduler, scheduler);
+            dispatch(setScheduler(scheduler));
           }
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
@@ -128,10 +127,10 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {
           if (isParameterWidth(width)) {
-            paramsDispatch(api, widthChanged, { width, ...setSizeOptions });
+            dispatch(widthChanged({ width, ...setSizeOptions }));
           }
           if (isParameterHeight(height)) {
-            paramsDispatch(api, heightChanged, { height, ...setSizeOptions });
+            dispatch(heightChanged({ height, ...setSizeOptions }));
           }
         }
 

invokeai/frontend/web/src/app/store/store.ts

@@ -48,6 +48,7 @@ import { authToastMiddleware } from 'services/api/authToastMiddleware';
 import type { JsonObject } from 'type-fest';
 
 import { reduxRememberDriver } from './enhancers/reduxRemember/driver';
+import { actionContextMiddleware } from './middleware/actionContextMiddleware';
 import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
@@ -179,6 +180,7 @@ export const createStore = (options?: { persist?: boolean; persistDebounce?: num
         .concat(api.middleware)
         .concat(dynamicMiddlewares)
         .concat(authToastMiddleware)
+        .concat(actionContextMiddleware)
         // .concat(getDebugLoggerMiddleware({ withDiff: true, withNextState: true }))
         .prepend(listenerMiddleware.middleware),
     enhancers: (getDefaultEnhancers) => {

invokeai/frontend/web/src/app/store/util.ts

@@ -0,0 +1,29 @@
+import type { UnknownAction } from '@reduxjs/toolkit';
+import type { TabName } from 'features/ui/store/uiTypes';
+
+const TAB_KEY = Symbol('tab');
+const CANVAS_ID_KEY = Symbol('canvasId');
+
+type TabActionContext = {
+  [TAB_KEY]: TabName;
+  [CANVAS_ID_KEY]?: string;
+};
+
+export const injectTabActionContext = (action: UnknownAction, tab: TabName, canvasId?: string) => {
+  const context: TabActionContext = canvasId ? { [TAB_KEY]: tab, [CANVAS_ID_KEY]: canvasId } : { [TAB_KEY]: tab };
+  Object.assign(action, { meta: context });
+};
+
+export const extractTabActionContext = (action: UnknownAction & { meta?: Partial<TabActionContext> }) => {
+  const tab = action.meta?.[TAB_KEY];
+  const canvasId = action.meta?.[CANVAS_ID_KEY];
+
+  if (!tab || (tab === 'canvas' && !canvasId)) {
+    return undefined;
+  }
+
+  return {
+    tab,
+    canvasId,
+  };
+};

invokeai/frontend/web/src/common/components/SessionMenuItems.tsx

@@ -2,7 +2,7 @@ import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { allEntitiesDeleted, inpaintMaskAdded } from 'features/controlLayers/store/canvasSlice';
-import { paramsReset, useParamsDispatch } from 'features/controlLayers/store/paramsSlice';
+import { paramsReset } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,6 @@ import { PiArrowsCounterClockwiseBold } from 'react-icons/pi';
 export const SessionMenuItems = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const paramsDispatch = useParamsDispatch();
   const tab = useAppSelector(selectActiveTab);
   const canvasManager = useCanvasManagerSafe();
 
@@ -21,8 +20,8 @@ export const SessionMenuItems = memo(() => {
     canvasManager?.stage.fitBboxToStage();
   }, [dispatch, canvasManager]);
   const resetGenerationSettings = useCallback(() => {
-    paramsDispatch(paramsReset);
-  }, [paramsDispatch]);
+    dispatch(paramsReset());
+  }, [dispatch]);
   return (
     <>
       {tab === 'canvas' && (

invokeai/frontend/web/src/features/controlLayers/components/ParamDenoisingStrength.tsx

@@ -8,10 +8,10 @@ import {
   useToken,
 } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import WavyLine from 'common/components/WavyLine';
-import { selectImg2imgStrength, setImg2imgStrength, useParamsDispatch } from 'features/controlLayers/store/paramsSlice';
+import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveRasterLayerEntities } from 'features/controlLayers/store/selectors';
 import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
 import { memo, useCallback, useMemo } from 'react';
@@ -25,15 +25,15 @@ const selectHasRasterLayersWithContent = createSelector(
 
 export const ParamDenoisingStrength = memo(() => {
   const img2imgStrength = useAppSelector(selectImg2imgStrength);
-  const paramsDispatch = useParamsDispatch();
+  const dispatch = useAppDispatch();
   const hasRasterLayersWithContent = useAppSelector(selectHasRasterLayersWithContent);
   const selectedModelConfig = useSelectedModelConfig();
 
   const onChange = useCallback(
     (v: number) => {
-      paramsDispatch(setImg2imgStrength, v);
+      dispatch(setImg2imgStrength(v));
     },
-    [paramsDispatch]
+    [dispatch]
   );
 
   const config = useAppSelector(selectImg2imgStrengthConfig);