From f20c230f4a4558d2fe1af95ced33b87fd93da386 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Jul 2025 17:51:33 +0000
Subject: [PATCH] Add drag-and-drop comparison image target to ImageViewerPanel

Co-authored-by: kent <kent@invoke.ai>
---
 .../ImageViewer/ImageViewerPanel.tsx          | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx
index b788f55827..6442245557 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx
@@ -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>
   );