dnd-block-tree 0.5.0 → 1.0.0

package/dist/index.mjs

@@ -13,11 +13,11 @@ function extractBlockId(zoneId) {
 }
 
 // src/core/collision.ts
-function computeCollisionScores(droppableContainers, collisionRect) {
+function computeCollisionScores(droppableContainers, collisionRect, snapshotRects) {
   const pointerX = collisionRect.left + collisionRect.width / 2;
   const pointerY = collisionRect.top + collisionRect.height / 2;
   const candidates = droppableContainers.map((container) => {
-    const rect = container.rect.current;
+    const rect = snapshotRects?.get(container.id) ?? container.rect.current;
     if (!rect) return null;
     const distanceToTop = Math.abs(pointerY - rect.top);
     const distanceToBottom = Math.abs(pointerY - rect.bottom);
@@ -27,16 +27,17 @@ function computeCollisionScores(droppableContainers, collisionRect) {
     const isWithinX = pointerX >= rect.left && pointerX <= rect.right;
     let horizontalScore = 0;
     if (isWithinX) {
-      horizontalScore = -rect.left * 0.1;
+      horizontalScore = Math.abs(pointerX - rect.left) * 0.3;
     } else {
       const distanceToZone = pointerX < rect.left ? rect.left - pointerX : pointerX - rect.right;
-      horizontalScore = Math.min(distanceToZone, 50);
+      horizontalScore = distanceToZone * 2;
     }
     return {
       id: container.id,
       data: {
         droppableContainer: container,
-        value: edgeDistance + bias + horizontalScore
+        value: edgeDistance + bias + horizontalScore,
+        left: rect.left
       }
     };
   }).filter((c) => c !== null);
@@ -55,14 +56,14 @@ var weightedVerticalCollision = ({
   const candidates = computeCollisionScores(droppableContainers, collisionRect);
   return candidates.slice(0, 1);
 };
-function createStickyCollision(threshold = 15) {
+function createStickyCollision(threshold = 15, snapshotRef) {
   let currentZoneId = null;
   const detector = ({
     droppableContainers,
     collisionRect
   }) => {
     if (!collisionRect) return [];
-    const candidates = computeCollisionScores(droppableContainers, collisionRect);
+    const candidates = computeCollisionScores(droppableContainers, collisionRect, snapshotRef?.current);
     if (candidates.length === 0) return [];
     const bestCandidate = candidates[0];
     const bestScore = bestCandidate.data.value;
@@ -70,7 +71,11 @@ function createStickyCollision(threshold = 15) {
       const currentCandidate = candidates.find((c) => c.id === currentZoneId);
       if (currentCandidate) {
         const currentScore = currentCandidate.data.value;
-        if (currentScore - bestScore < threshold) {
+        const currentLeft = currentCandidate.data.left;
+        const bestLeft = bestCandidate.data.left;
+        const crossDepth = Math.abs(currentLeft - bestLeft) > 20;
+        const effectiveThreshold = crossDepth ? threshold * 0.25 : threshold;
+        if (currentScore - bestScore < effectiveThreshold) {
           return [currentCandidate];
         }
       }
@@ -232,6 +237,9 @@ function DropZoneComponent({
   );
 }
 var DropZone = memo(DropZoneComponent);
+function GhostPreview({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-dnd-ghost": true, className: "opacity-50", style: { pointerEvents: "none" }, children });
+}
 function DraggableBlock({
   block,
   children,
@@ -318,7 +326,7 @@ function TreeRenderer({
       }
       const GhostRenderer = draggedBlock ? renderers[draggedBlock.type] : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsx("div", { className: "opacity-50 pointer-events-none", style: { minWidth: 0 }, children: GhostRenderer({
+        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsx(GhostPreview, { children: GhostRenderer({
           block: draggedBlock,
           isDragging: true,
           depth
@@ -396,7 +404,7 @@ function TreeRenderer({
     }),
     showGhostHere && previewPosition.index >= filteredBlocks.length && draggedBlock && (() => {
       const GhostRenderer = renderers[draggedBlock.type];
-      return GhostRenderer ? /* @__PURE__ */ jsx("div", { className: "opacity-50 pointer-events-none", style: { minWidth: 0 }, children: GhostRenderer({
+      return GhostRenderer ? /* @__PURE__ */ jsx(GhostPreview, { children: GhostRenderer({
         block: draggedBlock,
         isDragging: true,
         depth
@@ -648,6 +656,23 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = [], or
   }
   if (dragged.id === zoneTargetId) return state;
   const oldList = byParent.get(oldParentId) ?? [];
+  const currentIndexInOldParent = oldList.indexOf(dragged.id);
+  const preNewList = byParent.get(newParentId) ?? [];
+  let targetIndex;
+  if (isInto) {
+    targetIndex = 0;
+  } else if (isEnd) {
+    targetIndex = preNewList.length;
+  } else {
+    const idx = preNewList.indexOf(zoneTargetId);
+    targetIndex = idx === -1 ? preNewList.length : isAfter ? idx + 1 : idx;
+  }
+  if (oldParentId === newParentId && currentIndexInOldParent !== -1) {
+    const adjustedTarget = targetIndex > currentIndexInOldParent ? targetIndex - 1 : targetIndex;
+    if (adjustedTarget === currentIndexInOldParent) {
+      return state;
+    }
+  }
   const filtered = oldList.filter((id) => id !== dragged.id);
   byParent.set(oldParentId, filtered);
   const newList = [...byParent.get(newParentId) ?? []];
@@ -660,10 +685,6 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = [], or
     const idx = newList.indexOf(zoneTargetId);
     insertIndex = idx === -1 ? newList.length : isAfter ? idx + 1 : idx;
   }
-  const currentIndex = newList.indexOf(dragged.id);
-  if (dragged.parentId === newParentId && currentIndex === insertIndex) {
-    return state;
-  }
   newList.splice(insertIndex, 0, dragged.id);
   byParent.set(newParentId, newList);
   let newOrder = dragged.order;
@@ -833,7 +854,20 @@ function BlockTree({
   const cachedReorderRef = useRef(null);
   const fromPositionRef = useRef(null);
   const draggedIdsRef = useRef([]);
-  const stickyCollisionRef = useRef(createStickyCollision(20));
+  const snapshotRectsRef = useRef(null);
+  const needsResnapshot = useRef(false);
+  const stickyCollisionRef = useRef(createStickyCollision(20, snapshotRectsRef));
+  const snapshotZoneRects = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const zones = root.querySelectorAll("[data-zone-id]");
+    const map = /* @__PURE__ */ new Map();
+    zones.forEach((el) => {
+      const id = el.getAttribute("data-zone-id");
+      if (id) map.set(id, el.getBoundingClientRect());
+    });
+    snapshotRectsRef.current = map;
+  }, []);
   const [, forceRender] = useReducer((x) => x + 1, 0);
   const debouncedSetVirtual = useRef(
     debounce((newBlocks) => {
@@ -842,6 +876,7 @@ function BlockTree({
       } else {
         stateRef.current.virtualState = null;
       }
+      needsResnapshot.current = true;
       forceRender();
     }, previewDebounce)
   ).current;
@@ -980,6 +1015,13 @@ function BlockTree({
     }
     lastClickedIdRef.current = blockId;
   }, [multiSelect, selectedIds, setSelectedIds, visibleBlockIds]);
+  useEffect(() => {
+    if (!needsResnapshot.current || !stateRef.current.isDragging) return;
+    needsResnapshot.current = false;
+    requestAnimationFrame(() => {
+      snapshotZoneRects();
+    });
+  });
   useEffect(() => {
     if (!keyboardNavigation || !focusedIdRef.current || !rootRef.current) return;
     const el = rootRef.current.querySelector(`[data-block-id="${focusedIdRef.current}"]`);
@@ -1032,6 +1074,7 @@ function BlockTree({
     stateRef.current.isDragging = true;
     initialBlocksRef.current = [...blocks];
     cachedReorderRef.current = null;
+    needsResnapshot.current = true;
     forceRender();
   }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds, sensorConfig?.hapticFeedback]);
   const handleDragMove = useCallback((event) => {
@@ -1107,6 +1150,7 @@ function BlockTree({
         cachedReorderRef.current = null;
         initialBlocksRef.current = [];
         fromPositionRef.current = null;
+        snapshotRectsRef.current = null;
         forceRender();
         return;
       }
@@ -1146,6 +1190,7 @@ function BlockTree({
     initialBlocksRef.current = [];
     fromPositionRef.current = null;
     draggedIdsRef.current = [];
+    snapshotRectsRef.current = null;
     if (cached && onChange) {
       onChange(cached.reorderedBlocks);
     }
@@ -1174,6 +1219,7 @@ function BlockTree({
     initialBlocksRef.current = [];
     fromPositionRef.current = null;
     draggedIdsRef.current = [];
+    snapshotRectsRef.current = null;
     forceRender();
   }, [blocks, debouncedSetVirtual, debouncedDragMove, onDragCancel, onDragEnd]);
   const handleHover = useCallback((zoneId, _parentId) => {