feat(ui): support dnd images onto inpaint mask/rg entities

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -1935,6 +1935,8 @@
             "newRegionalReferenceImage": "New Regional Reference Image",
             "newControlLayer": "New Control Layer",
             "newRasterLayer": "New Raster Layer",
+            "newInpaintMask": "New Inpaint Mask",
+            "newRegionalGuidance": "New Regional Guidance",
             "cropCanvasToBbox": "Crop Canvas to Bbox"
         },
         "stagingArea": {

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

@@ -8,6 +8,7 @@ import {
   controlLayerAdded,
   entityRasterized,
   entitySelected,
+  inpaintMaskAdded,
   rasterLayerAdded,
   referenceImageAdded,
   referenceImageIPAdapterImageChanged,
@@ -17,6 +18,7 @@ import {
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import type {
   CanvasControlLayerState,
+  CanvasInpaintMaskState,
   CanvasRasterLayerState,
   CanvasReferenceImageState,
   CanvasRegionalGuidanceState,
@@ -110,6 +112,46 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         return;
       }
 
+      /**
+
+      /**
+       * Image dropped on Inpaint Mask
+       */
+      if (
+        overData.actionType === 'ADD_INPAINT_MASK_FROM_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
+        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
+        const overrides: Partial<CanvasInpaintMaskState> = {
+          objects: [imageObject],
+          position: { x, y },
+        };
+        dispatch(inpaintMaskAdded({ overrides, isSelected: true }));
+        return;
+      }
+
+      /**
+
+      /**
+       * Image dropped on Regional Guidance
+       */
+      if (
+        overData.actionType === 'ADD_REGIONAL_GUIDANCE_FROM_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
+        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
+        const overrides: Partial<CanvasRegionalGuidanceState> = {
+          objects: [imageObject],
+          position: { x, y },
+        };
+        dispatch(rgAdded({ overrides, isSelected: true }));
+        return;
+      }
+
       /**
        * Image dropped on Raster layer
        */

invokeai/frontend/web/src/features/controlLayers/components/CanvasDropArea.tsx

@@ -3,7 +3,9 @@ import IAIDroppable from 'common/components/IAIDroppable';
 import type {
   AddControlLayerFromImageDropData,
   AddGlobalReferenceImageFromImageDropData,
+  AddInpaintMaskFromImageDropData,
   AddRasterLayerFromImageDropData,
+  AddRegionalGuidanceFromImageDropData,
   AddRegionalReferenceImageFromImageDropData,
 } from 'features/dnd/types';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
@@ -20,6 +22,16 @@ const addControlLayerFromImageDropData: AddControlLayerFromImageDropData = {
   actionType: 'ADD_CONTROL_LAYER_FROM_IMAGE',
 };
 
+const addInpaintMaskFromImageDropData: AddInpaintMaskFromImageDropData = {
+  id: 'add-inpaint-mask-from-image-drop-data',
+  actionType: 'ADD_INPAINT_MASK_FROM_IMAGE',
+};
+
+const addRegionalGuidanceFromImageDropData: AddRegionalGuidanceFromImageDropData = {
+  id: 'add-regional-guidance-from-image-drop-data',
+  actionType: 'ADD_REGIONAL_GUIDANCE_FROM_IMAGE',
+};
+
 const addRegionalReferenceImageFromImageDropData: AddRegionalReferenceImageFromImageDropData = {
   id: 'add-control-layer-from-image-drop-data',
   actionType: 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE',
@@ -41,7 +53,7 @@ export const CanvasDropArea = memo(() => {
   return (
     <>
       <Grid
-        gridTemplateRows="1fr 1fr"
+        gridTemplateRows="1fr 1fr 1fr"
         gridTemplateColumns="1fr 1fr"
         position="absolute"
         top={0}
@@ -62,6 +74,7 @@ export const CanvasDropArea = memo(() => {
             data={addControlLayerFromImageDropData}
           />
         </GridItem>
+
         <GridItem position="relative">
           <IAIDroppable
             dropLabel={t('controlLayers.canvasContextMenu.newRegionalReferenceImage')}
@@ -74,6 +87,19 @@ export const CanvasDropArea = memo(() => {
             data={addGlobalReferenceImageFromImageDropData}
           />
         </GridItem>
+
+        <GridItem position="relative">
+          <IAIDroppable
+            dropLabel={t('controlLayers.canvasContextMenu.newInpaintMask')}
+            data={addInpaintMaskFromImageDropData}
+          />
+        </GridItem>
+        <GridItem position="relative">
+          <IAIDroppable
+            dropLabel={t('controlLayers.canvasContextMenu.newRegionalGuidance')}
+            data={addRegionalGuidanceFromImageDropData}
+          />
+        </GridItem>
       </Grid>
     </>
   );

invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx

@@ -1,4 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
+import IAIDroppable from 'common/components/IAIDroppable';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
@@ -7,14 +8,21 @@ import { CanvasEntityEditableTitle } from 'features/controlLayers/components/com
 import { InpaintMaskAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import type { ReplaceLayerImageDropData } from 'features/dnd/types';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   id: string;
 };
 
 export const InpaintMask = memo(({ id }: Props) => {
-  const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'inpaint_mask' }), [id]);
+  const { t } = useTranslation();
+  const entityIdentifier = useMemo<CanvasEntityIdentifier<'inpaint_mask'>>(() => ({ id, type: 'inpaint_mask' }), [id]);
+  const dropData = useMemo<ReplaceLayerImageDropData>(
+    () => ({ id, actionType: 'REPLACE_LAYER_WITH_IMAGE', context: { entityIdentifier } }),
+    [id, entityIdentifier]
+  );
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
@@ -26,6 +34,7 @@ export const InpaintMask = memo(({ id }: Props) => {
             <Spacer />
             <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
+          <IAIDroppable data={dropData} dropLabel={t('controlLayers.replaceLayer')} />
         </CanvasEntityContainer>
       </InpaintMaskAdapterGate>
     </EntityIdentifierContext.Provider>

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx

@@ -1,4 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
+import IAIDroppable from 'common/components/IAIDroppable';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
@@ -9,14 +10,24 @@ import { RegionalGuidanceSettings } from 'features/controlLayers/components/Regi
 import { RegionalGuidanceAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import type { ReplaceLayerImageDropData } from 'features/dnd/types';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   id: string;
 };
 
 export const RegionalGuidance = memo(({ id }: Props) => {
-  const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'regional_guidance' }), [id]);
+  const { t } = useTranslation();
+  const entityIdentifier = useMemo<CanvasEntityIdentifier<'regional_guidance'>>(
+    () => ({ id, type: 'regional_guidance' }),
+    [id]
+  );
+  const dropData = useMemo<ReplaceLayerImageDropData>(
+    () => ({ id, actionType: 'REPLACE_LAYER_WITH_IMAGE', context: { entityIdentifier } }),
+    [id, entityIdentifier]
+  );
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
@@ -30,6 +41,7 @@ export const RegionalGuidance = memo(({ id }: Props) => {
             <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
           <RegionalGuidanceSettings />
+          <IAIDroppable data={dropData} dropLabel={t('controlLayers.replaceLayer')} />
         </CanvasEntityContainer>
       </RegionalGuidanceAdapterGate>
     </EntityIdentifierContext.Provider>

invokeai/frontend/web/src/features/dnd/types/index.ts

@@ -42,6 +42,14 @@ export type AddControlLayerFromImageDropData = BaseDropData & {
   actionType: 'ADD_CONTROL_LAYER_FROM_IMAGE';
 };
 
+export type AddInpaintMaskFromImageDropData = BaseDropData & {
+  actionType: 'ADD_INPAINT_MASK_FROM_IMAGE';
+};
+
+export type AddRegionalGuidanceFromImageDropData = BaseDropData & {
+  actionType: 'ADD_REGIONAL_GUIDANCE_FROM_IMAGE';
+};
+
 export type AddRegionalReferenceImageFromImageDropData = BaseDropData & {
   actionType: 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE';
 };
@@ -53,7 +61,7 @@ export type AddGlobalReferenceImageFromImageDropData = BaseDropData & {
 export type ReplaceLayerImageDropData = BaseDropData & {
   actionType: 'REPLACE_LAYER_WITH_IMAGE';
   context: {
-    entityIdentifier: CanvasEntityIdentifier<'control_layer' | 'raster_layer'>;
+    entityIdentifier: CanvasEntityIdentifier<'control_layer' | 'raster_layer' | 'inpaint_mask' | 'regional_guidance'>;
   };
 };
 
@@ -98,7 +106,9 @@ export type TypesafeDroppableData =
   | AddControlLayerFromImageDropData
   | ReplaceLayerImageDropData
   | AddRegionalReferenceImageFromImageDropData
-  | AddGlobalReferenceImageFromImageDropData;
+  | AddGlobalReferenceImageFromImageDropData
+  | AddInpaintMaskFromImageDropData
+  | AddRegionalGuidanceFromImageDropData;
 
 type BaseDragData = {
   id: string;

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

@@ -17,6 +17,8 @@ export const isValidDrop = (overData?: TypesafeDroppableData | null, activeData?
     case 'SET_RG_IP_ADAPTER_IMAGE':
     case 'ADD_RASTER_LAYER_FROM_IMAGE':
     case 'ADD_CONTROL_LAYER_FROM_IMAGE':
+    case 'ADD_INPAINT_MASK_FROM_IMAGE':
+    case 'ADD_REGIONAL_GUIDANCE_FROM_IMAGE':
     case 'SET_UPSCALE_INITIAL_IMAGE':
     case 'SET_NODES_IMAGE':
     case 'SELECT_FOR_COMPARE':