Adds staging area

frontend/package.json

@@ -35,6 +35,7 @@
     "react-icons": "^4.4.0",
     "react-image-pan-zoom-rotate": "^1.6.0",
     "react-konva": "^18.2.3",
+    "react-konva-utils": "^0.3.0",
     "react-redux": "^8.0.2",
     "react-transition-group": "^4.4.5",
     "redux-deep-persist": "^1.0.6",

frontend/src/app/socketio/listeners.ts

@@ -38,7 +38,7 @@ import {
   requestSystemConfig,
 } from './actions';
 import {
-  addImageToOutpaintingSesion,
+  addImageToOutpainting,
   setImageToInpaint,
 } from 'features/canvas/canvasSlice';
 import { tabMap } from 'features/tabs/InvokeTabs';
@@ -119,7 +119,7 @@ const makeSocketIOListeners = (
         if (data.generationMode === 'outpainting' && data.boundingBox) {
           const { boundingBox } = data;
           dispatch(
-            addImageToOutpaintingSesion({
+            addImageToOutpainting({
               image: newImage,
               boundingBox,
             })

frontend/src/app/store.ts

@@ -94,6 +94,18 @@ export const store = configureStore({
       immutableCheck: false,
       serializableCheck: false,
     }).concat(socketioMiddleware()),
+  devTools: {
+    actionsDenylist: [
+      // 'canvas/setCursorPosition',
+      // 'canvas/setStageCoordinates',
+      // 'canvas/setStageScale',
+      // 'canvas/setIsDrawing',
+      // 'canvas/setBoundingBoxCoordinates',
+      // 'canvas/setBoundingBoxDimensions',
+      // 'canvas/setIsDrawing',
+      // 'canvas/addPointToCurrentLine',
+    ],
+  },
 });
 
 export type AppGetState = typeof store.getState;

frontend/src/common/util/parameterTranslation.ts

@@ -111,7 +111,7 @@ export const frontendToBackendParameters = (
     canvasImageLayerRef.current
   ) {
     const {
-      objects,
+      layerState: { objects },
       boundingBoxCoordinates,
       boundingBoxDimensions,
       inpaintReplace,

frontend/src/features/canvas/IAICanvas.tsx

@@ -9,6 +9,7 @@ import { useAppSelector } from 'app/store';
 import {
   baseCanvasImageSelector,
   currentCanvasSelector,
+  isStagingSelector,
   outpaintingCanvasSelector,
 } from 'features/canvas/canvasSlice';
 
@@ -33,17 +34,16 @@ import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
 import IAICanvasGrid from './IAICanvasGrid';
 import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
 import IAICanvasStatusText from './IAICanvasStatusText';
-import { Box, Button } from '@chakra-ui/react';
+import IAICanvasStagingArea from './IAICanvasStagingArea';
-import { rgbaColorToRgbString, rgbaColorToString } from './util/colorToString';
 
 const canvasSelector = createSelector(
   [
     currentCanvasSelector,
     outpaintingCanvasSelector,
-    baseCanvasImageSelector,
+    isStagingSelector,
     activeTabNameSelector,
   ],
-  (currentCanvas, outpaintingCanvas, baseCanvasImage, activeTabName) => {
+  (currentCanvas, outpaintingCanvas, isStaging, activeTabName) => {
     const {
       isMaskEnabled,
       stageScale,
@@ -54,29 +54,23 @@ const canvasSelector = createSelector(
       stageDimensions,
       stageCoordinates,
       tool,
-      layer,
-      boundingBoxCoordinates,
-      boundingBoxDimensions,
       isMovingStage,
-      maskColor,
     } = currentCanvas;
 
     const { shouldShowGrid } = outpaintingCanvas;
 
     let stageCursor: string | undefined = '';
 
-    if (tool === 'move') {
+    if (tool === 'move' || isStaging) {
-      if (isTransformingBoundingBox) {
-        stageCursor = undefined;
-      } else if (isMouseOverBoundingBox) {
-        stageCursor = 'move';
-      } else if (activeTabName === 'outpainting') {
       if (isMovingStage) {
         stageCursor = 'grabbing';
       } else {
         stageCursor = 'grab';
       }
-      }
+    } else if (isTransformingBoundingBox) {
+      stageCursor = undefined;
+    } else if (isMouseOverBoundingBox) {
+      stageCursor = 'move';
     } else {
       stageCursor = 'none';
     }
@@ -91,11 +85,8 @@ const canvasSelector = createSelector(
       stageDimensions,
       stageScale,
       tool,
-      layer,
+      isOnOutpaintingTab: activeTabName === 'outpainting',
-      boundingBoxCoordinates,
+      isStaging,
-      boundingBoxDimensions,
-      maskColorString: rgbaColorToString({ ...maskColor, a: 0.5 }),
-      outpaintingOnly: activeTabName === 'outpainting',
     };
   },
   {
@@ -120,11 +111,8 @@ const IAICanvas = () => {
     stageDimensions,
     stageScale,
     tool,
-    layer,
+    isOnOutpaintingTab,
-    outpaintingOnly,
+    isStaging,
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    maskColorString,
   } = useAppSelector(canvasSelector);
 
   useCanvasHotkeys();
@@ -151,25 +139,15 @@ const IAICanvas = () => {
   const { handleDragStart, handleDragMove, handleDragEnd } =
     useCanvasDragMove();
 
-  const panelTop = boundingBoxCoordinates.y + boundingBoxDimensions.height;
-  const panelLeft = boundingBoxCoordinates.x + boundingBoxDimensions.width;
-
   return (
     <div className="inpainting-canvas-container">
       <div className="inpainting-canvas-wrapper">
         <Stage
           tabIndex={-1}
           ref={stageRef}
+          className={'inpainting-canvas-stage'}
           style={{
-            outline: 'none',
             ...(stageCursor ? { cursor: stageCursor } : {}),
-            border: `1px solid var(--border-color-light)`,
-            borderRadius: '0.5rem',
-            boxShadow: `inset 0 0 20px ${layer === 'mask' ? '1px' : '1px'} ${
-              layer === 'mask'
-                ? 'var(--accent-color)'
-                : 'var(--border-color-light)'
-            }`,
           }}
           x={stageCoordinates.x}
           y={stageCoordinates.y}
@@ -186,9 +164,11 @@ const IAICanvas = () => {
           onDragMove={handleDragMove}
           onDragEnd={handleDragEnd}
           onWheel={handleWheel}
-          listening={tool === 'move' && !isModifyingBoundingBox}
+          listening={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
           draggable={
-            tool === 'move' && !isModifyingBoundingBox && outpaintingOnly
+            (tool === 'move' || isStaging) &&
+            !isModifyingBoundingBox &&
+            isOnOutpaintingTab
           }
         >
           <Layer id={'grid'} visible={shouldShowGrid}>
@@ -209,14 +189,21 @@ const IAICanvas = () => {
             <IAICanvasMaskCompositer listening={false} />
           </Layer>
           <Layer id={'tool'}>
+            {!isStaging && (
+              <>
                 <IAICanvasBoundingBox visible={shouldShowBoundingBox} />
                 <IAICanvasBrushPreview
                   visible={tool !== 'move'}
                   listening={false}
                 />
+              </>
+            )}
+          </Layer>
+          <Layer imageSmoothingEnabled={false}>
+            {isStaging && <IAICanvasStagingArea />}
           </Layer>
         </Stage>
-        {outpaintingOnly && <IAICanvasStatusText />}
+        {isOnOutpaintingTab && <IAICanvasStatusText />}
       </div>
     </div>
   );

frontend/src/features/canvas/IAICanvasBrushButtonPopover.tsx

@@ -1,13 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
 import {
   currentCanvasSelector,
-  outpaintingCanvasSelector,
+  isStagingSelector,
   setBrushColor,
   setBrushSize,
   setTool,
 } from './canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
-import { activeTabNameSelector } from 'features/options/optionsSelectors';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { FaPaintBrush } from 'react-icons/fa';
@@ -17,35 +16,15 @@ import IAISlider from 'common/components/IAISlider';
 import { Flex } from '@chakra-ui/react';
 
 export const selector = createSelector(
-  [currentCanvasSelector, outpaintingCanvasSelector, activeTabNameSelector],
+  [currentCanvasSelector, isStagingSelector],
-  (currentCanvas, outpaintingCanvas, activeTabName) => {
+  (currentCanvas, isStaging) => {
-    const {
+    const { brushColor, brushSize, tool } = currentCanvas;
-      layer,
-      maskColor,
-      brushColor,
-      brushSize,
-      eraserSize,
-      tool,
-      shouldDarkenOutsideBoundingBox,
-      shouldShowIntermediates,
-    } = currentCanvas;
-
-    const { shouldShowGrid, shouldSnapToGrid, shouldAutoSave } =
-      outpaintingCanvas;
 
     return {
-      layer,
       tool,
-      maskColor,
       brushColor,
       brushSize,
-      eraserSize,
+      isStaging,
-      activeTabName,
-      shouldShowGrid,
-      shouldSnapToGrid,
-      shouldAutoSave,
-      shouldDarkenOutsideBoundingBox,
-      shouldShowIntermediates,
     };
   },
   {
@@ -57,7 +36,7 @@ export const selector = createSelector(
 
 const IAICanvasBrushButtonPopover = () => {
   const dispatch = useAppDispatch();
-  const { tool, brushColor, brushSize } = useAppSelector(selector);
+  const { tool, brushColor, brushSize, isStaging } = useAppSelector(selector);
 
   return (
     <IAIPopover
@@ -67,8 +46,9 @@ const IAICanvasBrushButtonPopover = () => {
           aria-label="Brush (B)"
           tooltip="Brush (B)"
           icon={<FaPaintBrush />}
-          data-selected={tool === 'brush'}
+          data-selected={tool === 'brush' && !isStaging}
           onClick={() => dispatch(setTool('brush'))}
+          isDisabled={isStaging}
         />
       }
     >

frontend/src/features/canvas/IAICanvasControls/IAICanvasMaskControls/IAICanvasMaskClear.tsx

@@ -18,9 +18,10 @@ import { useToast } from '@chakra-ui/react';
 const canvasMaskClearSelector = createSelector(
   [currentCanvasSelector, activeTabNameSelector],
   (currentCanvas, activeTabName) => {
-    const { isMaskEnabled, objects } = currentCanvas as
+    const {
-      | InpaintingCanvasState
+      isMaskEnabled,
-      | OutpaintingCanvasState;
+      layerState: { objects },
+    } = currentCanvas as InpaintingCanvasState | OutpaintingCanvasState;
 
     return {
       isMaskEnabled,

frontend/src/features/canvas/IAICanvasControls/IAICanvasRedoButton.tsx

@@ -11,10 +11,10 @@ import _ from 'lodash';
 const canvasRedoSelector = createSelector(
   [currentCanvasSelector, activeTabNameSelector],
   (currentCanvas, activeTabName) => {
-    const { futureObjects } = currentCanvas;
+    const { futureLayerStates } = currentCanvas;
 
     return {
-      canRedo: futureObjects.length > 0,
+      canRedo: futureLayerStates.length > 0,
       activeTabName,
     };
   },
@@ -34,7 +34,7 @@ export default function IAICanvasRedoButton() {
   };
 
   useHotkeys(
-    ['meta+shift+z', 'control+shift+z', 'control+y', 'meta+y'],
+    ['meta+shift+z', 'ctrl+shift+z', 'control+y', 'meta+y'],
     () => {
       handleRedo();
     },

frontend/src/features/canvas/IAICanvasControls/IAICanvasUndoButton.tsx

@@ -11,10 +11,10 @@ import { activeTabNameSelector } from 'features/options/optionsSelectors';
 const canvasUndoSelector = createSelector(
   [currentCanvasSelector, activeTabNameSelector],
   (canvas, activeTabName) => {
-    const { pastObjects } = canvas;
+    const { pastLayerStates } = canvas;
 
     return {
-      canUndo: pastObjects.length > 0,
+      canUndo: pastLayerStates.length > 0,
       activeTabName,
     };
   },
@@ -35,7 +35,7 @@ export default function IAICanvasUndoButton() {
   };
 
   useHotkeys(
-    ['meta+z', 'control+z'],
+    ['meta+z', 'ctrl+z'],
     () => {
       handleUndo();
     },

frontend/src/features/canvas/IAICanvasEraserButtonPopover.tsx

@@ -1,5 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { currentCanvasSelector, setEraserSize, setTool } from './canvasSlice';
+import {
+  currentCanvasSelector,
+  isStagingSelector,
+  setEraserSize,
+  setTool,
+} from './canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -10,13 +15,14 @@ import { Flex } from '@chakra-ui/react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 export const selector = createSelector(
-  [currentCanvasSelector],
+  [currentCanvasSelector, isStagingSelector],
-  (currentCanvas) => {
+  (currentCanvas, isStaging) => {
     const { eraserSize, tool } = currentCanvas;
 
     return {
       tool,
       eraserSize,
+      isStaging,
     };
   },
   {
@@ -27,7 +33,7 @@ export const selector = createSelector(
 );
 const IAICanvasEraserButtonPopover = () => {
   const dispatch = useAppDispatch();
-  const { tool, eraserSize } = useAppSelector(selector);
+  const { tool, eraserSize, isStaging } = useAppSelector(selector);
 
   const handleSelectEraserTool = () => dispatch(setTool('eraser'));
 
@@ -51,7 +57,8 @@ const IAICanvasEraserButtonPopover = () => {
           aria-label="Eraser (E)"
           tooltip="Eraser (E)"
           icon={<FaEraser />}
-          data-selected={tool === 'eraser'}
+          data-selected={tool === 'eraser' && !isStaging}
+          isDisabled={isStaging}
           onClick={() => dispatch(setTool('eraser'))}
         />
       }

frontend/src/features/canvas/IAICanvasMaskCompositer.tsx

@@ -148,7 +148,17 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
     return () => clearInterval(timer);
   }, []);
 
-  if (!fillPatternImage) return null;
+  if (
+    !(
+      fillPatternImage &&
+      stageCoordinates.x &&
+      stageCoordinates.y &&
+      stageScale &&
+      stageDimensions.width &&
+      stageDimensions.height
+    )
+  )
+    return null;
 
   return (
     <Rect

frontend/src/features/canvas/IAICanvasMaskLines.tsx

@@ -13,13 +13,8 @@ import _ from 'lodash';
 
 export const canvasLinesSelector = createSelector(
   currentCanvasSelector,
-  (currentCanvas: GenericCanvasState) => {
+  (currentCanvas) => {
-    const { objects } = currentCanvas as
+    return currentCanvas.layerState.objects;
-      | InpaintingCanvasState
-      | OutpaintingCanvasState;
-    return {
-      objects,
-    };
   },
   {
     memoizeOptions: {
@@ -37,7 +32,7 @@ type InpaintingCanvasLinesProps = GroupConfig;
  */
 const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
   const { ...rest } = props;
-  const { objects } = useAppSelector(canvasLinesSelector);
+  const objects = useAppSelector(canvasLinesSelector);
 
   return (
     <Group listening={false} {...rest}>

frontend/src/features/canvas/IAICanvasObjectRenderer.tsx

@@ -1,4 +1,4 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createSelector, current } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store';
 import _ from 'lodash';
 import { Group, Line } from 'react-konva';
@@ -13,7 +13,10 @@ import { rgbaColorToString } from './util/colorToString';
 const selector = createSelector(
   [currentCanvasSelector],
   (currentCanvas) => {
-    return currentCanvas.objects;
+    const { objects } = currentCanvas.layerState;
+    return {
+      objects,
+    };
   },
   {
     memoizeOptions: {
@@ -23,7 +26,7 @@ const selector = createSelector(
 );
 
 const IAICanvasObjectRenderer = () => {
-  const objects = useAppSelector(selector);
+  const { objects } = useAppSelector(selector);
 
   if (!objects) return null;
 

frontend/src/features/canvas/IAICanvasOutpaintingControls.tsx

@@ -2,6 +2,7 @@ import { ButtonGroup } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import {
   currentCanvasSelector,
+  isStagingSelector,
   resetCanvas,
   setTool,
   uploadOutpaintingMergedImage,
@@ -27,12 +28,13 @@ import IAICanvasBrushButtonPopover from './IAICanvasBrushButtonPopover';
 import IAICanvasMaskButtonPopover from './IAICanvasMaskButtonPopover';
 
 export const canvasControlsSelector = createSelector(
-  [currentCanvasSelector],
+  [currentCanvasSelector, isStagingSelector],
-  (currentCanvas) => {
+  (currentCanvas, isStaging) => {
     const { tool } = currentCanvas;
 
     return {
       tool,
+      isStaging,
     };
   },
   {
@@ -44,7 +46,7 @@ export const canvasControlsSelector = createSelector(
 
 const IAICanvasOutpaintingControls = () => {
   const dispatch = useAppDispatch();
-  const { tool } = useAppSelector(canvasControlsSelector);
+  const { tool, isStaging } = useAppSelector(canvasControlsSelector);
 
   return (
     <div className="inpainting-settings">
@@ -56,7 +58,7 @@ const IAICanvasOutpaintingControls = () => {
           aria-label="Move (M)"
           tooltip="Move (M)"
           icon={<FaArrowsAlt />}
-          data-selected={tool === 'move'}
+          data-selected={tool === 'move' || isStaging}
           onClick={() => dispatch(setTool('move'))}
         />
       </ButtonGroup>

frontend/src/features/canvas/IAICanvasStagingArea.tsx

@@ -0,0 +1,164 @@
+import { background, ButtonGroup, ChakraProvider } from '@chakra-ui/react';
+import { CacheProvider } from '@emotion/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import IAIButton from 'common/components/IAIButton';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { GroupConfig } from 'konva/lib/Group';
+import _ from 'lodash';
+import { emotionCache } from 'main';
+import { useState } from 'react';
+import {
+  FaArrowLeft,
+  FaArrowRight,
+  FaCheck,
+  FaEye,
+  FaEyeSlash,
+  FaTrash,
+} from 'react-icons/fa';
+import { Group, Rect } from 'react-konva';
+import { Html } from 'react-konva-utils';
+import {
+  commitStagingAreaImage,
+  currentCanvasSelector,
+  discardStagedImages,
+  nextStagingAreaImage,
+  prevStagingAreaImage,
+} from './canvasSlice';
+import IAICanvasImage from './IAICanvasImage';
+
+const selector = createSelector(
+  [currentCanvasSelector],
+  (currentCanvas) => {
+    const {
+      layerState: {
+        stagingArea: { images, selectedImageIndex },
+      },
+    } = currentCanvas;
+
+    return {
+      currentStagingAreaImage:
+        images.length > 0 ? images[selectedImageIndex] : undefined,
+      isOnFirstImage: selectedImageIndex === 0,
+      isOnLastImage: selectedImageIndex === images.length - 1,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+type Props = GroupConfig;
+
+const IAICanvasStagingArea = (props: Props) => {
+  const { ...rest } = props;
+  const dispatch = useAppDispatch();
+  const { isOnFirstImage, isOnLastImage, currentStagingAreaImage } =
+    useAppSelector(selector);
+
+  const [shouldShowStagedImage, setShouldShowStagedImage] =
+    useState<boolean>(true);
+
+  if (!currentStagingAreaImage) return null;
+
+  const {
+    x,
+    y,
+    image: { width, height, url },
+  } = currentStagingAreaImage;
+
+  return (
+    <Group {...rest}>
+      <Group>
+        {shouldShowStagedImage && <IAICanvasImage url={url} x={x} y={y} />}
+
+        <Rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          strokeWidth={1}
+          stroke={'black'}
+          strokeScaleEnabled={false}
+        />
+        <Rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          dash={[4, 4]}
+          strokeWidth={1}
+          stroke={'white'}
+          strokeScaleEnabled={false}
+        />
+      </Group>
+      <Html>
+        <CacheProvider value={emotionCache}>
+          <ChakraProvider>
+            <div
+              style={{
+                position: 'absolute',
+                top: y + height,
+                left: x + width / 2 - 216 / 2,
+                padding: '0.5rem',
+                filter: 'drop-shadow(0 0.5rem 1rem rgba(0,0,0))',
+              }}
+            >
+              <ButtonGroup isAttached>
+                <IAIIconButton
+                  tooltip="Previous"
+                  tooltipProps={{ placement: 'bottom' }}
+                  aria-label="Previous"
+                  icon={<FaArrowLeft />}
+                  onClick={() => dispatch(prevStagingAreaImage())}
+                  data-selected={true}
+                  isDisabled={isOnFirstImage}
+                />
+                <IAIIconButton
+                  tooltip="Next"
+                  tooltipProps={{ placement: 'bottom' }}
+                  aria-label="Next"
+                  icon={<FaArrowRight />}
+                  onClick={() => dispatch(nextStagingAreaImage())}
+                  data-selected={true}
+                  isDisabled={isOnLastImage}
+                />
+                <IAIIconButton
+                  tooltip="Accept"
+                  tooltipProps={{ placement: 'bottom' }}
+                  aria-label="Accept"
+                  icon={<FaCheck />}
+                  onClick={() => dispatch(commitStagingAreaImage())}
+                  data-selected={true}
+                />
+                <IAIIconButton
+                  tooltip="Show/Hide"
+                  tooltipProps={{ placement: 'bottom' }}
+                  aria-label="Show/Hide"
+                  data-alert={!shouldShowStagedImage}
+                  icon={shouldShowStagedImage ? <FaEye /> : <FaEyeSlash />}
+                  onClick={() =>
+                    setShouldShowStagedImage(!shouldShowStagedImage)
+                  }
+                  data-selected={true}
+                />
+                <IAIIconButton
+                  tooltip="Discard All"
+                  tooltipProps={{ placement: 'bottom' }}
+                  aria-label="Discard All"
+                  icon={<FaTrash />}
+                  onClick={() => dispatch(discardStagedImages())}
+                  data-selected={true}
+                />
+              </ButtonGroup>
+            </div>
+          </ChakraProvider>
+        </CacheProvider>
+      </Html>
+    </Group>
+  );
+};
+
+export default IAICanvasStagingArea;

frontend/src/features/canvas/canvasSlice.ts

@@ -47,6 +47,9 @@ export interface GenericCanvasState {
   intermediateImage?: InvokeAI.Image;
   shouldShowIntermediates: boolean;
   maxHistory: number;
+  layerState: CanvasLayerState;
+  pastLayerStates: CanvasLayerState[];
+  futureLayerStates: CanvasLayerState[];
 }
 
 export type CanvasLayer = 'base' | 'mask';
@@ -84,7 +87,19 @@ export type CanvasLine = CanvasAnyLine & {
   color?: RgbaColor;
 };
 
-type CanvasObject = CanvasImage | CanvasLine | CanvasMaskLine;
+export type CanvasObject = CanvasImage | CanvasLine | CanvasMaskLine;
+
+export type CanvasLayerState = {
+  objects: CanvasObject[];
+  stagingArea: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    images: CanvasImage[];
+    selectedImageIndex: number;
+  };
+};
 
 // type guards
 export const isCanvasMaskLine = (obj: CanvasObject): obj is CanvasMaskLine =>
@@ -102,24 +117,13 @@ export const isCanvasAnyLine = (
 
 export type OutpaintingCanvasState = GenericCanvasState & {
   layer: CanvasLayer;
-  objects: CanvasObject[];
-  pastObjects: CanvasObject[][];
-  futureObjects: CanvasObject[][];
   shouldShowGrid: boolean;
   shouldSnapToGrid: boolean;
   shouldAutoSave: boolean;
-  stagingArea: {
-    images: CanvasImage[];
-    selectedImageIndex: number;
-  };
 };
 
 export type InpaintingCanvasState = GenericCanvasState & {
   layer: 'mask';
-  objects: CanvasObject[];
-  pastObjects: CanvasObject[][];
-  futureObjects: CanvasObject[][];
-  imageToInpaint?: InvokeAI.Image;
 };
 
 export type BaseCanvasState = InpaintingCanvasState | OutpaintingCanvasState;
@@ -133,6 +137,18 @@ export interface CanvasState {
   outpainting: OutpaintingCanvasState;
 }
 
+const initialLayerState: CanvasLayerState = {
+  objects: [],
+  stagingArea: {
+    x: -1,
+    y: -1,
+    width: -1,
+    height: -1,
+    images: [],
+    selectedImageIndex: -1,
+  },
+};
+
 const initialGenericCanvasState: GenericCanvasState = {
   tool: 'brush',
   brushColor: { r: 90, g: 90, b: 255, a: 1 },
@@ -164,7 +180,10 @@ const initialGenericCanvasState: GenericCanvasState = {
   isMoveStageKeyHeld: false,
   shouldShowIntermediates: true,
   isMovingStage: false,
-  maxHistory: 256,
+  maxHistory: 128,
+  layerState: initialLayerState,
+  futureLayerStates: [],
+  pastLayerStates: [],
 };
 
 const initialCanvasState: CanvasState = {
@@ -172,20 +191,10 @@ const initialCanvasState: CanvasState = {
   doesCanvasNeedScaling: false,
   inpainting: {
     layer: 'mask',
-    objects: [],
-    pastObjects: [],
-    futureObjects: [],
     ...initialGenericCanvasState,
   },
   outpainting: {
     layer: 'base',
-    objects: [],
-    pastObjects: [],
-    futureObjects: [],
-    stagingArea: {
-      images: [],
-      selectedImageIndex: 0,
-    },
     shouldShowGrid: true,
     shouldSnapToGrid: true,
     shouldAutoSave: false,
@@ -230,14 +239,13 @@ export const canvasSlice = createSlice({
       state[state.currentCanvas].eraserSize = action.payload;
     },
     clearMask: (state) => {
-      state[state.currentCanvas].pastObjects.push(
+      const currentCanvas = state[state.currentCanvas];
-        state[state.currentCanvas].objects
+      currentCanvas.pastLayerStates.push(currentCanvas.layerState);
-      );
+      currentCanvas.layerState.objects = state[
-      state[state.currentCanvas].objects = state[
         state.currentCanvas
-      ].objects.filter((obj) => !isCanvasMaskLine(obj));
+      ].layerState.objects.filter((obj) => !isCanvasMaskLine(obj));
-      state[state.currentCanvas].futureObjects = [];
+      currentCanvas.futureLayerStates = [];
-      state[state.currentCanvas].shouldPreserveMaskedArea = false;
+      currentCanvas.shouldPreserveMaskedArea = false;
     },
     toggleShouldInvertMask: (state) => {
       state[state.currentCanvas].shouldPreserveMaskedArea =
@@ -271,9 +279,9 @@ export const canvasSlice = createSlice({
       state[state.currentCanvas].cursorPosition = action.payload;
     },
     clearImageToInpaint: (state) => {
-      state.inpainting.imageToInpaint = undefined;
+      // TODO
+      // state.inpainting.imageToInpaint = undefined;
     },
-
     setImageToOutpaint: (state, action: PayloadAction<InvokeAI.Image>) => {
       const { width: canvasWidth, height: canvasHeight } =
         state.outpainting.stageDimensions;
@@ -307,8 +315,10 @@ export const canvasSlice = createSlice({
       state.outpainting.boundingBoxDimensions = newDimensions;
       state.outpainting.boundingBoxCoordinates = newCoordinates;
 
-      // state.outpainting.imageToInpaint = action.payload;
+      state.outpainting.pastLayerStates.push(state.outpainting.layerState);
-      state.outpainting.objects = [
+      state.outpainting.layerState = {
+        ...initialLayerState,
+        objects: [
           {
             kind: 'image',
             layer: 'base',
@@ -316,7 +326,9 @@ export const canvasSlice = createSlice({
             y: 0,
             image: action.payload,
           },
-      ];
+        ],
+      };
+      state.outpainting.futureLayerStates = [];
       state.doesCanvasNeedScaling = true;
     },
     setImageToInpaint: (state, action: PayloadAction<InvokeAI.Image>) => {
@@ -352,8 +364,11 @@ export const canvasSlice = createSlice({
       state.inpainting.boundingBoxDimensions = newDimensions;
       state.inpainting.boundingBoxCoordinates = newCoordinates;
 
-      // state.inpainting.imageToInpaint = action.payload;
+      state.inpainting.pastLayerStates.push(state.inpainting.layerState);
-      state.inpainting.objects = [
+
+      state.inpainting.layerState = {
+        ...initialLayerState,
+        objects: [
           {
             kind: 'image',
             layer: 'base',
@@ -361,7 +376,10 @@ export const canvasSlice = createSlice({
             y: 0,
             image: action.payload,
           },
-      ];
+        ],
+      };
+
+      state.outpainting.futureLayerStates = [];
       state.doesCanvasNeedScaling = true;
     },
     setStageDimensions: (state, action: PayloadAction<Dimensions>) => {
@@ -487,8 +505,8 @@ export const canvasSlice = createSlice({
       state[state.currentCanvas].isDrawing = action.payload;
     },
     setClearBrushHistory: (state) => {
-      state[state.currentCanvas].pastObjects = [];
+      state[state.currentCanvas].pastLayerStates = [];
-      state[state.currentCanvas].futureObjects = [];
+      state[state.currentCanvas].futureLayerStates = [];
     },
     setShouldUseInpaintReplace: (state, action: PayloadAction<boolean>) => {
       state[state.currentCanvas].shouldUseInpaintReplace = action.payload;
@@ -524,7 +542,7 @@ export const canvasSlice = createSlice({
     setCurrentCanvas: (state, action: PayloadAction<ValidCanvasName>) => {
       state.currentCanvas = action.payload;
     },
-    addImageToOutpaintingSesion: (
+    addImageToOutpainting: (
       state,
       action: PayloadAction<{
         boundingBox: IRect;
@@ -536,23 +554,151 @@ export const canvasSlice = createSlice({
       if (!boundingBox || !image) return;
 
       const { x, y } = boundingBox;
+      const { width, height } = image;
+
       const currentCanvas = state.outpainting;
 
-      currentCanvas.pastObjects.push([...currentCanvas.objects]);
+      // const {
+      //   x: stagingX,
+      //   y: stagingY,
+      //   width: stagingWidth,
+      //   height: stagingHeight,
+      //   images: stagedImages,
+      // } = currentCanvas.layerState.stagingArea;
 
-      if (currentCanvas.pastObjects.length > currentCanvas.maxHistory) {
+      currentCanvas.pastLayerStates.push(_.cloneDeep(currentCanvas.layerState));
-        currentCanvas.pastObjects.shift();
+
+      if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
+        currentCanvas.pastLayerStates.shift();
       }
 
-      currentCanvas.futureObjects = [];
+      currentCanvas.layerState.stagingArea.images.push({
-
-      currentCanvas.objects.push({
         kind: 'image',
         layer: 'base',
         x,
         y,
         image,
       });
+
+      currentCanvas.layerState.stagingArea.selectedImageIndex =
+        currentCanvas.layerState.stagingArea.images.length - 1;
+
+      currentCanvas.futureLayerStates = [];
+
+      // // If the new image is in the staging area region, push it to staging area
+      // if (
+      //   x === stagingX &&
+      //   y === stagingY &&
+      //   width === stagingWidth &&
+      //   height === stagingHeight
+      // ) {
+      //   console.log('pushing new image to staging area images');
+      //   currentCanvas.pastLayerStates.push(
+      //     _.cloneDeep(currentCanvas.layerState)
+      //   );
+
+      //   if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
+      //     currentCanvas.pastLayerStates.shift();
+      //   }
+
+      //   currentCanvas.layerState.stagingArea.images.push({
+      //     kind: 'image',
+      //     layer: 'base',
+      //     x,
+      //     y,
+      //     image,
+      //   });
+
+      //   currentCanvas.layerState.stagingArea.selectedImageIndex =
+      //     currentCanvas.layerState.stagingArea.images.length - 1;
+
+      //   currentCanvas.futureLayerStates = [];
+      // }
+      // // Else, if the staging area is empty, set it to this image
+      // else if (stagedImages.length === 0) {
+      //   console.log('setting staging area image to be this one image');
+      //   // add new image to staging area
+      //   currentCanvas.pastLayerStates.push(
+      //     _.cloneDeep(currentCanvas.layerState)
+      //   );
+
+      //   if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
+      //     currentCanvas.pastLayerStates.shift();
+      //   }
+
+      //   currentCanvas.layerState.stagingArea = {
+      //     images: [
+      //       {
+      //         kind: 'image',
+      //         layer: 'base',
+      //         x,
+      //         y,
+      //         image,
+      //       },
+      //     ],
+      //     x,
+      //     y,
+      //     width: image.width,
+      //     height: image.height,
+      //     selectedImageIndex: 0,
+      //   };
+
+      //   currentCanvas.futureLayerStates = [];
+      // } else {
+      //   // commit the current staging area image & set the new image as the only staging area image
+      //   currentCanvas.pastLayerStates.push(
+      //     _.cloneDeep(currentCanvas.layerState)
+      //   );
+
+      //   if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
+      //     currentCanvas.pastLayerStates.shift();
+      //   }
+
+      //   if (stagedImages.length === 1) {
+      //     // commit the current staging area image
+      //     console.log('committing current image');
+
+      //     const {
+      //       x: currentStagedX,
+      //       y: currentStagedY,
+      //       image: currentStagedImage,
+      //     } = stagedImages[0];
+
+      //     currentCanvas.layerState.objects.push({
+      //       kind: 'image',
+      //       layer: 'base',
+      //       x: currentStagedX,
+      //       y: currentStagedY,
+      //       image: currentStagedImage,
+      //     });
+      //   }
+
+      //   console.log('setting staging area to this singel new image');
+      //   currentCanvas.layerState.stagingArea = {
+      //     images: [
+      //       {
+      //         kind: 'image',
+      //         layer: 'base',
+      //         x,
+      //         y,
+      //         image,
+      //       },
+      //     ],
+      //     x,
+      //     y,
+      //     width: image.width,
+      //     height: image.height,
+      //     selectedImageIndex: 0,
+      //   };
+
+      //   currentCanvas.futureLayerStates = [];
+      // }
+    },
+    discardStagedImages: (state) => {
+      const currentCanvas = state[state.currentCanvas];
+      currentCanvas.layerState.stagingArea = {
+        ...initialLayerState.stagingArea,
+      };
     },
     addLine: (state, action: PayloadAction<number[]>) => {
       const currentCanvas = state[state.currentCanvas];
@@ -567,13 +713,13 @@ export const canvasSlice = createSlice({
       const newColor =
         layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
 
-      currentCanvas.pastObjects.push(currentCanvas.objects);
+      currentCanvas.pastLayerStates.push(currentCanvas.layerState);
 
-      if (currentCanvas.pastObjects.length > currentCanvas.maxHistory) {
+      if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
-        currentCanvas.pastObjects.shift();
+        currentCanvas.pastLayerStates.shift();
       }
 
-      currentCanvas.objects.push({
+      currentCanvas.layerState.objects.push({
         kind: 'line',
         layer,
         tool,
@@ -582,11 +728,11 @@ export const canvasSlice = createSlice({
         ...newColor,
       });
 
-      currentCanvas.futureObjects = [];
+      currentCanvas.futureLayerStates = [];
     },
     addPointToCurrentLine: (state, action: PayloadAction<number[]>) => {
       const lastLine =
-        state[state.currentCanvas].objects.findLast(isCanvasAnyLine);
+        state[state.currentCanvas].layerState.objects.findLast(isCanvasAnyLine);
 
       if (!lastLine) return;
 
@@ -594,36 +740,33 @@ export const canvasSlice = createSlice({
     },
     undo: (state) => {
       const currentCanvas = state[state.currentCanvas];
-      if (currentCanvas.objects.length === 0) return;
 
-      const newObjects = currentCanvas.pastObjects.pop();
+      const targetState = currentCanvas.pastLayerStates.pop();
 
-      if (!newObjects) return;
+      if (!targetState) return;
 
-      currentCanvas.futureObjects.unshift(currentCanvas.objects);
+      currentCanvas.futureLayerStates.unshift(currentCanvas.layerState);
 
-      if (currentCanvas.futureObjects.length > currentCanvas.maxHistory) {
+      if (currentCanvas.futureLayerStates.length > currentCanvas.maxHistory) {
-        currentCanvas.futureObjects.pop();
+        currentCanvas.futureLayerStates.pop();
       }
 
-      currentCanvas.objects = newObjects;
+      currentCanvas.layerState = targetState;
     },
     redo: (state) => {
       const currentCanvas = state[state.currentCanvas];
 
-      if (currentCanvas.futureObjects.length === 0) return;
+      const targetState = currentCanvas.futureLayerStates.shift();
 
-      const newObjects = currentCanvas.futureObjects.shift();
+      if (!targetState) return;
 
-      if (!newObjects) return;
+      currentCanvas.pastLayerStates.push(currentCanvas.layerState);
 
-      currentCanvas.pastObjects.push(currentCanvas.objects);
+      if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
-
+        currentCanvas.pastLayerStates.shift();
-      if (currentCanvas.pastObjects.length > currentCanvas.maxHistory) {
-        currentCanvas.pastObjects.shift();
       }
 
-      currentCanvas.objects = newObjects;
+      currentCanvas.layerState = targetState;
     },
     setShouldShowGrid: (state, action: PayloadAction<boolean>) => {
       state.outpainting.shouldShowGrid = action.payload;
@@ -641,21 +784,69 @@ export const canvasSlice = createSlice({
       state[state.currentCanvas].shouldShowIntermediates = action.payload;
     },
     resetCanvas: (state) => {
-      state[state.currentCanvas].pastObjects.push(
+      state[state.currentCanvas].pastLayerStates.push(
-        state[state.currentCanvas].objects
+        state[state.currentCanvas].layerState
       );
 
-      state[state.currentCanvas].objects = [];
+      state[state.currentCanvas].layerState = initialLayerState;
-      state[state.currentCanvas].futureObjects = [];
+      state[state.currentCanvas].futureLayerStates = [];
+    },
+    nextStagingAreaImage: (state) => {
+      const currentIndex =
+        state.outpainting.layerState.stagingArea.selectedImageIndex;
+      const length = state.outpainting.layerState.stagingArea.images.length;
+
+      state.outpainting.layerState.stagingArea.selectedImageIndex = Math.min(
+        currentIndex + 1,
+        length - 1
+      );
+    },
+    prevStagingAreaImage: (state) => {
+      const currentIndex =
+        state.outpainting.layerState.stagingArea.selectedImageIndex;
+
+      state.outpainting.layerState.stagingArea.selectedImageIndex = Math.max(
+        currentIndex - 1,
+        0
+      );
+    },
+    commitStagingAreaImage: (state) => {
+      const currentCanvas = state[state.currentCanvas];
+      const { images, selectedImageIndex } =
+        currentCanvas.layerState.stagingArea;
+
+      currentCanvas.pastLayerStates.push(_.cloneDeep(currentCanvas.layerState));
+
+      if (currentCanvas.pastLayerStates.length > currentCanvas.maxHistory) {
+        currentCanvas.pastLayerStates.shift();
+      }
+
+      const { x, y, image } = images[selectedImageIndex];
+
+      currentCanvas.layerState.objects.push({
+        kind: 'image',
+        layer: 'base',
+        x,
+        y,
+        image,
+      });
+
+      currentCanvas.layerState.stagingArea = {
+        ...initialLayerState.stagingArea,
+      };
+
+      currentCanvas.futureLayerStates = [];
     },
   },
   extraReducers: (builder) => {
     builder.addCase(uploadOutpaintingMergedImage.fulfilled, (state, action) => {
       if (!action.payload) return;
-      state.outpainting.pastObjects.push([...state.outpainting.objects]);
+      state.outpainting.pastLayerStates.push({
-      state.outpainting.futureObjects = [];
+        ...state.outpainting.layerState,
+      });
+      state.outpainting.futureLayerStates = [];
 
-      state.outpainting.objects = [
+      state.outpainting.layerState.objects = [
         {
           kind: 'image',
           layer: 'base',
@@ -709,13 +900,17 @@ export const {
   setIsMoveStageKeyHeld,
   setStageCoordinates,
   setCurrentCanvas,
-  addImageToOutpaintingSesion,
+  addImageToOutpainting,
   resetCanvas,
   setShouldShowGrid,
   setShouldSnapToGrid,
   setShouldAutoSave,
   setShouldShowIntermediates,
   setIsMovingStage,
+  nextStagingAreaImage,
+  prevStagingAreaImage,
+  commitStagingAreaImage,
+  discardStagedImages,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;
@@ -783,6 +978,10 @@ export const uploadOutpaintingMergedImage = createAsyncThunk(
 export const currentCanvasSelector = (state: RootState): BaseCanvasState =>
   state.canvas[state.canvas.currentCanvas];
 
+export const isStagingSelector = (state: RootState): boolean =>
+  state.canvas[state.canvas.currentCanvas].layerState.stagingArea.images
+    .length > 0;
+
 export const outpaintingCanvasSelector = (
   state: RootState
 ): OutpaintingCanvasState => state.canvas.outpainting;
@@ -794,6 +993,6 @@ export const inpaintingCanvasSelector = (
 export const baseCanvasImageSelector = createSelector(
   [currentCanvasSelector],
   (currentCanvas) => {
-    return currentCanvas.objects.find(isCanvasBaseImage);
+    return currentCanvas.layerState.objects.find(isCanvasBaseImage);
   }
 );

frontend/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -6,17 +6,18 @@ import _ from 'lodash';
 import { useCallback } from 'react';
 import {
   currentCanvasSelector,
+  isStagingSelector,
   setIsMovingStage,
   setStageCoordinates,
 } from '../canvasSlice';
 
 const selector = createSelector(
-  [currentCanvasSelector, activeTabNameSelector],
+  [currentCanvasSelector, isStagingSelector, activeTabNameSelector],
-  (canvas, activeTabName) => {
+  (canvas, isStaging, activeTabName) => {
     const { tool } = canvas;
     return {
       tool,
-
+      isStaging,
       activeTabName,
     };
   },
@@ -25,24 +26,26 @@ const selector = createSelector(
 
 const useCanvasDrag = () => {
   const dispatch = useAppDispatch();
-  const { tool, activeTabName } = useAppSelector(selector);
+  const { tool, activeTabName, isStaging } = useAppSelector(selector);
 
   return {
     handleDragStart: useCallback(() => {
-      if (tool !== 'move' || activeTabName !== 'outpainting') return;
+      if (!(tool === 'move' || isStaging)) return;
       dispatch(setIsMovingStage(true));
-    }, [activeTabName, dispatch, tool]),
+    }, [dispatch, isStaging, tool]),
+
     handleDragMove: useCallback(
       (e: KonvaEventObject<MouseEvent>) => {
-        if (tool !== 'move' || activeTabName !== 'outpainting') return;
+        if (!(tool === 'move' || isStaging)) return;
         dispatch(setStageCoordinates(e.target.getPosition()));
       },
-      [activeTabName, dispatch, tool]
+      [dispatch, isStaging, tool]
     ),
+
     handleDragEnd: useCallback(() => {
-      if (tool !== 'move' || activeTabName !== 'outpainting') return;
+      if (!(tool === 'move' || isStaging)) return;
       dispatch(setIsMovingStage(false));
-    }, [activeTabName, dispatch, tool]),
+    }, [dispatch, isStaging, tool]),
   };
 };
 

frontend/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -8,18 +8,20 @@ import { MutableRefObject, useCallback } from 'react';
 import {
   addLine,
   currentCanvasSelector,
+  isStagingSelector,
   setIsDrawing,
   setIsMovingStage,
 } from '../canvasSlice';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';
 
 const selector = createSelector(
-  [activeTabNameSelector, currentCanvasSelector],
+  [activeTabNameSelector, currentCanvasSelector, isStagingSelector],
-  (activeTabName, currentCanvas) => {
+  (activeTabName, currentCanvas, isStaging) => {
     const { tool } = currentCanvas;
     return {
       tool,
       activeTabName,
+      isStaging,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -27,14 +29,15 @@ const selector = createSelector(
 
 const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   const dispatch = useAppDispatch();
-  const { tool } = useAppSelector(selector);
+  const { tool, isStaging } = useAppSelector(selector);
 
   return useCallback(
     (e: KonvaEventObject<MouseEvent>) => {
       if (!stageRef.current) return;
+
       stageRef.current.container().focus();
 
-      if (tool === 'move') {
+      if (tool === 'move' || isStaging) {
         dispatch(setIsMovingStage(true));
         return;
       }
@@ -50,7 +53,7 @@ const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
       // Add a new line starting from the current cursor position.
       dispatch(addLine([scaledCursorPosition.x, scaledCursorPosition.y]));
     },
-    [stageRef, dispatch, tool]
+    [stageRef, tool, isStaging, dispatch]
   );
 };
 

frontend/src/features/canvas/hooks/useCanvasMouseEnter.ts

@@ -5,16 +5,22 @@ import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import _ from 'lodash';
 import { MutableRefObject, useCallback } from 'react';
-import { addLine, currentCanvasSelector, setIsDrawing } from '../canvasSlice';
+import {
+  addLine,
+  currentCanvasSelector,
+  isStagingSelector,
+  setIsDrawing,
+} from '../canvasSlice';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';
 
 const selector = createSelector(
-  [activeTabNameSelector, currentCanvasSelector],
+  [activeTabNameSelector, currentCanvasSelector, isStagingSelector],
-  (activeTabName, currentCanvas) => {
+  (activeTabName, currentCanvas, isStaging) => {
     const { tool } = currentCanvas;
     return {
       tool,
       activeTabName,
+      isStaging,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -24,7 +30,7 @@ const useCanvasMouseEnter = (
   stageRef: MutableRefObject<Konva.Stage | null>
 ) => {
   const dispatch = useAppDispatch();
-  const { tool } = useAppSelector(selector);
+  const { tool, isStaging } = useAppSelector(selector);
 
   return useCallback(
     (e: KonvaEventObject<MouseEvent>) => {
@@ -34,14 +40,14 @@ const useCanvasMouseEnter = (
 
       const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
 
-      if (!scaledCursorPosition || tool === 'move') return;
+      if (!scaledCursorPosition || tool === 'move' || isStaging) return;
 
       dispatch(setIsDrawing(true));
 
       // Add a new line starting from the current cursor position.
       dispatch(addLine([scaledCursorPosition.x, scaledCursorPosition.y]));
     },
-    [stageRef, tool, dispatch]
+    [stageRef, tool, isStaging, dispatch]
   );
 };
 

frontend/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -9,18 +9,20 @@ import {
   addPointToCurrentLine,
   currentCanvasSelector,
   GenericCanvasState,
+  isStagingSelector,
   setCursorPosition,
 } from '../canvasSlice';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';
 
 const selector = createSelector(
-  [activeTabNameSelector, currentCanvasSelector],
+  [activeTabNameSelector, currentCanvasSelector, isStagingSelector],
-  (activeTabName, canvas: GenericCanvasState) => {
+  (activeTabName, currentCanvas, isStaging) => {
-    const { tool, isDrawing } = canvas;
+    const { tool, isDrawing } = currentCanvas;
     return {
       tool,
       isDrawing,
       activeTabName,
+      isStaging,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -32,7 +34,7 @@ const useCanvasMouseMove = (
   lastCursorPositionRef: MutableRefObject<Vector2d>
 ) => {
   const dispatch = useAppDispatch();
-  const { isDrawing, tool } = useAppSelector(selector);
+  const { isDrawing, tool, isStaging } = useAppSelector(selector);
 
   return useCallback(() => {
     if (!stageRef.current) return;
@@ -45,7 +47,7 @@ const useCanvasMouseMove = (
 
     lastCursorPositionRef.current = scaledCursorPosition;
 
-    if (!isDrawing || tool === 'move') return;
+    if (!isDrawing || tool === 'move' || isStaging) return;
 
     didMouseMoveRef.current = true;
     dispatch(
@@ -55,6 +57,7 @@ const useCanvasMouseMove = (
     didMouseMoveRef,
     dispatch,
     isDrawing,
+    isStaging,
     lastCursorPositionRef,
     stageRef,
     tool,

frontend/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -9,19 +9,21 @@ import {
   addPointToCurrentLine,
   currentCanvasSelector,
   GenericCanvasState,
+  isStagingSelector,
   setIsDrawing,
   setIsMovingStage,
 } from '../canvasSlice';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';
 
 const selector = createSelector(
-  [activeTabNameSelector, currentCanvasSelector],
+  [activeTabNameSelector, currentCanvasSelector, isStagingSelector],
-  (activeTabName, canvas: GenericCanvasState) => {
+  (activeTabName, currentCanvas, isStaging) => {
-    const { tool, isDrawing } = canvas;
+    const { tool, isDrawing } = currentCanvas;
     return {
       tool,
       isDrawing,
       activeTabName,
+      isStaging,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -32,10 +34,10 @@ const useCanvasMouseUp = (
   didMouseMoveRef: MutableRefObject<boolean>
 ) => {
   const dispatch = useAppDispatch();
-  const { tool, isDrawing } = useAppSelector(selector);
+  const { tool, isDrawing, isStaging } = useAppSelector(selector);
 
   return useCallback(() => {
-    if (tool === 'move') {
+    if (tool === 'move' || isStaging) {
       dispatch(setIsMovingStage(false));
       return;
     }
@@ -58,7 +60,7 @@ const useCanvasMouseUp = (
       didMouseMoveRef.current = false;
     }
     dispatch(setIsDrawing(false));
-  }, [didMouseMoveRef, dispatch, isDrawing, stageRef, tool]);
+  }, [didMouseMoveRef, dispatch, isDrawing, isStaging, stageRef, tool]);
 };
 
 export default useCanvasMouseUp;

frontend/src/features/options/AdvancedOptions/Inpainting/ClearBrushHistory.tsx

@@ -13,12 +13,12 @@ import _ from 'lodash';
 const clearBrushHistorySelector = createSelector(
   currentCanvasSelector,
   (currentCanvas) => {
-    const { pastObjects, futureObjects } = currentCanvas as
+    const { pastLayerStates, futureLayerStates } = currentCanvas as
       | InpaintingCanvasState
       | OutpaintingCanvasState;
     return {
       mayClearBrushHistory:
-        futureObjects.length > 0 || pastObjects.length > 0 ? false : true,
+      futureLayerStates.length > 0 || pastLayerStates.length > 0 ? false : true,
     };
   },
   {

frontend/src/features/tabs/CanvasWorkarea.scss

@@ -69,10 +69,13 @@
     }
 
     .inpainting-canvas-stage {
-      // border-radius: 0.5rem;
+      outline: none;
-      // border: 1px solid var(--border-color-light);
+      border-radius: 0.5rem;
+      border: 1px solid var(--border-color-light);
+      overflow: hidden;
 
       canvas {
+        outline: none;
         border-radius: 0.5rem;
       }
     }

frontend/src/features/tabs/Outpainting/OutpaintingDisplay.tsx

@@ -17,7 +17,9 @@ const outpaintingDisplaySelector = createSelector(
   (canvas: CanvasState) => {
     const {
       doesCanvasNeedScaling,
-      outpainting: { objects },
+      outpainting: {
+        layerState: { objects },
+      },
     } = canvas;
     return {
       doesCanvasNeedScaling,

frontend/src/main.tsx

@@ -13,7 +13,7 @@ export const persistor = persistStore(store);
 import Loading from './Loading';
 import App from './app/App';
 
-const emotionCache = createCache({
+export const emotionCache = createCache({
   key: 'invokeai-style-cache',
   prepend: true,
 });

frontend/yarn.lock

@@ -3420,7 +3420,15 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-konva@^18.2.3:
+react-konva-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-konva-utils/-/react-konva-utils-0.3.0.tgz#d9099ad1a767286b24fb1b08377af2dfa5c9f176"
+  integrity sha512-yH5FVpDGQ8gHeClyHY533M4oSLjEfYuvn+Z29zXm9osjhuulhtJrh5k+wtyY6QSC0MG0ioqE0cjiudGl1WGB9A==
+  dependencies:
+    react-konva "^18.0.0-0"
+    use-image "^1.0.12"
+
+react-konva@^18.0.0-0, react-konva@^18.2.3:
   version "18.2.3"
   resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.3.tgz#75c658fca493bdf515b38f2a8d544fa7a9c754c4"
   integrity sha512-OPxjBTgaEGU9pt/VJSVM7QNXYHEZ5CkulX+4fTTvbaH+Wh+vMLbXmH3yjWw4kT/5Qi6t0UQKHPPmirCv8/9sdg==
@@ -3942,7 +3950,7 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
-use-image@^1.1.0:
+use-image@^1.0.12, use-image@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.1.0.tgz#dc244c34506d3cf3a8177c1f0bbfb158b9beefe5"
   integrity sha512-+cBHRR/44ZyMUS873O0vbVylgMM0AbdTunEplAWXvIQ2p69h2sIo2Qq74zeUsq6AMo+27e5lERQvXzd1crGiMg==