From 450e95de592ac623bce8acca2ebeb60bbeb1a24a Mon Sep 17 00:00:00 2001 From: Kevin Brack Date: Sun, 30 Jul 2023 18:35:18 -0500 Subject: [PATCH] auto change board waiting for isReady --- .../Boards/BoardsList/GalleryBoard.tsx | 19 +++++++++++++++---- .../Boards/BoardsList/NoBoardBoard.tsx | 18 +++++++++++++----- .../features/gallery/store/gallerySlice.ts | 1 - 3 files changed, 28 insertions(+), 10 deletions(-) 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 67c45c131b..a4124e2393 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 @@ -16,7 +16,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import IAIDroppable from 'common/components/IAIDroppable'; import SelectionOverlay from 'common/components/SelectionOverlay'; -import { boardIdSelected } from 'features/gallery/store/gallerySlice'; +import { + autoAddBoardIdChanged, + boardIdSelected, +} from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useMemo, useState } from 'react'; import { FaUser } from 'react-icons/fa'; import { useUpdateBoardMutation } from 'services/api/endpoints/boards'; @@ -24,6 +27,7 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { BoardDTO } from 'services/api/types'; import AutoAddIcon from '../AutoAddIcon'; import BoardContextMenu from '../BoardContextMenu'; +import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; interface GalleryBoardProps { board: BoardDTO; @@ -41,15 +45,17 @@ const GalleryBoard = memo( ({ gallery }) => { const isSelectedForAutoAdd = board.board_id === gallery.autoAddBoardId; + const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick; - return { isSelectedForAutoAdd }; + return { isSelectedForAutoAdd, autoAssignBoardOnClick }; }, defaultSelectorOptions ), [board.board_id] ); - const { isSelectedForAutoAdd } = useAppSelector(selector); + const { isSelectedForAutoAdd, autoAssignBoardOnClick } = + useAppSelector(selector); const [isHovered, setIsHovered] = useState(false); const handleMouseOver = useCallback(() => { setIsHovered(true); @@ -64,9 +70,14 @@ const GalleryBoard = memo( const { board_name, board_id } = board; const [localBoardName, setLocalBoardName] = useState(board_name); + const isReady = useIsReadyToInvoke(); + const handleSelectBoard = useCallback(() => { dispatch(boardIdSelected(board_id)); - }, [board_id, dispatch]); + if (autoAssignBoardOnClick && isReady) { + dispatch(autoAddBoardIdChanged(board_id)); + } + }, [board_id, autoAssignBoardOnClick, isReady, dispatch]); const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation(); 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 ee1d8f6bea..3963fc04d9 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 @@ -7,11 +7,15 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import InvokeAILogoImage from 'assets/images/logo.png'; import IAIDroppable from 'common/components/IAIDroppable'; import SelectionOverlay from 'common/components/SelectionOverlay'; -import { boardIdSelected } from 'features/gallery/store/gallerySlice'; +import { + boardIdSelected, + autoAddBoardIdChanged, +} from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useMemo, useState } from 'react'; import { useBoardName } from 'services/api/hooks/useBoardName'; import AutoAddIcon from '../AutoAddIcon'; import BoardContextMenu from '../BoardContextMenu'; +import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; interface Props { isSelected: boolean; } @@ -19,19 +23,23 @@ interface Props { const selector = createSelector( stateSelector, ({ gallery }) => { - const { autoAddBoardId } = gallery; - return { autoAddBoardId }; + const { autoAddBoardId, autoAssignBoardOnClick } = gallery; + return { autoAddBoardId, autoAssignBoardOnClick }; }, defaultSelectorOptions ); const NoBoardBoard = memo(({ isSelected }: Props) => { const dispatch = useAppDispatch(); - const { autoAddBoardId } = useAppSelector(selector); + const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector); const boardName = useBoardName(undefined); + const isReady = useIsReadyToInvoke(); const handleSelectBoard = useCallback(() => { dispatch(boardIdSelected(undefined)); - }, [dispatch]); + if (autoAssignBoardOnClick && isReady) { + dispatch(autoAddBoardIdChanged(undefined)); + } + }, [dispatch, autoAssignBoardOnClick, isReady]); const [isHovered, setIsHovered] = useState(false); const handleMouseOver = useCallback(() => { setIsHovered(true); diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts index 851e1b6c3b..9c65e818f4 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts @@ -73,7 +73,6 @@ export const gallerySlice = createSlice({ boardIdSelected: (state, action: PayloadAction) => { state.selectedBoardId = action.payload; state.galleryView = 'images'; - state.autoAssignBoardOnClick && (state.autoAddBoardId = action.payload); }, isBatchEnabledChanged: (state, action: PayloadAction) => { state.isBatchEnabled = action.payload;