Fix staging area display toggle not working

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

@@ -14,6 +14,7 @@ const selector = createSelector(
       layerState: {
         stagingArea: { images, selectedImageIndex },
       },
+      shouldShowStagingImage,
     } = canvas;
 
     return {
@@ -21,6 +22,7 @@ const selector = createSelector(
         images.length > 0 ? images[selectedImageIndex] : undefined,
       isOnFirstImage: selectedImageIndex === 0,
       isOnLastImage: selectedImageIndex === images.length - 1,
+      shouldShowStagingImage,
     };
   },
   {
@@ -34,10 +36,8 @@ type Props = GroupConfig;
 
 const IAICanvasStagingArea = (props: Props) => {
   const { ...rest } = props;
-  const { currentStagingAreaImage } = useAppSelector(selector);
-
-  const [shouldShowStagedImage, setShouldShowStagedImage] =
-    useState<boolean>(true);
+  const { currentStagingAreaImage, shouldShowStagingImage } =
+    useAppSelector(selector);
 
   const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] =
     useState<boolean>(true);
@@ -52,7 +52,7 @@ const IAICanvasStagingArea = (props: Props) => {
 
   return (
     <Group {...rest}>
-      {shouldShowStagedImage && <IAICanvasImage url={url} x={x} y={y} />}
+      {shouldShowStagingImage && <IAICanvasImage url={url} x={x} y={y} />}
       {shouldShowStagingAreaOutline && (
         <Group>
           <Rect

frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -27,6 +27,7 @@ import {
   discardStagedImages,
   nextStagingAreaImage,
   prevStagingAreaImage,
+  setShouldShowStagingImage,
 } from 'features/canvas/store/canvasSlice';
 
 const selector = createSelector(
@@ -36,6 +37,7 @@ const selector = createSelector(
       layerState: {
         stagingArea: { images, selectedImageIndex },
       },
+      shouldShowStagingImage,
     } = canvas;
 
     return {
@@ -43,6 +45,7 @@ const selector = createSelector(
         images.length > 0 ? images[selectedImageIndex] : undefined,
       isOnFirstImage: selectedImageIndex === 0,
       isOnLastImage: selectedImageIndex === images.length - 1,
+      shouldShowStagingImage,
     };
   },
   {
@@ -54,11 +57,12 @@ const selector = createSelector(
 
 const IAICanvasStagingAreaToolbar = () => {
   const dispatch = useAppDispatch();
-  const { isOnFirstImage, isOnLastImage, currentStagingAreaImage } =
-    useAppSelector(selector);
-
-  const [shouldShowStagedImage, setShouldShowStagedImage] =
-    useState<boolean>(true);
+  const {
+    isOnFirstImage,
+    isOnLastImage,
+    currentStagingAreaImage,
+    shouldShowStagingImage,
+  } = useAppSelector(selector);
 
   const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] =
     useState<boolean>(true);
@@ -116,9 +120,11 @@ const IAICanvasStagingAreaToolbar = () => {
           tooltip="Show/Hide"
           tooltipProps={{ placement: 'bottom' }}
           aria-label="Show/Hide"
-          data-alert={!shouldShowStagedImage}
-          icon={shouldShowStagedImage ? <FaEye /> : <FaEyeSlash />}
-          onClick={() => setShouldShowStagedImage(!shouldShowStagedImage)}
+          data-alert={!shouldShowStagingImage}
+          icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
+          onClick={() =>
+            dispatch(setShouldShowStagingImage(!shouldShowStagingImage))
+          }
           data-selected={true}
         />
         <IAIIconButton

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

@@ -80,6 +80,7 @@ const initialCanvasState: CanvasState = {
   stageDimensions: { width: 0, height: 0 },
   stageScale: 1,
   tool: 'brush',
+  shouldShowStagingImage: true,
 };
 
 export const canvasSlice = createSlice({
@@ -595,6 +596,9 @@ export const canvasSlice = createSlice({
         state.boundingBoxCoordinates = newBoundingBoxCoordinates;
       }
     },
+    setShouldShowStagingImage: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowStagingImage = action.payload;
+    },
   },
   extraReducers: canvasExtraReducers,
 });
@@ -654,6 +658,7 @@ export const {
   resetCanvasView,
   setCanvasContainerDimensions,
   fitBoundingBoxToStage,
+  setShouldShowStagingImage,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

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

@@ -110,4 +110,5 @@ export interface CanvasState {
   stageDimensions: Dimensions;
   stageScale: number;
   tool: CanvasTool;
+  shouldShowStagingImage: boolean;
 }