Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix staging area display toggle not working

Browse Source
This commit is contained in:
blessedcoolant 2022-11-18 22:50:49 +13:00
parent 2bda3d6d2f
commit d0ceabd372
4 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

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

22
frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

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

5
frontend/src/features/canvas/store/canvasSlice.ts
View File

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

1
frontend/src/features/canvas/store/canvasTypes.ts
View File

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