dnd-block-tree 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useDroppable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DragOverlay as DragOverlay$1, DndContext, useDraggable } from '@dnd-kit/core';
-import { memo, useCallback, useEffect, Fragment, useMemo, useRef, useReducer, createContext, useContext, useState } from 'react';
+import { memo, useCallback, useEffect, Fragment, useMemo, useRef, useReducer, useState, createContext, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
 // src/core/types.ts
@@ -133,7 +133,7 @@ function useConfiguredSensors(config = {}) {
       distance: activationDistance
     };
     touchConstraint = {
-      delay: 200,
+      delay: config.longPressDelay ?? 200,
       tolerance: 5
     };
   }
@@ -195,6 +195,11 @@ function debounce(fn, delay) {
 function generateId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 }
+function triggerHaptic(durationMs = 10) {
+  if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+    navigator.vibrate(durationMs);
+  }
+}
 function DropZoneComponent({
   id,
   parentId,
@@ -276,10 +281,15 @@ function TreeRenderer({
   draggedBlock,
   focusedId,
   selectedIds,
-  onBlockClick
+  onBlockClick,
+  animation,
+  virtualVisibleIds
 }) {
   const items = blocksByParent.get(parentId) ?? [];
-  const filteredBlocks = items.filter((block) => block.id !== activeId);
+  let filteredBlocks = items.filter((block) => block.id !== activeId);
+  if (virtualVisibleIds && depth === 0) {
+    filteredBlocks = filteredBlocks.filter((block) => virtualVisibleIds.has(block.id));
+  }
   const showGhostHere = previewPosition?.parentId === parentId && draggedBlock;
   const containerClass = depth === 0 ? rootClassName : indentClassName;
   return /* @__PURE__ */ jsxs("div", { className: containerClass, style: { minWidth: 0 }, children: [
@@ -323,7 +333,11 @@ function TreeRenderer({
             onBlockClick,
             children: ({ isDragging }) => {
               if (isContainer) {
-                const childContent = isExpanded ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+                const expandStyle = animation?.expandDuration ? {
+                  transition: `opacity ${animation.expandDuration}ms ${animation.easing ?? "ease"}`,
+                  opacity: isExpanded ? 1 : 0
+                } : void 0;
+                const childContent = isExpanded ? /* @__PURE__ */ jsx("div", { style: expandStyle, children: /* @__PURE__ */ jsx(
                   TreeRenderer,
                   {
                     blocks,
@@ -345,7 +359,9 @@ function TreeRenderer({
                     draggedBlock,
                     focusedId,
                     selectedIds,
-                    onBlockClick
+                    onBlockClick,
+                    animation,
+                    virtualVisibleIds
                   }
                 ) }) : null;
                 return Renderer({
@@ -784,18 +800,21 @@ function BlockTree({
   canDrop,
   collisionDetection,
   sensors: sensorConfig,
+  animation,
   initialExpanded,
   orderingStrategy = "integer",
   maxDepth,
   keyboardNavigation = false,
   multiSelect = false,
   selectedIds: externalSelectedIds,
-  onSelectionChange
+  onSelectionChange,
+  virtualize
 }) {
   const sensors = useConfiguredSensors({
     activationDistance: sensorConfig?.activationDistance ?? activationDistance,
     activationDelay: sensorConfig?.activationDelay,
-    tolerance: sensorConfig?.tolerance
+    tolerance: sensorConfig?.tolerance,
+    longPressDelay: sensorConfig?.longPressDelay
   });
   const initialExpandedMap = useMemo(
     () => computeInitialExpanded(blocks, containerTypes, initialExpanded),
@@ -1006,12 +1025,15 @@ function BlockTree({
         setSelectedIds(/* @__PURE__ */ new Set([id]));
       }
     }
+    if (sensorConfig?.hapticFeedback) {
+      triggerHaptic();
+    }
     stateRef.current.activeId = id;
     stateRef.current.isDragging = true;
     initialBlocksRef.current = [...blocks];
     cachedReorderRef.current = null;
     forceRender();
-  }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds]);
+  }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds, sensorConfig?.hapticFeedback]);
   const handleDragMove = useCallback((event) => {
     if (!onDragMove) return;
     const id = stateRef.current.activeId;
@@ -1205,6 +1227,61 @@ function BlockTree({
     forceRender();
   }, [blocks, onExpandChange]);
   toggleExpandRef.current = handleToggleExpand;
+  const virtualContainerRef = useRef(null);
+  const [virtualScroll, setVirtualScroll] = useState({ scrollTop: 0, clientHeight: 0 });
+  useEffect(() => {
+    if (!virtualize) return;
+    const el = virtualContainerRef.current;
+    if (!el) return;
+    setVirtualScroll({ scrollTop: el.scrollTop, clientHeight: el.clientHeight });
+    const onScroll = () => {
+      setVirtualScroll({ scrollTop: el.scrollTop, clientHeight: el.clientHeight });
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [virtualize]);
+  const virtualResult = useMemo(() => {
+    if (!virtualize) return null;
+    const { itemHeight, overscan = 5 } = virtualize;
+    const { scrollTop, clientHeight } = virtualScroll;
+    const totalHeight = visibleBlockIds.length * itemHeight;
+    const startRaw = Math.floor(scrollTop / itemHeight);
+    const visibleCount = Math.ceil(clientHeight / itemHeight);
+    const start = Math.max(0, startRaw - overscan);
+    const end = Math.min(visibleBlockIds.length - 1, startRaw + visibleCount + overscan);
+    const offsetY = start * itemHeight;
+    const visibleSet = /* @__PURE__ */ new Set();
+    for (let i = start; i <= end; i++) {
+      visibleSet.add(visibleBlockIds[i]);
+    }
+    return { totalHeight, offsetY, visibleSet };
+  }, [virtualize, virtualScroll, visibleBlockIds]);
+  const treeContent = /* @__PURE__ */ jsx(
+    TreeRenderer,
+    {
+      blocks,
+      blocksByParent,
+      parentId: null,
+      activeId: stateRef.current.activeId,
+      expandedMap: stateRef.current.expandedMap,
+      renderers,
+      containerTypes,
+      onHover: handleHover,
+      onToggleExpand: handleToggleExpand,
+      dropZoneClassName,
+      dropZoneActiveClassName,
+      indentClassName,
+      rootClassName: className,
+      canDrag,
+      previewPosition,
+      draggedBlock,
+      focusedId: keyboardNavigation ? focusedIdRef.current : void 0,
+      selectedIds: multiSelect ? selectedIds : void 0,
+      onBlockClick: multiSelect ? handleBlockClick : void 0,
+      animation,
+      virtualVisibleIds: virtualResult?.visibleSet ?? null
+    }
+  );
   return /* @__PURE__ */ jsxs(
     DndContext,
     {
@@ -1216,7 +1293,20 @@ function BlockTree({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsx(
+        virtualize ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              virtualContainerRef.current = el;
+              rootRef.current = el;
+            },
+            className,
+            style: { minWidth: 0, overflow: "auto", position: "relative" },
+            onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
+            role: keyboardNavigation ? "tree" : void 0,
+            children: /* @__PURE__ */ jsx("div", { style: { height: virtualResult.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: virtualResult.offsetY, left: 0, right: 0 }, children: treeContent }) })
+          }
+        ) : /* @__PURE__ */ jsx(
           "div",
           {
             ref: rootRef,
@@ -1224,30 +1314,7 @@ function BlockTree({
             style: { minWidth: 0 },
             onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
             role: keyboardNavigation ? "tree" : void 0,
-            children: /* @__PURE__ */ jsx(
-              TreeRenderer,
-              {
-                blocks,
-                blocksByParent,
-                parentId: null,
-                activeId: stateRef.current.activeId,
-                expandedMap: stateRef.current.expandedMap,
-                renderers,
-                containerTypes,
-                onHover: handleHover,
-                onToggleExpand: handleToggleExpand,
-                dropZoneClassName,
-                dropZoneActiveClassName,
-                indentClassName,
-                rootClassName: className,
-                canDrag,
-                previewPosition,
-                draggedBlock,
-                focusedId: keyboardNavigation ? focusedIdRef.current : void 0,
-                selectedIds: multiSelect ? selectedIds : void 0,
-                onBlockClick: multiSelect ? handleBlockClick : void 0
-              }
-            )
+            children: treeContent
           }
         ),
         /* @__PURE__ */ jsx(DragOverlay, { activeBlock, selectedCount: multiSelect ? selectedIds.size : 0, children: dragOverlay })
@@ -1255,6 +1322,16 @@ function BlockTree({
     }
   );
 }
+function BlockTreeSSR({ fallback = null, ...props }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(BlockTree, { ...props });
+}
 function blockReducer(state, action, containerTypes = [], orderingStrategy = "integer", maxDepth) {
   switch (action.type) {
     case "ADD_ITEM": {
@@ -1659,7 +1736,141 @@ function useBlockHistory(initialBlocks, options = {}) {
     canRedo: state.future.length > 0
   };
 }
+function useLayoutAnimation(containerRef, options = {}) {
+  const {
+    duration = 200,
+    easing = "ease",
+    selector = "[data-block-id]"
+  } = options;
+  const prevPositions = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const children = container.querySelectorAll(selector);
+    const currentPositions = /* @__PURE__ */ new Map();
+    children.forEach((el) => {
+      const id = el.dataset.blockId;
+      if (id) {
+        currentPositions.set(id, el.getBoundingClientRect());
+      }
+    });
+    children.forEach((el) => {
+      const htmlEl = el;
+      const id = htmlEl.dataset.blockId;
+      if (!id) return;
+      const prev = prevPositions.current.get(id);
+      const curr = currentPositions.get(id);
+      if (!prev || !curr) return;
+      const deltaY = prev.top - curr.top;
+      const deltaX = prev.left - curr.left;
+      if (deltaY === 0 && deltaX === 0) return;
+      htmlEl.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+      htmlEl.style.transition = "none";
+      requestAnimationFrame(() => {
+        htmlEl.style.transition = `transform ${duration}ms ${easing}`;
+        htmlEl.style.transform = "";
+        const onEnd = () => {
+          htmlEl.style.transition = "";
+          htmlEl.removeEventListener("transitionend", onEnd);
+        };
+        htmlEl.addEventListener("transitionend", onEnd);
+      });
+    });
+    prevPositions.current = currentPositions;
+  });
+}
+function useVirtualTree({
+  containerRef,
+  itemCount,
+  itemHeight,
+  overscan = 5
+}) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const rafId = useRef(0);
+  const handleScroll = useCallback(() => {
+    cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (el) {
+        setScrollTop(el.scrollTop);
+        setContainerHeight(el.clientHeight);
+      }
+    });
+  }, [containerRef]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setScrollTop(el.scrollTop);
+    setContainerHeight(el.clientHeight);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [containerRef, handleScroll]);
+  const totalHeight = itemCount * itemHeight;
+  const startRaw = Math.floor(scrollTop / itemHeight);
+  const visibleCount = Math.ceil(containerHeight / itemHeight);
+  const start = Math.max(0, startRaw - overscan);
+  const end = Math.min(itemCount - 1, startRaw + visibleCount + overscan);
+  const offsetY = start * itemHeight;
+  return {
+    visibleRange: { start, end },
+    totalHeight,
+    offsetY
+  };
+}
+
+// src/utils/serialization.ts
+function flatToNested(blocks) {
+  const byParent = /* @__PURE__ */ new Map();
+  for (const block of blocks) {
+    const key = block.parentId ?? null;
+    const list = byParent.get(key);
+    if (list) {
+      list.push(block);
+    } else {
+      byParent.set(key, [block]);
+    }
+  }
+  for (const list of byParent.values()) {
+    list.sort((a, b) => {
+      if (typeof a.order === "string" && typeof b.order === "string") {
+        return a.order < b.order ? -1 : a.order > b.order ? 1 : 0;
+      }
+      return Number(a.order) - Number(b.order);
+    });
+  }
+  function buildChildren(parentId) {
+    const siblings = byParent.get(parentId) ?? [];
+    return siblings.map((block) => {
+      const { parentId: _p, order: _o, ...rest } = block;
+      return {
+        ...rest,
+        children: buildChildren(block.id)
+      };
+    });
+  }
+  return buildChildren(null);
+}
+function nestedToFlat(nested) {
+  const result = [];
+  function walk(nodes, parentId) {
+    for (let i = 0; i < nodes.length; i++) {
+      const { children, ...rest } = nodes[i];
+      result.push({
+        ...rest,
+        parentId,
+        order: i
+      });
+      walk(children, rest.id);
+    }
+  }
+  walk(nested, null);
+  return result;
+}
 
-export { BlockTree, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, reparentBlockIndex, reparentMultipleBlocks, useBlockHistory, useConfiguredSensors, weightedVerticalCollision };
+export { BlockTree, BlockTreeSSR, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, triggerHaptic, useBlockHistory, useConfiguredSensors, useLayoutAnimation, useVirtualTree, weightedVerticalCollision };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map