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(() => setComparisonImageDndTarget.getData(), []); + return ( - + - + + + {shouldShowDropTarget && ( + + )} + );