fix(ui): use isValidDrop in imageDropped listener

It was possible for a drop event to be invalid but still processed. Fixed by slightly changing the signature of isValidDrop.

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts

@@ -14,6 +14,7 @@ import {
   rgLayerIPAdapterImageChanged,
 } from 'features/controlLayers/store/controlLayersSlice';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
+import { isValidDrop } from 'features/dnd/util/isValidDrop';
 import { imageSelected, imageToCompareChanged } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -30,6 +31,9 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
     effect: async (action, { dispatch, getState }) => {
       const log = logger('dnd');
       const { activeData, overData } = action.payload;
+      if (!isValidDrop(overData, activeData)) {
+        return;
+      }
 
       if (activeData.payloadType === 'IMAGE_DTO') {
         log.debug({ activeData, overData }, 'Image dropped');

invokeai/frontend/web/src/common/components/IAIDroppable.tsx

@@ -36,7 +36,7 @@ const IAIDroppable = (props: IAIDroppableProps) => {
       pointerEvents={active ? 'auto' : 'none'}
     >
       <AnimatePresence>
-        {isValidDrop(data, active) && <IAIDropOverlay isOver={isOver} label={dropLabel} />}
+        {isValidDrop(data, active?.data.current) && <IAIDropOverlay isOver={isOver} label={dropLabel} />}
       </AnimatePresence>
     </Box>
   );

invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts

@@ -1,14 +1,14 @@
-import type { TypesafeActive, TypesafeDroppableData } from 'features/dnd/types';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 
-export const isValidDrop = (overData: TypesafeDroppableData | undefined, active: TypesafeActive | null) => {
+export const isValidDrop = (overData?: TypesafeDroppableData | null, activeData?: TypesafeDraggableData | null) => {
-  if (!overData || !active?.data.current) {
+  if (!overData || !activeData) {
     return false;
   }
 
   const { actionType } = overData;
-  const { payloadType } = active.data.current;
+  const { payloadType } = activeData;
 
-  if (overData.id === active.data.current.id) {
+  if (overData.id === activeData.id) {
     return false;
   }
 
@@ -30,7 +30,11 @@ export const isValidDrop = (overData: TypesafeDroppableData | undefined, active:
     case 'SET_NODES_IMAGE':
       return payloadType === 'IMAGE_DTO';
     case 'SELECT_FOR_COMPARE':
-      return payloadType === 'IMAGE_DTO';
+      return (
+        payloadType === 'IMAGE_DTO' &&
+        activeData.id !== 'image-compare-first-image' &&
+        activeData.id !== 'image-compare-second-image'
+      );
     case 'ADD_TO_BOARD': {
       // If the board is the same, don't allow the drop
 
@@ -42,7 +46,7 @@ export const isValidDrop = (overData: TypesafeDroppableData | undefined, active:
 
       // Check if the image's board is the board we are dragging onto
       if (payloadType === 'IMAGE_DTO') {
-        const { imageDTO } = active.data.current.payload;
+        const { imageDTO } = activeData.payload;
         const currentBoard = imageDTO.board_id ?? 'none';
         const destinationBoard = overData.context.boardId;
 
@@ -51,7 +55,7 @@ export const isValidDrop = (overData: TypesafeDroppableData | undefined, active:
 
       if (payloadType === 'GALLERY_SELECTION') {
         // Assume all images are on the same board - this is true for the moment
-        const currentBoard = active.data.current.payload.boardId;
+        const currentBoard = activeData.payload.boardId;
         const destinationBoard = overData.context.boardId;
         return currentBoard !== destinationBoard;
       }
@@ -69,14 +73,14 @@ export const isValidDrop = (overData: TypesafeDroppableData | undefined, active:
 
       // Check if the image's board is the board we are dragging onto
       if (payloadType === 'IMAGE_DTO') {
-        const { imageDTO } = active.data.current.payload;
+        const { imageDTO } = activeData.payload;
         const currentBoard = imageDTO.board_id ?? 'none';
 
         return currentBoard !== 'none';
       }
 
       if (payloadType === 'GALLERY_SELECTION') {
-        const currentBoard = active.data.current.payload.boardId;
+        const currentBoard = activeData.payload.boardId;
         return currentBoard !== 'none';
       }
 

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx

@@ -41,7 +41,7 @@ const UnifiedCanvasTab = () => {
     >
       <IAICanvasToolbar />
       <IAICanvas />
-      {isValidDrop(droppableData, active) && (
+      {isValidDrop(droppableData, active?.data.current) && (
         <IAIDropOverlay isOver={isOver} label={t('toast.setCanvasInitialImage')} />
       )}
     </Flex>