diff --git a/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx b/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx index bdf7e3edeb..6648841a2d 100644 --- a/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx +++ b/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(true); + const { currentStagingAreaImage, shouldShowStagingImage } = + useAppSelector(selector); const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] = useState(true); @@ -52,7 +52,7 @@ const IAICanvasStagingArea = (props: Props) => { return ( - {shouldShowStagedImage && } + {shouldShowStagingImage && } {shouldShowStagingAreaOutline && ( 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(true); + const { + isOnFirstImage, + isOnLastImage, + currentStagingAreaImage, + shouldShowStagingImage, + } = useAppSelector(selector); const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] = useState(true); @@ -116,9 +120,11 @@ const IAICanvasStagingAreaToolbar = () => { tooltip="Show/Hide" tooltipProps={{ placement: 'bottom' }} aria-label="Show/Hide" - data-alert={!shouldShowStagedImage} - icon={shouldShowStagedImage ? : } - onClick={() => setShouldShowStagedImage(!shouldShowStagedImage)} + data-alert={!shouldShowStagingImage} + icon={shouldShowStagingImage ? : } + onClick={() => + dispatch(setShouldShowStagingImage(!shouldShowStagingImage)) + } data-selected={true} /> ) => { + state.shouldShowStagingImage = action.payload; + }, }, extraReducers: canvasExtraReducers, }); @@ -654,6 +658,7 @@ export const { resetCanvasView, setCanvasContainerDimensions, fitBoundingBoxToStage, + setShouldShowStagingImage, } = canvasSlice.actions; export default canvasSlice.reducer; diff --git a/frontend/src/features/canvas/store/canvasTypes.ts b/frontend/src/features/canvas/store/canvasTypes.ts index 15d3f70f0d..95bb40567f 100644 --- a/frontend/src/features/canvas/store/canvasTypes.ts +++ b/frontend/src/features/canvas/store/canvasTypes.ts @@ -110,4 +110,5 @@ export interface CanvasState { stageDimensions: Dimensions; stageScale: number; tool: CanvasTool; + shouldShowStagingImage: boolean; }