diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 3f4219bee1..b23360555b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -1,19 +1,13 @@ import { MenuItem, MenuList } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { stateSelector } from 'app/store/store'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import { useAppDispatch } from 'app/store/storeHooks'; import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu'; -import { - autoAddBoardIdChanged, - boardIdSelected, -} from 'features/gallery/store/gallerySlice'; -import { memo, useCallback, useMemo } from 'react'; -import { FaFolder, FaMinus, FaPlus } from 'react-icons/fa'; +import { boardIdSelected } from 'features/gallery/store/gallerySlice'; +import { memo, useCallback } from 'react'; +import { FaFolder } from 'react-icons/fa'; import { BoardDTO } from 'services/api/types'; import { menuListMotionProps } from 'theme/components/menu'; import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems'; -import SystemBoardContextMenuItems from './SystemBoardContextMenuItems'; +import NoBoardContextMenuItems from './NoBoardContextMenuItems'; type Props = { board?: BoardDTO; @@ -25,30 +19,11 @@ type Props = { const BoardContextMenu = memo( ({ board, board_id, setBoardToDelete, children }: Props) => { const dispatch = useAppDispatch(); - const selector = useMemo( - () => - createSelector( - stateSelector, - ({ gallery }) => { - const isSelectedForAutoAdd = board_id === gallery.autoAddBoardId; - - return { isSelectedForAutoAdd }; - }, - defaultSelectorOptions - ), - [board_id] - ); - - const { isSelectedForAutoAdd } = useAppSelector(selector); const handleSelectBoard = useCallback(() => { dispatch(boardIdSelected(board?.board_id ?? board_id)); }, [board?.board_id, board_id, dispatch]); - const handleAutoAdd = useCallback(() => { - dispatch(autoAddBoardIdChanged(board_id)); - }, [board_id, dispatch]); - return ( menuProps={{ size: 'sm', isLazy: true }} @@ -64,15 +39,7 @@ const BoardContextMenu = memo( } onClickCapture={handleSelectBoard}> Select Board - : } - onClickCapture={handleAutoAdd} - > - {isSelectedForAutoAdd - ? 'Disable Auto-Add' - : 'Auto-Add to this Board'} - - {!board && } + {!board && } {board && ( { + const dispatch = useAppDispatch(); + + const selector = useMemo( + () => + createSelector( + stateSelector, + ({ gallery }) => { + const isSelectedForAutoAdd = + board.board_id === gallery.autoAddBoardId; + + return { isSelectedForAutoAdd }; + }, + defaultSelectorOptions + ), + [board.board_id] + ); + + const { isSelectedForAutoAdd } = useAppSelector(selector); + const handleDelete = useCallback(() => { if (!setBoardToDelete) { return; @@ -16,8 +40,31 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => { setBoardToDelete(board); }, [board, setBoardToDelete]); + const handleToggleAutoAdd = useCallback(() => { + dispatch( + autoAddBoardIdChanged(isSelectedForAutoAdd ? undefined : board.board_id) + ); + }, [board.board_id, dispatch, isSelectedForAutoAdd]); + return ( <> + {board.image_count > 0 && ( + <> + {/* } + onClickCapture={handleAddBoardToBatch} + > + Add Board to Batch + */} + + )} + : } + onClickCapture={handleToggleAutoAdd} + > + {isSelectedForAutoAdd ? 'Disable Auto-Add' : 'Auto-Add to this Board'} + } diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx new file mode 100644 index 0000000000..57dd7d5f7b --- /dev/null +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx @@ -0,0 +1,28 @@ +import { MenuItem } from '@chakra-ui/react'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice'; +import { memo, useCallback } from 'react'; +import { FaPlus } from 'react-icons/fa'; + +const NoBoardContextMenuItems = () => { + const dispatch = useAppDispatch(); + + const autoAddBoardId = useAppSelector( + (state) => state.gallery.autoAddBoardId + ); + const handleDisableAutoAdd = useCallback(() => { + dispatch(autoAddBoardIdChanged(undefined)); + }, [dispatch]); + + return ( + <> + {autoAddBoardId && ( + } onClickCapture={handleDisableAutoAdd}> + Disable Auto-Add + + )} + + ); +}; + +export default memo(NoBoardContextMenuItems); diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/SystemBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/SystemBoardContextMenuItems.tsx deleted file mode 100644 index 58eb6d2c0c..0000000000 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/SystemBoardContextMenuItems.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { BoardId } from 'features/gallery/store/gallerySlice'; -import { memo } from 'react'; - -type Props = { - board_id: BoardId; -}; - -const SystemBoardContextMenuItems = ({ board_id }: Props) => { - return <>; -}; - -export default memo(SystemBoardContextMenuItems);