feat(ui): add multi-select and batch capabilities

This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager.

A number of other substantial changes are included:
- `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images
- `batchSlice` is added to manage the batch
- The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals
- Minimum gallery size in px implemented as a hook
- Many style fixes & several bug fixes

TODO:
- The UI and UX need to be figured out, especially for controlnet
- Batch processing is not hooked up; generation does not do anything with batch
- Routes to support batch image operations, specifically delete and add/remove to/from boards

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

@@ -7,7 +7,6 @@ import GalleryDrawer from 'features/gallery/components/GalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import SiteHeader from 'features/system/components/SiteHeader';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
@@ -15,47 +14,27 @@ import FloatingParametersPanelButtons from 'features/ui/components/FloatingParam
 import InvokeTabs from 'features/ui/components/InvokeTabs';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 import i18n from 'i18n';
-import { ReactNode, memo, useCallback, useEffect, useState } from 'react';
+import { ReactNode, memo, useEffect } from 'react';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
-import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
-import { useListModelsQuery } from 'services/api/endpoints/models';
 import DeleteBoardImagesModal from '../../features/gallery/components/Boards/DeleteBoardImagesModal';
+import DeleteImageModal from 'features/imageDeletion/components/DeleteImageModal';
 
 const DEFAULT_CONFIG = {};
 
 interface Props {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
-  setIsReady?: (isReady: boolean) => void;
 }
 
-const App = ({
-  config = DEFAULT_CONFIG,
-  headerComponent,
-  setIsReady,
-}: Props) => {
+const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   const language = useAppSelector(languageSelector);
 
   const log = useLogger();
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
 
-  const isApplicationReady = useIsApplicationReady();
-
-  const { data: pipelineModels } = useListModelsQuery({
-    model_type: 'main',
-  });
-  const { data: controlnetModels } = useListModelsQuery({
-    model_type: 'controlnet',
-  });
-  const { data: vaeModels } = useListModelsQuery({ model_type: 'vae' });
-  const { data: loraModels } = useListModelsQuery({ model_type: 'lora' });
-  const { data: embeddingModels } = useListModelsQuery({
-    model_type: 'embedding',
-  });
   const dispatch = useAppDispatch();
 
   useEffect(() => {

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

@@ -0,0 +1,82 @@
+import { Box, ChakraProps, Flex, Heading, Image } from '@chakra-ui/react';
+import { memo } from 'react';
+import { TypesafeDraggableData } from './typesafeDnd';
+
+type OverlayDragImageProps = {
+  dragData: TypesafeDraggableData | null;
+};
+
+const BOX_SIZE = 28;
+
+const STYLES: ChakraProps['sx'] = {
+  w: BOX_SIZE,
+  h: BOX_SIZE,
+  maxW: BOX_SIZE,
+  maxH: BOX_SIZE,
+  shadow: 'dark-lg',
+  borderRadius: 'lg',
+  borderWidth: 2,
+  borderStyle: 'dashed',
+  borderColor: 'base.100',
+  opacity: 0.5,
+  bg: 'base.800',
+  color: 'base.50',
+  _dark: {
+    borderColor: 'base.200',
+    bg: 'base.900',
+    color: 'base.100',
+  },
+};
+
+const DragPreview = (props: OverlayDragImageProps) => {
+  if (!props.dragData) {
+    return;
+  }
+
+  if (props.dragData.payloadType === 'IMAGE_DTO') {
+    return (
+      <Box
+        sx={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          userSelect: 'none',
+          cursor: 'none',
+        }}
+      >
+        <Image
+          sx={{
+            ...STYLES,
+          }}
+          src={props.dragData.payload.imageDTO.thumbnail_url}
+        />
+      </Box>
+    );
+  }
+
+  if (props.dragData.payloadType === 'IMAGE_NAMES') {
+    return (
+      <Flex
+        sx={{
+          cursor: 'none',
+          userSelect: 'none',
+          position: 'relative',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDir: 'column',
+          ...STYLES,
+        }}
+      >
+        <Heading>{props.dragData.payload.imageNames.length}</Heading>
+        <Heading size="sm">Images</Heading>
+      </Flex>
+    );
+  }
+
+  return null;
+};
+
+export default memo(DragPreview);

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

@@ -1,8 +1,5 @@
 import {
-  DndContext,
-  DragEndEvent,
   DragOverlay,
-  DragStartEvent,
   MouseSensor,
   TouchSensor,
   pointerWithin,
@@ -10,33 +7,45 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { PropsWithChildren, memo, useCallback, useState } from 'react';
-import OverlayDragImage from './OverlayDragImage';
-import { ImageDTO } from 'services/api/types';
-import { isImageDTO } from 'services/api/guards';
+import DragPreview from './DragPreview';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
 import { AnimatePresence, motion } from 'framer-motion';
+import {
+  DndContext,
+  DragEndEvent,
+  DragStartEvent,
+  TypesafeDraggableData,
+} from './typesafeDnd';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { imageDropped } from 'app/store/middleware/listenerMiddleware/listeners/imageDropped';
 
 type ImageDndContextProps = PropsWithChildren;
 
 const ImageDndContext = (props: ImageDndContextProps) => {
-  const [draggedImage, setDraggedImage] = useState<ImageDTO | null>(null);
+  const [activeDragData, setActiveDragData] =
+    useState<TypesafeDraggableData | null>(null);
+
+  const dispatch = useAppDispatch();
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
-    const dragData = event.active.data.current;
-    if (dragData && 'image' in dragData && isImageDTO(dragData.image)) {
-      setDraggedImage(dragData.image);
+    const activeData = event.active.data.current;
+    if (!activeData) {
+      return;
     }
+    setActiveDragData(activeData);
   }, []);
 
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
-      const handleDrop = event.over?.data.current?.handleDrop;
-      if (handleDrop && typeof handleDrop === 'function' && draggedImage) {
-        handleDrop(draggedImage);
+      const activeData = event.active.data.current;
+      const overData = event.over?.data.current;
+      if (!activeData || !overData) {
+        return;
       }
-      setDraggedImage(null);
+      dispatch(imageDropped({ overData, activeData }));
+      setActiveDragData(null);
     },
-    [draggedImage]
+    [dispatch]
   );
 
   const mouseSensor = useSensor(MouseSensor, {
@@ -46,6 +55,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
   const touchSensor = useSensor(TouchSensor, {
     activationConstraint: { delay: 150, tolerance: 5 },
   });
+
   // 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)
@@ -63,7 +73,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
       {props.children}
       <DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
         <AnimatePresence>
-          {draggedImage && (
+          {activeDragData && (
             <motion.div
               layout
               key="overlay-drag-image"
@@ -77,7 +87,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
                 transition: { duration: 0.1 },
               }}
             >
-              <OverlayDragImage image={draggedImage} />
+              <DragPreview dragData={activeDragData} />
             </motion.div>
           )}
         </AnimatePresence>

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

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

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

@@ -0,0 +1,195 @@
+// type-safe dnd from https://github.com/clauderic/dnd-kit/issues/935
+import {
+  Active,
+  Collision,
+  DndContextProps,
+  DndContext as OriginalDndContext,
+  Over,
+  Translate,
+  UseDraggableArguments,
+  UseDroppableArguments,
+  useDraggable as useOriginalDraggable,
+  useDroppable as useOriginalDroppable,
+} from '@dnd-kit/core';
+import { ImageDTO } from 'services/api/types';
+
+type BaseDropData = {
+  id: string;
+};
+
+export type CurrentImageDropData = BaseDropData & {
+  actionType: 'SET_CURRENT_IMAGE';
+};
+
+export type InitialImageDropData = BaseDropData & {
+  actionType: 'SET_INITIAL_IMAGE';
+};
+
+export type ControlNetDropData = BaseDropData & {
+  actionType: 'SET_CONTROLNET_IMAGE';
+  context: {
+    controlNetId: string;
+  };
+};
+
+export type CanvasInitialImageDropData = BaseDropData & {
+  actionType: 'SET_CANVAS_INITIAL_IMAGE';
+};
+
+export type NodesImageDropData = BaseDropData & {
+  actionType: 'SET_NODES_IMAGE';
+  context: {
+    nodeId: string;
+    fieldName: string;
+  };
+};
+
+export type NodesMultiImageDropData = BaseDropData & {
+  actionType: 'SET_MULTI_NODES_IMAGE';
+  context: { nodeId: string; fieldName: string };
+};
+
+export type AddToBatchDropData = BaseDropData & {
+  actionType: 'ADD_TO_BATCH';
+};
+
+export type MoveBoardDropData = BaseDropData & {
+  actionType: 'MOVE_BOARD';
+  context: { boardId: string | null };
+};
+
+export type TypesafeDroppableData =
+  | CurrentImageDropData
+  | InitialImageDropData
+  | ControlNetDropData
+  | CanvasInitialImageDropData
+  | NodesImageDropData
+  | AddToBatchDropData
+  | NodesMultiImageDropData
+  | MoveBoardDropData;
+
+type BaseDragData = {
+  id: string;
+};
+
+export type ImageDraggableData = BaseDragData & {
+  payloadType: 'IMAGE_DTO';
+  payload: { imageDTO: ImageDTO };
+};
+
+export type ImageNamesDraggableData = BaseDragData & {
+  payloadType: 'IMAGE_NAMES';
+  payload: { imageNames: string[] };
+};
+
+export type TypesafeDraggableData =
+  | ImageDraggableData
+  | ImageNamesDraggableData;
+
+interface UseDroppableTypesafeArguments
+  extends Omit<UseDroppableArguments, 'data'> {
+  data?: TypesafeDroppableData;
+}
+
+type UseDroppableTypesafeReturnValue = Omit<
+  ReturnType<typeof useOriginalDroppable>,
+  'active' | 'over'
+> & {
+  active: TypesafeActive | null;
+  over: TypesafeOver | null;
+};
+
+export function useDroppable(props: UseDroppableTypesafeArguments) {
+  return useOriginalDroppable(props) as UseDroppableTypesafeReturnValue;
+}
+
+interface UseDraggableTypesafeArguments
+  extends Omit<UseDraggableArguments, 'data'> {
+  data?: TypesafeDraggableData;
+}
+
+type UseDraggableTypesafeReturnValue = Omit<
+  ReturnType<typeof useOriginalDraggable>,
+  'active' | 'over'
+> & {
+  active: TypesafeActive | null;
+  over: TypesafeOver | null;
+};
+
+export function useDraggable(props: UseDraggableTypesafeArguments) {
+  return useOriginalDraggable(props) as UseDraggableTypesafeReturnValue;
+}
+
+interface TypesafeActive extends Omit<Active, 'data'> {
+  data: React.MutableRefObject<TypesafeDraggableData | undefined>;
+}
+
+interface TypesafeOver extends Omit<Over, 'data'> {
+  data: React.MutableRefObject<TypesafeDroppableData | undefined>;
+}
+
+export const isValidDrop = (
+  overData: TypesafeDroppableData | undefined,
+  active: TypesafeActive | null
+) => {
+  if (!overData || !active?.data.current) {
+    return false;
+  }
+
+  const { actionType } = overData;
+  const { payloadType } = active.data.current;
+
+  if (overData.id === active.data.current.id) {
+    return false;
+  }
+
+  switch (actionType) {
+    case 'SET_CURRENT_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_INITIAL_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_CONTROLNET_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_CANVAS_INITIAL_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_NODES_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_MULTI_NODES_IMAGE':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    case 'ADD_TO_BATCH':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    case 'MOVE_BOARD':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    default:
+      return false;
+  }
+};
+
+interface DragEvent {
+  activatorEvent: Event;
+  active: TypesafeActive;
+  collisions: Collision[] | null;
+  delta: Translate;
+  over: TypesafeOver | null;
+}
+
+export interface DragStartEvent extends Pick<DragEvent, 'active'> {}
+export interface DragMoveEvent extends DragEvent {}
+export interface DragOverEvent extends DragMoveEvent {}
+export interface DragEndEvent extends DragEvent {}
+export 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;
+}
+export function DndContext(props: DndContextTypesafeProps) {
+  return <OriginalDndContext {...props} />;
+}

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

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
-// import { OpenAPI } from 'services/api/types';
 
 import Loading from '../../common/components/Loading/Loading';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@@ -17,11 +16,6 @@ import '../../i18n';
 import { socketMiddleware } from 'services/events/middleware';
 import { Middleware } from '@reduxjs/toolkit';
 import ImageDndContext from './ImageDnd/ImageDndContext';
-import {
-  DeleteImageContext,
-  DeleteImageContextProvider,
-} from 'app/contexts/DeleteImageContext';
-import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
 import { AddImageToBoardContextProvider } from '../contexts/AddImageToBoardContext';
 import { $authToken, $baseUrl } from 'services/api/client';
 import { DeleteBoardImagesContextProvider } from '../contexts/DeleteBoardImagesContext';
@@ -34,7 +28,6 @@ interface Props extends PropsWithChildren {
   token?: string;
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
-  setIsReady?: (isReady: boolean) => void;
   middleware?: Middleware[];
 }
 
@@ -43,7 +36,6 @@ const InvokeAIUI = ({
   token,
   config,
   headerComponent,
-  setIsReady,
   middleware,
 }: Props) => {
   useEffect(() => {
@@ -85,17 +77,11 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <ImageDndContext>
-              <DeleteImageContextProvider>
-                <AddImageToBoardContextProvider>
-                  <DeleteBoardImagesContextProvider>
-                    <App
-                      config={config}
-                      headerComponent={headerComponent}
-                      setIsReady={setIsReady}
-                    />
-                  </DeleteBoardImagesContextProvider>
-                </AddImageToBoardContextProvider>
-              </DeleteImageContextProvider>
+              <AddImageToBoardContextProvider>
+                <DeleteBoardImagesContextProvider>
+                  <App config={config} headerComponent={headerComponent} />
+                </DeleteBoardImagesContextProvider>
+              </AddImageToBoardContextProvider>
             </ImageDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>