From 3432fd72f82f2fbcc9892d254ede14806d46792b Mon Sep 17 00:00:00 2001 From: Mary Hipp Rogers Date: Wed, 27 Sep 2023 03:51:37 -0400 Subject: [PATCH] fix auto-switch alongside starred images (#4708) * add skeleton loading state for queue lit * add optional selectedImage when switching a board * unstage --------- Co-authored-by: Mary Hipp Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com> --- .../listeners/boardIdSelected.ts | 9 ++++-- .../socketio/socketInvocationComplete.ts | 29 +++++++++++++++++-- .../Boards/BoardsList/GalleryBoard.tsx | 2 +- .../Boards/BoardsList/NoBoardBoard.tsx | 2 +- .../Boards/BoardsList/SystemBoardButton.tsx | 2 +- .../features/gallery/store/gallerySlice.ts | 7 +++-- 6 files changed, 41 insertions(+), 10 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts index 1b13181911..a8e1a04fc1 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts @@ -25,7 +25,7 @@ export const addBoardIdSelectedListener = () => { const state = getState(); const board_id = boardIdSelected.match(action) - ? action.payload + ? action.payload.boardId : state.gallery.selectedBoardId; const galleryView = galleryViewChanged.match(action) @@ -55,7 +55,12 @@ export const addBoardIdSelectedListener = () => { if (boardImagesData) { const firstImage = imagesSelectors.selectAll(boardImagesData)[0]; - dispatch(imageSelected(firstImage ?? null)); + const selectedImage = imagesSelectors.selectById( + boardImagesData, + action.payload.selectedImageName + ); + + dispatch(imageSelected(selectedImage || firstImage || null)); } else { // board has no images - deselect dispatch(imageSelected(null)); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index 7e918410a7..beaa4835b3 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -81,9 +81,32 @@ export const addInvocationCompleteEventListener = () => { // If auto-switch is enabled, select the new image if (shouldAutoSwitch) { - // if auto-add is enabled, switch the board as the image comes in - dispatch(galleryViewChanged('images')); - dispatch(boardIdSelected(imageDTO.board_id ?? 'none')); + // if auto-add is enabled, switch the gallery view and board if needed as the image comes in + if (gallery.galleryView !== 'images') { + dispatch(galleryViewChanged('images')); + } + + if ( + imageDTO.board_id && + imageDTO.board_id !== gallery.selectedBoardId + ) { + dispatch( + boardIdSelected({ + boardId: imageDTO.board_id, + selectedImageName: imageDTO.image_name, + }) + ); + } + + if (!imageDTO.board_id && gallery.selectedBoardId !== 'none') { + dispatch( + boardIdSelected({ + boardId: 'none', + selectedImageName: imageDTO.image_name, + }) + ); + } + dispatch(imageSelected(imageDTO)); } } diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx index 1bb6816bd9..104512a9c6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx @@ -93,7 +93,7 @@ const GalleryBoard = ({ const [localBoardName, setLocalBoardName] = useState(board_name); const handleSelectBoard = useCallback(() => { - dispatch(boardIdSelected(board_id)); + dispatch(boardIdSelected({ boardId: board_id })); if (autoAssignBoardOnClick) { dispatch(autoAddBoardIdChanged(board_id)); } diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx index 55034decf0..6cea7d3eac 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx @@ -34,7 +34,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => { const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector); const boardName = useBoardName('none'); const handleSelectBoard = useCallback(() => { - dispatch(boardIdSelected('none')); + dispatch(boardIdSelected({ boardId: 'none' })); if (autoAssignBoardOnClick) { dispatch(autoAddBoardIdChanged('none')); } diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx index b538eee9d1..462aa4b5e6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx @@ -32,7 +32,7 @@ const SystemBoardButton = ({ board_id }: Props) => { const boardName = useBoardName(board_id); const handleClick = useCallback(() => { - dispatch(boardIdSelected(board_id)); + dispatch(boardIdSelected({ boardId: board_id })); }, [board_id, dispatch]); return ( diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts index a4e4b02937..c78b22dd78 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts @@ -35,8 +35,11 @@ export const gallerySlice = createSlice({ autoAssignBoardOnClickChanged: (state, action: PayloadAction) => { state.autoAssignBoardOnClick = action.payload; }, - boardIdSelected: (state, action: PayloadAction) => { - state.selectedBoardId = action.payload; + boardIdSelected: ( + state, + action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }> + ) => { + state.selectedBoardId = action.payload.boardId; state.galleryView = 'images'; }, autoAddBoardIdChanged: (state, action: PayloadAction) => {