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 4a9c129448..36975d28e2 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 @@ -9,6 +9,7 @@ import { Text, Tooltip, useDisclosure, + useEditableControls, } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -18,7 +19,8 @@ import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge'; import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu'; import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip'; import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice'; -import { memo, useCallback, useMemo, useState } from 'react'; +import type { MouseEvent, MouseEventHandler, MutableRefObject } from 'react'; +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { PiArchiveBold, PiImageSquare } from 'react-icons/pi'; import { useUpdateBoardMutation } from 'services/api/endpoints/boards'; @@ -49,15 +51,19 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps const { t } = useTranslation(); const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId); const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); + const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const editingDisclosure = useDisclosure(); const [localBoardName, setLocalBoardName] = useState(board.board_name); + const onStartEditingRef = useRef(undefined); - const handleSelectBoard = useCallback(() => { - dispatch(boardIdSelected({ boardId: board.board_id })); - if (autoAssignBoardOnClick) { + const onClick = useCallback(() => { + if (selectedBoardId !== board.board_id) { + dispatch(boardIdSelected({ boardId: board.board_id })); + } + if (autoAssignBoardOnClick && autoAddBoardId !== board.board_id) { dispatch(autoAddBoardIdChanged(board.board_id)); } - }, [dispatch, board.board_id, autoAssignBoardOnClick]); + }, [selectedBoardId, board.board_id, autoAssignBoardOnClick, autoAddBoardId, dispatch]); const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation(); @@ -70,7 +76,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps [board.board_id] ); - const handleSubmit = useCallback( + const onSubmit = useCallback( async (newBoardName: string) => { if (!newBoardName.trim()) { // empty strings are not allowed @@ -96,10 +102,16 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps [board.board_id, board.board_name, editingDisclosure, updateBoard] ); - const handleChange = useCallback((newBoardName: string) => { + const onChange = useCallback((newBoardName: string) => { setLocalBoardName(newBoardName); }, []); + const onDoubleClick = useCallback((e: MouseEvent) => { + if (onStartEditingRef.current) { + onStartEditingRef.current(e); + } + }, []); + return ( {(ref) => ( @@ -110,7 +122,8 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps + {autoAddBoardId === board.board_id && !editingDisclosure.isOpen && } {board.archived && !editingDisclosure.isOpen && } @@ -158,6 +174,16 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps ); }; +const JankEditableHijack = memo((props: { onStartEditingRef: MutableRefObject }) => { + const editableControls = useEditableControls(); + useEffect(() => { + props.onStartEditingRef.current = editableControls.getEditButtonProps().onClick; + }, [props, editableControls]); + return null; +}); + +JankEditableHijack.displayName = 'JankEditableHijack'; + export default memo(GalleryBoard); const CoverImage = ({ board }: { board: BoardDTO }) => {