github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04: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 { Divider, Flex } from '@invoke-ai/ui-library';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer'; import { useAppSelector } from 'app/store/storeHooks';
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar'; import type { SetComparisonImageDndTargetData } from 'features/dnd/dnd';
import { memo } from 'react'; 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 { ImageViewerContextProvider } from './context';
import { ImageViewer } from './ImageViewer';
import { ViewerToolbar } from './ViewerToolbar';
export const ImageViewerPanel = memo(() => { 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 ( return (
<ImageViewerContextProvider> <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 /> <ViewerToolbar />
<Divider /> <Divider />
<ImageViewer /> <Flex w="full" h="full" position="relative">
<ImageViewer />
{shouldShowDropTarget && (
<DndDropTarget
dndTarget={setComparisonImageDndTarget}
dndTargetData={dndTargetData}
label={t('gallery.selectForCompare')}
/>
)}
</Flex>
</Flex> </Flex>
</ImageViewerContextProvider> </ImageViewerContextProvider>
); );