Fixes staging area outline

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

@@ -15,6 +15,7 @@ const selector = createSelector(
         stagingArea: { images, selectedImageIndex },
       },
       shouldShowStagingImage,
+      shouldShowStagingOutline,
     } = canvas;
 
     return {
@@ -23,6 +24,7 @@ const selector = createSelector(
       isOnFirstImage: selectedImageIndex === 0,
       isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,
+      shouldShowStagingOutline,
     };
   },
   {
@@ -36,11 +38,11 @@ type Props = GroupConfig;
 
 const IAICanvasStagingArea = (props: Props) => {
   const { ...rest } = props;
-  const { currentStagingAreaImage, shouldShowStagingImage } =
-    useAppSelector(selector);
-
-  const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] =
-    useState<boolean>(true);
+  const {
+    currentStagingAreaImage,
+    shouldShowStagingImage,
+    shouldShowStagingOutline,
+  } = useAppSelector(selector);
 
   if (!currentStagingAreaImage) return null;
 
@@ -53,7 +55,7 @@ const IAICanvasStagingArea = (props: Props) => {
   return (
     <Group {...rest}>
       {shouldShowStagingImage && <IAICanvasImage url={url} x={x} y={y} />}
-      {shouldShowStagingAreaOutline && (
+      {shouldShowStagingOutline && (
         <Group>
           <Rect
             x={x}

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

@@ -28,6 +28,7 @@ import {
   nextStagingAreaImage,
   prevStagingAreaImage,
   setShouldShowStagingImage,
+  setShouldShowStagingOutline,
 } from 'features/canvas/store/canvasSlice';
 
 const selector = createSelector(
@@ -37,6 +38,7 @@ const selector = createSelector(
       layerState: {
         stagingArea: { images, selectedImageIndex },
       },
+      shouldShowStagingOutline,
       shouldShowStagingImage,
     } = canvas;
 
@@ -46,6 +48,7 @@ const selector = createSelector(
       isOnFirstImage: selectedImageIndex === 0,
       isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,
+      shouldShowStagingOutline,
     };
   },
   {
@@ -64,16 +67,13 @@ const IAICanvasStagingAreaToolbar = () => {
     shouldShowStagingImage,
   } = useAppSelector(selector);
 
-  const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] =
-    useState<boolean>(true);
-
   const handleMouseOver = useCallback(() => {
-    setShouldShowStagingAreaOutline(false);
-  }, []);
+    dispatch(setShouldShowStagingOutline(false));
+  }, [dispatch]);
 
   const handleMouseOut = useCallback(() => {
-    setShouldShowStagingAreaOutline(true);
-  }, []);
+    dispatch(setShouldShowStagingOutline(true));
+  }, [dispatch]);
 
   if (!currentStagingAreaImage) return null;
 
@@ -84,6 +84,9 @@ const IAICanvasStagingAreaToolbar = () => {
       w={'100%'}
       align={'center'}
       justify={'center'}
+      filter="drop-shadow(0 0.5rem 1rem rgba(0,0,0))"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
     >
       <ButtonGroup isAttached>
         <IAIIconButton
@@ -92,8 +95,6 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label="Previous"
           icon={<FaArrowLeft />}
           onClick={() => dispatch(prevStagingAreaImage())}
-          onMouseOver={handleMouseOver}
-          onMouseOut={handleMouseOut}
           data-selected={true}
           isDisabled={isOnFirstImage}
         />
@@ -103,8 +104,6 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label="Next"
           icon={<FaArrowRight />}
           onClick={() => dispatch(nextStagingAreaImage())}
-          onMouseOver={handleMouseOver}
-          onMouseOut={handleMouseOut}
           data-selected={true}
           isDisabled={isOnLastImage}
         />

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

@@ -73,13 +73,14 @@ const initialCanvasState: CanvasState = {
   shouldShowCheckboardTransparency: false,
   shouldShowGrid: true,
   shouldShowIntermediates: true,
+  shouldShowStagingImage: true,
+  shouldShowStagingOutline: true,
   shouldSnapToGrid: true,
   shouldUseInpaintReplace: false,
   stageCoordinates: { x: 0, y: 0 },
   stageDimensions: { width: 0, height: 0 },
   stageScale: 1,
   tool: 'brush',
-  shouldShowStagingImage: true,
 };
 
 export const canvasSlice = createSlice({
@@ -636,6 +637,9 @@ export const canvasSlice = createSlice({
     setShouldShowStagingImage: (state, action: PayloadAction<boolean>) => {
       state.shouldShowStagingImage = action.payload;
     },
+    setShouldShowStagingOutline: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowStagingOutline = action.payload;
+    },
     setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
       state.pastLayerStates.push({
         ...state.layerState,
@@ -705,6 +709,7 @@ export const {
   fitBoundingBoxToStage,
   setShouldShowStagingImage,
   setMergedCanvas,
+  setShouldShowStagingOutline,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

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

@@ -104,11 +104,12 @@ export interface CanvasState {
   shouldShowCheckboardTransparency: boolean;
   shouldShowGrid: boolean;
   shouldShowIntermediates: boolean;
+  shouldShowStagingImage: boolean;
+  shouldShowStagingOutline: boolean;
   shouldSnapToGrid: boolean;
   shouldUseInpaintReplace: boolean;
   stageCoordinates: Vector2d;
   stageDimensions: Dimensions;
   stageScale: number;
   tool: CanvasTool;
-  shouldShowStagingImage: boolean;
 }