refactor(ui): dnd actions to image actions

We don't need a "dnd" image system. We need a "image action" system. We need to execute specific flows with images from various "origins":
- internal dnd e.g. from gallery
- external dnd e.g. user drags an image file into the browser
- direct file upload e.g. user clicks an upload button
- some other internal app button e.g. a context menu

The actions are now generalized to better support these various use-cases.

Author: psychedelicious

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

@@ -1,16 +1,17 @@
 import { Grid, GridItem } from '@invoke-ai/ui-library';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
-import { Dnd } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { newCanvasEntityFromImageActionApi } from 'features/imageActions/actions';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const addRasterLayerFromImageDndTargetData = Dnd.Target.newRasterLayerFromImage.getData();
-const addControlLayerFromImageDndTargetData = Dnd.Target.newControlLayerFromImage.getData();
-const addRegionalGuidanceReferenceImageFromImageDndTargetData =
-  Dnd.Target.newRegionalGuidanceReferenceImageFromImage.getData();
-const addGlobalReferenceImageFromImageDndTargetData = Dnd.Target.newGlobalReferenceImageFromImage.getData();
+const addRasterLayerFromImageDndTargetData = newCanvasEntityFromImageActionApi.getData({ type: 'raster_layer' });
+const addControlLayerFromImageDndTargetData = newCanvasEntityFromImageActionApi.getData({ type: 'control_layer' });
+const addRegionalGuidanceReferenceImageFromImageDndTargetData = newCanvasEntityFromImageActionApi.getData({
+  type: 'regional_guidance_with_reference_image',
+});
+const addGlobalReferenceImageFromImageDndTargetData = newCanvasEntityFromImageActionApi.getData({ type: 'reference_image' });
 
 export const CanvasDropArea = memo(() => {
   const { t } = useTranslation();

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList.tsx

@@ -16,7 +16,7 @@ import { useEntityTypeTitle } from 'features/controlLayers/hooks/useEntityTypeTi
 import { entitiesReordered } from 'features/controlLayers/store/canvasSlice';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { isRenderableEntityType } from 'features/controlLayers/store/types';
-import { triggerPostMoveFlash } from 'features/dnd/dnd';
+import { triggerPostMoveFlash } from 'features/dnd/util';
 import type { PropsWithChildren } from 'react';
 import { memo, useEffect } from 'react';
 import { flushSync } from 'react-dom';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts

@@ -2,18 +2,26 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import type { DndListState } from 'features/dnd/dnd';
-import { buildDndSourceApi, idle } from 'features/dnd/dnd';
+import { type DndListTargetState, idle } from 'features/dnd/types';
+import type { ActionData, ActionSourceApi } from 'features/imageActions/actions';
+import { buildGetData, buildTypeAndKey, buildTypeGuard } from 'features/imageActions/actions';
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 
-/**
- * Dnd source API for a single canvas entity.
- */
-export const singleCanvasEntity = buildDndSourceApi<{ entityIdentifier: CanvasEntityIdentifier }>('SingleCanvasEntity');
+const _singleCanvasEntity = buildTypeAndKey('single-canvas-entity');
+type SingleCanvasEntitySourceData = ActionData<
+  typeof _singleCanvasEntity.type,
+  typeof _singleCanvasEntity.key,
+  { entityIdentifier: CanvasEntityIdentifier }
+>;
+export const singleCanvasEntity: ActionSourceApi<SingleCanvasEntitySourceData> = {
+  ..._singleCanvasEntity,
+  typeGuard: buildTypeGuard(_singleCanvasEntity.key),
+  getData: buildGetData(_singleCanvasEntity.key, _singleCanvasEntity.type),
+};
 
 export const useCanvasEntityListDnd = (ref: RefObject<HTMLElement>, entityIdentifier: CanvasEntityIdentifier) => {
-  const [dndListState, setDndListState] = useState<DndListState>(idle);
+  const [dndListState, setDndListState] = useState<DndListTargetState>(idle);
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {

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

@@ -109,7 +109,9 @@ export const CanvasMainPanelContent = memo(() => {
           <SelectObject />
         </CanvasManagerProviderGate>
       </Flex>
-      <CanvasDropArea />
+      <CanvasManagerProviderGate>
+        <CanvasDropArea />
+      </CanvasManagerProviderGate>
       <GatedImageViewer />
     </Flex>
   );

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

@@ -6,10 +6,11 @@ import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHook
 import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
-import { Dnd } from 'features/dnd/dnd';
 import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
+import type { DndTargetState } from 'features/dnd/types';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { multipleImageSourceApi, singleImageSourceApi } from 'features/imageActions/actions';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { selectActiveTabCanvasRightPanel } from 'features/ui/store/uiSelectors';
 import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
@@ -84,8 +85,8 @@ const PanelTabs = memo(() => {
   const { t } = useTranslation();
   const store = useAppStore();
   const activeEntityCount = useAppSelector(selectEntityCountActive);
-  const [layersTabDndState, setLayersTabDndState] = useState<Dnd.types['DndState']>('idle');
-  const [galleryTabDndState, setGalleryTabDndState] = useState<Dnd.types['DndState']>('idle');
+  const [layersTabDndState, setLayersTabDndState] = useState<DndTargetState>('idle');
+  const [galleryTabDndState, setGalleryTabDndState] = useState<DndTargetState>('idle');
   const layersTabRef = useRef<HTMLDivElement>(null);
   const galleryTabRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<number | null>(null);
@@ -208,7 +209,7 @@ const PanelTabs = memo(() => {
       }),
       monitorForElements({
         canMonitor: ({ source }) => {
-          if (!Dnd.Source.singleImage.typeGuard(source.data) || !Dnd.Source.multipleImage.typeGuard(source.data)) {
+          if (!singleImageSourceApi.typeGuard(source.data) || !multipleImageSourceApi.typeGuard(source.data)) {
             return false;
           }
           // Only monitor if we are not already on the gallery tab

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

@@ -11,8 +11,9 @@ import { ControlLayerAdapterGate } from 'features/controlLayers/contexts/EntityA
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import { Dnd } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import type { ReplaceCanvasEntityObjectsWithImageActionData} from 'features/imageActions/actions';
+import {replaceCanvasEntityObjectsWithImageActionApi } from 'features/imageActions/actions';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -27,8 +28,8 @@ export const ControlLayer = memo(({ id }: Props) => {
     () => ({ id, type: 'control_layer' }),
     [id]
   );
-  const targetData = useMemo<Dnd.types['TargetDataTypeMap']['replaceLayerWithImage']>(
-    () => Dnd.Target.replaceLayerWithImage.getData({ entityIdentifier }, entityIdentifier.id),
+  const targetData = useMemo<ReplaceCanvasEntityObjectsWithImageActionData>(
+    () => replaceCanvasEntityObjectsWithImageActionApi.getData({ entityIdentifier }, entityIdentifier.id),
     [entityIdentifier]
   );
 

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx

@@ -3,10 +3,10 @@ import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
-import type { Dnd } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { DndImage } from 'features/dnd/DndImage';
 import { DndImageIcon } from 'features/dnd/DndImageIcon';
+import type { SetGlobalReferenceImageActionData, SetRegionalGuidanceReferenceImageActionData } from 'features/imageActions/actions';
 import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
@@ -31,7 +31,7 @@ const sx = {
 type Props = {
   image: ImageWithDims | null;
   onChangeImage: (imageDTO: ImageDTO | null) => void;
-  targetData: Dnd.types['TargetDataUnion'];
+  targetData: SetGlobalReferenceImageActionData | SetRegionalGuidanceReferenceImageActionData;
 };
 
 export const IPAdapterImagePreview = memo(({ image, onChangeImage, targetData }: Props) => {

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx

@@ -19,7 +19,8 @@ import {
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type { CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
-import { Dnd } from 'features/dnd/dnd';
+import type { SetGlobalReferenceImageActionData} from 'features/imageActions/actions';
+import {setGlobalReferenceImageActionApi } from 'features/imageActions/actions';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold } from 'react-icons/pi';
@@ -80,8 +81,8 @@ export const IPAdapterSettings = memo(() => {
     [dispatch, entityIdentifier]
   );
 
-  const targetData = useMemo<Dnd.types['TargetDataTypeMap']['setGlobalReferenceImage']>(
-    () => Dnd.Target.setGlobalReferenceImage.getData({ entityIdentifier }, ipAdapter.image?.image_name),
+  const targetData = useMemo<SetGlobalReferenceImageActionData>(
+    () => setGlobalReferenceImageActionApi.getData({ entityIdentifier }, ipAdapter.image?.image_name),
     [entityIdentifier, ipAdapter.image?.image_name]
   );
   const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(entityIdentifier);

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

@@ -8,8 +8,9 @@ import { RasterLayerAdapterGate } from 'features/controlLayers/contexts/EntityAd
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import { Dnd } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import type { ReplaceCanvasEntityObjectsWithImageActionData} from 'features/imageActions/actions';
+import {replaceCanvasEntityObjectsWithImageActionApi } from 'features/imageActions/actions';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,8 +22,8 @@ export const RasterLayer = memo(({ id }: Props) => {
   const { t } = useTranslation();
   const isBusy = useCanvasIsBusy();
   const entityIdentifier = useMemo<CanvasEntityIdentifier<'raster_layer'>>(() => ({ id, type: 'raster_layer' }), [id]);
-  const targetData = useMemo<Dnd.types['TargetDataTypeMap']['replaceLayerWithImage']>(
-    () => Dnd.Target.replaceLayerWithImage.getData({ entityIdentifier }, entityIdentifier.id),
+  const targetData = useMemo<ReplaceCanvasEntityObjectsWithImageActionData>(
+    () => replaceCanvasEntityObjectsWithImageActionApi.getData({ entityIdentifier }, entityIdentifier.id),
     [entityIdentifier]
   );
 

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

@@ -20,7 +20,8 @@ import {
 } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectRegionalGuidanceReferenceImage } from 'features/controlLayers/store/selectors';
 import type { CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
-import { Dnd } from 'features/dnd/dnd';
+import type { SetRegionalGuidanceReferenceImageActionData} from 'features/imageActions/actions';
+import {setRegionalGuidanceReferenceImageActionApi } from 'features/imageActions/actions';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold, PiTrashSimpleFill } from 'react-icons/pi';
@@ -91,12 +92,9 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro
     [dispatch, entityIdentifier, referenceImageId]
   );
 
-  const targetData = useMemo<Dnd.types['TargetDataTypeMap']['setRegionalGuidanceReferenceImage']>(
+  const targetData = useMemo<SetRegionalGuidanceReferenceImageActionData>(
     () =>
-      Dnd.Target.setRegionalGuidanceReferenceImage.getData(
-        { entityIdentifier, referenceImageId },
-        ipAdapter.image?.image_name
-      ),
+      setRegionalGuidanceReferenceImageActionApi.getData({ entityIdentifier, referenceImageId }, ipAdapter.image?.image_name),
     [entityIdentifier, ipAdapter.image?.image_name, referenceImageId]
   );