feat(ui): wip canvas migration 4

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -12,18 +12,20 @@ const selector = createSelector(
   [canvasSelector],
   (canvas) => {
     const {
-      layerState: {
-        stagingArea: { images, selectedImageIndex },
-      },
+      layerState,
       shouldShowStagingImage,
       shouldShowStagingOutline,
       boundingBoxCoordinates: { x, y },
       boundingBoxDimensions: { width, height },
     } = canvas;
 
+    const { selectedImageIndex, images } = layerState.stagingArea;
+
     return {
       currentStagingAreaImage:
-        images.length > 0 ? images[selectedImageIndex] : undefined,
+        images.length > 0 && selectedImageIndex !== undefined
+          ? images[selectedImageIndex]
+          : undefined,
       isOnFirstImage: selectedImageIndex === 0,
       isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -22,6 +22,7 @@ import {
   CanvasLayer,
   CanvasLayerState,
   CanvasMaskLine,
+  CanvasSession,
   CanvasState,
   CanvasTool,
   Dimensions,
@@ -29,6 +30,7 @@ import {
   isCanvasBaseImage,
   isCanvasMaskLine,
 } from './canvasTypes';
+import { stringToArray } from 'konva/lib/shapes/Text';
 
 export const initialLayerState: CanvasLayerState = {
   objects: [],
@@ -285,16 +287,28 @@ export const canvasSlice = createSlice({
     setIsMoveStageKeyHeld: (state, action: PayloadAction<boolean>) => {
       state.isMoveStageKeyHeld = action.payload;
     },
-    addImageToStagingArea: (
+    canvasSessionIdChanged: (state, action: PayloadAction<string>) => {
+      state.layerState.stagingArea.sessionId = action.payload;
+    },
+    stagingAreaInitialized: (
       state,
-      action: PayloadAction<{
-        boundingBox: IRect;
-        image: InvokeAI.Image;
-      }>
+      action: PayloadAction<{ sessionId: string; boundingBox: IRect }>
     ) => {
-      const { boundingBox, image } = action.payload;
+      const { sessionId, boundingBox } = action.payload;
 
-      if (!boundingBox || !image) return;
+      state.layerState.stagingArea = {
+        boundingBox,
+        sessionId,
+        images: [],
+        selectedImageIndex: -1,
+      };
+    },
+    addImageToStagingArea: (state, action: PayloadAction<InvokeAI.Image>) => {
+      const image = action.payload;
+
+      if (!image || !state.layerState.stagingArea.boundingBox) {
+        return;
+      }
 
       state.pastLayerStates.push(cloneDeep(state.layerState));
 
@@ -305,7 +319,7 @@ export const canvasSlice = createSlice({
       state.layerState.stagingArea.images.push({
         kind: 'image',
         layer: 'base',
-        ...boundingBox,
+        ...state.layerState.stagingArea.boundingBox,
         image,
       });
 
@@ -321,9 +335,7 @@ export const canvasSlice = createSlice({
         state.pastLayerStates.shift();
       }
 
-      state.layerState.stagingArea = {
-        ...initialLayerState.stagingArea,
-      };
+      state.layerState.stagingArea = { ...initialLayerState.stagingArea };
 
       state.futureLayerStates = [];
       state.shouldShowStagingOutline = true;
@@ -661,6 +673,10 @@ export const canvasSlice = createSlice({
       }
     },
     nextStagingAreaImage: (state) => {
+      if (!state.layerState.stagingArea.images.length) {
+        return;
+      }
+
       const currentIndex = state.layerState.stagingArea.selectedImageIndex;
       const length = state.layerState.stagingArea.images.length;
 
@@ -670,6 +686,10 @@ export const canvasSlice = createSlice({
       );
     },
     prevStagingAreaImage: (state) => {
+      if (!state.layerState.stagingArea.images.length) {
+        return;
+      }
+
       const currentIndex = state.layerState.stagingArea.selectedImageIndex;
 
       state.layerState.stagingArea.selectedImageIndex = Math.max(
@@ -678,6 +698,10 @@ export const canvasSlice = createSlice({
       );
     },
     commitStagingAreaImage: (state) => {
+      if (!state.layerState.stagingArea.images.length) {
+        return;
+      }
+
       const { images, selectedImageIndex } = state.layerState.stagingArea;
 
       state.pastLayerStates.push(cloneDeep(state.layerState));
@@ -883,6 +907,8 @@ export const {
   undo,
   setScaledBoundingBoxDimensions,
   setShouldRestrictStrokesToBox,
+  stagingAreaInitialized,
+  canvasSessionIdChanged,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -90,9 +90,16 @@ export type CanvasLayerState = {
   stagingArea: {
     images: CanvasImage[];
     selectedImageIndex: number;
+    sessionId?: string;
+    boundingBox?: IRect;
   };
 };
 
+export type CanvasSession = {
+  sessionId: string;
+  boundingBox: IRect;
+};
+
 // type guards
 export const isCanvasMaskLine = (obj: CanvasObject): obj is CanvasMaskLine =>
   obj.kind === 'line' && obj.layer === 'mask';
@@ -162,5 +169,4 @@ export interface CanvasState {
   stageDimensions: Dimensions;
   stageScale: number;
   tool: CanvasTool;
-  pendingBoundingBox?: IRect;
 }