staging area multi-canvas support

Author: Attila Cseh

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

@@ -1,6 +1,6 @@
 import type { AppStartListening } from 'app/store/store';
 import { selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
-import { selectSelectedCanvas } from 'features/controlLayers/store/selectors';
+import { selectCanvases } from 'features/controlLayers/store/selectors';
 import { getImageUsage } from 'features/deleteImageModal/store/state';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
@@ -19,12 +19,12 @@ export const addDeleteBoardAndImagesFulfilledListener = (startAppListening: AppS
 
       const state = getState();
       const nodes = selectNodesSlice(state);
-      const canvas = selectSelectedCanvas(state);
+      const canvases = selectCanvases(state);
       const upscale = selectUpscaleSlice(state);
       const refImages = selectRefImagesSlice(state);
 
       deleted_images.forEach((image_name) => {
-        const imageUsage = getImageUsage(nodes, canvas, upscale, refImages, image_name);
+        const imageUsage = getImageUsage(nodes, canvases, upscale, refImages, image_name);
 
         if (imageUsage.isNodesImage && !wasNodeEditorReset) {
           dispatch(nodeEditorReset());

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

@@ -1,7 +1,10 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/store';
 import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
-import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import {
+  buildSelectIsStagingBySessionId,
+  selectSelectedCanvasSessionId,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraIsEnabledChanged } from 'features/controlLayers/store/lorasSlice';
 import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
@@ -159,7 +162,9 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       if (modelBase !== state.params.model?.base) {
         // Sync generate tab settings whenever the model base changes
         dispatch(syncedToOptimalDimension());
-        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+        const sessionId = selectSelectedCanvasSessionId(state);
+        const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
+        const isStaging = selectIsStaging(state);
         if (!isStaging) {
           // Canvas tab only syncs if not staging
           dispatch(bboxSyncedToOptimalDimension());

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

@@ -1,7 +1,10 @@
 import type { AppStartListening } from 'app/store/store';
 import { isNil } from 'es-toolkit';
 import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
-import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import {
+  buildSelectIsStagingBySessionId,
+  selectSelectedCanvasSessionId,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
   setCfgRescaleMultiplier,
@@ -115,7 +118,9 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
-        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+        const sessionId = selectSelectedCanvasSessionId(state);
+        const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
+        const isStaging = selectIsStaging(state);
 
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {

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

@@ -22,7 +22,7 @@ import { merge } from 'es-toolkit';
 import { omit, pick } from 'es-toolkit/compat';
 import { changeBoardModalSliceConfig } from 'features/changeBoardModal/store/slice';
 import { canvasSettingsSliceConfig } from 'features/controlLayers/store/canvasSettingsSlice';
-import { canvasSliceConfig, undoableCanvasesReducer } from 'features/controlLayers/store/canvasSlice';
+import { canvasSliceConfig, migrateCanvas, undoableCanvasesReducer } from 'features/controlLayers/store/canvasSlice';
 import { canvasSessionSliceConfig } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { lorasSliceConfig } from 'features/controlLayers/store/lorasSlice';
 import { paramsSliceConfig } from 'features/controlLayers/store/paramsSlice';
@@ -219,8 +219,9 @@ export const createStore = (options?: { persist?: boolean; persistDebounce?: num
   // Once-off listener to support waiting for rehydration before rendering the app
   startAppListening({
     actionCreator: createAction(REMEMBER_REHYDRATED),
-    effect: (action, { unsubscribe }) => {
+    effect: (action, { dispatch, unsubscribe }) => {
       unsubscribe();
+      dispatch(migrateCanvas());
       options?.onRehydrated?.();
     },
   });

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

@@ -1,7 +1,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 { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { paramsReset } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
@@ -12,12 +12,13 @@ export const SessionMenuItems = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const tab = useAppSelector(selectActiveTab);
+  const canvasManager = useCanvasManagerSafe();
 
   const resetCanvasLayers = useCallback(() => {
     dispatch(allEntitiesDeleted());
     dispatch(inpaintMaskAdded({ isSelected: true, isBookmarked: true }));
-    $canvasManager.get()?.stage.fitBboxToStage();
-  }, [dispatch]);
+    canvasManager?.stage.fitBboxToStage();
+  }, [dispatch, canvasManager]);
   const resetGenerationSettings = useCallback(() => {
     dispatch(paramsReset());
   }, [dispatch]);

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 export const CanvasAlertsPreserveMask = memo(() => {
   const { t } = useTranslation();
-  const preserveMask = useAppSelector(selectPreserveMask);
+  const preserveMask = useAppSelector((state) => selectPreserveMask(state));
 
   if (!preserveMask) {
     return null;

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSaveAllImagesToGallery.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 export const CanvasAlertsSaveAllImagesToGallery = memo(() => {
   const { t } = useTranslation();
-  const saveAllImagesToGallery = useAppSelector(selectSaveAllImagesToGallery);
+  const saveAllImagesToGallery = useAppSelector((state) => selectSaveAllImagesToGallery(state));
 
   if (!saveAllImagesToGallery) {
     return null;

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 export const CanvasAutoProcessSwitch = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const autoProcess = useAppSelector(selectAutoProcess);
+  const autoProcess = useAppSelector((state) => selectAutoProcess(state));
 
   const onChange = useCallback(() => {
     dispatch(settingsAutoProcessToggled());

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

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 export const CanvasOperationIsolatedLayerPreviewSwitch = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const isolatedLayerPreview = useAppSelector(selectIsolatedLayerPreview);
+  const isolatedLayerPreview = useAppSelector((state) => selectIsolatedLayerPreview(state));
   const onChangeIsolatedPreview = useCallback(() => {
     dispatch(settingsIsolatedLayerPreviewToggled());
   }, [dispatch]);

invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx

@@ -35,7 +35,7 @@ const FilterContentAdvanced = memo(
     const config = useStore(adapter.filterer.$filterConfig);
     const isProcessing = useStore(adapter.filterer.$isProcessing);
     const hasImageState = useStore(adapter.filterer.$hasImageState);
-    const autoProcess = useAppSelector(selectAutoProcess);
+    const autoProcess = useAppSelector((state) => selectAutoProcess(state));
 
     const onChangeFilterConfig = useCallback(
       (filterConfig: FilterConfig) => {