fix(ui): excessive toasts when generating on canvas

- Add `withToast` flag to `uploadImage` util
- Skip the toast if this is not set
- Use the flag to disable toasts when canvas does internal image-uploading stuff that should be invisible to user

invokeai/app/invocations/flux_denoise.py

@@ -56,7 +56,7 @@ from invokeai.backend.util.devices import TorchDevice
     title="FLUX Denoise",
     tags=["image", "flux"],
     category="image",
-    version="3.2.0",
+    version="3.2.1",
     classification=Classification.Prototype,
 )
 class FluxDenoiseInvocation(BaseInvocation, WithMetadata, WithBoard):
@@ -81,6 +81,7 @@ class FluxDenoiseInvocation(BaseInvocation, WithMetadata, WithBoard):
         description=FieldDescriptions.denoising_start,
     )
     denoising_end: float = InputField(default=1.0, ge=0, le=1, description=FieldDescriptions.denoising_end)
+    add_noise: bool = InputField(default=True, description="Add noise based on denoising start.")
     transformer: TransformerField = InputField(
         description=FieldDescriptions.flux_model,
         input=Input.Connection,
@@ -207,9 +208,12 @@ class FluxDenoiseInvocation(BaseInvocation, WithMetadata, WithBoard):
                     "to be poor. Consider using a FLUX dev model instead."
                 )
 
-            # Noise the orig_latents by the appropriate amount for the first timestep.
-            t_0 = timesteps[0]
-            x = t_0 * noise + (1.0 - t_0) * init_latents
+            if self.add_noise:
+                # Noise the orig_latents by the appropriate amount for the first timestep.
+                t_0 = timesteps[0]
+                x = t_0 * noise + (1.0 - t_0) * init_latents
+            else:
+                x = init_latents
         else:
             # init_latents are not provided, so we are not doing image-to-image (i.e. we are starting from pure noise).
             if self.denoising_start > 1e-5:

invokeai/backend/model_manager/config.py

@@ -165,6 +165,8 @@ class SubmodelDefinition(BaseModel):
     model_type: ModelType
     variant: AnyVariant = None
 
+    model_config = ConfigDict(protected_namespaces=())
+
 
 class MainModelDefaultSettings(BaseModel):
     vae: str | None = Field(default=None, description="Default VAE for this model (model key)")

invokeai/backend/model_manager/util/model_util.py

@@ -172,6 +172,8 @@ def get_clip_variant_type(location: str) -> Optional[ClipVariantType]:
     try:
         path = Path(location)
         config_path = path / "config.json"
+        if not config_path.exists():
+            config_path = path / "text_encoder" / "config.json"
         if not config_path.exists():
             return ClipVariantType.L
         with open(config_path) as file:

invokeai/backend/model_manager/util/select_hf_files.py

@@ -85,6 +85,7 @@ def _filter_by_variant(files: List[Path], variant: ModelRepoVariant) -> Set[Path
     """Select the proper variant files from a list of HuggingFace repo_id paths."""
     result: set[Path] = set()
     subfolder_weights: dict[Path, list[SubfolderCandidate]] = {}
+    safetensors_detected = False
     for path in files:
         if path.suffix in [".onnx", ".pb", ".onnx_data"]:
             if variant == ModelRepoVariant.ONNX:
@@ -119,10 +120,16 @@ def _filter_by_variant(files: List[Path], variant: ModelRepoVariant) -> Set[Path
             # We prefer safetensors over other file formats and an exact variant match. We'll score each file based on
             # variant and format and select the best one.
 
+            if safetensors_detected and path.suffix == ".bin":
+                continue
+
             parent = path.parent
             score = 0
 
             if path.suffix == ".safetensors":
+                safetensors_detected = True
+                if parent in subfolder_weights:
+                    subfolder_weights[parent] = [sfc for sfc in subfolder_weights[parent] if sfc.path.suffix != ".bin"]
                 score += 1
 
             candidate_variant_label = path.suffixes[0] if len(path.suffixes) == 2 else None

invokeai/frontend/web/package.json

@@ -52,11 +52,11 @@
     }
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@dagrejs/dagre": "^1.1.4",
     "@dagrejs/graphlib": "^2.2.4",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.1.0",
     "@invoke-ai/ui-library": "^0.0.43",
     "@nanostores/react": "^0.7.3",

invokeai/frontend/web/pnpm-lock.yaml

@@ -5,21 +5,21 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@atlaskit/pragmatic-drag-and-drop':
+    specifier: ^1.4.0
+    version: 1.4.0
+  '@atlaskit/pragmatic-drag-and-drop-auto-scroll':
+    specifier: ^1.4.0
+    version: 1.4.0
+  '@atlaskit/pragmatic-drag-and-drop-hitbox':
+    specifier: ^1.0.3
+    version: 1.0.3
   '@dagrejs/dagre':
     specifier: ^1.1.4
     version: 1.1.4
   '@dagrejs/graphlib':
     specifier: ^2.2.4
     version: 2.2.4
-  '@dnd-kit/core':
-    specifier: ^6.1.0
-    version: 6.1.0(react-dom@18.3.1)(react@18.3.1)
-  '@dnd-kit/sortable':
-    specifier: ^8.0.0
-    version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1)
-  '@dnd-kit/utilities':
-    specifier: ^3.2.2
-    version: 3.2.2(react@18.3.1)
   '@fontsource-variable/inter':
     specifier: ^5.1.0
     version: 5.1.0
@@ -319,6 +319,28 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
+  /@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0:
+    resolution: {integrity: sha512-5GoikoTSW13UX76F9TDeWB8x3jbbGlp/Y+3aRkHe1MOBMkrWkwNpJ42MIVhhX/6NSeaZiPumP0KbGJVs2tOWSQ==}
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop': 1.4.0
+      '@babel/runtime': 7.25.7
+    dev: false
+
+  /@atlaskit/pragmatic-drag-and-drop-hitbox@1.0.3:
+    resolution: {integrity: sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==}
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop': 1.4.0
+      '@babel/runtime': 7.25.7
+    dev: false
+
+  /@atlaskit/pragmatic-drag-and-drop@1.4.0:
+    resolution: {integrity: sha512-qRY3PTJIcxfl/QB8Gwswz+BRvlmgAC5pB+J2hL6dkIxgqAgVwOhAamMUKsrOcFU/axG2Q7RbNs1xfoLKDuhoPg==}
+    dependencies:
+      '@babel/runtime': 7.25.7
+      bind-event-listener: 3.0.0
+      raf-schd: 4.0.3
+    dev: false
+
   /@babel/code-frame@7.25.7:
     resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
     engines: {node: '>=6.9.0'}
@@ -980,49 +1002,6 @@ packages:
     engines: {node: '>17.0.0'}
     dev: false
 
-  /@dnd-kit/accessibility@3.1.0(react@18.3.1):
-    resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.3.1
-      tslib: 2.7.0
-    dev: false
-
-  /@dnd-kit/core@6.1.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
-      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tslib: 2.7.0
-    dev: false
-
-  /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1):
-    resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
-    peerDependencies:
-      '@dnd-kit/core': ^6.1.0
-      react: '>=16.8.0'
-    dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
-      react: 18.3.1
-      tslib: 2.7.0
-    dev: false
-
-  /@dnd-kit/utilities@3.2.2(react@18.3.1):
-    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.3.1
-      tslib: 2.7.0
-    dev: false
-
   /@emotion/babel-plugin@11.12.0:
     resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
     dependencies:
@@ -4313,6 +4292,10 @@ packages:
       open: 8.4.2
     dev: true
 
+  /bind-event-listener@3.0.0:
+    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
+    dev: false
+
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     dependencies:
@@ -7557,6 +7540,10 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+    dev: false
+
   /raf-throttle@2.0.6:
     resolution: {integrity: sha512-C7W6hy78A+vMmk5a/B6C5szjBHrUzWJkVyakjKCK59Uy2CcA7KhO1JUvvH32IXYFIcyJ3FMKP3ZzCc2/71I6Vg==}
     dev: false

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

@@ -2102,8 +2102,10 @@
     },
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
-        "line1": "<StrongComponent>Layer Merging</StrongComponent>: New <StrongComponent>Merge Down</StrongComponent> and improved <StrongComponent>Merge Visible</StrongComponent> for all layers, with special handling for Regional Guidance and Control Layers.",
-        "line2": "<StrongComponent>HF Token Support</StrongComponent>: Upload models that require Hugging Face authentication.",
+        "items": [
+            "<StrongComponent>SD 3.5</StrongComponent>: Support for Text-to-Image in Workflows with SD 3.5 Medium and Large.",
+            "<StrongComponent>Canvas</StrongComponent>: Streamlined Control Layer processing and improved default Control settings."
+        ],
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"

invokeai/frontend/web/src/app/components/App.tsx

@@ -8,10 +8,8 @@ import { useSyncLoggingConfig } from 'app/logging/useSyncLoggingConfig';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { PartialAppConfig } from 'app/types/invokeai';
-import ImageUploadOverlay from 'common/components/ImageUploadOverlay';
 import { useFocusRegionWatcher } from 'common/hooks/focus';
 import { useClearStorage } from 'common/hooks/useClearStorage';
-import { useFullscreenDropzone } from 'common/hooks/useFullscreenDropzone';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import {
@@ -19,6 +17,7 @@ import {
   NewGallerySessionDialog,
 } from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
+import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { ImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
@@ -62,8 +61,6 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
   useGetOpenAPISchemaQuery();
   useSyncLoggingConfig();
 
-  const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone();
-
   const handleReset = useCallback(() => {
     clearStorage();
     location.reload();
@@ -92,19 +89,8 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
-      <Box
-        id="invoke-app-wrapper"
-        w="100dvw"
-        h="100dvh"
-        position="relative"
-        overflow="hidden"
-        {...dropzone.getRootProps()}
-      >
-        <input {...dropzone.getInputProps()} />
+      <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
         <AppContent />
-        {dropzone.isDragActive && isHandlingUpload && (
-          <ImageUploadOverlay dropzone={dropzone} setIsHandlingUpload={setIsHandlingUpload} />
-        )}
       </Box>
       <DeleteImageModal />
       <ChangeBoardModal />
@@ -121,6 +107,7 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
       <NewGallerySessionDialog />
       <NewCanvasSessionDialog />
       <ImageContextMenu />
+      <FullscreenDropzone />
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/app/components/GlobalImageHotkeys.tsx

@@ -1,4 +1,3 @@
-import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
@@ -8,13 +7,11 @@ import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
-import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 
 export const GlobalImageHotkeys = memo(() => {
   useAssertSingleton('GlobalImageHotkeys');
-  const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const { currentData: imageDTO } = useGetImageDTOQuery(lastSelectedImage?.image_name ?? skipToken);
+  const imageDTO = useAppSelector(selectLastSelectedImage);
 
   if (!imageDTO) {
     return null;

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -19,7 +19,6 @@ import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import { createStore } from 'app/store/store';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
-import AppDndContext from 'features/dnd/components/AppDndContext';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import type { PropsWithChildren, ReactNode } from 'react';
 import React, { lazy, memo, useEffect, useLayoutEffect, useMemo } from 'react';
@@ -237,9 +236,7 @@ const InvokeAIUI = ({
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
-            <AppDndContext>
-              <App config={config} studioInitAction={studioInitAction} />
-            </AppDndContext>
+            <App config={config} studioInitAction={studioInitAction} />
           </ThemeLocaleProvider>
         </React.Suspense>
       </Provider>

invokeai/frontend/web/src/app/logging/logger.ts

@@ -17,6 +17,7 @@ const $logger = atom<Logger>(Roarr.child(BASE_CONTEXT));
 export const zLogNamespace = z.enum([
   'canvas',
   'config',
+  'dnd',
   'events',
   'gallery',
   'generation',

invokeai/frontend/web/src/app/store/constants.ts

@@ -1,4 +1,3 @@
 export const STORAGE_PREFIX = '@@invokeai-';
 export const EMPTY_ARRAY = [];
-/** @knipignore */
 export const EMPTY_OBJECT = {};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -16,7 +16,6 @@ import { addGalleryOffsetChangedListener } from 'app/store/middleware/listenerMi
 import { addGetOpenAPISchemaListener } from 'app/store/middleware/listenerMiddleware/listeners/getOpenAPISchema';
 import { addImageAddedToBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard';
 import { addImageDeletionListeners } from 'app/store/middleware/listenerMiddleware/listeners/imageDeletionListeners';
-import { addImageDroppedListener } from 'app/store/middleware/listenerMiddleware/listeners/imageDropped';
 import { addImageRemovedFromBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageRemovedFromBoard';
 import { addImagesStarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesStarred';
 import { addImagesUnstarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesUnstarred';
@@ -93,9 +92,6 @@ addGetOpenAPISchemaListener(startAppListening);
 addWorkflowLoadRequestedListener(startAppListening);
 addUpdateAllNodesRequestedListener(startAppListening);
 
-// DND
-addImageDroppedListener(startAppListening);
-
 // Models
 addModelSelectedListener(startAppListening);
 

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

@@ -1,12 +1,12 @@
 import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
 import { buildAdHocPostProcessingGraph } from 'features/nodes/util/graph/buildAdHocPostProcessingGraph';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO } from 'services/api/types';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('queue');
 
@@ -39,9 +39,9 @@ export const addAdHocPostProcessingRequestedListener = (startAppListening: AppSt
 
         const enqueueResult = await req.unwrap();
         req.reset();
-        log.debug({ enqueueResult } as SerializableObject, t('queue.graphQueued'));
+        log.debug({ enqueueResult } as JsonObject, t('queue.graphQueued'));
       } catch (error) {
-        log.error({ enqueueBatchArg } as SerializableObject, t('queue.graphFailedToQueue'));
+        log.error({ enqueueBatchArg } as JsonObject, t('queue.graphFailedToQueue'));
 
         if (error instanceof Object && 'status' in error && error.status === 403) {
           return;

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

@@ -1,12 +1,12 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { truncate, upperFirst } from 'lodash-es';
 import { serializeError } from 'serialize-error';
 import { queueApi } from 'services/api/endpoints/queue';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('queue');
 
@@ -17,7 +17,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
     effect: (action) => {
       const enqueueResult = action.payload;
       const arg = action.meta.arg.originalArgs;
-      log.debug({ enqueueResult } as SerializableObject, 'Batch enqueued');
+      log.debug({ enqueueResult } as JsonObject, 'Batch enqueued');
 
       toast({
         id: 'QUEUE_BATCH_SUCCEEDED',
@@ -45,7 +45,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
           status: 'error',
           description: t('common.unknownError'),
         });
-        log.error({ batchConfig } as SerializableObject, t('queue.batchFailedToQueue'));
+        log.error({ batchConfig } as JsonObject, t('queue.batchFailedToQueue'));
         return;
       }
 
@@ -71,7 +71,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
           description: t('common.unknownError'),
         });
       }
-      log.error({ batchConfig, error: serializeError(response) } as SerializableObject, t('queue.batchFailedToQueue'));
+      log.error({ batchConfig, error: serializeError(response) } as JsonObject, t('queue.batchFailedToQueue'));
     },
   });
 };

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
+import { extractMessageFromAssertionError } from 'common/util/extractMessageFromAssertionError';
 import type { Result } from 'common/util/result';
 import { withResult, withResultAsync } from 'common/util/result';
 import { $canvasManager } from 'features/controlLayers/store/ephemeral';
@@ -10,10 +10,12 @@ import { buildFLUXGraph } from 'features/nodes/util/graph/generation/buildFLUXGr
 import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
 import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
 import type { Graph } from 'features/nodes/util/graph/generation/Graph';
+import { toast } from 'features/toast/toast';
 import { serializeError } from 'serialize-error';
 import { queueApi } from 'services/api/endpoints/queue';
 import type { Invocation } from 'services/api/types';
-import { assert } from 'tsafe';
+import { assert, AssertionError } from 'tsafe';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('generation');
 
@@ -57,7 +59,17 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
       }
 
       if (buildGraphResult.isErr()) {
-        log.error({ error: serializeError(buildGraphResult.error) }, 'Failed to build graph');
+        let description: string | null = null;
+        if (buildGraphResult.error instanceof AssertionError) {
+          description = extractMessageFromAssertionError(buildGraphResult.error);
+        }
+        const error = serializeError(buildGraphResult.error);
+        log.error({ error }, 'Failed to build graph');
+        toast({
+          status: 'error',
+          title: 'Failed to build graph',
+          description,
+        });
         return;
       }
 
@@ -88,7 +100,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
         return;
       }
 
-      log.debug({ batchConfig: prepareBatchResult.value } as SerializableObject, 'Enqueued batch');
+      log.debug({ batchConfig: prepareBatchResult.value } as JsonObject, 'Enqueued batch');
     },
   });
 };

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

@@ -1,12 +1,12 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
 import { parseify } from 'common/util/serialize';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { parseSchema } from 'features/nodes/util/schema/parseSchema';
 import { size } from 'lodash-es';
 import { serializeError } from 'serialize-error';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('system');
 
@@ -16,12 +16,12 @@ export const addGetOpenAPISchemaListener = (startAppListening: AppStartListening
     effect: (action, { getState }) => {
       const schemaJSON = action.payload;
 
-      log.debug({ schemaJSON: parseify(schemaJSON) } as SerializableObject, 'Received OpenAPI schema');
+      log.debug({ schemaJSON: parseify(schemaJSON) } as JsonObject, 'Received OpenAPI schema');
       const { nodesAllowlist, nodesDenylist } = getState().config;
 
       const nodeTemplates = parseSchema(schemaJSON, nodesAllowlist, nodesDenylist);
 
-      log.debug({ nodeTemplates } as SerializableObject, `Built ${size(nodeTemplates)} node templates`);
+      log.debug({ nodeTemplates } as JsonObject, `Built ${size(nodeTemplates)} node templates`);
 
       $templates.set(nodeTemplates);
     },

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

@@ -1,333 +0,0 @@
-import { createAction } from '@reduxjs/toolkit';
-import { logger } from 'app/logging/logger';
-import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { deepClone } from 'common/util/deepClone';
-import { selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
-import { getPrefixedId } from 'features/controlLayers/konva/util';
-import {
-  controlLayerAdded,
-  entityRasterized,
-  entitySelected,
-  inpaintMaskAdded,
-  rasterLayerAdded,
-  referenceImageAdded,
-  referenceImageIPAdapterImageChanged,
-  rgAdded,
-  rgIPAdapterImageChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import type {
-  CanvasControlLayerState,
-  CanvasInpaintMaskState,
-  CanvasRasterLayerState,
-  CanvasReferenceImageState,
-  CanvasRegionalGuidanceState,
-} from 'features/controlLayers/store/types';
-import { imageDTOToImageObject, imageDTOToImageWithDims, initialControlNet } from 'features/controlLayers/store/util';
-import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
-import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
-import { imagesApi } from 'services/api/endpoints/images';
-
-export const dndDropped = createAction<{
-  overData: TypesafeDroppableData;
-  activeData: TypesafeDraggableData;
-}>('dnd/dndDropped');
-
-const log = logger('system');
-
-export const addImageDroppedListener = (startAppListening: AppStartListening) => {
-  startAppListening({
-    actionCreator: dndDropped,
-    effect: (action, { dispatch, getState }) => {
-      const { activeData, overData } = action.payload;
-      if (!isValidDrop(overData, activeData)) {
-        return;
-      }
-
-      if (activeData.payloadType === 'IMAGE_DTO') {
-        log.debug({ activeData, overData }, 'Image dropped');
-      } else if (activeData.payloadType === 'GALLERY_SELECTION') {
-        log.debug({ activeData, overData }, `Images (${getState().gallery.selection.length}) dropped`);
-      } else if (activeData.payloadType === 'NODE_FIELD') {
-        log.debug({ activeData, overData }, 'Node field dropped');
-      } else {
-        log.debug({ activeData, overData }, `Unknown payload dropped`);
-      }
-
-      /**
-       * Image dropped on IP Adapter Layer
-       */
-      if (
-        overData.actionType === 'SET_IPA_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { id } = overData.context;
-        dispatch(
-          referenceImageIPAdapterImageChanged({
-            entityIdentifier: { id, type: 'reference_image' },
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image dropped on RG Layer IP Adapter
-       */
-      if (
-        overData.actionType === 'SET_RG_IP_ADAPTER_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { id, referenceImageId } = overData.context;
-        dispatch(
-          rgIPAdapterImageChanged({
-            entityIdentifier: { id, type: 'regional_guidance' },
-            referenceImageId,
-            imageDTO: activeData.payload.imageDTO,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image dropped on Raster layer
-       */
-      if (
-        overData.actionType === 'ADD_RASTER_LAYER_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<CanvasRasterLayerState> = {
-          objects: [imageObject],
-          position: { x, y },
-        };
-        dispatch(rasterLayerAdded({ overrides, isSelected: true }));
-        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
-       */
-      if (
-        overData.actionType === 'ADD_CONTROL_LAYER_FROM_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const state = getState();
-        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(state).bbox.rect;
-        const overrides: Partial<CanvasControlLayerState> = {
-          objects: [imageObject],
-          position: { x, y },
-          controlAdapter: deepClone(initialControlNet),
-        };
-        dispatch(controlLayerAdded({ overrides, isSelected: true }));
-        return;
-      }
-
-      if (
-        overData.actionType === 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const state = getState();
-        const ipAdapter = deepClone(selectDefaultIPAdapter(state));
-        ipAdapter.image = imageDTOToImageWithDims(activeData.payload.imageDTO);
-        const overrides: Partial<CanvasRegionalGuidanceState> = {
-          referenceImages: [{ id: getPrefixedId('regional_guidance_reference_image'), ipAdapter }],
-        };
-        dispatch(rgAdded({ overrides, isSelected: true }));
-        return;
-      }
-
-      if (
-        overData.actionType === 'ADD_GLOBAL_REFERENCE_IMAGE_FROM_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const state = getState();
-        const ipAdapter = deepClone(selectDefaultIPAdapter(state));
-        ipAdapter.image = imageDTOToImageWithDims(activeData.payload.imageDTO);
-        const overrides: Partial<CanvasReferenceImageState> = {
-          ipAdapter,
-        };
-        dispatch(referenceImageAdded({ overrides, isSelected: true }));
-        return;
-      }
-
-      /**
-       * Image dropped on Raster layer
-       */
-      if (overData.actionType === 'REPLACE_LAYER_WITH_IMAGE' && activeData.payloadType === 'IMAGE_DTO') {
-        const state = getState();
-        const { entityIdentifier } = overData.context;
-        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(state).bbox.rect;
-        dispatch(entityRasterized({ entityIdentifier, imageObject, position: { x, y }, replaceObjects: true }));
-        dispatch(entitySelected({ entityIdentifier }));
-        return;
-      }
-
-      /**
-       * Image dropped on node image field
-       */
-      if (
-        overData.actionType === 'SET_NODES_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { fieldName, nodeId } = overData.context;
-        dispatch(
-          fieldImageValueChanged({
-            nodeId,
-            fieldName,
-            value: activeData.payload.imageDTO,
-          })
-        );
-        return;
-      }
-
-      /**
-       * Image selected for compare
-       */
-      if (
-        overData.actionType === 'SELECT_FOR_COMPARE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { imageDTO } = activeData.payload;
-        dispatch(imageToCompareChanged(imageDTO));
-        return;
-      }
-
-      /**
-       * Image dropped on user board
-       */
-      if (
-        overData.actionType === 'ADD_TO_BOARD' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { imageDTO } = activeData.payload;
-        const { boardId } = overData.context;
-        dispatch(
-          imagesApi.endpoints.addImageToBoard.initiate({
-            imageDTO,
-            board_id: boardId,
-          })
-        );
-        dispatch(selectionChanged([]));
-        return;
-      }
-
-      /**
-       * Image dropped on 'none' board
-       */
-      if (
-        overData.actionType === 'REMOVE_FROM_BOARD' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { imageDTO } = activeData.payload;
-        dispatch(
-          imagesApi.endpoints.removeImageFromBoard.initiate({
-            imageDTO,
-          })
-        );
-        dispatch(selectionChanged([]));
-        return;
-      }
-
-      /**
-       * Image dropped on upscale initial image
-       */
-      if (
-        overData.actionType === 'SET_UPSCALE_INITIAL_IMAGE' &&
-        activeData.payloadType === 'IMAGE_DTO' &&
-        activeData.payload.imageDTO
-      ) {
-        const { imageDTO } = activeData.payload;
-
-        dispatch(upscaleInitialImageChanged(imageDTO));
-        return;
-      }
-
-      /**
-       * Multiple images dropped on user board
-       */
-      if (overData.actionType === 'ADD_TO_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') {
-        const imageDTOs = getState().gallery.selection;
-        const { boardId } = overData.context;
-        dispatch(
-          imagesApi.endpoints.addImagesToBoard.initiate({
-            imageDTOs,
-            board_id: boardId,
-          })
-        );
-        dispatch(selectionChanged([]));
-        return;
-      }
-
-      /**
-       * Multiple images dropped on 'none' board
-       */
-      if (overData.actionType === 'REMOVE_FROM_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') {
-        const imageDTOs = getState().gallery.selection;
-        dispatch(
-          imagesApi.endpoints.removeImagesFromBoard.initiate({
-            imageDTOs,
-          })
-        );
-        dispatch(selectionChanged([]));
-        return;
-      }
-    },
-  });
-};

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

@@ -1,18 +1,8 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import type { RootState } from 'app/store/store';
-import {
-  entityRasterized,
-  entitySelected,
-  referenceImageIPAdapterImageChanged,
-  rgIPAdapterImageChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { imageDTOToImageObject } from 'features/controlLayers/store/util';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { boardIdSelected, galleryViewChanged } from 'features/gallery/store/gallerySlice';
-import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { omit } from 'lodash-es';
@@ -51,93 +41,45 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
 
       log.debug({ imageDTO }, 'Image uploaded');
 
-      const { postUploadAction } = action.meta.arg.originalArgs;
+      const boardId = imageDTO.board_id ?? 'none';
 
-      if (!postUploadAction) {
-        return;
-      }
+      if (action.meta.arg.originalArgs.withToast) {
+        const DEFAULT_UPLOADED_TOAST = {
+          id: 'IMAGE_UPLOADED',
+          title: t('toast.imageUploaded'),
+          status: 'success',
+        } as const;
 
-      const DEFAULT_UPLOADED_TOAST = {
-        id: 'IMAGE_UPLOADED',
-        title: t('toast.imageUploaded'),
-        status: 'success',
-      } as const;
-
-      // default action - just upload and alert user
-      if (postUploadAction.type === 'TOAST') {
-        const boardId = imageDTO.board_id ?? 'none';
+        // default action - just upload and alert user
         if (lastUploadedToastTimeout !== null) {
           window.clearTimeout(lastUploadedToastTimeout);
         }
         const toastApi = toast({
           ...DEFAULT_UPLOADED_TOAST,
-          title: postUploadAction.title || DEFAULT_UPLOADED_TOAST.title,
+          title: DEFAULT_UPLOADED_TOAST.title,
           description: getUploadedToastDescription(boardId, state),
           duration: null, // we will close the toast manually
         });
         lastUploadedToastTimeout = window.setTimeout(() => {
           toastApi.close();
         }, 3000);
-        /**
-         * We only want to change the board and view if this is the first upload of a batch, else we end up hijacking
-         * the user's gallery board and view selection:
-         * - User uploads multiple images
-         * - A couple uploads finish, but others are pending still
-         * - User changes the board selection
-         * - Pending uploads finish and change the board back to the original board
-         * - User is confused as to why the board changed
-         *
-         * Default to true to not require _all_ image upload handlers to set this value
-         */
-        const isFirstUploadOfBatch = action.meta.arg.originalArgs.isFirstUploadOfBatch ?? true;
-        if (isFirstUploadOfBatch) {
-          dispatch(boardIdSelected({ boardId }));
-          dispatch(galleryViewChanged('assets'));
-        }
-        return;
       }
 
-      if (postUploadAction.type === 'SET_UPSCALE_INITIAL_IMAGE') {
-        dispatch(upscaleInitialImageChanged(imageDTO));
-        toast({
-          ...DEFAULT_UPLOADED_TOAST,
-          description: 'set as upscale initial image',
-        });
-        return;
-      }
-
-      if (postUploadAction.type === 'SET_IPA_IMAGE') {
-        const { id } = postUploadAction;
-        dispatch(referenceImageIPAdapterImageChanged({ entityIdentifier: { id, type: 'reference_image' }, imageDTO }));
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-        return;
-      }
-
-      if (postUploadAction.type === 'SET_RG_IP_ADAPTER_IMAGE') {
-        const { id, referenceImageId } = postUploadAction;
-        dispatch(
-          rgIPAdapterImageChanged({ entityIdentifier: { id, type: 'regional_guidance' }, referenceImageId, imageDTO })
-        );
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-        return;
-      }
-
-      if (postUploadAction.type === 'SET_NODES_IMAGE') {
-        const { nodeId, fieldName } = postUploadAction;
-        dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }));
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: `${t('toast.setNodeField')} ${fieldName}` });
-        return;
-      }
-
-      if (postUploadAction.type === 'REPLACE_LAYER_WITH_IMAGE') {
-        const { entityIdentifier } = postUploadAction;
-
-        const state = getState();
-        const imageObject = imageDTOToImageObject(imageDTO);
-        const { x, y } = selectCanvasSlice(state).bbox.rect;
-        dispatch(entityRasterized({ entityIdentifier, imageObject, position: { x, y }, replaceObjects: true }));
-        dispatch(entitySelected({ entityIdentifier }));
-        return;
+      /**
+       * We only want to change the board and view if this is the first upload of a batch, else we end up hijacking
+       * the user's gallery board and view selection:
+       * - User uploads multiple images
+       * - A couple uploads finish, but others are pending still
+       * - User changes the board selection
+       * - Pending uploads finish and change the board back to the original board
+       * - User is confused as to why the board changed
+       *
+       * Default to true to not require _all_ image upload handlers to set this value
+       */
+      const isFirstUploadOfBatch = action.meta.arg.originalArgs.isFirstUploadOfBatch ?? true;
+      if (isFirstUploadOfBatch) {
+        dispatch(boardIdSelected({ boardId }));
+        dispatch(galleryViewChanged('assets'));
       }
     },
   });

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

@@ -1,7 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import type { AppDispatch, RootState } from 'app/store/store';
-import type { SerializableObject } from 'common/types';
 import {
   controlLayerModelChanged,
   referenceImageIPAdapterModelChanged,
@@ -41,6 +40,7 @@ import {
   isSpandrelImageToImageModelConfig,
   isT5EncoderModelConfig,
 } from 'services/api/types';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('models');
 
@@ -85,7 +85,7 @@ type ModelHandler = (
   models: AnyModelConfig[],
   state: RootState,
   dispatch: AppDispatch,
-  log: Logger<SerializableObject>
+  log: Logger<JsonObject>
 ) => undefined;
 
 const handleMainModels: ModelHandler = (models, state, dispatch, log) => {

invokeai/frontend/web/src/app/store/store.ts

@@ -3,7 +3,6 @@ import { autoBatchEnhancer, combineReducers, configureStore } from '@reduxjs/too
 import { logger } from 'app/logging/logger';
 import { idbKeyValDriver } from 'app/store/enhancers/reduxRemember/driver';
 import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
-import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import { changeBoardModalSlice } from 'features/changeBoardModal/store/slice';
 import { canvasSettingsPersistConfig, canvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
@@ -37,6 +36,7 @@ import undoable from 'redux-undo';
 import { serializeError } from 'serialize-error';
 import { api } from 'services/api';
 import { authToastMiddleware } from 'services/api/authToastMiddleware';
+import type { JsonObject } from 'type-fest';
 
 import { STORAGE_PREFIX } from './constants';
 import { actionSanitizer } from './middleware/devtools/actionSanitizer';
@@ -139,7 +139,7 @@ const unserialize: UnserializeFunction = (data, key) => {
       {
         persistedData: parsed,
         rehydratedData: transformed,
-        diff: diff(parsed, transformed) as SerializableObject, // this is always serializable
+        diff: diff(parsed, transformed) as JsonObject, // this is always serializable
       },
       `Rehydrated slice "${key}"`
     );

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

@@ -1,251 +0,0 @@
-import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Icon, Image } from '@invoke-ai/ui-library';
-import { IAILoadingImageFallback, IAINoContentFallback } from 'common/components/IAIImageFallback';
-import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
-import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
-import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import { useImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
-import type { MouseEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
-import { memo, useCallback, useMemo, useRef } from 'react';
-import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi';
-import type { ImageDTO, PostUploadAction } from 'services/api/types';
-
-import IAIDraggable from './IAIDraggable';
-import IAIDroppable from './IAIDroppable';
-
-const defaultUploadElement = <Icon as={PiUploadSimpleBold} boxSize={16} />;
-
-const defaultNoContentFallback = <IAINoContentFallback icon={PiImageBold} />;
-
-const baseStyles: SystemStyleObject = {
-  touchAction: 'none',
-  userSelect: 'none',
-  webkitUserSelect: 'none',
-};
-
-const sx: SystemStyleObject = {
-  ...baseStyles,
-  '.gallery-image-container::before': {
-    content: '""',
-    display: 'inline-block',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    borderRadius: 'base',
-  },
-  '&[data-selected="selected"]>.gallery-image-container::before': {
-    boxShadow:
-      'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-  },
-  '&[data-selected="selectedForCompare"]>.gallery-image-container::before': {
-    boxShadow:
-      'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-  },
-  '&:hover>.gallery-image-container::before': {
-    boxShadow:
-      'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
-  },
-  '&:hover[data-selected="selected"]>.gallery-image-container::before': {
-    boxShadow:
-      'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-  },
-  '&:hover[data-selected="selectedForCompare"]>.gallery-image-container::before': {
-    boxShadow:
-      'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-  },
-};
-
-type IAIDndImageProps = FlexProps & {
-  imageDTO: ImageDTO | undefined;
-  onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
-  onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  withMetadataOverlay?: boolean;
-  isDragDisabled?: boolean;
-  isDropDisabled?: boolean;
-  isUploadDisabled?: boolean;
-  minSize?: number;
-  postUploadAction?: PostUploadAction;
-  imageSx?: ChakraProps['sx'];
-  fitContainer?: boolean;
-  droppableData?: TypesafeDroppableData;
-  draggableData?: TypesafeDraggableData;
-  dropLabel?: string;
-  isSelected?: boolean;
-  isSelectedForCompare?: boolean;
-  thumbnail?: boolean;
-  noContentFallback?: ReactElement;
-  useThumbailFallback?: boolean;
-  withHoverOverlay?: boolean;
-  children?: JSX.Element;
-  uploadElement?: ReactNode;
-  dataTestId?: string;
-};
-
-const IAIDndImage = (props: IAIDndImageProps) => {
-  const {
-    imageDTO,
-    onError,
-    onClick,
-    withMetadataOverlay = false,
-    isDropDisabled = false,
-    isDragDisabled = false,
-    isUploadDisabled = false,
-    minSize = 24,
-    postUploadAction,
-    imageSx,
-    fitContainer = false,
-    droppableData,
-    draggableData,
-    dropLabel,
-    isSelected = false,
-    isSelectedForCompare = false,
-    thumbnail = false,
-    noContentFallback = defaultNoContentFallback,
-    uploadElement = defaultUploadElement,
-    useThumbailFallback,
-    withHoverOverlay = false,
-    children,
-    dataTestId,
-    ...rest
-  } = props;
-
-  const openInNewTab = useCallback(
-    (e: MouseEvent) => {
-      if (!imageDTO) {
-        return;
-      }
-      if (e.button !== 1) {
-        return;
-      }
-      window.open(imageDTO.image_url, '_blank');
-    },
-    [imageDTO]
-  );
-
-  const ref = useRef<HTMLDivElement>(null);
-  useImageContextMenu(imageDTO, ref);
-
-  return (
-    <Flex
-      ref={ref}
-      width="full"
-      height="full"
-      alignItems="center"
-      justifyContent="center"
-      position="relative"
-      minW={minSize ? minSize : undefined}
-      minH={minSize ? minSize : undefined}
-      userSelect="none"
-      cursor={isDragDisabled || !imageDTO ? 'default' : 'pointer'}
-      sx={withHoverOverlay ? sx : baseStyles}
-      data-selected={isSelectedForCompare ? 'selectedForCompare' : isSelected ? 'selected' : undefined}
-      {...rest}
-    >
-      {imageDTO && (
-        <Flex
-          className="gallery-image-container"
-          w="full"
-          h="full"
-          position={fitContainer ? 'absolute' : 'relative'}
-          alignItems="center"
-          justifyContent="center"
-        >
-          <Image
-            src={thumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
-            fallbackStrategy="beforeLoadOrError"
-            fallbackSrc={useThumbailFallback ? imageDTO.thumbnail_url : undefined}
-            fallback={useThumbailFallback ? undefined : <IAILoadingImageFallback image={imageDTO} />}
-            onError={onError}
-            draggable={false}
-            w={imageDTO.width}
-            objectFit="contain"
-            maxW="full"
-            maxH="full"
-            borderRadius="base"
-            sx={imageSx}
-            data-testid={dataTestId}
-          />
-          {withMetadataOverlay && <ImageMetadataOverlay imageDTO={imageDTO} />}
-        </Flex>
-      )}
-      {!imageDTO && !isUploadDisabled && (
-        <UploadButton
-          isUploadDisabled={isUploadDisabled}
-          postUploadAction={postUploadAction}
-          uploadElement={uploadElement}
-          minSize={minSize}
-        />
-      )}
-      {!imageDTO && isUploadDisabled && noContentFallback}
-      {imageDTO && !isDragDisabled && (
-        <IAIDraggable
-          data={draggableData}
-          disabled={isDragDisabled || !imageDTO}
-          onClick={onClick}
-          onAuxClick={openInNewTab}
-        />
-      )}
-      {children}
-      {!isDropDisabled && <IAIDroppable data={droppableData} disabled={isDropDisabled} dropLabel={dropLabel} />}
-    </Flex>
-  );
-};
-
-export default memo(IAIDndImage);
-
-const UploadButton = memo(
-  ({
-    isUploadDisabled,
-    postUploadAction,
-    uploadElement,
-    minSize,
-  }: {
-    isUploadDisabled: boolean;
-    postUploadAction?: PostUploadAction;
-    uploadElement: ReactNode;
-    minSize: number;
-  }) => {
-    const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
-      postUploadAction,
-      isDisabled: isUploadDisabled,
-    });
-
-    const uploadButtonStyles = useMemo<SystemStyleObject>(() => {
-      const styles: SystemStyleObject = {
-        minH: minSize,
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        transitionProperty: 'common',
-        transitionDuration: '0.1s',
-        color: 'base.500',
-      };
-      if (!isUploadDisabled) {
-        Object.assign(styles, {
-          cursor: 'pointer',
-          bg: 'base.700',
-          _hover: {
-            bg: 'base.650',
-            color: 'base.300',
-          },
-        });
-      }
-      return styles;
-    }, [isUploadDisabled, minSize]);
-
-    return (
-      <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
-        <input {...getUploadInputProps()} />
-        {uploadElement}
-      </Flex>
-    );
-  }
-);
-
-UploadButton.displayName = 'UploadButton';

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

@@ -1,38 +0,0 @@
-import type { BoxProps } from '@invoke-ai/ui-library';
-import { Box } from '@invoke-ai/ui-library';
-import { useDraggableTypesafe } from 'features/dnd/hooks/typesafeHooks';
-import type { TypesafeDraggableData } from 'features/dnd/types';
-import { memo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-
-type IAIDraggableProps = BoxProps & {
-  disabled?: boolean;
-  data?: TypesafeDraggableData;
-};
-
-const IAIDraggable = (props: IAIDraggableProps) => {
-  const { data, disabled, ...rest } = props;
-  const dndId = useRef(uuidv4());
-
-  const { attributes, listeners, setNodeRef } = useDraggableTypesafe({
-    id: dndId.current,
-    disabled,
-    data,
-  });
-
-  return (
-    <Box
-      ref={setNodeRef}
-      position="absolute"
-      w="full"
-      h="full"
-      top={0}
-      insetInlineStart={0}
-      {...attributes}
-      {...listeners}
-      {...rest}
-    />
-  );
-};
-
-export default memo(IAIDraggable);

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

@@ -1,64 +0,0 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
-import { memo } from 'react';
-
-type Props = {
-  isOver: boolean;
-  label?: string;
-  withBackdrop?: boolean;
-};
-
-const IAIDropOverlay = (props: Props) => {
-  const { isOver, label, withBackdrop = true } = props;
-  return (
-    <Flex position="absolute" top={0} right={0} bottom={0} left={0}>
-      <Flex
-        position="absolute"
-        top={0}
-        right={0}
-        bottom={0}
-        left={0}
-        w="full"
-        h="full"
-        bg={withBackdrop ? 'base.900' : 'transparent'}
-        opacity={0.7}
-        borderRadius="base"
-        alignItems="center"
-        justifyContent="center"
-        transitionProperty="common"
-        transitionDuration="0.1s"
-      />
-
-      <Flex
-        position="absolute"
-        top={0.5}
-        right={0.5}
-        bottom={0.5}
-        left={0.5}
-        opacity={1}
-        borderWidth={1.5}
-        borderColor={isOver ? 'invokeYellow.300' : 'base.500'}
-        borderRadius="base"
-        borderStyle="dashed"
-        transitionProperty="common"
-        transitionDuration="0.1s"
-        alignItems="center"
-        justifyContent="center"
-      >
-        {label && (
-          <Text
-            fontSize="lg"
-            fontWeight="semibold"
-            color={isOver ? 'invokeYellow.300' : 'base.500'}
-            transitionProperty="common"
-            transitionDuration="0.1s"
-            textAlign="center"
-          >
-            {label}
-          </Text>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default memo(IAIDropOverlay);

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

@@ -1,46 +0,0 @@
-import { Box } from '@invoke-ai/ui-library';
-import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
-import type { TypesafeDroppableData } from 'features/dnd/types';
-import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { AnimatePresence } from 'framer-motion';
-import { memo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-
-import IAIDropOverlay from './IAIDropOverlay';
-
-type IAIDroppableProps = {
-  dropLabel?: string;
-  disabled?: boolean;
-  data?: TypesafeDroppableData;
-};
-
-const IAIDroppable = (props: IAIDroppableProps) => {
-  const { dropLabel, data, disabled } = props;
-  const dndId = useRef(uuidv4());
-
-  const { isOver, setNodeRef, active } = useDroppableTypesafe({
-    id: dndId.current,
-    disabled,
-    data,
-  });
-
-  return (
-    <Box
-      ref={setNodeRef}
-      position="absolute"
-      top={0}
-      right={0}
-      bottom={0}
-      left={0}
-      w="full"
-      h="full"
-      pointerEvents={active ? 'auto' : 'none'}
-    >
-      <AnimatePresence>
-        {isValidDrop(data, active?.data.current) && <IAIDropOverlay isOver={isOver} label={dropLabel} />}
-      </AnimatePresence>
-    </Box>
-  );
-};
-
-export default memo(IAIDroppable);

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

@@ -1,24 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, Skeleton } from '@invoke-ai/ui-library';
-import { memo } from 'react';
-
-const skeletonStyles: SystemStyleObject = {
-  position: 'relative',
-  height: 'full',
-  width: 'full',
-  '::before': {
-    content: "''",
-    display: 'block',
-    pt: '100%',
-  },
-};
-
-const IAIFillSkeleton = () => {
-  return (
-    <Skeleton sx={skeletonStyles}>
-      <Box position="absolute" top={0} insetInlineStart={0} height="full" width="full" />
-    </Skeleton>
-  );
-};
-
-export default memo(IAIFillSkeleton);

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

@@ -6,7 +6,7 @@ import type { ImageDTO } from 'services/api/types';
 
 type Props = { image: ImageDTO | undefined };
 
-export const IAILoadingImageFallback = memo((props: Props) => {
+const IAILoadingImageFallback = memo((props: Props) => {
   if (props.image) {
     return (
       <Skeleton

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

@@ -1,28 +0,0 @@
-import { Badge, Flex } from '@invoke-ai/ui-library';
-import { memo } from 'react';
-import type { ImageDTO } from 'services/api/types';
-
-type ImageMetadataOverlayProps = {
-  imageDTO: ImageDTO;
-};
-
-const ImageMetadataOverlay = ({ imageDTO }: ImageMetadataOverlayProps) => {
-  return (
-    <Flex
-      pointerEvents="none"
-      flexDirection="column"
-      position="absolute"
-      top={0}
-      insetInlineStart={0}
-      p={2}
-      alignItems="flex-start"
-      gap={2}
-    >
-      <Badge variant="solid" colorScheme="base">
-        {imageDTO.width} × {imageDTO.height}
-      </Badge>
-    </Flex>
-  );
-};
-
-export default memo(ImageMetadataOverlay);

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

@@ -1,89 +0,0 @@
-import { Box, Flex, Heading } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
-import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
-import { memo } from 'react';
-import type { DropzoneState } from 'react-dropzone';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-import { useBoardName } from 'services/api/hooks/useBoardName';
-
-type ImageUploadOverlayProps = {
-  dropzone: DropzoneState;
-  setIsHandlingUpload: (isHandlingUpload: boolean) => void;
-};
-
-const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
-  const { dropzone, setIsHandlingUpload } = props;
-
-  useHotkeys(
-    'esc',
-    () => {
-      setIsHandlingUpload(false);
-    },
-    [setIsHandlingUpload]
-  );
-
-  return (
-    <Box position="absolute" top={0} right={0} bottom={0} left={0} zIndex={999} backdropFilter="blur(20px)">
-      <Flex position="absolute" top={0} right={0} bottom={0} left={0} bg="base.900" opacity={0.7} />
-      <Flex
-        position="absolute"
-        flexDir="column"
-        gap={4}
-        top={2}
-        right={2}
-        bottom={2}
-        left={2}
-        opacity={1}
-        borderWidth={2}
-        borderColor={dropzone.isDragAccept ? 'invokeYellow.300' : 'error.500'}
-        borderRadius="base"
-        borderStyle="dashed"
-        transitionProperty="common"
-        transitionDuration="0.1s"
-        alignItems="center"
-        justifyContent="center"
-        color={dropzone.isDragReject ? 'error.300' : undefined}
-      >
-        {dropzone.isDragAccept && <DragAcceptMessage />}
-        {!dropzone.isDragAccept && <DragRejectMessage />}
-      </Flex>
-    </Box>
-  );
-};
-export default memo(ImageUploadOverlay);
-
-const DragAcceptMessage = () => {
-  const { t } = useTranslation();
-  const selectedBoardId = useAppSelector(selectSelectedBoardId);
-  const boardName = useBoardName(selectedBoardId);
-
-  return (
-    <>
-      <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
-      <Heading size="md">{t('toast.imagesWillBeAddedTo', { boardName })}</Heading>
-    </>
-  );
-};
-
-const DragRejectMessage = () => {
-  const { t } = useTranslation();
-  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
-
-  if (maxImageUploadCount === undefined) {
-    return (
-      <>
-        <Heading size="lg">{t('toast.invalidUpload')}</Heading>
-        <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc')}</Heading>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Heading size="lg">{t('toast.invalidUpload')}</Heading>
-      <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount })}</Heading>
-    </>
-  );
-};

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -1,9 +1,13 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { autoScrollForExternal } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/external';
 import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, Flex } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
@@ -11,17 +15,38 @@ type Props = PropsWithChildren & {
   overflowY?: 'hidden' | 'scroll';
 };
 
-const styles: CSSProperties = { height: '100%', width: '100%' };
+const styles: CSSProperties = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
 
 const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflowY = 'scroll' }: Props) => {
   const overlayscrollbarsOptions = useMemo(
     () => getOverlayScrollbarsParams(overflowX, overflowY).options,
     [overflowX, overflowY]
   );
+  const [os, osRef] = useState<OverlayScrollbarsComponentRef | null>(null);
+  useEffect(() => {
+    const osInstance = os?.osInstance();
+
+    if (!osInstance) {
+      return;
+    }
+
+    const element = osInstance.elements().viewport;
+
+    // `pragmatic-drag-and-drop-auto-scroll` requires the element to have `overflow-y: scroll` or `overflow-y: auto`
+    // else it logs an ugly warning. In our case, using a custom scrollbar library, it will be 'hidden' by default.
+    // To prevent the erroneous warning, we temporarily set the overflow-y to 'scroll' and then revert it back.
+    const overflowY = element.style.overflowY; // starts 'hidden'
+    element.style.setProperty('overflow-y', 'scroll', 'important');
+    const cleanup = combine(autoScrollForElements({ element }), autoScrollForExternal({ element }));
+    element.style.setProperty('overflow-y', overflowY);
+
+    return cleanup;
+  }, [os]);
+
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-        <OverlayScrollbarsComponent defer style={styles} options={overlayscrollbarsOptions}>
+        <OverlayScrollbarsComponent ref={osRef} style={styles} options={overlayscrollbarsOptions}>
           {children}
         </OverlayScrollbarsComponent>
       </Box>

invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts

@@ -1,124 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { useAppSelector } from 'app/store/storeHooks';
-import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
-import { toast } from 'features/toast/toast';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { useCallback, useEffect, useState } from 'react';
-import type { Accept, FileRejection } from 'react-dropzone';
-import { useDropzone } from 'react-dropzone';
-import { useTranslation } from 'react-i18next';
-import { useUploadImageMutation } from 'services/api/endpoints/images';
-import type { PostUploadAction } from 'services/api/types';
-
-const log = logger('gallery');
-
-const accept: Accept = {
-  'image/png': ['.png'],
-  'image/jpeg': ['.jpg', '.jpeg', '.png'],
-};
-
-export const useFullscreenDropzone = () => {
-  useAssertSingleton('useFullscreenDropzone');
-  const { t } = useTranslation();
-  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
-  const [uploadImage] = useUploadImageMutation();
-  const activeTabName = useAppSelector(selectActiveTab);
-  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
-
-  const getPostUploadAction = useCallback((): PostUploadAction => {
-    if (activeTabName === 'upscaling') {
-      return { type: 'SET_UPSCALE_INITIAL_IMAGE' };
-    } else {
-      return { type: 'TOAST' };
-    }
-  }, [activeTabName]);
-
-  const onDrop = useCallback(
-    (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
-      if (fileRejections.length > 0) {
-        const errors = fileRejections.map((rejection) => ({
-          errors: rejection.errors.map(({ message }) => message),
-          file: rejection.file.path,
-        }));
-        log.error({ errors }, 'Invalid upload');
-        const description =
-          maxImageUploadCount === undefined
-            ? t('toast.uploadFailedInvalidUploadDesc')
-            : t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount });
-
-        toast({
-          id: 'UPLOAD_FAILED',
-          title: t('toast.uploadFailed'),
-          description,
-          status: 'error',
-        });
-
-        setIsHandlingUpload(false);
-        return;
-      }
-
-      for (const [i, file] of acceptedFiles.entries()) {
-        uploadImage({
-          file,
-          image_category: 'user',
-          is_intermediate: false,
-          postUploadAction: getPostUploadAction(),
-          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-          // The `imageUploaded` listener does some extra logic, like switching to the asset view on upload on the
-          // first upload of a "batch".
-          isFirstUploadOfBatch: i === 0,
-        });
-      }
-
-      setIsHandlingUpload(false);
-    },
-    [t, maxImageUploadCount, uploadImage, getPostUploadAction, autoAddBoardId]
-  );
-
-  const onDragOver = useCallback(() => {
-    setIsHandlingUpload(true);
-  }, []);
-
-  const onDragLeave = useCallback(() => {
-    setIsHandlingUpload(false);
-  }, []);
-
-  const dropzone = useDropzone({
-    accept,
-    noClick: true,
-    onDrop,
-    onDragOver,
-    onDragLeave,
-    noKeyboard: true,
-    multiple: maxImageUploadCount === undefined || maxImageUploadCount > 1,
-    maxFiles: maxImageUploadCount,
-  });
-
-  useEffect(() => {
-    // This is a hack to allow pasting images into the uploader
-    const handlePaste = (e: ClipboardEvent) => {
-      if (!dropzone.inputRef.current) {
-        return;
-      }
-
-      if (e.clipboardData?.files) {
-        // Set the files on the dropzone.inputRef
-        dropzone.inputRef.current.files = e.clipboardData.files;
-        // Dispatch the change event, dropzone catches this and we get to use its own validation
-        dropzone.inputRef.current?.dispatchEvent(new Event('change', { bubbles: true }));
-      }
-    };
-
-    // Add the paste event listener
-    document.addEventListener('paste', handlePaste);
-
-    return () => {
-      document.removeEventListener('paste', handlePaste);
-    };
-  }, [dropzone.inputRef]);
-
-  return { dropzone, isHandlingUpload, setIsHandlingUpload };
-};

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -1,3 +1,5 @@
+import type { IconButtonProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
@@ -7,14 +9,23 @@ import { useCallback } from 'react';
 import type { FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
-import { useUploadImageMutation } from 'services/api/endpoints/images';
-import type { PostUploadAction } from 'services/api/types';
+import { PiUploadBold } from 'react-icons/pi';
+import { uploadImages, useUploadImageMutation } from 'services/api/endpoints/images';
+import type { ImageDTO } from 'services/api/types';
+import { assert } from 'tsafe';
+import type { SetOptional } from 'type-fest';
 
-type UseImageUploadButtonArgs = {
-  postUploadAction?: PostUploadAction;
-  isDisabled?: boolean;
-  allowMultiple?: boolean;
-};
+type UseImageUploadButtonArgs =
+  | {
+      isDisabled?: boolean;
+      allowMultiple: false;
+      onUpload?: (imageDTO: ImageDTO) => void;
+    }
+  | {
+      isDisabled?: boolean;
+      allowMultiple: true;
+      onUpload?: (imageDTOs: ImageDTO[]) => void;
+    };
 
 const log = logger('gallery');
 
@@ -37,30 +48,46 @@ const log = logger('gallery');
  * <Button {...getUploadButtonProps()} /> // will open the file dialog on click
  * <input {...getUploadInputProps()} /> // hidden, handles native upload functionality
  */
-export const useImageUploadButton = ({
-  postUploadAction,
-  isDisabled,
-  allowMultiple = false,
-}: UseImageUploadButtonArgs) => {
+export const useImageUploadButton = ({ onUpload, isDisabled, allowMultiple }: UseImageUploadButtonArgs) => {
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const [uploadImage] = useUploadImageMutation();
+  const [uploadImage, request] = useUploadImageMutation();
   const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
   const { t } = useTranslation();
 
   const onDropAccepted = useCallback(
-    (files: File[]) => {
-      for (const [i, file] of files.entries()) {
-        uploadImage({
+    async (files: File[]) => {
+      if (!allowMultiple) {
+        if (files.length > 1) {
+          log.warn('Multiple files dropped but only one allowed');
+          return;
+        }
+        const file = files[0];
+        assert(file !== undefined); // should never happen
+        const imageDTO = await uploadImage({
           file,
           image_category: 'user',
           is_intermediate: false,
-          postUploadAction: postUploadAction ?? { type: 'TOAST' },
           board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-          isFirstUploadOfBatch: i === 0,
-        });
+        }).unwrap();
+        if (onUpload) {
+          onUpload(imageDTO);
+        }
+      } else {
+        //
+        const imageDTOs = await uploadImages(
+          files.map((file) => ({
+            file,
+            image_category: 'user',
+            is_intermediate: false,
+            board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          }))
+        );
+        if (onUpload) {
+          onUpload(imageDTOs);
+        }
       }
     },
-    [autoAddBoardId, postUploadAction, uploadImage]
+    [allowMultiple, autoAddBoardId, onUpload, uploadImage]
   );
 
   const onDropRejected = useCallback(
@@ -103,5 +130,42 @@ export const useImageUploadButton = ({
     maxFiles: maxImageUploadCount,
   });
 
-  return { getUploadButtonProps, getUploadInputProps, openUploader };
+  return { getUploadButtonProps, getUploadInputProps, openUploader, request };
+};
+
+const sx = {
+  borderColor: 'error.500',
+  borderStyle: 'solid',
+  borderWidth: 0,
+  borderRadius: 'base',
+  '&[data-error=true]': {
+    borderWidth: 1,
+  },
+} satisfies SystemStyleObject;
+
+export const UploadImageButton = ({
+  isDisabled = false,
+  onUpload,
+  isError = false,
+  ...rest
+}: {
+  onUpload?: (imageDTO: ImageDTO) => void;
+  isError?: boolean;
+} & SetOptional<IconButtonProps, 'aria-label'>) => {
+  const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
+  return (
+    <>
+      <IconButton
+        aria-label="Upload image"
+        variant="ghost"
+        sx={sx}
+        data-error={isError}
+        icon={<PiUploadBold />}
+        isLoading={uploadApi.request.isLoading}
+        {...rest}
+        {...uploadApi.getUploadButtonProps()}
+      />
+      <input {...uploadApi.getUploadInputProps()} />
+    </>
+  );
 };

invokeai/frontend/web/src/common/hooks/useNanoid.ts

@@ -1,14 +0,0 @@
-import { getPrefixedId, nanoid } from 'features/controlLayers/konva/util';
-import { useMemo } from 'react';
-
-export const useNanoid = (prefix?: string) => {
-  const id = useMemo(() => {
-    if (prefix) {
-      return getPrefixedId(prefix);
-    } else {
-      return nanoid();
-    }
-  }, [prefix]);
-
-  return id;
-};

invokeai/frontend/web/src/common/types.ts

@@ -1,12 +0,0 @@
-type SerializableValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | SerializableValue[]
-  | readonly SerializableValue[]
-  | SerializableObject;
-export type SerializableObject = {
-  [k: string | number]: SerializableValue;
-};

invokeai/frontend/web/src/common/util/extractMessageFromAssertionError.ts

@@ -0,0 +1,6 @@
+import type { AssertionError } from 'tsafe';
+
+export function extractMessageFromAssertionError(error: AssertionError): string | null {
+  const match = error.message.match(/Wrong assertion encountered: "(.*)"/);
+  return match ? (match[1] ?? null) : null;
+}

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

@@ -1,38 +1,26 @@
 import { Grid, GridItem } from '@invoke-ai/ui-library';
-import IAIDroppable from 'common/components/IAIDroppable';
-import type {
-  AddControlLayerFromImageDropData,
-  AddGlobalReferenceImageFromImageDropData,
-  AddRasterLayerFromImageDropData,
-  AddRegionalReferenceImageFromImageDropData,
-} from 'features/dnd/types';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { newCanvasEntityFromImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const addRasterLayerFromImageDropData: AddRasterLayerFromImageDropData = {
-  id: 'add-raster-layer-from-image-drop-data',
-  actionType: 'ADD_RASTER_LAYER_FROM_IMAGE',
-};
-
-const addControlLayerFromImageDropData: AddControlLayerFromImageDropData = {
-  id: 'add-control-layer-from-image-drop-data',
-  actionType: 'ADD_CONTROL_LAYER_FROM_IMAGE',
-};
-
-const addRegionalReferenceImageFromImageDropData: AddRegionalReferenceImageFromImageDropData = {
-  id: 'add-control-layer-from-image-drop-data',
-  actionType: 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE',
-};
-
-const addGlobalReferenceImageFromImageDropData: AddGlobalReferenceImageFromImageDropData = {
-  id: 'add-control-layer-from-image-drop-data',
-  actionType: 'ADD_GLOBAL_REFERENCE_IMAGE_FROM_IMAGE',
-};
+const addRasterLayerFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({ type: 'raster_layer' });
+const addControlLayerFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({
+  type: 'control_layer',
+});
+const addRegionalGuidanceReferenceImageFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({
+  type: 'regional_guidance_with_reference_image',
+});
+const addGlobalReferenceImageFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({
+  type: 'reference_image',
+});
 
 export const CanvasDropArea = memo(() => {
   const { t } = useTranslation();
   const imageViewer = useImageViewer();
+  const isBusy = useCanvasIsBusy();
 
   if (imageViewer.isOpen) {
     return null;
@@ -51,28 +39,36 @@ export const CanvasDropArea = memo(() => {
         pointerEvents="none"
       >
         <GridItem position="relative">
-          <IAIDroppable
-            dropLabel={t('controlLayers.canvasContextMenu.newRasterLayer')}
-            data={addRasterLayerFromImageDropData}
+          <DndDropTarget
+            dndTarget={newCanvasEntityFromImageDndTarget}
+            dndTargetData={addRasterLayerFromImageDndTargetData}
+            label={t('controlLayers.canvasContextMenu.newRasterLayer')}
+            isDisabled={isBusy}
           />
         </GridItem>
         <GridItem position="relative">
-          <IAIDroppable
-            dropLabel={t('controlLayers.canvasContextMenu.newControlLayer')}
-            data={addControlLayerFromImageDropData}
+          <DndDropTarget
+            dndTarget={newCanvasEntityFromImageDndTarget}
+            dndTargetData={addControlLayerFromImageDndTargetData}
+            label={t('controlLayers.canvasContextMenu.newControlLayer')}
+            isDisabled={isBusy}
           />
         </GridItem>
 
         <GridItem position="relative">
-          <IAIDroppable
-            dropLabel={t('controlLayers.canvasContextMenu.newRegionalReferenceImage')}
-            data={addRegionalReferenceImageFromImageDropData}
+          <DndDropTarget
+            dndTarget={newCanvasEntityFromImageDndTarget}
+            dndTargetData={addRegionalGuidanceReferenceImageFromImageDndTargetData}
+            label={t('controlLayers.canvasContextMenu.newRegionalReferenceImage')}
+            isDisabled={isBusy}
           />
         </GridItem>
         <GridItem position="relative">
-          <IAIDroppable
-            dropLabel={t('controlLayers.canvasContextMenu.newGlobalReferenceImage')}
-            data={addGlobalReferenceImageFromImageDropData}
+          <DndDropTarget
+            dndTarget={newCanvasEntityFromImageDndTarget}
+            dndTargetData={addGlobalReferenceImageFromImageDndTargetData}
+            label={t('controlLayers.canvasContextMenu.newGlobalReferenceImage')}
+            isDisabled={isBusy}
           />
         </GridItem>
       </Grid>

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

@@ -0,0 +1,59 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useCanvasEntityListDnd } from 'features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected';
+import { entitySelected } from 'features/controlLayers/store/canvasSlice';
+import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
+import type { PropsWithChildren } from 'react';
+import { memo, useCallback, useRef } from 'react';
+
+const sx = {
+  position: 'relative',
+  flexDir: 'column',
+  w: 'full',
+  bg: 'base.850',
+  borderRadius: 'base',
+  '&[data-selected=true]': {
+    bg: 'base.800',
+  },
+  '&[data-is-dragging=true]': {
+    opacity: 0.3,
+  },
+  transitionProperty: 'common',
+} satisfies SystemStyleObject;
+
+export const CanvasEntityContainer = memo((props: PropsWithChildren) => {
+  const dispatch = useAppDispatch();
+  const entityIdentifier = useEntityIdentifierContext();
+  const isSelected = useEntityIsSelected(entityIdentifier);
+  const onClick = useCallback(() => {
+    if (isSelected) {
+      return;
+    }
+    dispatch(entitySelected({ entityIdentifier }));
+  }, [dispatch, entityIdentifier, isSelected]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [dndListState, isDragging] = useCanvasEntityListDnd(ref, entityIdentifier);
+
+  return (
+    <Box position="relative">
+      <Flex
+        // This is used to trigger the post-move flash animation
+        data-entity-id={entityIdentifier.id}
+        data-selected={isSelected}
+        data-is-dragging={isDragging}
+        ref={ref}
+        onClick={onClick}
+        sx={sx}
+      >
+        {props.children}
+      </Flex>
+      <DndListDropIndicator dndState={dndListState} />
+    </Box>
+  );
+});
+
+CanvasEntityContainer.displayName = 'CanvasEntityContainer';

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

@@ -0,0 +1,181 @@
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { Button, Collapse, Flex, Icon, Spacer, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { useBoolean } from 'common/hooks/useBoolean';
+import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
+import { CanvasEntityAddOfTypeButton } from 'features/controlLayers/components/common/CanvasEntityAddOfTypeButton';
+import { CanvasEntityMergeVisibleButton } from 'features/controlLayers/components/common/CanvasEntityMergeVisibleButton';
+import { CanvasEntityTypeIsHiddenToggle } from 'features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle';
+import { useEntityTypeInformationalPopover } from 'features/controlLayers/hooks/useEntityTypeInformationalPopover';
+import { useEntityTypeTitle } from 'features/controlLayers/hooks/useEntityTypeTitle';
+import { entitiesReordered } from 'features/controlLayers/store/canvasSlice';
+import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import { isRenderableEntityType } from 'features/controlLayers/store/types';
+import { singleCanvasEntityDndSource } 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';
+import { PiCaretDownBold } from 'react-icons/pi';
+
+type Props = PropsWithChildren<{
+  isSelected: boolean;
+  type: CanvasEntityIdentifier['type'];
+  entityIdentifiers: CanvasEntityIdentifier[];
+}>;
+
+export const CanvasEntityGroupList = memo(({ isSelected, type, children, entityIdentifiers }: Props) => {
+  const title = useEntityTypeTitle(type);
+  const informationalPopoverFeature = useEntityTypeInformationalPopover(type);
+  const collapse = useBoolean(true);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({ source }) {
+        if (!singleCanvasEntityDndSource.typeGuard(source.data)) {
+          return false;
+        }
+        if (source.data.payload.entityIdentifier.type !== type) {
+          return false;
+        }
+        return true;
+      },
+      onDrop({ location, source }) {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const sourceData = source.data;
+        const targetData = target.data;
+
+        if (!singleCanvasEntityDndSource.typeGuard(sourceData) || !singleCanvasEntityDndSource.typeGuard(targetData)) {
+          return;
+        }
+
+        const indexOfSource = entityIdentifiers.findIndex(
+          (entityIdentifier) => entityIdentifier.id === sourceData.payload.entityIdentifier.id
+        );
+        const indexOfTarget = entityIdentifiers.findIndex(
+          (entityIdentifier) => entityIdentifier.id === targetData.payload.entityIdentifier.id
+        );
+
+        if (indexOfTarget < 0 || indexOfSource < 0) {
+          return;
+        }
+
+        // Don't move if the source and target are the same index, meaning same position in the list
+        if (indexOfSource === indexOfTarget) {
+          return;
+        }
+
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+        // It's possible that the indices are different, but refer to the same position. For example, if the source is
+        // at 2 and the target is at 3, but the target edge is 'top', then the entity is already in the correct position.
+        // We should bail if this is the case.
+        let edgeIndexDelta = 0;
+
+        if (closestEdgeOfTarget === 'bottom') {
+          edgeIndexDelta = 1;
+        } else if (closestEdgeOfTarget === 'top') {
+          edgeIndexDelta = -1;
+        }
+
+        // If the source is already in the correct position, we don't need to move it.
+        if (indexOfSource === indexOfTarget + edgeIndexDelta) {
+          return;
+        }
+
+        // Using `flushSync` so we can query the DOM straight after this line
+        flushSync(() => {
+          dispatch(
+            entitiesReordered({
+              type,
+              entityIdentifiers: reorderWithEdge({
+                list: entityIdentifiers,
+                startIndex: indexOfSource,
+                indexOfTarget,
+                closestEdgeOfTarget,
+                axis: 'vertical',
+              }),
+            })
+          );
+        });
+
+        // Flash the element that was moved
+        const element = document.querySelector(`[data-entity-id="${sourceData.payload.entityIdentifier.id}"]`);
+        if (element instanceof HTMLElement) {
+          triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
+        }
+      },
+    });
+  }, [dispatch, entityIdentifiers, type]);
+
+  return (
+    <Flex flexDir="column" w="full">
+      <Flex w="full">
+        <Flex
+          flexGrow={1}
+          as={Button}
+          onClick={collapse.toggle}
+          justifyContent="space-between"
+          alignItems="center"
+          gap={3}
+          variant="unstyled"
+          p={0}
+          h={8}
+        >
+          <Icon
+            boxSize={4}
+            as={PiCaretDownBold}
+            transform={collapse.isTrue ? undefined : 'rotate(-90deg)'}
+            fill={isSelected ? 'base.200' : 'base.500'}
+            transitionProperty="common"
+            transitionDuration="fast"
+          />
+          {informationalPopoverFeature ? (
+            <InformationalPopover feature={informationalPopoverFeature}>
+              <Text
+                fontWeight="semibold"
+                color={isSelected ? 'base.200' : 'base.500'}
+                userSelect="none"
+                transitionProperty="common"
+                transitionDuration="fast"
+              >
+                {title}
+              </Text>
+            </InformationalPopover>
+          ) : (
+            <Text
+              fontWeight="semibold"
+              color={isSelected ? 'base.200' : 'base.500'}
+              userSelect="none"
+              transitionProperty="common"
+              transitionDuration="fast"
+            >
+              {title}
+            </Text>
+          )}
+
+          <Spacer />
+        </Flex>
+        {isRenderableEntityType(type) && <CanvasEntityMergeVisibleButton type={type} />}
+        {isRenderableEntityType(type) && <CanvasEntityTypeIsHiddenToggle type={type} />}
+        <CanvasEntityAddOfTypeButton type={type} />
+      </Flex>
+      <Collapse in={collapse.isTrue} style={fixTooltipCloseOnScrollStyles}>
+        <Flex flexDir="column" gap={2} pt={2}>
+          {children}
+        </Flex>
+      </Collapse>
+    </Flex>
+  );
+});
+
+CanvasEntityGroupList.displayName = 'CanvasEntityGroupList';

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

@@ -0,0 +1,83 @@
+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 { singleCanvasEntityDndSource } from 'features/dnd/dnd';
+import { type DndListTargetState, idle } from 'features/dnd/types';
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+export const useCanvasEntityListDnd = (ref: RefObject<HTMLElement>, entityIdentifier: CanvasEntityIdentifier) => {
+  const [dndListState, setDndListState] = useState<DndListTargetState>(idle);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    return combine(
+      draggable({
+        element,
+        getInitialData() {
+          return singleCanvasEntityDndSource.getData({ entityIdentifier });
+        },
+        onDragStart() {
+          setDndListState({ type: 'is-dragging' });
+          setIsDragging(true);
+        },
+        onDrop() {
+          setDndListState(idle);
+          setIsDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop({ source }) {
+          if (!singleCanvasEntityDndSource.typeGuard(source.data)) {
+            return false;
+          }
+          if (source.data.payload.entityIdentifier.type !== entityIdentifier.type) {
+            return false;
+          }
+          return true;
+        },
+        getData({ input }) {
+          const data = singleCanvasEntityDndSource.getData({ entityIdentifier });
+          return attachClosestEdge(data, {
+            element,
+            input,
+            allowedEdges: ['top', 'bottom'],
+          });
+        },
+        getIsSticky() {
+          return true;
+        },
+        onDragEnter({ self }) {
+          const closestEdge = extractClosestEdge(self.data);
+          setDndListState({ type: 'is-dragging-over', closestEdge });
+        },
+        onDrag({ self }) {
+          const closestEdge = extractClosestEdge(self.data);
+
+          // Only need to update react state if nothing has changed.
+          // Prevents re-rendering.
+          setDndListState((current) => {
+            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+              return current;
+            }
+            return { type: 'is-dragging-over', closestEdge };
+          });
+        },
+        onDragLeave() {
+          setDndListState(idle);
+        },
+        onDrop() {
+          setDndListState(idle);
+        },
+      })
+    );
+  }, [entityIdentifier, ref]);
+
+  return [dndListState, isDragging] as const;
+};

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

@@ -1,16 +1,20 @@
-import { useDndContext } from '@dnd-kit/core';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import { Box, Button, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIDropOverlay from 'common/components/IAIDropOverlay';
+import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
+import { multipleImageDndSource, singleImageDndSource } 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 { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { selectActiveTabCanvasRightPanel } from 'features/ui/store/uiSelectors';
 import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const CanvasRightPanel = memo(() => {
@@ -79,37 +83,13 @@ CanvasRightPanel.displayName = 'CanvasRightPanel';
 
 const PanelTabs = memo(() => {
   const { t } = useTranslation();
-  const activeTab = useAppSelector(selectActiveTabCanvasRightPanel);
+  const store = useAppStore();
   const activeEntityCount = useAppSelector(selectEntityCountActive);
-  const tabTimeout = useRef<number | null>(null);
-  const dndCtx = useDndContext();
-  const dispatch = useAppDispatch();
-  const [mouseOverTab, setMouseOverTab] = useState<'layers' | 'gallery' | null>(null);
-
-  const onOnMouseOverLayersTab = useCallback(() => {
-    setMouseOverTab('layers');
-    tabTimeout.current = window.setTimeout(() => {
-      if (dndCtx.active) {
-        dispatch(activeTabCanvasRightPanelChanged('layers'));
-      }
-    }, 300);
-  }, [dndCtx.active, dispatch]);
-
-  const onOnMouseOverGalleryTab = useCallback(() => {
-    setMouseOverTab('gallery');
-    tabTimeout.current = window.setTimeout(() => {
-      if (dndCtx.active) {
-        dispatch(activeTabCanvasRightPanelChanged('gallery'));
-      }
-    }, 300);
-  }, [dndCtx.active, dispatch]);
-
-  const onMouseOut = useCallback(() => {
-    setMouseOverTab(null);
-    if (tabTimeout.current) {
-      clearTimeout(tabTimeout.current);
-    }
-  }, []);
+  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);
 
   const layersTabLabel = useMemo(() => {
     if (activeEntityCount === 0) {
@@ -118,23 +98,172 @@ const PanelTabs = memo(() => {
     return `${t('controlLayers.layer_other')} (${activeEntityCount})`;
   }, [activeEntityCount, t]);
 
+  useEffect(() => {
+    if (!layersTabRef.current) {
+      return;
+    }
+
+    const getIsOnLayersTab = () => selectActiveTabCanvasRightPanel(store.getState()) === 'layers';
+
+    const onDragEnter = () => {
+      // If we are already on the layers tab, do nothing
+      if (getIsOnLayersTab()) {
+        return;
+      }
+
+      // Else set the state to active and switch to the layers tab after a timeout
+      setLayersTabDndState('over');
+      timeoutRef.current = window.setTimeout(() => {
+        timeoutRef.current = null;
+        store.dispatch(activeTabCanvasRightPanelChanged('layers'));
+        // When we switch tabs, the other tab should be pending
+        setLayersTabDndState('idle');
+        setGalleryTabDndState('potential');
+      }, 300);
+    };
+    const onDragLeave = () => {
+      // Set the state to idle or pending depending on the current tab
+      if (getIsOnLayersTab()) {
+        setLayersTabDndState('idle');
+      } else {
+        setLayersTabDndState('potential');
+      }
+      // Abort the tab switch if it hasn't happened yet
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+    const onDragStart = () => {
+      // Set the state to pending when a drag starts
+      setLayersTabDndState('potential');
+    };
+    return combine(
+      dropTargetForElements({
+        element: layersTabRef.current,
+        onDragEnter,
+        onDragLeave,
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) => {
+          if (!singleImageDndSource.typeGuard(source.data) && !multipleImageDndSource.typeGuard(source.data)) {
+            return false;
+          }
+          // Only monitor if we are not already on the gallery tab
+          return !getIsOnLayersTab();
+        },
+        onDragStart,
+      }),
+      dropTargetForExternal({
+        element: layersTabRef.current,
+        onDragEnter,
+        onDragLeave,
+      }),
+      monitorForExternal({
+        canMonitor: () => !getIsOnLayersTab(),
+        onDragStart,
+      })
+    );
+  }, [store]);
+
+  useEffect(() => {
+    if (!galleryTabRef.current) {
+      return;
+    }
+
+    const getIsOnGalleryTab = () => selectActiveTabCanvasRightPanel(store.getState()) === 'gallery';
+
+    const onDragEnter = () => {
+      // If we are already on the gallery tab, do nothing
+      if (getIsOnGalleryTab()) {
+        return;
+      }
+
+      // Else set the state to active and switch to the gallery tab after a timeout
+      setGalleryTabDndState('over');
+      timeoutRef.current = window.setTimeout(() => {
+        timeoutRef.current = null;
+        store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
+        // When we switch tabs, the other tab should be pending
+        setGalleryTabDndState('idle');
+        setLayersTabDndState('potential');
+      }, 300);
+    };
+
+    const onDragLeave = () => {
+      // Set the state to idle or pending depending on the current tab
+      if (getIsOnGalleryTab()) {
+        setGalleryTabDndState('idle');
+      } else {
+        setGalleryTabDndState('potential');
+      }
+      // Abort the tab switch if it hasn't happened yet
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+
+    const onDragStart = () => {
+      // Set the state to pending when a drag starts
+      setGalleryTabDndState('potential');
+    };
+
+    return combine(
+      dropTargetForElements({
+        element: galleryTabRef.current,
+        onDragEnter,
+        onDragLeave,
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) => {
+          if (!singleImageDndSource.typeGuard(source.data) && !multipleImageDndSource.typeGuard(source.data)) {
+            return false;
+          }
+          // Only monitor if we are not already on the gallery tab
+          return !getIsOnGalleryTab();
+        },
+        onDragStart,
+      }),
+      dropTargetForExternal({
+        element: galleryTabRef.current,
+        onDragEnter,
+        onDragLeave,
+      }),
+      monitorForExternal({
+        canMonitor: () => !getIsOnGalleryTab(),
+        onDragStart,
+      })
+    );
+  }, [store]);
+
+  useEffect(() => {
+    const onDrop = () => {
+      // Reset the dnd state when a drop happens
+      setGalleryTabDndState('idle');
+      setLayersTabDndState('idle');
+    };
+    const cleanup = combine(monitorForElements({ onDrop }), monitorForExternal({ onDrop }));
+
+    return () => {
+      cleanup();
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <>
-      <Tab position="relative" onMouseOver={onOnMouseOverLayersTab} onMouseOut={onMouseOut} w={32}>
+      <Tab ref={layersTabRef} position="relative" w={32}>
         <Box as="span" w="full">
           {layersTabLabel}
         </Box>
-        {dndCtx.active && activeTab !== 'layers' && (
-          <IAIDropOverlay isOver={mouseOverTab === 'layers'} withBackdrop={false} />
-        )}
+        <DndDropOverlay dndState={layersTabDndState} withBackdrop={false} />
       </Tab>
-      <Tab position="relative" onMouseOver={onOnMouseOverGalleryTab} onMouseOut={onMouseOut} w={32}>
+      <Tab ref={galleryTabRef} position="relative" w={32}>
         <Box as="span" w="full">
           {t('gallery.gallery')}
         </Box>
-        {dndCtx.active && activeTab !== 'gallery' && (
-          <IAIDropOverlay isOver={mouseOverTab === 'gallery'} withBackdrop={false} />
-        )}
+        <DndDropOverlay dndState={galleryTabDndState} withBackdrop={false} />
       </Tab>
     </>
   );

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

@@ -1,6 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import IAIDroppable from 'common/components/IAIDroppable';
-import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
+import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
@@ -10,8 +9,11 @@ import { ControlLayerBadges } from 'features/controlLayers/components/ControlLay
 import { ControlLayerSettings } from 'features/controlLayers/components/ControlLayer/ControlLayerSettings';
 import { ControlLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import type { ReplaceLayerImageDropData } from 'features/dnd/types';
+import type { ReplaceCanvasEntityObjectsWithImageDndTargetData } from 'features/dnd/dnd';
+import { replaceCanvasEntityObjectsWithImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,14 +23,16 @@ type Props = {
 
 export const ControlLayer = memo(({ id }: Props) => {
   const { t } = useTranslation();
+  const isBusy = useCanvasIsBusy();
   const entityIdentifier = useMemo<CanvasEntityIdentifier<'control_layer'>>(
     () => ({ id, type: 'control_layer' }),
     [id]
   );
-  const dropData = useMemo<ReplaceLayerImageDropData>(
-    () => ({ id, actionType: 'REPLACE_LAYER_WITH_IMAGE', context: { entityIdentifier } }),
-    [id, entityIdentifier]
+  const dndTargetData = useMemo<ReplaceCanvasEntityObjectsWithImageDndTargetData>(
+    () => replaceCanvasEntityObjectsWithImageDndTarget.getData({ entityIdentifier }, entityIdentifier.id),
+    [entityIdentifier]
   );
+
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <ControlLayerAdapterGate>
@@ -43,7 +47,12 @@ export const ControlLayer = memo(({ id }: Props) => {
           <CanvasEntitySettingsWrapper>
             <ControlLayerSettings />
           </CanvasEntitySettingsWrapper>
-          <IAIDroppable data={dropData} dropLabel={t('controlLayers.replaceLayer')} />
+          <DndDropTarget
+            dndTarget={replaceCanvasEntityObjectsWithImageDndTarget}
+            dndTargetData={dndTargetData}
+            label={t('controlLayers.replaceLayer')}
+            isDisabled={isBusy}
+          />
         </CanvasEntityContainer>
       </ControlLayerAdapterGate>
     </EntityIdentifierContext.Provider>

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

@@ -1,6 +1,7 @@
 import { Flex, IconButton } from '@invoke-ai/ui-library';
 import { createMemoizedAppSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppStore } from 'app/store/nanostores/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
 import { Weight } from 'features/controlLayers/components/common/Weight';
@@ -21,10 +22,11 @@ import { getFilterForModel } from 'features/controlLayers/store/filters';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
+import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold, PiShootingStarFill, PiUploadBold } from 'react-icons/pi';
-import type { ControlNetModelConfig, PostUploadAction, T2IAdapterModelConfig } from 'services/api/types';
+import type { ControlNetModelConfig, ImageDTO, T2IAdapterModelConfig } from 'services/api/types';
 
 const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) => {
   const selectControlAdapter = useMemo(
@@ -41,7 +43,7 @@ const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<
 
 export const ControlLayerControlAdapter = memo(() => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+  const { dispatch, getState } = useAppStore();
   const entityIdentifier = useEntityIdentifierContext('control_layer');
   const controlAdapter = useControlLayerControlAdapter(entityIdentifier);
   const filter = useEntityFilter(entityIdentifier);
@@ -113,11 +115,17 @@ export const ControlLayerControlAdapter = memo(() => {
 
   const pullBboxIntoLayer = usePullBboxIntoLayer(entityIdentifier);
   const isBusy = useCanvasIsBusy();
-  const postUploadAction = useMemo<PostUploadAction>(
-    () => ({ type: 'REPLACE_LAYER_WITH_IMAGE', entityIdentifier }),
-    [entityIdentifier]
+  const uploadOptions = useMemo(
+    () =>
+      ({
+        onUpload: (imageDTO: ImageDTO) => {
+          replaceCanvasEntityObjectsWithImage({ entityIdentifier, imageDTO, dispatch, getState });
+        },
+        allowMultiple: false,
+      }) as const,
+    [dispatch, entityIdentifier, getState]
   );
-  const uploadApi = useImageUploadButton({ postUploadAction });
+  const uploadApi = useImageUploadButton(uploadOptions);
 
   return (
     <Flex flexDir="column" gap={3} position="relative" w="full">

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

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { CanvasEntityGroupList } from 'features/controlLayers/components/common/CanvasEntityGroupList';
+import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { ControlLayer } from 'features/controlLayers/components/ControlLayer/ControlLayer';
-import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIds = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  return canvas.controlLayers.entities.map(mapId).reverse();
+const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return canvas.controlLayers.entities.map(getEntityIdentifier).toReversed();
 });
 
 const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selectedEntityIdentifier) => {
@@ -17,17 +17,17 @@ const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selecte
 
 export const ControlLayerEntityList = memo(() => {
   const isSelected = useAppSelector(selectIsSelected);
-  const layerIds = useAppSelector(selectEntityIds);
+  const entityIdentifiers = useAppSelector(selectEntityIdentifiers);
 
-  if (layerIds.length === 0) {
+  if (entityIdentifiers.length === 0) {
     return null;
   }
 
-  if (layerIds.length > 0) {
+  if (entityIdentifiers.length > 0) {
     return (
-      <CanvasEntityGroupList type="control_layer" isSelected={isSelected}>
-        {layerIds.map((id) => (
-          <ControlLayer key={id} id={id} />
+      <CanvasEntityGroupList type="control_layer" isSelected={isSelected} entityIdentifiers={entityIdentifiers}>
+        {entityIdentifiers.map((entityIdentifier) => (
+          <ControlLayer key={entityIdentifier.id} id={entityIdentifier.id} />
         ))}
       </CanvasEntityGroupList>
     );

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

@@ -1,22 +1,25 @@
 import { Button, Flex, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppStore } from 'app/store/nanostores/store';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
 import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans } from 'react-i18next';
-import type { PostUploadAction } from 'services/api/types';
+import type { ImageDTO } from 'services/api/types';
 
 export const ControlLayerSettingsEmptyState = memo(() => {
   const entityIdentifier = useEntityIdentifierContext('control_layer');
-  const dispatch = useAppDispatch();
+  const { dispatch, getState } = useAppStore();
   const isBusy = useCanvasIsBusy();
-  const postUploadAction = useMemo<PostUploadAction>(
-    () => ({ type: 'REPLACE_LAYER_WITH_IMAGE', entityIdentifier }),
-    [entityIdentifier]
+  const onUpload = useCallback(
+    (imageDTO: ImageDTO) => {
+      replaceCanvasEntityObjectsWithImage({ imageDTO, entityIdentifier, dispatch, getState });
+    },
+    [dispatch, entityIdentifier, getState]
   );
-  const uploadApi = useImageUploadButton({ postUploadAction });
+  const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
   const onClickGalleryButton = useCallback(() => {
     dispatch(activeTabCanvasRightPanelChanged('gallery'));
   }, [dispatch]);

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

@@ -1,5 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
+import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';

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

@@ -1,82 +1,80 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
-import IAIDndImage from 'common/components/IAIDndImage';
-import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
-import { useNanoid } from 'common/hooks/useNanoid';
+import { UploadImageButton } from 'common/hooks/useImageUploadButton';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
-import type { ImageDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import type { setGlobalReferenceImageDndTarget, setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { DndImage } from 'features/dnd/DndImage';
+import { DndImageIcon } from 'features/dnd/DndImageIcon';
+import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import type { ImageDTO, PostUploadAction } from 'services/api/types';
+import type { ImageDTO } from 'services/api/types';
 import { $isConnected } from 'services/events/stores';
 
-type Props = {
+type Props<T extends typeof setGlobalReferenceImageDndTarget | typeof setRegionalGuidanceReferenceImageDndTarget> = {
   image: ImageWithDims | null;
   onChangeImage: (imageDTO: ImageDTO | null) => void;
-  droppableData: TypesafeDroppableData;
-  postUploadAction: PostUploadAction;
+  dndTarget: T;
+  dndTargetData: ReturnType<T['getData']>;
 };
 
-export const IPAdapterImagePreview = memo(({ image, onChangeImage, droppableData, postUploadAction }: Props) => {
-  const { t } = useTranslation();
-  const isConnected = useStore($isConnected);
-  const dndId = useNanoid('ip_adapter_image_preview');
+export const IPAdapterImagePreview = memo(
+  <T extends typeof setGlobalReferenceImageDndTarget | typeof setRegionalGuidanceReferenceImageDndTarget>({
+    image,
+    onChangeImage,
+    dndTarget,
+    dndTargetData,
+  }: Props<T>) => {
+    const { t } = useTranslation();
+    const isConnected = useStore($isConnected);
+    const { currentData: imageDTO, isError } = useGetImageDTOQuery(image?.image_name ?? skipToken);
+    const handleResetControlImage = useCallback(() => {
+      onChangeImage(null);
+    }, [onChangeImage]);
 
-  const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
-    image?.image_name ?? skipToken
-  );
-  const handleResetControlImage = useCallback(() => {
-    onChangeImage(null);
-  }, [onChangeImage]);
+    useEffect(() => {
+      if (isConnected && isError) {
+        handleResetControlImage();
+      }
+    }, [handleResetControlImage, isError, isConnected]);
 
-  const draggableData = useMemo<ImageDraggableData | undefined>(() => {
-    if (controlImage) {
-      return {
-        id: dndId,
-        payloadType: 'IMAGE_DTO',
-        payload: { imageDTO: controlImage },
-      };
-    }
-  }, [controlImage, dndId]);
+    const onUpload = useCallback(
+      (imageDTO: ImageDTO) => {
+        onChangeImage(imageDTO);
+      },
+      [onChangeImage]
+    );
 
-  useEffect(() => {
-    if (isConnected && isErrorControlImage) {
-      handleResetControlImage();
-    }
-  }, [handleResetControlImage, isConnected, isErrorControlImage]);
-
-  return (
-    <Flex
-      position="relative"
-      w="full"
-      h="full"
-      alignItems="center"
-      borderColor="error.500"
-      borderStyle="solid"
-      borderWidth={controlImage ? 0 : 1}
-      borderRadius="base"
-    >
-      <IAIDndImage
-        draggableData={draggableData}
-        droppableData={droppableData}
-        imageDTO={controlImage}
-        postUploadAction={postUploadAction}
-      />
-
-      {controlImage && (
-        <Flex position="absolute" flexDir="column" top={2} insetInlineEnd={2} gap={1}>
-          <IAIDndImageIcon
-            onClick={handleResetControlImage}
-            icon={<PiArrowCounterClockwiseBold size={16} />}
-            tooltip={t('common.reset')}
+    return (
+      <Flex position="relative" w="full" h="full" alignItems="center" data-error={!imageDTO && !image?.image_name}>
+        {!imageDTO && (
+          <UploadImageButton
+            w="full"
+            h="full"
+            isError={!imageDTO && !image?.image_name}
+            onUpload={onUpload}
+            fontSize={36}
           />
-        </Flex>
-      )}
-    </Flex>
-  );
-});
+        )}
+        {imageDTO && (
+          <>
+            <DndImage imageDTO={imageDTO} />
+            <Flex position="absolute" flexDir="column" top={2} insetInlineEnd={2} gap={1}>
+              <DndImageIcon
+                onClick={handleResetControlImage}
+                icon={<PiArrowCounterClockwiseBold size={16} />}
+                tooltip={t('common.reset')}
+              />
+            </Flex>
+          </>
+        )}
+        <DndDropTarget dndTarget={dndTarget} dndTargetData={dndTargetData} label={t('gallery.drop')} />
+      </Flex>
+    );
+  }
+);
 
 IPAdapterImagePreview.displayName = 'IPAdapterImagePreview';

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

@@ -2,14 +2,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { CanvasEntityGroupList } from 'features/controlLayers/components/common/CanvasEntityGroupList';
+import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { IPAdapter } from 'features/controlLayers/components/IPAdapter/IPAdapter';
-import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIds = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  return canvas.referenceImages.entities.map(mapId).reverse();
+const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return canvas.referenceImages.entities.map(getEntityIdentifier).toReversed();
 });
 const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selectedEntityIdentifier) => {
   return selectedEntityIdentifier?.type === 'reference_image';
@@ -17,17 +17,17 @@ const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selecte
 
 export const IPAdapterList = memo(() => {
   const isSelected = useAppSelector(selectIsSelected);
-  const ipaIds = useAppSelector(selectEntityIds);
+  const entityIdentifiers = useAppSelector(selectEntityIdentifiers);
 
-  if (ipaIds.length === 0) {
+  if (entityIdentifiers.length === 0) {
     return null;
   }
 
-  if (ipaIds.length > 0) {
+  if (entityIdentifiers.length > 0) {
     return (
-      <CanvasEntityGroupList type="reference_image" isSelected={isSelected}>
-        {ipaIds.map((id) => (
-          <IPAdapter key={id} id={id} />
+      <CanvasEntityGroupList type="reference_image" isSelected={isSelected} entityIdentifiers={entityIdentifiers}>
+        {entityIdentifiers.map((entityIdentifiers) => (
+          <IPAdapter key={entityIdentifiers.id} id={entityIdentifiers.id} />
         ))}
       </CanvasEntityGroupList>
     );

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

@@ -19,11 +19,12 @@ 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 type { IPAImageDropData } from 'features/dnd/types';
+import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
+import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold } from 'react-icons/pi';
-import type { ImageDTO, IPAdapterModelConfig, IPALayerImagePostUploadAction } from 'services/api/types';
+import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types';
 
 import { IPAdapterImagePreview } from './IPAdapterImagePreview';
 import { IPAdapterModel } from './IPAdapterModel';
@@ -80,13 +81,9 @@ export const IPAdapterSettings = memo(() => {
     [dispatch, entityIdentifier]
   );
 
-  const droppableData = useMemo<IPAImageDropData>(
-    () => ({ actionType: 'SET_IPA_IMAGE', context: { id: entityIdentifier.id }, id: entityIdentifier.id }),
-    [entityIdentifier.id]
-  );
-  const postUploadAction = useMemo<IPALayerImagePostUploadAction>(
-    () => ({ type: 'SET_IPA_IMAGE', id: entityIdentifier.id }),
-    [entityIdentifier.id]
+  const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
+    () => setGlobalReferenceImageDndTarget.getData({ entityIdentifier }, ipAdapter.image?.image_name),
+    [entityIdentifier, ipAdapter.image?.image_name]
   );
   const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(entityIdentifier);
   const isBusy = useCanvasIsBusy();
@@ -122,10 +119,10 @@ export const IPAdapterSettings = memo(() => {
           </Flex>
           <Flex alignItems="center" justifyContent="center" h={32} w={32} aspectRatio="1/1">
             <IPAdapterImagePreview
-              image={ipAdapter.image ?? null}
+              image={ipAdapter.image}
               onChangeImage={onChangeImage}
-              droppableData={droppableData}
-              postUploadAction={postUploadAction}
+              dndTarget={setGlobalReferenceImageDndTarget}
+              dndTargetData={dndTargetData}
             />
           </Flex>
         </Flex>

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

@@ -1,5 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
+import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';

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

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { CanvasEntityGroupList } from 'features/controlLayers/components/common/CanvasEntityGroupList';
+import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { InpaintMask } from 'features/controlLayers/components/InpaintMask/InpaintMask';
-import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIds = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  return canvas.inpaintMasks.entities.map(mapId).reverse();
+const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return canvas.inpaintMasks.entities.map(getEntityIdentifier).toReversed();
 });
 
 const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selectedEntityIdentifier) => {
@@ -17,17 +17,17 @@ const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selecte
 
 export const InpaintMaskList = memo(() => {
   const isSelected = useAppSelector(selectIsSelected);
-  const entityIds = useAppSelector(selectEntityIds);
+  const entityIdentifiers = useAppSelector(selectEntityIdentifiers);
 
-  if (entityIds.length === 0) {
+  if (entityIdentifiers.length === 0) {
     return null;
   }
 
-  if (entityIds.length > 0) {
+  if (entityIdentifiers.length > 0) {
     return (
-      <CanvasEntityGroupList type="inpaint_mask" isSelected={isSelected}>
-        {entityIds.map((id) => (
-          <InpaintMask key={id} id={id} />
+      <CanvasEntityGroupList type="inpaint_mask" isSelected={isSelected} entityIdentifiers={entityIdentifiers}>
+        {entityIdentifiers.map((entityIdentifier) => (
+          <InpaintMask key={entityIdentifier.id} id={entityIdentifier.id} />
         ))}
       </CanvasEntityGroupList>
     );

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

@@ -1,14 +1,16 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import IAIDroppable from 'common/components/IAIDroppable';
-import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
+import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { RasterLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import type { ReplaceLayerImageDropData } from 'features/dnd/types';
+import type { ReplaceCanvasEntityObjectsWithImageDndTargetData } from 'features/dnd/dnd';
+import { replaceCanvasEntityObjectsWithImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,10 +20,11 @@ type Props = {
 
 export const RasterLayer = memo(({ id }: Props) => {
   const { t } = useTranslation();
+  const isBusy = useCanvasIsBusy();
   const entityIdentifier = useMemo<CanvasEntityIdentifier<'raster_layer'>>(() => ({ id, type: 'raster_layer' }), [id]);
-  const dropData = useMemo<ReplaceLayerImageDropData>(
-    () => ({ id, actionType: 'REPLACE_LAYER_WITH_IMAGE', context: { entityIdentifier } }),
-    [id, entityIdentifier]
+  const dndTargetData = useMemo<ReplaceCanvasEntityObjectsWithImageDndTargetData>(
+    () => replaceCanvasEntityObjectsWithImageDndTarget.getData({ entityIdentifier }, entityIdentifier.id),
+    [entityIdentifier]
   );
 
   return (
@@ -34,7 +37,12 @@ export const RasterLayer = memo(({ id }: Props) => {
             <Spacer />
             <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
-          <IAIDroppable data={dropData} dropLabel={t('controlLayers.replaceLayer')} />
+          <DndDropTarget
+            dndTarget={replaceCanvasEntityObjectsWithImageDndTarget}
+            dndTargetData={dndTargetData}
+            label={t('controlLayers.replaceLayer')}
+            isDisabled={isBusy}
+          />
         </CanvasEntityContainer>
       </RasterLayerAdapterGate>
     </EntityIdentifierContext.Provider>

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

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { CanvasEntityGroupList } from 'features/controlLayers/components/common/CanvasEntityGroupList';
+import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { RasterLayer } from 'features/controlLayers/components/RasterLayer/RasterLayer';
-import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIds = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  return canvas.rasterLayers.entities.map(mapId).reverse();
+const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return canvas.rasterLayers.entities.map(getEntityIdentifier).toReversed();
 });
 const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selectedEntityIdentifier) => {
   return selectedEntityIdentifier?.type === 'raster_layer';
@@ -16,17 +16,17 @@ const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selecte
 
 export const RasterLayerEntityList = memo(() => {
   const isSelected = useAppSelector(selectIsSelected);
-  const layerIds = useAppSelector(selectEntityIds);
+  const entityIdentifiers = useAppSelector(selectEntityIdentifiers);
 
-  if (layerIds.length === 0) {
+  if (entityIdentifiers.length === 0) {
     return null;
   }
 
-  if (layerIds.length > 0) {
+  if (entityIdentifiers.length > 0) {
     return (
-      <CanvasEntityGroupList type="raster_layer" isSelected={isSelected}>
-        {layerIds.map((id) => (
-          <RasterLayer key={id} id={id} />
+      <CanvasEntityGroupList type="raster_layer" isSelected={isSelected} entityIdentifiers={entityIdentifiers}>
+        {entityIdentifiers.map((entityIdentifier) => (
+          <RasterLayer key={entityIdentifier.id} id={entityIdentifier.id} />
         ))}
       </CanvasEntityGroupList>
     );

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

@@ -1,5 +1,5 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
+import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';

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

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { CanvasEntityGroupList } from 'features/controlLayers/components/common/CanvasEntityGroupList';
+import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { RegionalGuidance } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidance';
-import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIds = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  return canvas.regionalGuidance.entities.map(mapId).reverse();
+const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return canvas.regionalGuidance.entities.map(getEntityIdentifier).toReversed();
 });
 const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selectedEntityIdentifier) => {
   return selectedEntityIdentifier?.type === 'regional_guidance';
@@ -16,17 +16,17 @@ const selectIsSelected = createSelector(selectSelectedEntityIdentifier, (selecte
 
 export const RegionalGuidanceEntityList = memo(() => {
   const isSelected = useAppSelector(selectIsSelected);
-  const rgIds = useAppSelector(selectEntityIds);
+  const entityIdentifiers = useAppSelector(selectEntityIdentifiers);
 
-  if (rgIds.length === 0) {
+  if (entityIdentifiers.length === 0) {
     return null;
   }
 
-  if (rgIds.length > 0) {
+  if (entityIdentifiers.length > 0) {
     return (
-      <CanvasEntityGroupList type="regional_guidance" isSelected={isSelected}>
-        {rgIds.map((id) => (
-          <RegionalGuidance key={id} id={id} />
+      <CanvasEntityGroupList type="regional_guidance" isSelected={isSelected} entityIdentifiers={entityIdentifiers}>
+        {entityIdentifiers.map((entityIdentifier) => (
+          <RegionalGuidance key={entityIdentifier.id} id={entityIdentifier.id} />
         ))}
       </CanvasEntityGroupList>
     );

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

@@ -20,11 +20,12 @@ import {
 } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectRegionalGuidanceReferenceImage } from 'features/controlLayers/store/selectors';
 import type { CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
-import type { RGIPAdapterImageDropData } from 'features/dnd/types';
+import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dnd/dnd';
+import { setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold, PiTrashSimpleFill } from 'react-icons/pi';
-import type { ImageDTO, IPAdapterModelConfig, RGIPAdapterImagePostUploadAction } from 'services/api/types';
+import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types';
 import { assert } from 'tsafe';
 
 type Props = {
@@ -91,18 +92,15 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro
     [dispatch, entityIdentifier, referenceImageId]
   );
 
-  const droppableData = useMemo<RGIPAdapterImageDropData>(
-    () => ({
-      actionType: 'SET_RG_IP_ADAPTER_IMAGE',
-      context: { id: entityIdentifier.id, referenceImageId: referenceImageId },
-      id: entityIdentifier.id,
-    }),
-    [entityIdentifier.id, referenceImageId]
-  );
-  const postUploadAction = useMemo<RGIPAdapterImagePostUploadAction>(
-    () => ({ type: 'SET_RG_IP_ADAPTER_IMAGE', id: entityIdentifier.id, referenceImageId: referenceImageId }),
-    [entityIdentifier.id, referenceImageId]
+  const dndTargetData = useMemo<SetRegionalGuidanceReferenceImageDndTargetData>(
+    () =>
+      setRegionalGuidanceReferenceImageDndTarget.getData(
+        { entityIdentifier, referenceImageId },
+        ipAdapter.image?.image_name
+      ),
+    [entityIdentifier, ipAdapter.image?.image_name, referenceImageId]
   );
+
   const pullBboxIntoIPAdapter = usePullBboxIntoRegionalGuidanceReferenceImage(entityIdentifier, referenceImageId);
   const isBusy = useCanvasIsBusy();
 
@@ -151,10 +149,10 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro
           </Flex>
           <Flex alignItems="center" justifyContent="center" h={32} w={32} aspectRatio="1/1">
             <IPAdapterImagePreview
-              image={ipAdapter.image ?? null}
+              image={ipAdapter.image}
               onChangeImage={onChangeImage}
-              droppableData={droppableData}
-              postUploadAction={postUploadAction}
+              dndTarget={setRegionalGuidanceReferenceImageDndTarget}
+              dndTargetData={dndTargetData}
             />
           </Flex>
         </Flex>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx

@@ -1,38 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected';
-import { useEntitySelectionColor } from 'features/controlLayers/hooks/useEntitySelectionColor';
-import { entitySelected } from 'features/controlLayers/store/canvasSlice';
-import type { PropsWithChildren } from 'react';
-import { memo, useCallback } from 'react';
-
-export const CanvasEntityContainer = memo((props: PropsWithChildren) => {
-  const dispatch = useAppDispatch();
-  const entityIdentifier = useEntityIdentifierContext();
-  const isSelected = useEntityIsSelected(entityIdentifier);
-  const selectionColor = useEntitySelectionColor(entityIdentifier);
-  const onClick = useCallback(() => {
-    if (isSelected) {
-      return;
-    }
-    dispatch(entitySelected({ entityIdentifier }));
-  }, [dispatch, entityIdentifier, isSelected]);
-
-  return (
-    <Flex
-      position="relative"
-      flexDir="column"
-      w="full"
-      bg={isSelected ? 'base.800' : 'base.850'}
-      onClick={onClick}
-      borderInlineStartWidth={5}
-      borderColor={isSelected ? selectionColor : 'base.800'}
-      borderRadius="base"
-    >
-      {props.children}
-    </Flex>
-  );
-});
-
-CanvasEntityContainer.displayName = 'CanvasEntityContainer';

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

@@ -1,91 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Button, Collapse, Flex, Icon, Spacer, Text } from '@invoke-ai/ui-library';
-import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useBoolean } from 'common/hooks/useBoolean';
-import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
-import { CanvasEntityAddOfTypeButton } from 'features/controlLayers/components/common/CanvasEntityAddOfTypeButton';
-import { CanvasEntityMergeVisibleButton } from 'features/controlLayers/components/common/CanvasEntityMergeVisibleButton';
-import { CanvasEntityTypeIsHiddenToggle } from 'features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle';
-import { useEntityTypeInformationalPopover } from 'features/controlLayers/hooks/useEntityTypeInformationalPopover';
-import { useEntityTypeTitle } from 'features/controlLayers/hooks/useEntityTypeTitle';
-import { type CanvasEntityIdentifier, isRenderableEntityType } from 'features/controlLayers/store/types';
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-import { PiCaretDownBold } from 'react-icons/pi';
-
-type Props = PropsWithChildren<{
-  isSelected: boolean;
-  type: CanvasEntityIdentifier['type'];
-}>;
-
-const _hover: SystemStyleObject = {
-  opacity: 1,
-};
-
-export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props) => {
-  const title = useEntityTypeTitle(type);
-  const informationalPopoverFeature = useEntityTypeInformationalPopover(type);
-  const collapse = useBoolean(true);
-
-  return (
-    <Flex flexDir="column" w="full">
-      <Flex w="full">
-        <Flex
-          flexGrow={1}
-          as={Button}
-          onClick={collapse.toggle}
-          justifyContent="space-between"
-          alignItems="center"
-          gap={3}
-          variant="unstyled"
-          p={0}
-          h={8}
-        >
-          <Icon
-            boxSize={4}
-            as={PiCaretDownBold}
-            transform={collapse.isTrue ? undefined : 'rotate(-90deg)'}
-            fill={isSelected ? 'base.200' : 'base.500'}
-            transitionProperty="common"
-            transitionDuration="fast"
-          />
-          {informationalPopoverFeature ? (
-            <InformationalPopover feature={informationalPopoverFeature}>
-              <Text
-                fontWeight="semibold"
-                color={isSelected ? 'base.200' : 'base.500'}
-                userSelect="none"
-                transitionProperty="common"
-                transitionDuration="fast"
-              >
-                {title}
-              </Text>
-            </InformationalPopover>
-          ) : (
-            <Text
-              fontWeight="semibold"
-              color={isSelected ? 'base.200' : 'base.500'}
-              userSelect="none"
-              transitionProperty="common"
-              transitionDuration="fast"
-            >
-              {title}
-            </Text>
-          )}
-
-          <Spacer />
-        </Flex>
-        {isRenderableEntityType(type) && <CanvasEntityMergeVisibleButton type={type} />}
-        {isRenderableEntityType(type) && <CanvasEntityTypeIsHiddenToggle type={type} />}
-        <CanvasEntityAddOfTypeButton type={type} />
-      </Flex>
-      <Collapse in={collapse.isTrue} style={fixTooltipCloseOnScrollStyles}>
-        <Flex flexDir="column" gap={2} pt={2}>
-          {children}
-        </Flex>
-      </Collapse>
-    </Flex>
-  );
-});
-
-CanvasEntityGroupList.displayName = 'CanvasEntityGroupList';

invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts

@@ -2,11 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
-import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { canvasReset } from 'features/controlLayers/store/actions';
 import {
-  bboxChangedFromCanvas,
   controlLayerAdded,
   inpaintMaskAdded,
   rasterLayerAdded,
@@ -17,37 +14,20 @@ import {
   rgPositivePromptChanged,
 } from 'features/controlLayers/store/canvasSlice';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
-import {
-  selectBboxModelBase,
-  selectBboxRect,
-  selectCanvasSlice,
-  selectEntityOrThrow,
-} from 'features/controlLayers/store/selectors';
+import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type {
-  CanvasControlLayerState,
   CanvasEntityIdentifier,
-  CanvasInpaintMaskState,
-  CanvasRasterLayerState,
   CanvasRegionalGuidanceState,
   ControlNetConfig,
   IPAdapterConfig,
   T2IAdapterConfig,
 } from 'features/controlLayers/store/types';
-import {
-  imageDTOToImageObject,
-  initialControlNet,
-  initialIPAdapter,
-  initialT2IAdapter,
-} from 'features/controlLayers/store/util';
-import { calculateNewSize } from 'features/controlLayers/util/getScaledBoundingBoxDimensions';
+import { initialControlNet, initialIPAdapter, initialT2IAdapter } from 'features/controlLayers/store/util';
 import { zModelIdentifierField } from 'features/nodes/types/common';
-import { getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { useCallback } from 'react';
 import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/api/endpoints/models';
-import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { isControlNetOrT2IAdapterModelConfig, isIPAdapterModelConfig } from 'services/api/types';
-import type { Equals } from 'tsafe';
-import { assert } from 'tsafe';
 
 /** @knipignore */
 export const selectDefaultControlAdapter = createSelector(
@@ -86,6 +66,9 @@ export const selectDefaultIPAdapter = createSelector(
     const ipAdapter = deepClone(initialIPAdapter);
     if (model) {
       ipAdapter.model = zModelIdentifierField.parse(model);
+      if (model.base === 'flux') {
+        ipAdapter.clipVisionModel = 'ViT-L';
+      }
     }
     return ipAdapter;
   }
@@ -110,150 +93,6 @@ export const useAddRasterLayer = () => {
   return func;
 };
 
-export const useNewRasterLayerFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasRasterLayerState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(rasterLayerAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewControlLayerFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasControlLayerState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(controlLayerAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewInpaintMaskFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasInpaintMaskState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(inpaintMaskAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewRegionalGuidanceFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasRegionalGuidanceState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(rgAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-/**
- * Returns a function that adds a new canvas with the given image as the initial image, replicating the img2img flow:
- * - Reset the canvas
- * - Resize the bbox to the image's aspect ratio at the optimal size for the selected model
- * - Add the image as a raster layer
- * - Resizes the layer to fit the bbox using the 'fill' strategy
- *
- * This allows the user to immediately generate a new image from the given image without any additional steps.
- */
-export const useNewCanvasFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const base = useAppSelector(selectBboxModelBase);
-  const func = useCallback(
-    (imageDTO: ImageDTO, type: CanvasRasterLayerState['type'] | CanvasControlLayerState['type']) => {
-      // Calculate the new bbox dimensions to fit the image's aspect ratio at the optimal size
-      const ratio = imageDTO.width / imageDTO.height;
-      const optimalDimension = getOptimalDimension(base);
-      const { width, height } = calculateNewSize(ratio, optimalDimension ** 2, base);
-
-      // The overrides need to include the layer's ID so we can transform the layer it is initialized
-      let overrides: Partial<CanvasRasterLayerState> | Partial<CanvasControlLayerState>;
-
-      if (type === 'raster_layer') {
-        overrides = {
-          id: getPrefixedId('raster_layer'),
-          position: { x: bboxRect.x, y: bboxRect.y },
-          objects: [imageDTOToImageObject(imageDTO)],
-        } satisfies Partial<CanvasRasterLayerState>;
-      } else if (type === 'control_layer') {
-        overrides = {
-          id: getPrefixedId('control_layer'),
-          position: { x: bboxRect.x, y: bboxRect.y },
-          objects: [imageDTOToImageObject(imageDTO)],
-        } satisfies Partial<CanvasControlLayerState>;
-      } else {
-        // Catch unhandled types
-        assert<Equals<typeof type, never>>(false);
-      }
-
-      CanvasEntityAdapterBase.registerInitCallback(async (adapter) => {
-        // Skip the callback if the adapter is not the one we are creating
-        if (adapter.id !== overrides.id) {
-          return false;
-        }
-        // Fit the layer to the bbox w/ fill strategy
-        await adapter.transformer.startTransform({ silent: true });
-        adapter.transformer.fitToBboxFill();
-        await adapter.transformer.applyTransform();
-        return true;
-      });
-
-      dispatch(canvasReset());
-      // The `bboxChangedFromCanvas` reducer does no validation! Careful!
-      dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
-
-      // The type casts are safe because the type is checked above
-      if (type === 'raster_layer') {
-        dispatch(rasterLayerAdded({ overrides: overrides as Partial<CanvasRasterLayerState>, isSelected: true }));
-      } else if (type === 'control_layer') {
-        dispatch(controlLayerAdded({ overrides: overrides as Partial<CanvasControlLayerState>, isSelected: true }));
-      } else {
-        // Catch unhandled types
-        assert<Equals<typeof type, never>>(false);
-      }
-    },
-    [base, bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
 export const useAddInpaintMask = () => {
   const dispatch = useAppDispatch();
   const func = useCallback(() => {

invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts

@@ -1,6 +1,5 @@
 import { logger } from 'app/logging/logger';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
-import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import { withResultAsync } from 'common/util/result';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
@@ -31,6 +30,7 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { serializeError } from 'serialize-error';
 import type { ImageDTO } from 'services/api/types';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('canvas');
 
@@ -64,7 +64,7 @@ const useSaveCanvas = ({ region, saveToGallery, toastOk, toastError, onSave, wit
       return;
     }
 
-    let metadata: SerializableObject | undefined = undefined;
+    let metadata: JsonObject | undefined = undefined;
 
     if (withMetadata) {
       metadata = selectCanvasMetadata(store.getState());

invokeai/frontend/web/src/features/controlLayers/hooks/useEntitySelectionColor.ts

@@ -1,27 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { rgbColorToString } from 'common/util/colorCodeTransformers';
-import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
-import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import { useMemo } from 'react';
-
-export const useEntitySelectionColor = (entityIdentifier: CanvasEntityIdentifier) => {
-  const selectSelectionColor = useMemo(
-    () =>
-      createSelector(selectCanvasSlice, (canvas) => {
-        const entity = selectEntity(canvas, entityIdentifier);
-        if (!entity) {
-          return 'base.400';
-        } else if (entity.type === 'inpaint_mask') {
-          return rgbColorToString(entity.fill.color);
-        } else if (entity.type === 'regional_guidance') {
-          return rgbColorToString(entity.fill.color);
-        } else {
-          return 'base.400';
-        }
-      }),
-    [entityIdentifier]
-  );
-  const selectionColor = useAppSelector(selectSelectionColor);
-  return selectionColor;
-};

invokeai/frontend/web/src/features/controlLayers/hooks/useSaveLayerToAssets.ts

@@ -5,14 +5,10 @@ import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konv
 import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
 import { canvasToBlob } from 'features/controlLayers/konva/util';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useUploadImageMutation } from 'services/api/endpoints/images';
+import { uploadImage } from 'services/api/endpoints/images';
 
 export const useSaveLayerToAssets = () => {
-  const { t } = useTranslation();
-  const [uploadImage] = useUploadImageMutation();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
 
   const saveLayerToAssets = useCallback(
@@ -27,30 +23,17 @@ export const useSaveLayerToAssets = () => {
       if (!adapter) {
         return;
       }
-      try {
-        const canvas = adapter.getCanvas();
-        const blob = await canvasToBlob(canvas);
-        const file = new File([blob], `layer-${adapter.id}.png`, { type: 'image/png' });
-        await uploadImage({
-          file,
-          image_category: 'user',
-          is_intermediate: false,
-          postUploadAction: { type: 'TOAST' },
-          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-        });
-
-        toast({
-          status: 'info',
-          title: t('toast.layerSavedToAssets'),
-        });
-      } catch (error) {
-        toast({
-          status: 'error',
-          title: t('toast.problemSavingLayer'),
-        });
-      }
+      const canvas = adapter.getCanvas();
+      const blob = await canvasToBlob(canvas);
+      const file = new File([blob], `layer-${adapter.id}.png`, { type: 'image/png' });
+      uploadImage({
+        file,
+        image_category: 'user',
+        is_intermediate: false,
+        board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+      });
     },
-    [t, autoAddBoardId, uploadImage]
+    [autoAddBoardId]
   );
 
   return saveLayerToAssets;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { withResultAsync } from 'common/util/result';
 import { CanvasCacheModule } from 'features/controlLayers/konva/CanvasCacheModule';
 import type { CanvasEntityAdapter, CanvasEntityAdapterFromType } from 'features/controlLayers/konva/CanvasEntity/types';
@@ -35,12 +34,13 @@ import { t } from 'i18next';
 import { atom, computed } from 'nanostores';
 import type { Logger } from 'roarr';
 import { serializeError } from 'serialize-error';
-import type { UploadOptions } from 'services/api/endpoints/images';
+import type { UploadImageArg } from 'services/api/endpoints/images';
 import { getImageDTOSafe, uploadImage } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import stableHash from 'stable-hash';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
+import type { JsonObject } from 'type-fest';
 
 type CompositingOptions = {
   /**
@@ -173,14 +173,14 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     return adapters as CanvasEntityAdapterFromType<T>[];
   };
 
-  getCompositeHash = (adapters: CanvasEntityAdapter[], extra: SerializableObject): string => {
-    const adapterHashes: SerializableObject[] = [];
+  getCompositeHash = (adapters: CanvasEntityAdapter[], extra: JsonObject): string => {
+    const adapterHashes: JsonObject[] = [];
 
     for (const adapter of adapters) {
       adapterHashes.push(adapter.getHashableState());
     }
 
-    const data: SerializableObject = {
+    const data: JsonObject = {
       extra,
       adapterHashes,
     };
@@ -259,7 +259,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
   getCompositeImageDTO = async (
     adapters: CanvasEntityAdapter[],
     rect: Rect,
-    uploadOptions: Pick<UploadOptions, 'is_intermediate' | 'metadata'>,
+    uploadOptions: Pick<UploadImageArg, 'is_intermediate' | 'metadata'>,
     compositingOptions?: CompositingOptions,
     forceUpload?: boolean
   ): Promise<ImageDTO> => {
@@ -297,12 +297,12 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     this.$isUploading.set(true);
     const uploadResult = await withResultAsync(() =>
       uploadImage({
-        blob,
-        fileName: 'canvas-composite.png',
+        file: new File([blob], 'canvas-composite.png', { type: 'image/png' }),
         image_category: 'general',
         is_intermediate: uploadOptions.is_intermediate,
         board_id: uploadOptions.is_intermediate ? undefined : selectAutoAddBoardId(this.manager.store.getState()),
         metadata: uploadOptions.metadata,
+        withToast: false,
       })
     );
     this.$isUploading.set(false);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts

@@ -1,7 +1,6 @@
 import type { Selector } from '@reduxjs/toolkit';
 import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
-import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import type { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import type { CanvasEntityFilterer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer';
@@ -37,6 +36,7 @@ import type { Logger } from 'roarr';
 import type { ImageDTO } from 'services/api/types';
 import stableHash from 'stable-hash';
 import { assert } from 'tsafe';
+import type { Jsonifiable, JsonObject } from 'type-fest';
 
 // Ideally, we'd type `adapter` as `CanvasEntityAdapterBase`, but the generics make this tricky. `CanvasEntityAdapter`
 // is a union of all entity adapters and is functionally identical to `CanvasEntityAdapterBase`. We'll need to do a
@@ -111,7 +111,7 @@ export abstract class CanvasEntityAdapterBase<
    *
    * This is used for caching.
    */
-  abstract getHashableState: () => SerializableObject;
+  abstract getHashableState: () => JsonObject;
 
   /**
    * Callbacks that are executed when the module is initialized.
@@ -566,7 +566,7 @@ export abstract class CanvasEntityAdapterBase<
    * Gets a hash of the entity's state, as provided by `getHashableState`. If `extra` is provided, it will be included in
    * the hash.
    */
-  hash = (extra?: SerializableObject): string => {
+  hash = (extra?: Jsonifiable): string => {
     const arg = {
       state: this.getHashableState(),
       extra,
@@ -614,8 +614,8 @@ export abstract class CanvasEntityAdapterBase<
       transformer: this.transformer.repr(),
       renderer: this.renderer.repr(),
       bufferRenderer: this.bufferRenderer.repr(),
-      segmentAnything: this.segmentAnything?.repr(),
-      filterer: this.filterer?.repr(),
+      segmentAnything: this.segmentAnything?.repr() ?? null,
+      filterer: this.filterer?.repr() ?? null,
       hasCache: this.$canvasCache.get() !== null,
       isLocked: this.$isLocked.get(),
       isDisabled: this.$isDisabled.get(),

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import { CanvasEntityFilterer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer';
@@ -9,6 +8,7 @@ import { CanvasSegmentAnythingModule } from 'features/controlLayers/konva/Canvas
 import type { CanvasControlLayerState, CanvasEntityIdentifier, Rect } from 'features/controlLayers/store/types';
 import type { GroupConfig } from 'konva/lib/Group';
 import { omit } from 'lodash-es';
+import type { JsonObject } from 'type-fest';
 
 export class CanvasEntityAdapterControlLayer extends CanvasEntityAdapterBase<
   CanvasControlLayerState,
@@ -77,7 +77,7 @@ export class CanvasEntityAdapterControlLayer extends CanvasEntityAdapterBase<
     return canvas;
   };
 
-  getHashableState = (): SerializableObject => {
+  getHashableState = (): JsonObject => {
     const keysToOmit: (keyof CanvasControlLayerState)[] = [
       'name',
       'controlAdapter',

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterInpaintMask.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import { CanvasEntityObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer';
@@ -7,6 +6,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { CanvasEntityIdentifier, CanvasInpaintMaskState, Rect } from 'features/controlLayers/store/types';
 import type { GroupConfig } from 'konva/lib/Group';
 import { omit } from 'lodash-es';
+import type { JsonObject } from 'type-fest';
 
 export class CanvasEntityAdapterInpaintMask extends CanvasEntityAdapterBase<
   CanvasInpaintMaskState,
@@ -69,7 +69,7 @@ export class CanvasEntityAdapterInpaintMask extends CanvasEntityAdapterBase<
     }
   };
 
-  getHashableState = (): SerializableObject => {
+  getHashableState = (): JsonObject => {
     const keysToOmit: (keyof CanvasInpaintMaskState)[] = ['fill', 'name', 'opacity', 'isLocked'];
     return omit(this.state, keysToOmit);
   };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import { CanvasEntityFilterer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer';
@@ -9,6 +8,7 @@ import { CanvasSegmentAnythingModule } from 'features/controlLayers/konva/Canvas
 import type { CanvasEntityIdentifier, CanvasRasterLayerState, Rect } from 'features/controlLayers/store/types';
 import type { GroupConfig } from 'konva/lib/Group';
 import { omit } from 'lodash-es';
+import type { JsonObject } from 'type-fest';
 
 export class CanvasEntityAdapterRasterLayer extends CanvasEntityAdapterBase<
   CanvasRasterLayerState,
@@ -70,7 +70,7 @@ export class CanvasEntityAdapterRasterLayer extends CanvasEntityAdapterBase<
     return canvas;
   };
 
-  getHashableState = (): SerializableObject => {
+  getHashableState = (): JsonObject => {
     const keysToOmit: (keyof CanvasRasterLayerState)[] = ['name', 'isLocked'];
     return omit(this.state, keysToOmit);
   };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import { CanvasEntityObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer';
@@ -7,6 +6,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { CanvasEntityIdentifier, CanvasRegionalGuidanceState, Rect } from 'features/controlLayers/store/types';
 import type { GroupConfig } from 'konva/lib/Group';
 import { omit } from 'lodash-es';
+import type { JsonObject } from 'type-fest';
 
 export class CanvasEntityAdapterRegionalGuidance extends CanvasEntityAdapterBase<
   CanvasRegionalGuidanceState,
@@ -69,7 +69,7 @@ export class CanvasEntityAdapterRegionalGuidance extends CanvasEntityAdapterBase
     }
   };
 
-  getHashableState = (): SerializableObject => {
+  getHashableState = (): JsonObject => {
     const keysToOmit: (keyof CanvasRegionalGuidanceState)[] = [
       'fill',
       'name',

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer.ts

@@ -260,7 +260,7 @@ export class CanvasEntityBufferObjectRenderer extends CanvasModuleBase {
       path: this.path,
       parent: this.parent.id,
       bufferState: deepClone(this.state),
-      bufferRenderer: this.renderer?.repr(),
+      bufferRenderer: this.renderer?.repr() ?? null,
     };
   };
 }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts

@@ -490,10 +490,10 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       previewBlob(blob, 'Rasterized entity');
     }
     imageDTO = await uploadImage({
-      blob,
-      fileName: `${this.id}_rasterized.png`,
+      file: new File([blob], `${this.id}_rasterized.png`, { type: 'image/png' }),
       image_category: 'other',
       is_intermediate: true,
+      withToast: false,
     });
     const imageObject = imageDTOToImageObject(imageDTO);
     if (replaceObjects) {

invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts

@@ -1,6 +1,5 @@
 import { logger } from 'app/logging/logger';
 import type { AppStore } from 'app/store/store';
-import type { SerializableObject } from 'common/types';
 import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
 import { CanvasCacheModule } from 'features/controlLayers/konva/CanvasCacheModule';
 import { CanvasCompositorModule } from 'features/controlLayers/konva/CanvasCompositorModule';
@@ -35,6 +34,7 @@ import { computed } from 'nanostores';
 import type { Logger } from 'roarr';
 import type { AppSocket } from 'services/events/types';
 import { assert } from 'tsafe';
+import type { JsonObject } from 'type-fest';
 
 import { CanvasBackgroundModule } from './CanvasBackgroundModule';
 import { CanvasStateApiModule } from './CanvasStateApiModule';
@@ -294,7 +294,7 @@ export class CanvasManager extends CanvasModuleBase {
     };
   };
 
-  getLoggingContext = (): SerializableObject => ({ path: this.path });
+  getLoggingContext = (): JsonObject => ({ path: this.path });
 
   buildPath = (canvasModule: CanvasModuleBase): string[] => {
     return canvasModule.parent.path.concat(canvasModule.id);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleBase.ts

@@ -1,6 +1,6 @@
-import type { SerializableObject } from 'common/types';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { Logger } from 'roarr';
+import type { JsonObject } from 'type-fest';
 
 /**
  * Base class for all canvas modules.
@@ -81,7 +81,7 @@ export abstract class CanvasModuleBase {
    * };
    * ```
    */
-  getLoggingContext: () => SerializableObject = () => {
+  getLoggingContext: () => JsonObject = () => {
     return {
       ...this.parent.getLoggingContext(),
       path: this.path.join(' > '),
@@ -135,7 +135,7 @@ export abstract class CanvasModuleBase {
    * };
    * ```
    */
-  repr: () => SerializableObject = () => {
+  repr: () => JsonObject = () => {
     return {
       id: this.id,
       type: this.type,

invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts

@@ -891,7 +891,7 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase {
         circle: getKonvaNodeDebugAttrs(konva.circle),
       })),
       imageState: deepClone(this.$imageState.get()),
-      imageModule: this.imageModule?.repr(),
+      imageModule: this.imageModule?.repr() ?? null,
       config: deepClone(this.config),
       $isSegmenting: this.$isSegmenting.get(),
       $lastProcessedHash: this.$lastProcessedHash.get(),

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts

@@ -686,13 +686,13 @@ export class CanvasStateApiModule extends CanvasModuleBase {
       id: this.id,
       type: this.type,
       path: this.path,
-      $filteringAdapter: this.$filteringAdapter.get()?.entityIdentifier,
+      $filteringAdapter: this.$filteringAdapter.get()?.entityIdentifier ?? null,
       $isFiltering: this.$isFiltering.get(),
-      $transformingAdapter: this.$transformingAdapter.get()?.entityIdentifier,
+      $transformingAdapter: this.$transformingAdapter.get()?.entityIdentifier ?? null,
       $isTransforming: this.$isTransforming.get(),
-      $rasterizingAdapter: this.$rasterizingAdapter.get()?.entityIdentifier,
+      $rasterizingAdapter: this.$rasterizingAdapter.get()?.entityIdentifier ?? null,
       $isRasterizing: this.$isRasterizing.get(),
-      $segmentingAdapter: this.$segmentingAdapter.get()?.entityIdentifier,
+      $segmentingAdapter: this.$segmentingAdapter.get()?.entityIdentifier ?? null,
       $isSegmenting: this.$isSegmenting.get(),
     };
   };

invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts

@@ -14,6 +14,8 @@ import {
   selectRegionalGuidanceReferenceImage,
 } from 'features/controlLayers/store/selectors';
 import type {
+  CanvasEntityStateFromType,
+  CanvasEntityType,
   CanvasInpaintMaskState,
   CanvasMetadata,
   FillStyle,
@@ -1211,7 +1213,7 @@ export const canvasSlice = createSlice({
       }
     },
     entityRasterized: (state, action: PayloadAction<EntityRasterizedPayload>) => {
-      const { entityIdentifier, imageObject, position, replaceObjects } = action.payload;
+      const { entityIdentifier, imageObject, position, replaceObjects, isSelected } = action.payload;
       const entity = selectEntity(state, entityIdentifier);
       if (!entity) {
         return;
@@ -1223,6 +1225,10 @@ export const canvasSlice = createSlice({
           entity.position = position;
         }
       }
+
+      if (isSelected) {
+        state.selectedEntityIdentifier = entityIdentifier;
+      }
     },
     entityBrushLineAdded: (state, action: PayloadAction<EntityBrushLineAddedPayload>) => {
       const { entityIdentifier, brushLine } = action.payload;
@@ -1345,6 +1351,46 @@ export const canvasSlice = createSlice({
       }
       moveToStart(selectAllEntitiesOfType(state, entity.type), entity);
     },
+    entitiesReordered: <T extends CanvasEntityType>(
+      state: CanvasState,
+      action: PayloadAction<{ type: T; entityIdentifiers: CanvasEntityIdentifier<T>[] }>
+    ) => {
+      const { type, entityIdentifiers } = action.payload;
+
+      switch (type) {
+        case 'raster_layer': {
+          state.rasterLayers.entities = reorderEntities(
+            state.rasterLayers.entities,
+            entityIdentifiers as CanvasEntityIdentifier<'raster_layer'>[]
+          );
+          break;
+        }
+        case 'control_layer':
+          state.controlLayers.entities = reorderEntities(
+            state.controlLayers.entities,
+            entityIdentifiers as CanvasEntityIdentifier<'control_layer'>[]
+          );
+          break;
+        case 'inpaint_mask':
+          state.inpaintMasks.entities = reorderEntities(
+            state.inpaintMasks.entities,
+            entityIdentifiers as CanvasEntityIdentifier<'inpaint_mask'>[]
+          );
+          break;
+        case 'regional_guidance':
+          state.regionalGuidance.entities = reorderEntities(
+            state.regionalGuidance.entities,
+            entityIdentifiers as CanvasEntityIdentifier<'regional_guidance'>[]
+          );
+          break;
+        case 'reference_image':
+          state.referenceImages.entities = reorderEntities(
+            state.referenceImages.entities,
+            entityIdentifiers as CanvasEntityIdentifier<'reference_image'>[]
+          );
+          break;
+      }
+    },
     entityOpacityChanged: (state, action: PayloadAction<EntityIdentifierPayload<{ opacity: number }>>) => {
       const { entityIdentifier, opacity } = action.payload;
       const entity = selectEntity(state, entityIdentifier);
@@ -1471,6 +1517,7 @@ export const {
   entityArrangedBackwardOne,
   entityArrangedToBack,
   entityOpacityChanged,
+  entitiesReordered,
   // allEntitiesDeleted, // currently unused
   allEntitiesOfTypeIsHiddenToggled,
   // bbox
@@ -1604,3 +1651,17 @@ function actionsThrottlingFilter(action: UnknownAction) {
   }, THROTTLE_MS);
   return true;
 }
+
+const reorderEntities = <T extends CanvasEntityType>(
+  entities: CanvasEntityStateFromType<T>[],
+  sortedEntityIdentifiers: CanvasEntityIdentifier<T>[]
+) => {
+  const sortedEntities: CanvasEntityStateFromType<T>[] = [];
+  for (const { id } of sortedEntityIdentifiers.toReversed()) {
+    const entity = entities.find((entity) => entity.id === id);
+    if (entity) {
+      sortedEntities.push(entity);
+    }
+  }
+  return sortedEntities;
+};

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -1,4 +1,3 @@
-import type { SerializableObject } from 'common/types';
 import { fetchModelConfigByIdentifier } from 'features/metadata/util/modelFetchingHelpers';
 import { zMainModelBase, zModelIdentifierField } from 'features/nodes/types/common';
 import type { ParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
@@ -9,6 +8,7 @@ import {
 } from 'features/parameters/types/parameterSchemas';
 import { getImageDTOSafe } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
+import type { JsonObject } from 'type-fest';
 import { z } from 'zod';
 
 const zId = z.string().min(1);
@@ -429,7 +429,7 @@ export type StageAttrs = {
 };
 
 export type EntityIdentifierPayload<
-  T extends SerializableObject | void = void,
+  T extends JsonObject | void = void,
   U extends CanvasEntityType = CanvasEntityType,
 > = T extends void
   ? {
@@ -451,6 +451,7 @@ export type EntityRasterizedPayload = EntityIdentifierPayload<{
   imageObject: CanvasImageState;
   position: Coordinate;
   replaceObjects: boolean;
+  isSelected?: boolean;
 }>;
 
 /**
@@ -466,6 +467,8 @@ export type EntityRasterizedPayload = EntityIdentifierPayload<{
 
 export type GenerationMode = 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';
 
+export type CanvasEntityStateFromType<T extends CanvasEntityType> = Extract<CanvasEntityState, { type: T }>;
+
 export function isRenderableEntityType(
   entityType: CanvasEntityState['type']
 ): entityType is CanvasRenderableEntityState['type'] {

invokeai/frontend/web/src/features/dnd/DndDragPreviewMultipleImage.tsx

@@ -0,0 +1,64 @@
+import type { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { Flex, Heading } from '@invoke-ai/ui-library';
+import type { MultipleImageDndSourceData } from 'features/dnd/dnd';
+import { DND_IMAGE_DRAG_PREVIEW_SIZE, preserveOffsetOnSourceFallbackCentered } from 'features/dnd/util';
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import type { ImageDTO } from 'services/api/types';
+import type { Param0 } from 'tsafe';
+
+const DndDragPreviewMultipleImage = memo(({ imageDTOs }: { imageDTOs: ImageDTO[] }) => {
+  const { t } = useTranslation();
+  return (
+    <Flex
+      w={DND_IMAGE_DRAG_PREVIEW_SIZE}
+      h={DND_IMAGE_DRAG_PREVIEW_SIZE}
+      alignItems="center"
+      justifyContent="center"
+      flexDir="column"
+      bg="base.900"
+      borderRadius="base"
+    >
+      <Heading>{imageDTOs.length}</Heading>
+      <Heading size="sm">{t('parameters.images')}</Heading>
+    </Flex>
+  );
+});
+
+DndDragPreviewMultipleImage.displayName = 'DndDragPreviewMultipleImage';
+
+export type DndDragPreviewMultipleImageState = {
+  type: 'multiple-image';
+  container: HTMLElement;
+  imageDTOs: ImageDTO[];
+};
+
+export const createMultipleImageDragPreview = (arg: DndDragPreviewMultipleImageState) =>
+  createPortal(<DndDragPreviewMultipleImage imageDTOs={arg.imageDTOs} />, arg.container);
+
+type SetMultipleDragPreviewArg = {
+  multipleImageDndData: MultipleImageDndSourceData;
+  setDragPreviewState: (dragPreviewState: DndDragPreviewMultipleImageState | null) => void;
+  onGenerateDragPreviewArgs: Param0<Param0<typeof draggable>['onGenerateDragPreview']>;
+};
+
+export const setMultipleImageDragPreview = ({
+  multipleImageDndData,
+  onGenerateDragPreviewArgs,
+  setDragPreviewState,
+}: SetMultipleDragPreviewArg) => {
+  const { nativeSetDragImage, source, location } = onGenerateDragPreviewArgs;
+  setCustomNativeDragPreview({
+    render({ container }) {
+      setDragPreviewState({ type: 'multiple-image', container, imageDTOs: multipleImageDndData.payload.imageDTOs });
+      return () => setDragPreviewState(null);
+    },
+    nativeSetDragImage,
+    getOffset: preserveOffsetOnSourceFallbackCentered({
+      element: source.element,
+      input: location.current.input,
+    }),
+  });
+};

invokeai/frontend/web/src/features/dnd/DndDragPreviewSingleImage.tsx

@@ -0,0 +1,62 @@
+import type { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { chakra, Flex } from '@invoke-ai/ui-library';
+import type { SingleImageDndSourceData } from 'features/dnd/dnd';
+import { DND_IMAGE_DRAG_PREVIEW_SIZE, preserveOffsetOnSourceFallbackCentered } from 'features/dnd/util';
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+import type { ImageDTO } from 'services/api/types';
+import type { Param0 } from 'tsafe';
+
+const ChakraImg = chakra('img');
+
+const DndDragPreviewSingleImage = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
+  return (
+    <Flex w={DND_IMAGE_DRAG_PREVIEW_SIZE} h={DND_IMAGE_DRAG_PREVIEW_SIZE}>
+      <ChakraImg
+        margin="auto"
+        maxW="full"
+        maxH="full"
+        objectFit="contain"
+        borderRadius="base"
+        src={imageDTO.thumbnail_url}
+      />
+    </Flex>
+  );
+});
+
+DndDragPreviewSingleImage.displayName = 'DndDragPreviewSingleImage';
+
+export type DndDragPreviewSingleImageState = {
+  type: 'single-image';
+  container: HTMLElement;
+  imageDTO: ImageDTO;
+};
+
+export const createSingleImageDragPreview = (arg: DndDragPreviewSingleImageState) =>
+  createPortal(<DndDragPreviewSingleImage imageDTO={arg.imageDTO} />, arg.container);
+
+type SetSingleDragPreviewArg = {
+  singleImageDndData: SingleImageDndSourceData;
+  setDragPreviewState: (dragPreviewState: DndDragPreviewSingleImageState | null) => void;
+  onGenerateDragPreviewArgs: Param0<Param0<typeof draggable>['onGenerateDragPreview']>;
+};
+
+export const setSingleImageDragPreview = ({
+  singleImageDndData,
+  onGenerateDragPreviewArgs,
+  setDragPreviewState,
+}: SetSingleDragPreviewArg) => {
+  const { nativeSetDragImage, source, location } = onGenerateDragPreviewArgs;
+  setCustomNativeDragPreview({
+    render({ container }) {
+      setDragPreviewState({ type: 'single-image', container, imageDTO: singleImageDndData.payload.imageDTO });
+      return () => setDragPreviewState(null);
+    },
+    nativeSetDragImage,
+    getOffset: preserveOffsetOnSourceFallbackCentered({
+      element: source.element,
+      input: location.current.input,
+    }),
+  });
+};

invokeai/frontend/web/src/features/dnd/DndDropOverlay.tsx

@@ -0,0 +1,86 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
+import type { DndTargetState } from 'features/dnd/types';
+import { isNil, isString } from 'lodash-es';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+type Props = {
+  dndState: DndTargetState;
+  label?: string | ReactNode;
+  withBackdrop?: boolean;
+};
+
+const sx = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  color: 'base.300',
+  borderColor: 'base.300',
+  transitionProperty: 'common',
+  transitionDuration: '0.1s',
+  '.dnd-drop-overlay-backdrop': {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    bg: 'base.900',
+    opacity: 0.7,
+    borderRadius: 'base',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transitionProperty: 'inherit',
+    transitionDuration: 'inherit',
+  },
+  '.dnd-drop-overlay-content': {
+    position: 'absolute',
+    top: 0.5,
+    right: 0.5,
+    bottom: 0.5,
+    left: 0.5,
+    opacity: 1,
+    borderWidth: 1.5,
+    borderRadius: 'base',
+    borderStyle: 'dashed',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: 'inherit',
+    transitionProperty: 'inherit',
+    transitionDuration: 'inherit',
+  },
+  '.dnd-drop-overlay-label': {
+    fontSize: 'lg',
+    fontWeight: 'semibold',
+    textAlign: 'center',
+    color: 'inherit',
+    transitionProperty: 'inherit',
+    transitionDuration: 'inherit',
+  },
+  '&[data-dnd-state="over"]': {
+    color: 'invokeYellow.300',
+    borderColor: 'invokeYellow.300',
+  },
+} satisfies SystemStyleObject;
+
+export const DndDropOverlay = memo((props: Props) => {
+  const { dndState, label, withBackdrop = true } = props;
+
+  if (dndState === 'idle') {
+    return null;
+  }
+
+  return (
+    <Flex className="dnd-drop-overlay" data-dnd-state={dndState} sx={sx}>
+      {withBackdrop && <Flex className="dnd-drop-overlay-backdrop" />}
+      <Flex className="dnd-drop-overlay-content">
+        {isString(label) && <Text className="dnd-drop-overlay-label">{label}</Text>}
+        {!isNil(label) && !isString(label) && label}
+      </Flex>
+    </Flex>
+  );
+});
+
+DndDropOverlay.displayName = 'DndDropOverlay';

invokeai/frontend/web/src/features/dnd/DndDropTarget.tsx

@@ -0,0 +1,94 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui-library';
+import { getStore } from 'app/store/nanostores/store';
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { AnyDndTarget } from 'features/dnd/dnd';
+import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
+import type { DndTargetState } from 'features/dnd/types';
+import { memo, useEffect, useRef, useState } from 'react';
+
+const sx = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  w: 'full',
+  h: 'full',
+  pointerEvents: 'auto',
+  // We must disable pointer events when idle to prevent the overlay from blocking clicks
+  '&[data-dnd-state="idle"]': {
+    pointerEvents: 'none',
+  },
+} satisfies SystemStyleObject;
+
+type Props<T extends AnyDndTarget> = {
+  dndTarget: T;
+  dndTargetData: ReturnType<T['getData']>;
+  label: string;
+  isDisabled?: boolean;
+};
+
+export const DndDropTarget = memo(<T extends AnyDndTarget>(props: Props<T>) => {
+  const { dndTarget, dndTargetData, label, isDisabled } = props;
+  const [dndState, setDndState] = useState<DndTargetState>('idle');
+  const ref = useRef<HTMLDivElement>(null);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (isDisabled) {
+      return;
+    }
+
+    const { dispatch, getState } = getStore();
+
+    return combine(
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          // TS cannot infer `dndTargetData` but we've just checked it.
+          // TODO(psyche): Figure out how to satisfy TS.
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          const arg = { sourceData: source.data, targetData: dndTargetData, dispatch, getState } as any;
+          return dndTarget.isValid(arg);
+        },
+        onDragEnter: () => {
+          setDndState('over');
+        },
+        onDragLeave: () => {
+          setDndState('potential');
+        },
+        getData: () => dndTargetData,
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) => {
+          // TS cannot infer `dndTargetData` but we've just checked it.
+          // TODO(psyche): Figure out how to satisfy TS.
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          const arg = { sourceData: source.data, targetData: dndTargetData, dispatch, getState } as any;
+          return dndTarget.isValid(arg);
+        },
+        onDragStart: () => {
+          setDndState('potential');
+        },
+        onDrop: () => {
+          setDndState('idle');
+        },
+      })
+    );
+  }, [dispatch, isDisabled, dndTarget, dndTargetData]);
+
+  return (
+    <Box ref={ref} sx={sx} data-dnd-state={dndState}>
+      <DndDropOverlay dndState={dndState} label={label} />
+    </Box>
+  );
+});
+
+DndDropTarget.displayName = 'DndDropTarget';

invokeai/frontend/web/src/features/dnd/DndImage.tsx

@@ -0,0 +1,78 @@
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import type { ImageProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Image } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
+import { singleImageDndSource } from 'features/dnd/dnd';
+import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage';
+import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage';
+import { useImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
+import { memo, useEffect, useState } from 'react';
+import type { ImageDTO } from 'services/api/types';
+
+const sx = {
+  objectFit: 'contain',
+  maxW: 'full',
+  maxH: 'full',
+  borderRadius: 'base',
+  cursor: 'grab',
+  '&[data-is-dragging=true]': {
+    opacity: 0.3,
+  },
+} satisfies SystemStyleObject;
+
+type Props = ImageProps & {
+  imageDTO: ImageDTO;
+  asThumbnail?: boolean;
+};
+
+export const DndImage = memo(({ imageDTO, asThumbnail, ...rest }: Props) => {
+  const store = useAppStore();
+  const [isDragging, setIsDragging] = useState(false);
+  const [element, ref] = useState<HTMLImageElement | null>(null);
+  const [dragPreviewState, setDragPreviewState] = useState<DndDragPreviewSingleImageState | null>(null);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+    return draggable({
+      element,
+      getInitialData: () => singleImageDndSource.getData({ imageDTO }, imageDTO.image_name),
+      onDragStart: () => {
+        setIsDragging(true);
+      },
+      onDrop: () => {
+        setIsDragging(false);
+      },
+      onGenerateDragPreview: (args) => {
+        if (singleImageDndSource.typeGuard(args.source.data)) {
+          setSingleImageDragPreview({
+            singleImageDndData: args.source.data,
+            onGenerateDragPreviewArgs: args,
+            setDragPreviewState,
+          });
+        }
+      },
+    });
+  }, [imageDTO, element, store]);
+
+  useImageContextMenu(imageDTO, element);
+
+  return (
+    <>
+      <Image
+        role="button"
+        ref={ref}
+        src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
+        fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url}
+        w={imageDTO.width}
+        sx={sx}
+        data-is-dragging={isDragging}
+        {...rest}
+      />
+      {dragPreviewState?.type === 'single-image' ? createSingleImageDragPreview(dragPreviewState) : null}
+    </>
+  );
+});
+
+DndImage.displayName = 'DndImage';

invokeai/frontend/web/src/features/dnd/DndImageIcon.tsx

@@ -21,7 +21,7 @@ type Props = Omit<IconButtonProps, 'aria-label' | 'onClick' | 'tooltip'> & {
   tooltip: string;
 };
 
-const IAIDndImageIcon = (props: Props) => {
+export const DndImageIcon = memo((props: Props) => {
   const { onClick, tooltip, icon, ...rest } = props;
 
   return (
@@ -35,6 +35,6 @@ const IAIDndImageIcon = (props: Props) => {
       {...rest}
     />
   );
-};
+});
 
-export default memo(IAIDndImageIcon);
+DndImageIcon.displayName = 'DndImageIcon';

invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx

@@ -0,0 +1,123 @@
+// Adapted from https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/drop-indicator.tsx
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui-library';
+import type { DndListTargetState } from 'features/dnd/types';
+
+/**
+ * Design decisions for the drop indicator's main line
+ */
+const line = {
+  thickness: 2,
+  backgroundColor: 'base.500',
+};
+
+type DropIndicatorProps = {
+  /**
+   * The `edge` to draw a drop indicator on.
+   *
+   * `edge` is required as for the best possible performance
+   * outcome you should only render this component when it needs to do something
+   *
+   * @example {closestEdge && <DropIndicator edge={closestEdge} />}
+   */
+  edge: Edge;
+  /**
+   * `gap` allows you to position the drop indicator further away from the drop target.
+   * `gap` should be the distance between your drop targets
+   * a drop indicator will be rendered halfway between the drop targets
+   * (the drop indicator will be offset by half of the `gap`)
+   *
+   * `gap` should be a valid CSS length.
+   * @example "8px"
+   * @example "var(--gap)"
+   */
+  gap?: string;
+};
+
+const lineStyles: SystemStyleObject = {
+  display: 'block',
+  position: 'absolute',
+  zIndex: 1,
+  borderRadius: 'full',
+  // Blocking pointer events to prevent the line from triggering drag events
+  // Dragging over the line should count as dragging over the element behind it
+  pointerEvents: 'none',
+  background: line.backgroundColor,
+};
+
+type Orientation = 'horizontal' | 'vertical';
+
+const orientationStyles: Record<Orientation, SystemStyleObject> = {
+  horizontal: {
+    height: `${line.thickness}px`,
+    left: 2,
+    right: 2,
+  },
+  vertical: {
+    width: `${line.thickness}px`,
+    top: 2,
+    bottom: 2,
+  },
+};
+
+const edgeToOrientationMap: Record<Edge, Orientation> = {
+  top: 'horizontal',
+  bottom: 'horizontal',
+  left: 'vertical',
+  right: 'vertical',
+};
+
+const edgeStyles: Record<Edge, SystemStyleObject> = {
+  top: {
+    top: 'var(--local-line-offset)',
+  },
+  right: {
+    right: 'var(--local-line-offset)',
+  },
+  bottom: {
+    bottom: 'var(--local-line-offset)',
+  },
+  left: {
+    left: 'var(--local-line-offset)',
+  },
+};
+
+/**
+ * __Drop indicator__
+ *
+ * A drop indicator is used to communicate the intended resting place of the draggable item. The orientation of the drop indicator should always match the direction of the content flow.
+ */
+function DndDropIndicatorInternal({ edge, gap = '0px' }: DropIndicatorProps) {
+  /**
+   * To clearly communicate the resting place of a draggable item during a drag operation,
+   * the drop indicator should be positioned half way between draggable items.
+   */
+  const lineOffset = `calc(-0.5 * (${gap} + ${line.thickness}px))`;
+
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <Box
+      sx={{ ...lineStyles, ...orientationStyles[orientation], ...edgeStyles[edge], '--local-line-offset': lineOffset }}
+    />
+  );
+}
+
+export const DndListDropIndicator = ({ dndState }: { dndState: DndListTargetState }) => {
+  if (dndState.type !== 'is-dragging-over') {
+    return null;
+  }
+
+  if (!dndState.closestEdge) {
+    return null;
+  }
+
+  return (
+    <DndDropIndicatorInternal
+      edge={dndState.closestEdge}
+      // This is the gap between items in the list, used to calculate the position of the drop indicator
+      gap="var(--invoke-space-2)"
+    />
+  );
+};

invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx

@@ -0,0 +1,158 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, Heading } from '@invoke-ai/ui-library';
+import { getStore } from 'app/store/nanostores/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
+import type { DndTargetState } from 'features/dnd/types';
+import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
+import { toast } from 'features/toast/toast';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type UploadImageArg, uploadImages } from 'services/api/endpoints/images';
+import { useBoardName } from 'services/api/hooks/useBoardName';
+import { z } from 'zod';
+
+const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
+const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg'];
+
+// const MAX_IMAGE_SIZE = 4; //In MegaBytes
+// const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
+//   const result = sizeInBytes / (1024 * 1024);
+//   return +result.toFixed(decimalsNum);
+// };
+
+const zUploadFile = z
+  .custom<File>()
+  // .refine(
+  //   (file) => {
+  //     return sizeInMB(file.size) <= MAX_IMAGE_SIZE;
+  //   },
+  //   () => ({ message: `The maximum image size is ${MAX_IMAGE_SIZE}MB` })
+  // )
+  .refine(
+    (file) => {
+      return ACCEPTED_IMAGE_TYPES.includes(file.type);
+    },
+    (file) => ({ message: `File type ${file.type} is not supported` })
+  )
+  .refine(
+    (file) => {
+      return ACCEPTED_FILE_EXTENSIONS.some((ext) => file.name.endsWith(ext));
+    },
+    (file) => ({ message: `File extension .${file.name.split('.').at(-1)} is not supported` })
+  );
+
+const getFilesSchema = (max?: number) => {
+  if (max === undefined) {
+    return z.array(zUploadFile);
+  }
+  return z.array(zUploadFile).max(max);
+};
+
+const sx = {
+  position: 'absolute',
+  top: 2,
+  right: 2,
+  bottom: 2,
+  left: 2,
+  '&[data-dnd-state="idle"]': {
+    pointerEvents: 'none',
+  },
+} satisfies SystemStyleObject;
+
+export const FullscreenDropzone = memo(() => {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLDivElement>(null);
+  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
+  const [dndState, setDndState] = useState<DndTargetState>('idle');
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const { getState } = getStore();
+    const uploadFilesSchema = getFilesSchema(maxImageUploadCount);
+
+    return combine(
+      dropTargetForExternal({
+        element,
+        canDrop: containsFiles,
+        onDrop: ({ source }) => {
+          const files = getFiles({ source });
+          const parseResult = uploadFilesSchema.safeParse(files);
+
+          if (!parseResult.success) {
+            const description =
+              maxImageUploadCount === undefined
+                ? t('toast.uploadFailedInvalidUploadDesc')
+                : t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount });
+
+            toast({
+              id: 'UPLOAD_FAILED',
+              title: t('toast.uploadFailed'),
+              description,
+              status: 'error',
+            });
+            return;
+          }
+          const autoAddBoardId = selectAutoAddBoardId(getState());
+
+          const uploadArgs: UploadImageArg[] = files.map((file) => ({
+            file,
+            image_category: 'user',
+            is_intermediate: false,
+            board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          }));
+
+          uploadImages(uploadArgs);
+        },
+        onDragEnter: () => {
+          setDndState('over');
+        },
+        onDragLeave: () => {
+          setDndState('idle');
+        },
+      }),
+      monitorForExternal({
+        canMonitor: containsFiles,
+        onDragStart: () => {
+          setDndState('potential');
+          preventUnhandled.start();
+        },
+        onDrop: () => {
+          setDndState('idle');
+          preventUnhandled.stop();
+        },
+      })
+    );
+  }, [maxImageUploadCount, t]);
+
+  return (
+    <Box ref={ref} data-dnd-state={dndState} sx={sx}>
+      <DndDropOverlay dndState={dndState} label={<DropLabel />} />
+    </Box>
+  );
+});
+
+FullscreenDropzone.displayName = 'FullscreenDropzone';
+
+const DropLabel = memo(() => {
+  const { t } = useTranslation();
+  const boardId = useAppSelector(selectAutoAddBoardId);
+  const boardName = useBoardName(boardId);
+
+  return (
+    <Flex flexDir="column" gap={4} color="base.100" alignItems="center">
+      <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
+      <Heading size="md">{t('toast.imagesWillBeAddedTo', { boardName })}</Heading>
+    </Flex>
+  );
+});
+
+DropLabel.displayName = 'DropLabel';

invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx

@@ -1,71 +0,0 @@
-import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { logger } from 'app/logging/logger';
-import { dndDropped } from 'app/store/middleware/listenerMiddleware/listeners/imageDropped';
-import { useAppDispatch } from 'app/store/storeHooks';
-import DndOverlay from 'features/dnd/components/DndOverlay';
-import type { DragEndEvent, DragStartEvent, TypesafeDraggableData } from 'features/dnd/types';
-import { customPointerWithin } from 'features/dnd/util/customPointerWithin';
-import type { PropsWithChildren } from 'react';
-import { memo, useCallback, useState } from 'react';
-
-import { DndContextTypesafe } from './DndContextTypesafe';
-
-const log = logger('system');
-
-const AppDndContext = (props: PropsWithChildren) => {
-  const [activeDragData, setActiveDragData] = useState<TypesafeDraggableData | null>(null);
-
-  const dispatch = useAppDispatch();
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    log.trace({ dragData: event.active.data.current }, 'Drag started');
-    const activeData = event.active.data.current;
-    if (!activeData) {
-      return;
-    }
-    setActiveDragData(activeData);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      log.trace({ dragData: event.active.data.current }, 'Drag ended');
-      const overData = event.over?.data.current;
-      if (!activeDragData || !overData) {
-        return;
-      }
-      dispatch(dndDropped({ overData, activeData: activeDragData }));
-      setActiveDragData(null);
-    },
-    [activeDragData, dispatch]
-  );
-
-  const mouseSensor = useSensor(MouseSensor, {
-    activationConstraint: { distance: 10 },
-  });
-
-  const touchSensor = useSensor(TouchSensor, {
-    activationConstraint: { distance: 10 },
-  });
-
-  // TODO: Use KeyboardSensor - needs composition of multiple collisionDetection algos
-  // Alternatively, fix `rectIntersection` collection detection to work with the drag overlay
-  // (currently the drag element collision rect is not correctly calculated)
-  // const keyboardSensor = useSensor(KeyboardSensor);
-
-  const sensors = useSensors(mouseSensor, touchSensor);
-
-  return (
-    <DndContextTypesafe
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      sensors={sensors}
-      collisionDetection={customPointerWithin}
-      autoScroll={false}
-    >
-      {props.children}
-      <DndOverlay activeDragData={activeDragData} />
-    </DndContextTypesafe>
-  );
-};
-
-export default memo(AppDndContext);

invokeai/frontend/web/src/features/dnd/components/DndContextTypesafe.tsx

@@ -1,6 +0,0 @@
-import { DndContext } from '@dnd-kit/core';
-import type { DndContextTypesafeProps } from 'features/dnd/types';
-
-export function DndContextTypesafe(props: DndContextTypesafeProps) {
-  return <DndContext {...props} />;
-}

invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx

@@ -1,52 +0,0 @@
-import { DragOverlay } from '@dnd-kit/core';
-import { useScaledModifer } from 'features/dnd/hooks/useScaledCenteredModifer';
-import type { TypesafeDraggableData } from 'features/dnd/types';
-import type { AnimationProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { CSSProperties } from 'react';
-import { memo, useMemo } from 'react';
-
-import DragPreview from './DragPreview';
-
-type DndOverlayProps = {
-  activeDragData: TypesafeDraggableData | null;
-};
-
-const DndOverlay = (props: DndOverlayProps) => {
-  const scaledModifier = useScaledModifer();
-  const modifiers = useMemo(() => [scaledModifier], [scaledModifier]);
-
-  return (
-    <DragOverlay dropAnimation={null} modifiers={modifiers} style={dragOverlayStyles}>
-      <AnimatePresence>
-        {props.activeDragData && (
-          <motion.div layout key="overlay-drag-image" initial={initial} animate={animate}>
-            <DragPreview dragData={props.activeDragData} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </DragOverlay>
-  );
-};
-
-export default memo(DndOverlay);
-
-const dragOverlayStyles: CSSProperties = {
-  width: 'min-content',
-  height: 'min-content',
-  cursor: 'grabbing',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  // expand overlay to prevent cursor from going outside it and displaying
-  padding: '10rem',
-};
-
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-  scale: 0.7,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  scale: 1,
-  transition: { duration: 0.1 },
-};

invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx

@@ -1,23 +0,0 @@
-import type { DragEndEvent } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-
-import { DndContextTypesafe } from './DndContextTypesafe';
-
-type Props = PropsWithChildren & {
-  items: string[];
-  onDragEnd(event: DragEndEvent): void;
-};
-
-const DndSortable = (props: Props) => {
-  return (
-    <DndContextTypesafe onDragEnd={props.onDragEnd}>
-      <SortableContext items={props.items} strategy={verticalListSortingStrategy}>
-        {props.children}
-      </SortableContext>
-    </DndContextTypesafe>
-  );
-};
-
-export default memo(DndSortable);

invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx

@@ -1,83 +0,0 @@
-import type { ChakraProps } from '@invoke-ai/ui-library';
-import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import type { TypesafeDraggableData } from 'features/dnd/types';
-import { selectSelectionCount } from 'features/gallery/store/gallerySelectors';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type OverlayDragImageProps = {
-  dragData: TypesafeDraggableData | null;
-};
-
-const BOX_SIZE = 28;
-
-const imageStyles: ChakraProps['sx'] = {
-  w: BOX_SIZE,
-  h: BOX_SIZE,
-  maxW: BOX_SIZE,
-  maxH: BOX_SIZE,
-  shadow: 'dark-lg',
-  borderRadius: 'lg',
-  opacity: 0.3,
-  borderColor: 'base.200',
-  bg: 'base.900',
-  color: 'base.100',
-};
-
-const multiImageStyles: ChakraProps['sx'] = {
-  position: 'relative',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDir: 'column',
-  ...imageStyles,
-};
-
-const DragPreview = (props: OverlayDragImageProps) => {
-  const { t } = useTranslation();
-  const selectionCount = useAppSelector(selectSelectionCount);
-  if (!props.dragData) {
-    return null;
-  }
-
-  if (props.dragData.payloadType === 'NODE_FIELD') {
-    const { field, fieldTemplate } = props.dragData.payload;
-    return (
-      <Box
-        position="relative"
-        p={2}
-        px={3}
-        opacity={0.7}
-        bg="base.300"
-        borderRadius="base"
-        boxShadow="dark-lg"
-        whiteSpace="nowrap"
-        fontSize="sm"
-      >
-        <Text>{field.label || fieldTemplate.title}</Text>
-      </Box>
-    );
-  }
-
-  if (props.dragData.payloadType === 'IMAGE_DTO') {
-    const { thumbnail_url, width, height } = props.dragData.payload.imageDTO;
-    return (
-      <Box position="relative" width="full" height="full" display="flex" alignItems="center" justifyContent="center">
-        <Image sx={imageStyles} objectFit="contain" src={thumbnail_url} width={width} height={height} />
-      </Box>
-    );
-  }
-
-  if (props.dragData.payloadType === 'GALLERY_SELECTION') {
-    return (
-      <Flex sx={multiImageStyles}>
-        <Heading>{selectionCount}</Heading>
-        <Heading size="sm">{t('parameters.images')}</Heading>
-      </Flex>
-    );
-  }
-
-  return null;
-};
-
-export default memo(DragPreview);

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

@@ -0,0 +1,435 @@
+import type { AppDispatch, RootState } from 'app/store/store';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import type {
+  CanvasEntityIdentifier,
+  CanvasEntityType,
+  CanvasRenderableEntityIdentifier,
+} from 'features/controlLayers/store/types';
+import { selectComparisonImages } from 'features/gallery/components/ImageViewer/common';
+import type { BoardId } from 'features/gallery/store/types';
+import {
+  addImagesToBoard,
+  createNewCanvasEntityFromImage,
+  removeImagesFromBoard,
+  replaceCanvasEntityObjectsWithImage,
+  setComparisonImage,
+  setGlobalReferenceImage,
+  setNodeImageFieldImage,
+  setRegionalGuidanceReferenceImage,
+  setUpscaleInitialImage,
+} from 'features/imageActions/actions';
+import type { FieldIdentifier } from 'features/nodes/types/field';
+import type { ImageDTO } from 'services/api/types';
+import type { JsonObject } from 'type-fest';
+
+type RecordUnknown = Record<string | symbol, unknown>;
+
+type DndData<
+  Type extends string = string,
+  PrivateKey extends symbol = symbol,
+  Payload extends JsonObject | void = JsonObject | void,
+> = {
+  [key in PrivateKey]: true;
+} & {
+  id: string;
+  type: Type;
+  payload: Payload;
+};
+
+const buildTypeAndKey = <T extends string>(type: T) => {
+  const key = Symbol(type);
+  return { type, key } as const;
+};
+
+const buildTypeGuard = <T extends DndData>(key: symbol) => {
+  const typeGuard = (val: RecordUnknown): val is T => Boolean(val[key]);
+  return typeGuard;
+};
+
+const buildGetData = <T extends DndData>(key: symbol, type: T['type']) => {
+  const getData = (payload: T['payload'] extends undefined ? void : T['payload'], id?: string): T =>
+    ({
+      [key]: true,
+      id: id ?? getPrefixedId(type),
+      type,
+      payload,
+    }) as T;
+  return getData;
+};
+
+type DndSource<SourceData extends DndData> = {
+  key: symbol;
+  type: SourceData['type'];
+  typeGuard: ReturnType<typeof buildTypeGuard<SourceData>>;
+  getData: ReturnType<typeof buildGetData<SourceData>>;
+};
+//#region Single Image
+const _singleImage = buildTypeAndKey('single-image');
+export type SingleImageDndSourceData = DndData<
+  typeof _singleImage.type,
+  typeof _singleImage.key,
+  { imageDTO: ImageDTO }
+>;
+export const singleImageDndSource: DndSource<SingleImageDndSourceData> = {
+  ..._singleImage,
+  typeGuard: buildTypeGuard(_singleImage.key),
+  getData: buildGetData(_singleImage.key, _singleImage.type),
+};
+//#endregion
+
+//#region Multiple Image
+const _multipleImage = buildTypeAndKey('multiple-image');
+export type MultipleImageDndSourceData = DndData<
+  typeof _multipleImage.type,
+  typeof _multipleImage.key,
+  { imageDTOs: ImageDTO[]; boardId: BoardId }
+>;
+export const multipleImageDndSource: DndSource<MultipleImageDndSourceData> = {
+  ..._multipleImage,
+  typeGuard: buildTypeGuard(_multipleImage.key),
+  getData: buildGetData(_multipleImage.key, _multipleImage.type),
+};
+//#endregion
+
+const _singleCanvasEntity = buildTypeAndKey('single-canvas-entity');
+type SingleCanvasEntityDndSourceData = DndData<
+  typeof _singleCanvasEntity.type,
+  typeof _singleCanvasEntity.key,
+  { entityIdentifier: CanvasEntityIdentifier }
+>;
+export const singleCanvasEntityDndSource: DndSource<SingleCanvasEntityDndSourceData> = {
+  ..._singleCanvasEntity,
+  typeGuard: buildTypeGuard(_singleCanvasEntity.key),
+  getData: buildGetData(_singleCanvasEntity.key, _singleCanvasEntity.type),
+};
+
+const _singleWorkflowField = buildTypeAndKey('single-workflow-field');
+type SingleWorkflowFieldDndSourceData = DndData<
+  typeof _singleWorkflowField.type,
+  typeof _singleWorkflowField.key,
+  { fieldIdentifier: FieldIdentifier }
+>;
+export const singleWorkflowFieldDndSource: DndSource<SingleWorkflowFieldDndSourceData> = {
+  ..._singleWorkflowField,
+  typeGuard: buildTypeGuard(_singleWorkflowField.key),
+  getData: buildGetData(_singleWorkflowField.key, _singleWorkflowField.type),
+};
+
+type DndTarget<TargetData extends DndData, SourceData extends DndData> = {
+  key: symbol;
+  type: TargetData['type'];
+  typeGuard: ReturnType<typeof buildTypeGuard<TargetData>>;
+  getData: ReturnType<typeof buildGetData<TargetData>>;
+  isValid: (arg: {
+    sourceData: RecordUnknown;
+    targetData: TargetData;
+    dispatch: AppDispatch;
+    getState: () => RootState;
+  }) => boolean;
+  handler: (arg: {
+    sourceData: SourceData;
+    targetData: TargetData;
+    dispatch: AppDispatch;
+    getState: () => RootState;
+  }) => void;
+};
+
+//#region Set Global Reference Image
+const _setGlobalReferenceImage = buildTypeAndKey('set-global-reference-image');
+export type SetGlobalReferenceImageDndTargetData = DndData<
+  typeof _setGlobalReferenceImage.type,
+  typeof _setGlobalReferenceImage.key,
+  { entityIdentifier: CanvasEntityIdentifier<'reference_image'> }
+>;
+export const setGlobalReferenceImageDndTarget: DndTarget<
+  SetGlobalReferenceImageDndTargetData,
+  SingleImageDndSourceData
+> = {
+  ..._setGlobalReferenceImage,
+  typeGuard: buildTypeGuard(_setGlobalReferenceImage.key),
+  getData: buildGetData(_setGlobalReferenceImage.key, _setGlobalReferenceImage.type),
+  isValid: ({ sourceData }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      return true;
+    }
+    return false;
+  },
+  handler: ({ sourceData, targetData, dispatch }) => {
+    const { imageDTO } = sourceData.payload;
+    const { entityIdentifier } = targetData.payload;
+    setGlobalReferenceImage({ entityIdentifier, imageDTO, dispatch });
+  },
+};
+//#endregion
+
+//#region Set Regional Guidance Reference Image
+const _setRegionalGuidanceReferenceImage = buildTypeAndKey('set-regional-guidance-reference-image');
+export type SetRegionalGuidanceReferenceImageDndTargetData = DndData<
+  typeof _setRegionalGuidanceReferenceImage.type,
+  typeof _setRegionalGuidanceReferenceImage.key,
+  { entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>; referenceImageId: string }
+>;
+export const setRegionalGuidanceReferenceImageDndTarget: DndTarget<
+  SetRegionalGuidanceReferenceImageDndTargetData,
+  SingleImageDndSourceData
+> = {
+  ..._setRegionalGuidanceReferenceImage,
+  typeGuard: buildTypeGuard(_setRegionalGuidanceReferenceImage.key),
+  getData: buildGetData(_setRegionalGuidanceReferenceImage.key, _setRegionalGuidanceReferenceImage.type),
+  isValid: ({ sourceData }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      return true;
+    }
+    return false;
+  },
+  handler: ({ sourceData, targetData, dispatch }) => {
+    const { imageDTO } = sourceData.payload;
+    const { entityIdentifier, referenceImageId } = targetData.payload;
+    setRegionalGuidanceReferenceImage({ imageDTO, entityIdentifier, referenceImageId, dispatch });
+  },
+};
+//#endregion
+
+//# Set Upscale Initial Image
+const _setUpscaleInitialImage = buildTypeAndKey('set-upscale-initial-image');
+export type SetUpscaleInitialImageDndTargetData = DndData<
+  typeof _setUpscaleInitialImage.type,
+  typeof _setUpscaleInitialImage.key,
+  void
+>;
+export const setUpscaleInitialImageDndTarget: DndTarget<SetUpscaleInitialImageDndTargetData, SingleImageDndSourceData> =
+  {
+    ..._setUpscaleInitialImage,
+    typeGuard: buildTypeGuard(_setUpscaleInitialImage.key),
+    getData: buildGetData(_setUpscaleInitialImage.key, _setUpscaleInitialImage.type),
+    isValid: ({ sourceData }) => {
+      if (singleImageDndSource.typeGuard(sourceData)) {
+        return true;
+      }
+      return false;
+    },
+    handler: ({ sourceData, dispatch }) => {
+      const { imageDTO } = sourceData.payload;
+      setUpscaleInitialImage({ imageDTO, dispatch });
+    },
+  };
+//#endregion
+
+//#region Set Node Image Field Image
+const _setNodeImageFieldImage = buildTypeAndKey('set-node-image-field-image');
+export type SetNodeImageFieldImageDndTargetData = DndData<
+  typeof _setNodeImageFieldImage.type,
+  typeof _setNodeImageFieldImage.key,
+  { fieldIdentifer: FieldIdentifier }
+>;
+export const setNodeImageFieldImageDndTarget: DndTarget<SetNodeImageFieldImageDndTargetData, SingleImageDndSourceData> =
+  {
+    ..._setNodeImageFieldImage,
+    typeGuard: buildTypeGuard(_setNodeImageFieldImage.key),
+    getData: buildGetData(_setNodeImageFieldImage.key, _setNodeImageFieldImage.type),
+    isValid: ({ sourceData }) => {
+      if (singleImageDndSource.typeGuard(sourceData)) {
+        return true;
+      }
+      return false;
+    },
+    handler: ({ sourceData, targetData, dispatch }) => {
+      const { imageDTO } = sourceData.payload;
+      const { fieldIdentifer } = targetData.payload;
+      setNodeImageFieldImage({ fieldIdentifer, imageDTO, dispatch });
+    },
+  };
+//#endregion
+
+//# Set Comparison Image
+const _setComparisonImage = buildTypeAndKey('set-comparison-image');
+export type SetComparisonImageDndTargetData = DndData<
+  typeof _setComparisonImage.type,
+  typeof _setComparisonImage.key,
+  void
+>;
+export const setComparisonImageDndTarget: DndTarget<SetComparisonImageDndTargetData, SingleImageDndSourceData> = {
+  ..._setComparisonImage,
+  typeGuard: buildTypeGuard(_setComparisonImage.key),
+  getData: buildGetData(_setComparisonImage.key, _setComparisonImage.type),
+  isValid: ({ sourceData, getState }) => {
+    if (!singleImageDndSource.typeGuard(sourceData)) {
+      return false;
+    }
+    const { firstImage, secondImage } = selectComparisonImages(getState());
+    // Do not allow the same images to be selected for comparison
+    if (sourceData.payload.imageDTO.image_name === firstImage?.image_name) {
+      return false;
+    }
+    if (sourceData.payload.imageDTO.image_name === secondImage?.image_name) {
+      return false;
+    }
+    return true;
+  },
+  handler: ({ sourceData, dispatch }) => {
+    const { imageDTO } = sourceData.payload;
+    setComparisonImage({ imageDTO, dispatch });
+  },
+};
+//#endregion
+
+//#region New Canvas Entity from Image
+const _newCanvasEntity = buildTypeAndKey('new-canvas-entity-from-image');
+type NewCanvasEntityFromImageDndTargetData = DndData<
+  typeof _newCanvasEntity.type,
+  typeof _newCanvasEntity.key,
+  { type: CanvasEntityType | 'regional_guidance_with_reference_image' }
+>;
+export const newCanvasEntityFromImageDndTarget: DndTarget<
+  NewCanvasEntityFromImageDndTargetData,
+  SingleImageDndSourceData
+> = {
+  ..._newCanvasEntity,
+  typeGuard: buildTypeGuard(_newCanvasEntity.key),
+  getData: buildGetData(_newCanvasEntity.key, _newCanvasEntity.type),
+  isValid: ({ sourceData }) => {
+    if (!singleImageDndSource.typeGuard(sourceData)) {
+      return false;
+    }
+    return true;
+  },
+  handler: ({ sourceData, targetData, dispatch, getState }) => {
+    const { type } = targetData.payload;
+    const { imageDTO } = sourceData.payload;
+    createNewCanvasEntityFromImage({ type, imageDTO, dispatch, getState });
+  },
+};
+
+//#endregion
+
+//#region Replace Canvas Entity Objects With Image
+const _replaceCanvasEntityObjectsWithImage = buildTypeAndKey('replace-canvas-entity-objects-with-image');
+export type ReplaceCanvasEntityObjectsWithImageDndTargetData = DndData<
+  typeof _replaceCanvasEntityObjectsWithImage.type,
+  typeof _replaceCanvasEntityObjectsWithImage.key,
+  { entityIdentifier: CanvasRenderableEntityIdentifier }
+>;
+export const replaceCanvasEntityObjectsWithImageDndTarget: DndTarget<
+  ReplaceCanvasEntityObjectsWithImageDndTargetData,
+  SingleImageDndSourceData
+> = {
+  ..._replaceCanvasEntityObjectsWithImage,
+  typeGuard: buildTypeGuard(_replaceCanvasEntityObjectsWithImage.key),
+  getData: buildGetData(_replaceCanvasEntityObjectsWithImage.key, _replaceCanvasEntityObjectsWithImage.type),
+  isValid: ({ sourceData }) => {
+    if (!singleImageDndSource.typeGuard(sourceData)) {
+      return false;
+    }
+    return true;
+  },
+  handler: ({ sourceData, targetData, dispatch, getState }) => {
+    const { imageDTO } = sourceData.payload;
+    const { entityIdentifier } = targetData.payload;
+    replaceCanvasEntityObjectsWithImage({ imageDTO, entityIdentifier, dispatch, getState });
+  },
+};
+//#endregion
+
+//#region Add To Board
+const _addToBoard = buildTypeAndKey('add-to-board');
+export type AddImageToBoardDndTargetData = DndData<
+  typeof _addToBoard.type,
+  typeof _addToBoard.key,
+  { boardId: BoardId }
+>;
+export const addImageToBoardDndTarget: DndTarget<
+  AddImageToBoardDndTargetData,
+  SingleImageDndSourceData | MultipleImageDndSourceData
+> = {
+  ..._addToBoard,
+  typeGuard: buildTypeGuard(_addToBoard.key),
+  getData: buildGetData(_addToBoard.key, _addToBoard.type),
+  isValid: ({ sourceData, targetData }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      const currentBoard = sourceData.payload.imageDTO.board_id ?? 'none';
+      const destinationBoard = targetData.payload.boardId;
+      return currentBoard !== destinationBoard;
+    }
+    if (multipleImageDndSource.typeGuard(sourceData)) {
+      const currentBoard = sourceData.payload.boardId;
+      const destinationBoard = targetData.payload.boardId;
+      return currentBoard !== destinationBoard;
+    }
+    return false;
+  },
+  handler: ({ sourceData, targetData, dispatch }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      const { imageDTO } = sourceData.payload;
+      const { boardId } = targetData.payload;
+      addImagesToBoard({ imageDTOs: [imageDTO], boardId, dispatch });
+    }
+
+    if (multipleImageDndSource.typeGuard(sourceData)) {
+      const { imageDTOs } = sourceData.payload;
+      const { boardId } = targetData.payload;
+      addImagesToBoard({ imageDTOs, boardId, dispatch });
+    }
+  },
+};
+
+//#endregion
+
+//#region Remove From Board
+const _removeFromBoard = buildTypeAndKey('remove-from-board');
+export type RemoveImageFromBoardDndTargetData = DndData<
+  typeof _removeFromBoard.type,
+  typeof _removeFromBoard.key,
+  void
+>;
+export const removeImageFromBoardDndTarget: DndTarget<
+  RemoveImageFromBoardDndTargetData,
+  SingleImageDndSourceData | MultipleImageDndSourceData
+> = {
+  ..._removeFromBoard,
+  typeGuard: buildTypeGuard(_removeFromBoard.key),
+  getData: buildGetData(_removeFromBoard.key, _removeFromBoard.type),
+  isValid: ({ sourceData }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      const currentBoard = sourceData.payload.imageDTO.board_id ?? 'none';
+      return currentBoard !== 'none';
+    }
+
+    if (multipleImageDndSource.typeGuard(sourceData)) {
+      const currentBoard = sourceData.payload.boardId;
+      return currentBoard !== 'none';
+    }
+
+    return false;
+  },
+  handler: ({ sourceData, dispatch }) => {
+    if (singleImageDndSource.typeGuard(sourceData)) {
+      const { imageDTO } = sourceData.payload;
+      removeImagesFromBoard({ imageDTOs: [imageDTO], dispatch });
+    }
+
+    if (multipleImageDndSource.typeGuard(sourceData)) {
+      const { imageDTOs } = sourceData.payload;
+      removeImagesFromBoard({ imageDTOs, dispatch });
+    }
+  },
+};
+
+//#endregion
+
+export const dndTargets = [
+  // Single Image
+  setGlobalReferenceImageDndTarget,
+  setRegionalGuidanceReferenceImageDndTarget,
+  setUpscaleInitialImageDndTarget,
+  setNodeImageFieldImageDndTarget,
+  setComparisonImageDndTarget,
+  newCanvasEntityFromImageDndTarget,
+  replaceCanvasEntityObjectsWithImageDndTarget,
+  addImageToBoardDndTarget,
+  removeImageFromBoardDndTarget,
+  // Single or Multiple Image
+  addImageToBoardDndTarget,
+  removeImageFromBoardDndTarget,
+] as const;
+
+export type AnyDndTarget = (typeof dndTargets)[number];

invokeai/frontend/web/src/features/dnd/hooks/typesafeHooks.ts

@@ -1,15 +0,0 @@
-import { useDraggable, useDroppable } from '@dnd-kit/core';
-import type {
-  UseDraggableTypesafeArguments,
-  UseDraggableTypesafeReturnValue,
-  UseDroppableTypesafeArguments,
-  UseDroppableTypesafeReturnValue,
-} from 'features/dnd/types';
-
-export function useDroppableTypesafe(props: UseDroppableTypesafeArguments) {
-  return useDroppable(props) as UseDroppableTypesafeReturnValue;
-}
-
-export function useDraggableTypesafe(props: UseDraggableTypesafeArguments) {
-  return useDraggable(props) as UseDraggableTypesafeReturnValue;
-}

invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts

@@ -1,47 +0,0 @@
-import type { Modifier } from '@dnd-kit/core';
-import { getEventCoordinates } from '@dnd-kit/utilities';
-import { useStore } from '@nanostores/react';
-import { useAppSelector } from 'app/store/storeHooks';
-import { $viewport } from 'features/nodes/store/nodesSlice';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { useCallback } from 'react';
-
-/**
- * Applies scaling to the drag transform (if on node editor tab) and centers it on cursor.
- */
-export const useScaledModifer = () => {
-  const activeTabName = useAppSelector(selectActiveTab);
-  const workflowsViewport = useStore($viewport);
-  const modifier: Modifier = useCallback(
-    ({ activatorEvent, draggingNodeRect, transform }) => {
-      if (draggingNodeRect && activatorEvent) {
-        const zoom = activeTabName === 'workflows' ? workflowsViewport.zoom : 1;
-        const activatorCoordinates = getEventCoordinates(activatorEvent);
-
-        if (!activatorCoordinates) {
-          return transform;
-        }
-
-        const offsetX = activatorCoordinates.x - draggingNodeRect.left;
-        const offsetY = activatorCoordinates.y - draggingNodeRect.top;
-
-        const x = transform.x + offsetX - draggingNodeRect.width / 2;
-        const y = transform.y + offsetY - draggingNodeRect.height / 2;
-        const scaleX = transform.scaleX * zoom;
-        const scaleY = transform.scaleY * zoom;
-
-        return {
-          x,
-          y,
-          scaleX,
-          scaleY,
-        };
-      }
-
-      return transform;
-    },
-    [activeTabName, workflowsViewport.zoom]
-  );
-
-  return modifier;
-};

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

@@ -0,0 +1,30 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+
+/**
+ * States for a dnd target.
+ * - `idle`: No drag is occurring, or the drag is not valid for the current drop target.
+ * - `potential`: A drag is occurring, and the drag is valid for the current drop target, but the drag is not over the
+ *  drop target.
+ * - `over`: A drag is occurring, and the drag is valid for the current drop target, and the drag is over the drop target.
+ */
+export type DndTargetState = 'idle' | 'potential' | 'over';
+
+/**
+ * States for a dnd list.
+ */
+export type DndListTargetState =
+  | {
+      type: 'idle';
+    }
+  | {
+      type: 'preview';
+      container: HTMLElement;
+    }
+  | {
+      type: 'is-dragging';
+    }
+  | {
+      type: 'is-dragging-over';
+      closestEdge: Edge | null;
+    };
+export const idle: DndListTargetState = { type: 'idle' };

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

@@ -1,185 +0,0 @@
-// type-safe dnd from https://github.com/clauderic/dnd-kit/issues/935
-import type {
-  Active,
-  Collision,
-  DndContextProps,
-  Over,
-  Translate,
-  useDraggable as useOriginalDraggable,
-  UseDraggableArguments,
-  useDroppable as useOriginalDroppable,
-  UseDroppableArguments,
-} from '@dnd-kit/core';
-import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import type { BoardId } from 'features/gallery/store/types';
-import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field';
-import type { ImageDTO } from 'services/api/types';
-
-type BaseDropData = {
-  id: string;
-};
-
-export type IPAImageDropData = BaseDropData & {
-  actionType: 'SET_IPA_IMAGE';
-  context: {
-    id: string;
-  };
-};
-
-export type RGIPAdapterImageDropData = BaseDropData & {
-  actionType: 'SET_RG_IP_ADAPTER_IMAGE';
-  context: {
-    id: string;
-    referenceImageId: string;
-  };
-};
-
-export type AddRasterLayerFromImageDropData = BaseDropData & {
-  actionType: 'ADD_RASTER_LAYER_FROM_IMAGE';
-};
-
-export type AddControlLayerFromImageDropData = BaseDropData & {
-  actionType: 'ADD_CONTROL_LAYER_FROM_IMAGE';
-};
-
-type AddInpaintMaskFromImageDropData = BaseDropData & {
-  actionType: 'ADD_INPAINT_MASK_FROM_IMAGE';
-};
-
-type AddRegionalGuidanceFromImageDropData = BaseDropData & {
-  actionType: 'ADD_REGIONAL_GUIDANCE_FROM_IMAGE';
-};
-
-export type AddRegionalReferenceImageFromImageDropData = BaseDropData & {
-  actionType: 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE';
-};
-
-export type AddGlobalReferenceImageFromImageDropData = BaseDropData & {
-  actionType: 'ADD_GLOBAL_REFERENCE_IMAGE_FROM_IMAGE';
-};
-
-export type ReplaceLayerImageDropData = BaseDropData & {
-  actionType: 'REPLACE_LAYER_WITH_IMAGE';
-  context: {
-    entityIdentifier: CanvasEntityIdentifier<'control_layer' | 'raster_layer' | 'inpaint_mask' | 'regional_guidance'>;
-  };
-};
-
-type UpscaleInitialImageDropData = BaseDropData & {
-  actionType: 'SET_UPSCALE_INITIAL_IMAGE';
-};
-
-type NodesImageDropData = BaseDropData & {
-  actionType: 'SET_NODES_IMAGE';
-  context: {
-    nodeId: string;
-    fieldName: string;
-  };
-};
-
-export type AddToBoardDropData = BaseDropData & {
-  actionType: 'ADD_TO_BOARD';
-  context: { boardId: string };
-};
-
-export type RemoveFromBoardDropData = BaseDropData & {
-  actionType: 'REMOVE_FROM_BOARD';
-};
-
-export type SelectForCompareDropData = BaseDropData & {
-  actionType: 'SELECT_FOR_COMPARE';
-  context: {
-    firstImageName?: string | null;
-    secondImageName?: string | null;
-  };
-};
-
-export type TypesafeDroppableData =
-  | NodesImageDropData
-  | AddToBoardDropData
-  | RemoveFromBoardDropData
-  | IPAImageDropData
-  | RGIPAdapterImageDropData
-  | SelectForCompareDropData
-  | UpscaleInitialImageDropData
-  | AddRasterLayerFromImageDropData
-  | AddControlLayerFromImageDropData
-  | ReplaceLayerImageDropData
-  | AddRegionalReferenceImageFromImageDropData
-  | AddGlobalReferenceImageFromImageDropData
-  | AddInpaintMaskFromImageDropData
-  | AddRegionalGuidanceFromImageDropData;
-
-type BaseDragData = {
-  id: string;
-};
-
-type NodeFieldDraggableData = BaseDragData & {
-  payloadType: 'NODE_FIELD';
-  payload: {
-    nodeId: string;
-    field: FieldInputInstance;
-    fieldTemplate: FieldInputTemplate;
-  };
-};
-
-export type ImageDraggableData = BaseDragData & {
-  payloadType: 'IMAGE_DTO';
-  payload: { imageDTO: ImageDTO };
-};
-
-export type GallerySelectionDraggableData = BaseDragData & {
-  payloadType: 'GALLERY_SELECTION';
-  payload: { boardId: BoardId };
-};
-
-export type TypesafeDraggableData = NodeFieldDraggableData | ImageDraggableData | GallerySelectionDraggableData;
-
-export interface UseDroppableTypesafeArguments extends Omit<UseDroppableArguments, 'data'> {
-  data?: TypesafeDroppableData;
-}
-
-export type UseDroppableTypesafeReturnValue = Omit<ReturnType<typeof useOriginalDroppable>, 'active' | 'over'> & {
-  active: TypesafeActive | null;
-  over: TypesafeOver | null;
-};
-
-export interface UseDraggableTypesafeArguments extends Omit<UseDraggableArguments, 'data'> {
-  data?: TypesafeDraggableData;
-}
-
-export type UseDraggableTypesafeReturnValue = Omit<ReturnType<typeof useOriginalDraggable>, 'active' | 'over'> & {
-  active: TypesafeActive | null;
-  over: TypesafeOver | null;
-};
-
-interface TypesafeActive extends Omit<Active, 'data'> {
-  data: React.MutableRefObject<TypesafeDraggableData | undefined>;
-}
-
-interface TypesafeOver extends Omit<Over, 'data'> {
-  data: React.MutableRefObject<TypesafeDroppableData | undefined>;
-}
-
-interface DragEvent {
-  activatorEvent: Event;
-  active: TypesafeActive;
-  collisions: Collision[] | null;
-  delta: Translate;
-  over: TypesafeOver | null;
-}
-
-export interface DragStartEvent extends Pick<DragEvent, 'active'> {}
-interface DragMoveEvent extends DragEvent {}
-interface DragOverEvent extends DragMoveEvent {}
-export interface DragEndEvent extends DragEvent {}
-interface DragCancelEvent extends DragEndEvent {}
-
-export interface DndContextTypesafeProps
-  extends Omit<DndContextProps, 'onDragStart' | 'onDragMove' | 'onDragOver' | 'onDragEnd' | 'onDragCancel'> {
-  onDragStart?(event: DragStartEvent): void;
-  onDragMove?(event: DragMoveEvent): void;
-  onDragOver?(event: DragOverEvent): void;
-  onDragEnd?(event: DragEndEvent): void;
-  onDragCancel?(event: DragCancelEvent): void;
-}

invokeai/frontend/web/src/features/dnd/useDndMonitor.ts

@@ -0,0 +1,66 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { logger } from 'app/logging/logger';
+import { getStore } from 'app/store/nanostores/store';
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { parseify } from 'common/util/serialize';
+import { dndTargets, multipleImageDndSource, singleImageDndSource } from 'features/dnd/dnd';
+import { useEffect } from 'react';
+
+const log = logger('dnd');
+
+export const useDndMonitor = () => {
+  useAssertSingleton('useDropMonitor');
+
+  useEffect(() => {
+    return combine(
+      monitorForElements({
+        canMonitor: ({ source }) => {
+          const sourceData = source.data;
+
+          // Check for allowed sources
+          if (!singleImageDndSource.typeGuard(sourceData) && !multipleImageDndSource.typeGuard(sourceData)) {
+            return false;
+          }
+
+          return true;
+        },
+        onDrop: ({ source, location }) => {
+          const target = location.current.dropTargets[0];
+          if (!target) {
+            log.warn('No dnd target');
+            return;
+          }
+
+          const sourceData = source.data;
+          const targetData = target.data;
+
+          const { dispatch, getState } = getStore();
+
+          for (const dndTarget of dndTargets) {
+            if (!dndTarget.typeGuard(targetData)) {
+              continue;
+            }
+            const arg = { sourceData, targetData, dispatch, getState };
+            // TS cannot infer `arg.targetData` but we've just checked it.
+            // TODO(psyche): Figure out how to satisfy TS.
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (!dndTarget.isValid(arg as any)) {
+              continue;
+            }
+
+            log.debug(parseify({ sourceData, targetData }), 'Handling dnd drop');
+
+            // TS cannot infer `arg.targetData` but we've just checked it.
+            // TODO(psyche): Figure out how to satisfy TS.
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            dndTarget.handler(arg as any);
+            return;
+          }
+
+          log.warn(parseify({ sourceData, targetData }), 'Invalid drop');
+        },
+      })
+    );
+  }, []);
+};

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

@@ -0,0 +1,46 @@
+import type { GetOffsetFn } from '@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/element/custom-native-drag-preview/types';
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { CSSProperties } from 'react';
+
+/**
+ * The size of the image drag preview in theme units.
+ */
+export const DND_IMAGE_DRAG_PREVIEW_SIZE = 32 satisfies SystemStyleObject['w'];
+
+/**
+ * A drag preview offset function that works like the provided `preserveOffsetOnSource`, except when either the X or Y
+ * offset is outside the container, in which case it centers the preview in the container.
+ */
+export function preserveOffsetOnSourceFallbackCentered({
+  element,
+  input,
+}: {
+  element: HTMLElement;
+  input: Input;
+}): GetOffsetFn {
+  return ({ container }) => {
+    const sourceRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+
+    let offsetX = input.clientX - sourceRect.x;
+    let offsetY = input.clientY - sourceRect.y;
+
+    if (offsetY > containerRect.height || offsetX > containerRect.width) {
+      offsetX = containerRect.width / 2;
+      offsetY = containerRect.height / 2;
+    }
+
+    return { x: offsetX, y: offsetY };
+  };
+}
+
+// Based on https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/flourish/src/trigger-post-move-flash.tsx
+// That package has a lot of extra deps so we just copied the function here
+export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSProperties['backgroundColor']) {
+  element.animate([{ backgroundColor }, {}], {
+    duration: 700,
+    easing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
+    iterations: 1,
+  });
+}

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

@@ -1,34 +0,0 @@
-import type { CollisionDetection } from '@dnd-kit/core';
-import { pointerWithin } from '@dnd-kit/core';
-
-/**
- * Filters out droppable elements that are overflowed, then applies the pointerWithin collision detection.
- *
- * Fixes collision detection firing on droppables that are not visible, having been scrolled out of view.
- *
- * See https://github.com/clauderic/dnd-kit/issues/1198
- */
-export const customPointerWithin: CollisionDetection = (arg) => {
-  if (!arg.pointerCoordinates) {
-    // sanity check
-    return [];
-  }
-
-  // Get all elements at the pointer coordinates. This excludes elements which are overflowed,
-  // so it won't include the droppable elements that are scrolled out of view.
-  const targetElements = document.elementsFromPoint(arg.pointerCoordinates.x, arg.pointerCoordinates.y);
-
-  const filteredDroppableContainers = arg.droppableContainers.filter((container) => {
-    if (!container.node.current) {
-      return false;
-    }
-    // Only include droppable elements that are in the list of elements at the pointer coordinates.
-    return targetElements.includes(container.node.current);
-  });
-
-  // Run the provided collision detection with the filtered droppable elements.
-  return pointerWithin({
-    ...arg,
-    droppableContainers: filteredDroppableContainers,
-  });
-};

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

@@ -1,83 +0,0 @@
-import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-
-export const isValidDrop = (overData?: TypesafeDroppableData | null, activeData?: TypesafeDraggableData | null) => {
-  if (!overData || !activeData) {
-    return false;
-  }
-
-  const { actionType } = overData;
-  const { payloadType } = activeData;
-
-  if (overData.id === activeData.id) {
-    return false;
-  }
-
-  switch (actionType) {
-    case 'SET_IPA_IMAGE':
-    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':
-    case 'REPLACE_LAYER_WITH_IMAGE':
-    case 'ADD_GLOBAL_REFERENCE_IMAGE_FROM_IMAGE':
-    case 'ADD_REGIONAL_REFERENCE_IMAGE_FROM_IMAGE':
-      return payloadType === 'IMAGE_DTO';
-    case 'ADD_TO_BOARD': {
-      // If the board is the same, don't allow the drop
-
-      // Check the payload types
-      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType);
-      if (!isPayloadValid) {
-        return false;
-      }
-
-      // Check if the image's board is the board we are dragging onto
-      if (payloadType === 'IMAGE_DTO') {
-        const { imageDTO } = activeData.payload;
-        const currentBoard = imageDTO.board_id ?? 'none';
-        const destinationBoard = overData.context.boardId;
-
-        return currentBoard !== destinationBoard;
-      }
-
-      if (payloadType === 'GALLERY_SELECTION') {
-        // Assume all images are on the same board - this is true for the moment
-        const currentBoard = activeData.payload.boardId;
-        const destinationBoard = overData.context.boardId;
-        return currentBoard !== destinationBoard;
-      }
-
-      return false;
-    }
-    case 'REMOVE_FROM_BOARD': {
-      // If the board is the same, don't allow the drop
-
-      // Check the payload types
-      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType);
-      if (!isPayloadValid) {
-        return false;
-      }
-
-      // Check if the image's board is the board we are dragging onto
-      if (payloadType === 'IMAGE_DTO') {
-        const { imageDTO } = activeData.payload;
-        const currentBoard = imageDTO.board_id ?? 'none';
-
-        return currentBoard !== 'none';
-      }
-
-      if (payloadType === 'GALLERY_SELECTION') {
-        const currentBoard = activeData.payload.boardId;
-        return currentBoard !== 'none';
-      }
-
-      return false;
-    }
-    default:
-      return false;
-  }
-};

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx

@@ -1,10 +1,14 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { autoScrollForExternal } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/external';
 import { Box } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { selectAllowPrivateBoards } from 'features/system/store/configSelectors';
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { BoardsList } from './BoardsList';
 
@@ -15,11 +19,35 @@ const overlayScrollbarsStyles: CSSProperties = {
 
 const BoardsListWrapper = () => {
   const allowPrivateBoards = useAppSelector(selectAllowPrivateBoards);
+  const [os, osRef] = useState<OverlayScrollbarsComponentRef | null>(null);
+  useEffect(() => {
+    const osInstance = os?.osInstance();
+
+    if (!osInstance) {
+      return;
+    }
+
+    const element = osInstance.elements().viewport;
+
+    // `pragmatic-drag-and-drop-auto-scroll` requires the element to have `overflow-y: scroll` or `overflow-y: auto`
+    // else it logs an ugly warning. In our case, using a custom scrollbar library, it will be 'hidden' by default.
+    // To prevent the erroneous warning, we temporarily set the overflow-y to 'scroll' and then revert it back.
+    const overflowY = element.style.overflowY; // starts 'hidden'
+    element.style.setProperty('overflow-y', 'scroll', 'important');
+    const cleanup = combine(autoScrollForElements({ element }), autoScrollForExternal({ element }));
+    element.style.setProperty('overflow-y', overflowY);
+
+    return cleanup;
+  }, [os]);
 
   return (
     <Box position="relative" w="full" h="full">
       <Box position="absolute" top={0} right={0} bottom={0} left={0}>
-        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+        <OverlayScrollbarsComponent
+          ref={osRef}
+          style={overlayScrollbarsStyles}
+          options={overlayScrollbarsParams.options}
+        >
           {allowPrivateBoards && <BoardsList isPrivate={true} />}
           <BoardsList isPrivate={false} />
         </OverlayScrollbarsComponent>

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -2,8 +2,9 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIDroppable from 'common/components/IAIDroppable';
-import type { AddToBoardDropData } from 'features/dnd/types';
+import type { AddImageToBoardDndTargetData } from 'features/dnd/dnd';
+import { addImageToBoardDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
 import { BoardEditableTitle } from 'features/gallery/components/Boards/BoardsList/BoardEditableTitle';
@@ -35,7 +36,6 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector(selectAutoAssignBoardOnClick);
   const selectedBoardId = useAppSelector(selectSelectedBoardId);
-
   const onClick = useCallback(() => {
     if (selectedBoardId !== board.board_id) {
       dispatch(boardIdSelected({ boardId: board.board_id }));
@@ -45,12 +45,8 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
     }
   }, [selectedBoardId, board.board_id, autoAssignBoardOnClick, autoAddBoardId, dispatch]);
 
-  const droppableData: AddToBoardDropData = useMemo(
-    () => ({
-      id: board.board_id,
-      actionType: 'ADD_TO_BOARD',
-      context: { boardId: board.board_id },
-    }),
+  const dndTargetData = useMemo<AddImageToBoardDndTargetData>(
+    () => addImageToBoardDndTarget.getData({ boardId: board.board_id }),
     [board.board_id]
   );
 
@@ -85,7 +81,7 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
           </Tooltip>
         )}
       </BoardContextMenu>
-      <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
+      <DndDropTarget dndTarget={addImageToBoardDndTarget} dndTargetData={dndTargetData} label={t('gallery.move')} />
     </Box>
   );
 };