tidy(ui): dnd stuff

Author: psychedelicious

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/middleware/listenerMiddleware/index.ts

@@ -9,7 +9,6 @@ import { addBatchEnqueuedListener } from 'app/store/middleware/listenerMiddlewar
 import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted';
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
-import { addDndDroppedListener } from 'app/store/middleware/listenerMiddleware/listeners/dnd';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
@@ -93,9 +92,6 @@ addGetOpenAPISchemaListener(startAppListening);
 addWorkflowLoadRequestedListener(startAppListening);
 addUpdateAllNodesRequestedListener(startAppListening);
 
-// DND
-addDndDroppedListener(startAppListening);
-
 // Models
 addModelSelectedListener(startAppListening);
 

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

@@ -0,0 +1,49 @@
+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 { useEntitySelectionColor } from 'features/controlLayers/hooks/useEntitySelectionColor';
+import { entitySelected } from 'features/controlLayers/store/canvasSlice';
+import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
+import type { PropsWithChildren } from 'react';
+import { memo, useCallback, useRef } 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]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const dndState = useCanvasEntityListDnd(ref, entityIdentifier);
+
+  return (
+    <Box position="relative">
+      <Flex
+        // This is used to trigger the post-move flash animation
+        data-entity-id={entityIdentifier.id}
+        ref={ref}
+        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>
+      <DndListDropIndicator dndState={dndState} />
+    </Box>
+  );
+});
+
+CanvasEntityContainer.displayName = 'CanvasEntityContainer';