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

feat(ui): add remove from board to image context menu

Browse Source
This commit is contained in:
psychedelicious 2023-06-22 11:21:12 +10:00
parent 37d4e05838
commit 79f0c4d3c4
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
View File

@ -34,9 +34,8 @@ import { useAppToaster } from 'app/components/Toaster';
import { ImageDTO } from 'services/api'; import { ImageDTO } from 'services/api';
import { useDraggable } from '@dnd-kit/core'; import { useDraggable } from '@dnd-kit/core';
import { DeleteImageContext } from 'app/contexts/DeleteImageContext'; import { DeleteImageContext } from 'app/contexts/DeleteImageContext';
import { imageAddedToBoard } from '../../../services/thunks/board';
import { setUpdateBoardModalOpen } from '../store/boardSlice';
import { AddImageToBoardContext } from '../../../app/contexts/AddImageToBoardContext'; import { AddImageToBoardContext } from '../../../app/contexts/AddImageToBoardContext';
import { useRemoveImageFromBoardMutation } from 'services/apiSlice';
export const selector = createSelector( export const selector = createSelector(
[gallerySelector, systemSelector, lightboxSelector, activeTabNameSelector], [gallerySelector, systemSelector, lightboxSelector, activeTabNameSelector],
@ -110,6 +109,8 @@ const HoverableImage = (props: HoverableImageProps) => {
}, },
}); });
const [removeFromBoard] = useRemoveImageFromBoardMutation();
const handleMouseOver = () => setIsHovered(true); const handleMouseOver = () => setIsHovered(true);
const handleMouseOut = () => setIsHovered(false); const handleMouseOut = () => setIsHovered(false);
@ -176,6 +177,13 @@ const HoverableImage = (props: HoverableImageProps) => {
onClickAddToBoard(image); onClickAddToBoard(image);
}, [image, onClickAddToBoard]); }, [image, onClickAddToBoard]);
const handleRemoveFromBoard = useCallback(() => {
if (!image.board_id) {
return;
}
removeFromBoard({ board_id: image.board_id, image_name: image.image_name });
}, [image.board_id, image.image_name, removeFromBoard]);
const handleOpenInNewTab = () => { const handleOpenInNewTab = () => {
window.open(image.image_url, '_blank'); window.open(image.image_url, '_blank');
}; };
@ -255,6 +263,14 @@ const HoverableImage = (props: HoverableImageProps) => {
<MenuItem icon={<FaFolder />} onClickCapture={handleAddToBoard}> <MenuItem icon={<FaFolder />} onClickCapture={handleAddToBoard}>
{image.board_id ? 'Change Board' : 'Add to Board'} {image.board_id ? 'Change Board' : 'Add to Board'}
</MenuItem> </MenuItem>
{image.board_id && (
<MenuItem
icon={<FaFolder />}
onClickCapture={handleRemoveFromBoard}
>
Remove from Board
</MenuItem>
)}
<MenuItem <MenuItem
sx={{ color: 'error.300' }} sx={{ color: 'error.300' }}
icon={<FaTrash />} icon={<FaTrash />}