@noya-app/noya-designsystem 0.1.56 → 0.1.58

package/src/components/sorting/SharedDragProvider.tsx

@@ -1,4 +1,5 @@
 import {
+  Active,
   closestCenter,
   CollisionDetection,
   DndContext,
@@ -6,11 +7,15 @@ import {
   DragMoveEvent,
   DragOverlay,
   DragStartEvent,
+  Over,
   PointerSensor,
   pointerWithin,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
+import { Point, rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import { windowsOf } from "@noya-app/noya-utils";
+import { useStableCallback } from "@noya-app/react-utils";
 import * as React from "react";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -20,19 +25,28 @@ import {
   AnyDragContext,
   DragRegistrationContext,
   DragRegistrationContextType,
-  SharedDragProviderContexts,
+  RegisteredList,
+  SharedDragProps,
   useDragRegistrationManager,
 } from "./DragRegistration";
-import { DragItem } from "./sorting";
+import {
+  DragItem,
+  DragState,
+  MoveDragItemHandler,
+  MoveDragItemParameters,
+  RelativeDropPosition,
+} from "./sorting";
 
 type SharedDragProviderProps = {
   children: React.ReactNode;
-  contexts?: SharedDragProviderContexts;
+  onMoveItem?: MoveDragItemHandler;
+  sharedDragProps?: SharedDragProps;
 };
 
 export function SharedDragProvider({
   children,
-  contexts = {
+  onMoveItem,
+  sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext,
   },
@@ -46,28 +60,19 @@ export function SharedDragProvider({
   );
 
   const mounted = useMounted();
-  const [activeItem, setActiveItem] = React.useState<DragItem | null>(null);
-  const [delta, setDelta] = React.useState({ x: 0, y: 0 });
+  const [dragState, setDragState] = React.useState<DragState>({
+    source: null,
+    target: null,
+    indicator: null,
+  });
+
+  // console.log("dragState", dragState.target);
+
   const { registerList, unregisterList, registeredLists } =
     useDragRegistrationManager();
 
   const activatorEventRef = React.useRef<PointerEvent | null>(null);
 
-  const acceptsListDrop = React.useCallback(
-    (sourceListId: string, targetListId: string) => {
-      const sourceList = registeredLists.get(sourceListId);
-      const targetList = registeredLists.get(targetListId);
-
-      if (!sourceList || !targetList) return false;
-
-      return targetList.acceptsFromList({
-        sourceListId,
-        targetListId,
-      });
-    },
-    [registeredLists]
-  );
-
   const handleDragStart = React.useCallback(
     (event: DragStartEvent) => {
       // Capture the activator event for position calculations
@@ -79,12 +84,16 @@ export function SharedDragProvider({
 
         if (itemIndex >= 0) {
           const dragItem: DragItem = {
-            id: event.active.id,
+            itemId: event.active.id,
             listId,
             index: itemIndex,
           };
 
-          setActiveItem(dragItem);
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null,
+          });
           break;
         }
       }
@@ -92,139 +101,113 @@ export function SharedDragProvider({
     [registeredLists]
   );
 
-  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
-    setDelta({ x: event.delta.x, y: event.delta.y });
-  }, []);
+  const handleDragMove = React.useCallback(
+    (event: DragMoveEvent) => {
+      const { active, over } = event;
+
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
+
+      setDragState({
+        source: dragState.source,
+        target: dropTarget?.target ?? null,
+        indicator: dropTarget?.indicator ?? null,
+      });
+    },
+    [registeredLists, dragState.source]
+  );
+
+  const stableOnMoveItem = useStableCallback(onMoveItem);
 
   const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
-      const activatorEventPoint = activatorEventRef.current
-        ? {
-            x: activatorEventRef.current.clientX,
-            y: activatorEventRef.current.clientY,
-          }
-        : null;
 
-      setActiveItem(null);
-      activatorEventRef.current = null;
-
-      if (!activeItem || !over || active.id === over.id) {
-        return;
-      }
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
 
-      // Find target list and item
-      let targetListId: string | null = null;
-      let targetIndex: number = -1;
+      setDragState({
+        source: null,
+        target: null,
+        indicator: null,
+      });
+      activatorEventRef.current = null;
 
-      for (const [listId, list] of registeredLists) {
-        const itemIndex = list.keys.findIndex((key) => key === over.id);
+      if (!dropTarget) return;
 
-        if (itemIndex >= 0) {
-          targetListId = listId;
-          targetIndex = itemIndex;
-          break;
-        }
+      const sourceList = registeredLists.get(dropTarget.source.listId);
+      const targetList = registeredLists.get(dropTarget.target.listId);
 
-        // Also check if dropping on the list container itself
-        if (over.id === listId) {
-          targetListId = listId;
-          targetIndex = list.keys.length; // Append to end
-          break;
-        }
-      }
+      if (!sourceList || !targetList) return;
 
-      if (!targetListId || !acceptsListDrop(activeItem.listId, targetListId)) {
-        setActiveItem(null);
-        activatorEventRef.current = null;
-        return;
-      }
+      const parameters: MoveDragItemParameters = {
+        sourceIndex: dropTarget.source.index,
+        targetIndex: dropTarget.target.index,
+        position: dropTarget.indicator,
+        sourceListId: dropTarget.source.listId,
+        targetListId: dropTarget.target.listId,
+      };
 
-      const targetList = registeredLists.get(targetListId);
-      const sourceList = registeredLists.get(activeItem.listId);
+      // Both lists have the opportunity to handle the move
+      sourceList.onMoveItem(parameters);
 
-      if (!targetList || !sourceList) {
-        return;
+      if (dropTarget.target.listId !== dropTarget.source.listId) {
+        targetList.onMoveItem(parameters);
       }
 
-      // Handle drops into items within the list
-      if (targetIndex < targetList.keys.length && activatorEventPoint) {
-        // Calculate absolute cursor position
-        const eventX = activatorEventPoint.x;
-        const eventY = activatorEventPoint.y;
-        const currentX = eventX + delta.x;
-        const currentY = eventY + delta.y;
-        const absolutePosition = { x: currentX, y: currentY };
-
-        const indicator = targetList.getDropIndicator({
-          absolutePosition,
-          active,
-          over,
-          sourceListId: activeItem.listId,
-          targetListId,
-        });
-
-        if (!indicator) return;
-
-        // Notify the source list to handle the move
-        sourceList.onMoveItem(
-          activeItem.index,
-          targetIndex,
-          indicator,
-          activeItem.listId,
-          targetListId
-        );
-      }
-      // Handle drops into empty lists or at the end of lists
-      else if (targetIndex >= targetList.keys.length) {
-        // For empty lists or drops at the end, we don't need detailed position validation
-        // Just check if the drop is acceptable with a "below" position
-        const canDrop = targetList.acceptsDrop(
-          activeItem.index,
-          Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
-          "below",
-          activeItem.listId,
-          targetListId
-        );
-
-        if (canDrop) {
-          sourceList.onMoveItem(
-            activeItem.index,
-            targetIndex,
-            "below",
-            activeItem.listId,
-            targetListId
-          );
-        }
-      }
+      stableOnMoveItem?.(parameters);
     },
-    [activeItem, registeredLists, acceptsListDrop, delta]
+    [registeredLists, dragState.source, stableOnMoveItem]
   );
 
   const contextValue: DragRegistrationContextType = React.useMemo(
     () => ({
-      activeItem,
-      delta,
       registerList,
       unregisterList,
     }),
-    [activeItem, delta, registerList, unregisterList]
+    [registerList, unregisterList]
   );
 
-  const activeList = activeItem ? registeredLists.get(activeItem.listId) : null;
+  const activeList = dragState.source
+    ? registeredLists.get(dragState.source.listId)
+    : null;
   const activeDragContextValue: ActiveDragContextType = React.useMemo(
-    () => ({ activeItem, delta }),
-    [activeItem, delta]
+    () => dragState,
+    [dragState]
   );
 
   const collisionDetection = useMemo(() => {
-    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+    return getItemFirstCollisionDetection(registeredLists);
   }, [registeredLists]);
 
   return (
     <AnyDragContext.Provider value={true}>
-      <contexts.dragRegistrationContext.Provider value={contextValue}>
-        <contexts.activeDragContext.Provider value={activeDragContextValue}>
+      <sharedDragProps.dragRegistrationContext.Provider value={contextValue}>
+        <sharedDragProps.activeDragContext.Provider
+          value={activeDragContextValue}
+        >
           <DndContext
             sensors={sensors}
             collisionDetection={collisionDetection}
@@ -235,16 +218,16 @@ export function SharedDragProvider({
             {children}
             {mounted &&
               activeList?.renderOverlay &&
-              activeItem &&
+              dragState.source &&
               createPortal(
                 <DragOverlay dropAnimation={null}>
-                  {activeList.renderOverlay(activeItem.id)}
+                  {activeList.renderOverlay(dragState.source.itemId)}
                 </DragOverlay>,
                 document.body
               )}
           </DndContext>
-        </contexts.activeDragContext.Provider>
-      </contexts.dragRegistrationContext.Provider>
+        </sharedDragProps.activeDragContext.Provider>
+      </sharedDragProps.dragRegistrationContext.Provider>
     </AnyDragContext.Provider>
   );
 }
@@ -279,13 +262,13 @@ export function withDragProvider<T extends object>(
 
 // Custom collision detection that prioritizes items over containers
 export const getItemFirstCollisionDetection =
-  (registeredListIds: string[]): CollisionDetection =>
+  (registeredLists: Map<string, RegisteredList>): CollisionDetection =>
   (parameters) => {
     const pointerCollisions = pointerWithin(parameters);
 
     if (pointerCollisions.length > 0) {
       const itemCollisions = pointerCollisions.filter((collision) => {
-        for (const listId of registeredListIds) {
+        for (const listId of registeredLists.keys()) {
           if (collision.id === listId) {
             return false;
           }
@@ -299,9 +282,149 @@ export const getItemFirstCollisionDetection =
       }
     }
 
-    // Fall back to pointer-based detection (includes containers)
-    // This handles empty lists and edge cases
-    return pointerCollisions.length > 0
-      ? pointerCollisions
-      : closestCenter(parameters);
+    const listCollision = pointerCollisions.at(0);
+    const nearestCenters = closestCenter(parameters);
+
+    // Handle a pointer between items by checking if the pointer is within
+    // a window of two items.
+    if (parameters.pointerCoordinates && listCollision) {
+      const list = registeredLists.get(listCollision.id as string);
+
+      if (list) {
+        const pairs = windowsOf(list.keys, 2);
+
+        for (const pair of pairs) {
+          const clientRects = pair.map(
+            (key) => parameters.droppableRects.get(key)!
+          );
+
+          const merged = unionRects(
+            ...clientRects.map((rect) => ({
+              x: rect.left,
+              y: rect.top,
+              width: rect.width,
+              height: rect.height,
+            }))
+          );
+
+          if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+            return nearestCenters.filter((center) =>
+              pair.some((id) => id === center.id)
+            );
+          }
+        }
+      }
+    }
+
+    // This handles empty lists
+    return pointerCollisions;
   };
+
+function findDropTarget({
+  activationPoint,
+  delta,
+  over,
+  active,
+  source,
+  registeredLists,
+}: {
+  activationPoint: Point;
+  delta: Point;
+  over: Over | null;
+  active: Active;
+  source: DragItem;
+  registeredLists: Map<string, RegisteredList>;
+}):
+  | {
+      source: DragItem;
+      target: DragItem;
+      indicator: RelativeDropPosition;
+    }
+  | undefined {
+  if (!over || active.id === over.id) return;
+
+  // Find target list and item
+  let targetListId: string | null = null;
+  let targetIndex: number = -1;
+
+  for (const [listId, list] of registeredLists) {
+    const itemIndex = list.keys.findIndex((key) => key === over.id);
+
+    if (itemIndex >= 0) {
+      targetListId = listId;
+      targetIndex = itemIndex;
+      break;
+    }
+
+    // Also check if dropping on the list container itself
+    if (over.id === listId) {
+      targetListId = listId;
+      targetIndex = list.keys.length; // Append to end
+      break;
+    }
+  }
+
+  const targetList =
+    targetListId !== null ? registeredLists.get(targetListId) : null;
+  const sourceList = registeredLists.get(source.listId);
+
+  if (
+    !targetList ||
+    !sourceList ||
+    !targetList.acceptsFromList({
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    })
+  ) {
+    return;
+  }
+
+  // Dropping on the list container itself
+  if (over.id === targetList.id) {
+    const canDrop = targetList.acceptsDrop({
+      sourceIndex: source.index,
+      targetIndex: Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
+      position: "below",
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    });
+
+    if (canDrop) {
+      return {
+        source,
+        target: {
+          itemId: over.id,
+          listId: targetList.id,
+          index: targetIndex,
+        },
+        indicator: "below",
+      };
+    }
+  }
+
+  const eventX = activationPoint.x;
+  const eventY = activationPoint.y;
+  const currentX = eventX + delta.x;
+  const currentY = eventY + delta.y;
+  const absolutePosition = { x: currentX, y: currentY };
+
+  const indicator = targetList.getDropIndicator({
+    absolutePosition,
+    active,
+    over,
+    sourceListId: sourceList.id,
+    targetListId: targetList.id,
+  });
+
+  if (indicator) {
+    return {
+      source,
+      target: {
+        itemId: over.id,
+        listId: targetList.id,
+        index: targetIndex,
+      },
+      indicator,
+    };
+  }
+}