@particle-academy/react-fancy 2.8.1 → 2.9.0

package/dist/index.cjs

@@ -11771,7 +11771,7 @@ function useCanvas() {
   return ctx;
 }
 function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
-  const { registerNode, unregisterNode, viewport } = useCanvas();
+  const { registerNode, unregisterNode, viewport, gridSize, snapToGrid } = useCanvas();
   const nodeRef = react.useRef(null);
   const isDragging = react.useRef(false);
   const dragStart = react.useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
@@ -11804,9 +11804,15 @@ function CanvasNode({ children, id, x, y, draggable, onPositionChange, className
       if (!isDragging.current) return;
       const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
       const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
-      onPositionChange?.(dragStart.current.nodeX + dx, dragStart.current.nodeY + dy);
+      let nx = dragStart.current.nodeX + dx;
+      let ny = dragStart.current.nodeY + dy;
+      if (snapToGrid && gridSize > 0) {
+        nx = Math.round(nx / gridSize) * gridSize;
+        ny = Math.round(ny / gridSize) * gridSize;
+      }
+      onPositionChange?.(nx, ny);
     },
-    [viewport.zoom, onPositionChange]
+    [viewport.zoom, onPositionChange, snapToGrid, gridSize]
   );
   const handlePointerUp = react.useCallback(() => {
     isDragging.current = false;
@@ -12054,6 +12060,10 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  gridStyle = "dots",
+  gridSize = 20,
+  gridColor = "rgb(161 161 170 / 0.3)",
+  snapToGrid = false,
   fitOnMount = false,
   className,
   style
@@ -12071,8 +12081,8 @@ function CanvasRoot({
     containerRef
   });
   const ctx = react.useMemo(
-    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef }),
-    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion]
+    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
+    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
   );
   const hasFitted = react.useRef(false);
   react.useEffect(() => {
@@ -12128,9 +12138,13 @@ function CanvasRoot({
           {
             "data-canvas-bg": "",
             className: "absolute inset-0",
-            style: showGrid ? {
-              backgroundImage: `radial-gradient(circle, rgb(161 161 170 / 0.3) 1px, transparent 1px)`,
-              backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
+            style: showGrid && gridStyle !== "none" ? gridStyle === "lines" ? {
+              backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 1px), linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
+              backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
+            } : {
+              backgroundImage: `radial-gradient(circle, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
               backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
             } : void 0
           }
@@ -12847,6 +12861,8 @@ function TreeNode({ node, depth }) {
     dragState,
     setDragState,
     onNodeMove,
+    acceptExternalDrops,
+    onExternalDrop,
     nodes,
     expandNode
   } = useTreeNav();
@@ -12889,14 +12905,18 @@ function TreeNode({ node, depth }) {
     clearAutoExpand();
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
   }, [clearAutoExpand, setDragState]);
+  const isExternalDrag = !dragState.draggedNodeId;
   const handleDragOver = react.useCallback((e) => {
-    if (!dragState.draggedNodeId) return;
-    const sourceId = dragState.draggedNodeId;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    if (isExternalDrag) {
+      if (!acceptExternalDrops) return;
+    } else {
+      const sourceId = dragState.draggedNodeId;
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.dropEffect = isExternalDrag ? "copy" : "move";
     const position = computeDropPosition(e, !!isFolder);
     if (isFolder && !isExpanded && position === "inside") {
       if (!autoExpandTimer.current) {
@@ -12909,9 +12929,9 @@ function TreeNode({ node, depth }) {
       clearAutoExpand();
     }
     if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
-      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+      setDragState({ draggedNodeId: dragState.draggedNodeId, dropTargetId: node.id, dropPosition: position });
     }
-  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  }, [dragState, isExternalDrag, acceptExternalDrops, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
   const handleDragLeave = react.useCallback((e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       clearAutoExpand();
@@ -12925,21 +12945,25 @@ function TreeNode({ node, depth }) {
     e.stopPropagation();
     clearAutoExpand();
     const sourceId = dragState.draggedNodeId;
-    const position = dragState.dropPosition;
-    if (!sourceId || !position) return;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
-    onNodeMove?.(sourceId, node.id, position);
+    const position = dragState.dropPosition ?? computeDropPosition(e, !!isFolder);
+    if (sourceId) {
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+      onNodeMove?.(sourceId, node.id, position);
+    } else if (acceptExternalDrops) {
+      onExternalDrop?.(e, node, position);
+    }
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
-  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  }, [dragState, node, isFolder, nodes, onNodeMove, acceptExternalDrops, onExternalDrop, setDragState, clearAutoExpand]);
   const canDrag = draggable && !node.disabled;
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-react-fancy-tree-node": "",
-      onDragOver: draggable ? handleDragOver : void 0,
-      onDragLeave: draggable ? handleDragLeave : void 0,
-      onDrop: draggable ? handleDrop : void 0,
+      onDragOver: dropEnabled ? handleDragOver : void 0,
+      onDragLeave: dropEnabled ? handleDragLeave : void 0,
+      onDrop: dropEnabled ? handleDrop : void 0,
       children: [
         isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -13012,6 +13036,8 @@ function TreeNavRoot({
   onNodeContextMenu,
   draggable = false,
   onNodeMove,
+  acceptExternalDrops = false,
+  onExternalDrop,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -13065,6 +13091,8 @@ function TreeNavRoot({
       dragState,
       setDragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     }),
@@ -13079,16 +13107,19 @@ function TreeNavRoot({
       draggable,
       dragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     ]
   );
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
       "data-react-fancy-tree-nav": "",
       className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
-      onDragEnd: draggable ? handleDragEnd : void 0,
+      onDragEnd: dropEnabled ? handleDragEnd : void 0,
       children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });