feat(ui): initial mini controlnet UI, dnd improvements

invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx

@@ -6,6 +6,7 @@ import {
   KeyboardSensor,
   MouseSensor,
   TouchSensor,
+  pointerWithin,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
@@ -13,6 +14,7 @@ import { PropsWithChildren, memo, useCallback, useState } from 'react';
 import OverlayDragImage from './OverlayDragImage';
 import { ImageDTO } from 'services/api';
 import { isImageDTO } from 'services/types/guards';
+import { snapCenterToCursor } from '@dnd-kit/modifiers';
 
 type ImageDndContextProps = PropsWithChildren;
 
@@ -53,9 +55,10 @@ const ImageDndContext = (props: ImageDndContextProps) => {
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
       sensors={sensors}
+      collisionDetection={pointerWithin}
     >
       {props.children}
-      <DragOverlay dropAnimation={null}>
+      <DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
         {draggedImage && <OverlayDragImage image={draggedImage} />}
       </DragOverlay>
     </DndContext>

invokeai/frontend/web/src/app/components/ImageDnd/OverlayDragImage.tsx

@@ -1,4 +1,4 @@
-import { Image } from '@chakra-ui/react';
+import { Box, Image } from '@chakra-ui/react';
 import { memo } from 'react';
 import { ImageDTO } from 'services/api';
 
@@ -8,15 +8,27 @@ type OverlayDragImageProps = {
 
 const OverlayDragImage = (props: OverlayDragImageProps) => {
   return (
-    <Image
-      sx={{
-        maxW: 36,
-        maxH: 36,
-        borderRadius: 'base',
-        shadow: 'dark-lg',
+    <Box
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        userSelect: 'none',
+        cursor: 'grabbing',
       }}
-      src={props.image.thumbnail_url}
-    />
+    >
+      <Image
+        sx={{
+          maxW: 36,
+          maxH: 36,
+          borderRadius: 'base',
+          shadow: 'dark-lg',
+        }}
+        src={props.image.thumbnail_url}
+      />
+    </Box>
   );
 };
 

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

@@ -95,6 +95,7 @@ export type AppFeature =
  * A disable-able Stable Diffusion feature
  */
 export type SDFeature =
+  | 'controlNet'
   | 'noise'
   | 'variation'
   | 'symmetry'