github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 18:05:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add drag-and-drop comparison image target to ImageViewerPanel

Browse Source 
Co-authored-by: kent <kent@invoke.ai>
This commit is contained in:
Cursor Agent
2025-07-02 17:51:33 +00:00
committed by psychedelicious
parent 05c9bc730e
commit f20c230f4a
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx
View File

@@ -1,17 +1,41 @@
import { Divider, Flex } from '@invoke-ai/ui-library';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
import { memo } from 'react';
import { useAppSelector } from 'app/store/storeHooks';
import type { SetComparisonImageDndTargetData } from 'features/dnd/dnd';
import { setComparisonImageDndTarget } from 'features/dnd/dnd';
import { DndDropTarget } from 'features/dnd/DndDropTarget';
import { selectImageToCompare, selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ImageViewerContextProvider } from './context';
import { ImageViewer } from './ImageViewer';
import { ViewerToolbar } from './ViewerToolbar';
export const ImageViewerPanel = memo(() => {
const { t } = useTranslation();
const lastSelectedImage = useAppSelector(selectLastSelectedImage);
const imageToCompare = useAppSelector(selectImageToCompare);
// Only show drop target when we have a selected image but no comparison image yet
const shouldShowDropTarget = lastSelectedImage && !imageToCompare;
const dndTargetData = useMemo<SetComparisonImageDndTargetData>(() => setComparisonImageDndTarget.getData(), []);
return (
<ImageViewerContextProvider>
<Flex flexDir="column" w="full" h="full" overflow="hidden" gap={2}>
<Flex flexDir="column" w="full" h="full" overflow="hidden" gap={2} position="relative">
<ViewerToolbar />
<Divider />
<ImageViewer />
<Flex w="full" h="full" position="relative">
<ImageViewer />
{shouldShowDropTarget && (
<DndDropTarget
dndTarget={setComparisonImageDndTarget}
dndTargetData={dndTargetData}
label={t('gallery.selectForCompare')}
/>
)}
</Flex>
</Flex>
</ImageViewerContextProvider>
);