refactor(ui): update dnd/image upload

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

@@ -2,17 +2,11 @@ import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { parseify } from 'common/util/serialize';
-import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
-  controlAdapterImageChanged,
+  caImageChanged,
-  controlAdapterIsEnabledChanged,
+  ipaImageChanged,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import {
-  controlAdapterImageChanged,
-  iiLayerImageChanged,
   layerImageAdded,
-  ipAdapterImageChanged,
+  rgIPAdapterImageChanged,
-  regionalGuidanceIPAdapterImageChanged,
 } from 'features/controlLayers/store/canvasV2Slice';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
@@ -23,7 +17,6 @@ import {
   selectionChanged,
 } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -66,44 +59,15 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
       }
 
       /**
-       * Image dropped on ControlNet
+       * Image dropped on Control Adapter Layer
        */
       if (
-        overData.actionType === 'SET_CONTROL_ADAPTER_IMAGE' &&
+        overData.actionType === 'SET_CA_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
         const { id } = overData.context;
-        dispatch(
+        dispatch(caImageChanged({ id, imageDTO: activeData.payload.imageDTO }));
-          controlAdapterImageChanged({
-            id,
-            controlImage: activeData.payload.imageDTO.image_name,
-          })
-        );
-        dispatch(
-          controlAdapterIsEnabledChanged({
-            id,
-            isEnabled: true,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image dropped on Control Adapter Layer
-       */
-      if (
-        overData.actionType === 'SET_CA_LAYER_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { layerId } = overData.context;
-        dispatch(
-          controlAdapterImageChanged({
-            layerId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
         return;
       }
 
@@ -111,17 +75,12 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
        * Image dropped on IP Adapter Layer
        */
       if (
-        overData.actionType === 'SET_IPA_LAYER_IMAGE' &&
+        overData.actionType === 'SET_IPA_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const { layerId } = overData.context;
+        const { id } = overData.context;
-        dispatch(
+        dispatch(ipaImageChanged({ id, imageDTO: activeData.payload.imageDTO }));
-          ipAdapterImageChanged({
-            layerId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
         return;
       }
 
@@ -129,36 +88,12 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
        * Image dropped on RG Layer IP Adapter
        */
       if (
-        overData.actionType === 'SET_RG_LAYER_IP_ADAPTER_IMAGE' &&
+        overData.actionType === 'SET_RG_IP_ADAPTER_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const { layerId, ipAdapterId } = overData.context;
+        const { id, ipAdapterId } = overData.context;
-        dispatch(
+        dispatch(rgIPAdapterImageChanged({ id, ipAdapterId, imageDTO: activeData.payload.imageDTO }));
-          regionalGuidanceIPAdapterImageChanged({
-            layerId,
-            ipAdapterId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image dropped on II Layer Image
-       */
-      if (
-        overData.actionType === 'SET_II_LAYER_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { layerId } = overData.context;
-        dispatch(
-          iiLayerImageChanged({
-            layerId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
         return;
       }
 
@@ -171,24 +106,7 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         activeData.payload.imageDTO
       ) {
         const { layerId } = overData.context;
-        dispatch(
+        dispatch(layerImageAdded({ id: layerId, imageDTO: activeData.payload.imageDTO }));
-          layerImageAdded({
-            layerId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image dropped on Canvas
-       */
-      if (
-        overData.actionType === 'SET_CANVAS_INITIAL_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        dispatch(setInitialCanvasImage(activeData.payload.imageDTO, selectOptimalDimension(getState())));
         return;
       }
 

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

@@ -82,37 +82,28 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
       if (postUploadAction?.type === 'SET_CA_IMAGE') {
         const { id } = postUploadAction;
         dispatch(caImageChanged({ id, imageDTO }));
-        toast({
+        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-          ...DEFAULT_UPLOADED_TOAST,
+        return;
-          description: t('toast.setControlImage'),
-        });
       }
 
       if (postUploadAction?.type === 'SET_IPA_IMAGE') {
         const { id } = postUploadAction;
         dispatch(ipaImageChanged({ id, imageDTO }));
-        toast({
+        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-          ...DEFAULT_UPLOADED_TOAST,
+        return;
-          description: t('toast.setControlImage'),
-        });
       }
 
       if (postUploadAction?.type === 'SET_RG_IP_ADAPTER_IMAGE') {
         const { id, ipAdapterId } = postUploadAction;
         dispatch(rgIPAdapterImageChanged({ id, ipAdapterId, imageDTO }));
-        toast({
+        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-          ...DEFAULT_UPLOADED_TOAST,
+        return;
-          description: t('toast.setControlImage'),
-        });
       }
 
       if (postUploadAction?.type === 'SET_NODES_IMAGE') {
         const { nodeId, fieldName } = postUploadAction;
         dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }));
-        toast({
+        toast({ ...DEFAULT_UPLOADED_TOAST, description: `${t('toast.setNodeField')} ${fieldName}` });
-          ...DEFAULT_UPLOADED_TOAST,
-          description: `${t('toast.setNodeField')} ${fieldName}`,
-        });
         return;
       }
     },

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

@@ -15,17 +15,13 @@ export const isValidDrop = (overData?: TypesafeDroppableData | null, activeData?
   switch (actionType) {
     case 'SET_CURRENT_IMAGE':
       return payloadType === 'IMAGE_DTO';
-    case 'SET_CONTROL_ADAPTER_IMAGE':
+    case 'SET_CA_IMAGE':
       return payloadType === 'IMAGE_DTO';
-    case 'SET_CA_LAYER_IMAGE':
+    case 'SET_IPA_IMAGE':
       return payloadType === 'IMAGE_DTO';
-    case 'SET_IPA_LAYER_IMAGE':
+    case 'SET_RG_IP_ADAPTER_IMAGE':
       return payloadType === 'IMAGE_DTO';
-    case 'SET_RG_LAYER_IP_ADAPTER_IMAGE':
+    case 'ADD_LAYER_IMAGE':
-      return payloadType === 'IMAGE_DTO';
-    case 'SET_II_LAYER_IMAGE':
-      return payloadType === 'IMAGE_DTO';
-    case 'SET_CANVAS_INITIAL_IMAGE':
       return payloadType === 'IMAGE_DTO';
     case 'SET_UPSCALE_INITIAL_IMAGE':
       return payloadType === 'IMAGE_DTO';
@@ -33,8 +29,6 @@ export const isValidDrop = (overData?: TypesafeDroppableData | null, activeData?
       return payloadType === 'IMAGE_DTO';
     case 'SELECT_FOR_COMPARE':
       return payloadType === 'IMAGE_DTO';
-    case 'ADD_RASTER_LAYER_IMAGE':
-      return payloadType === 'IMAGE_DTO';
     case 'ADD_TO_BOARD': {
       // If the board is the same, don't allow the drop