@canmingir/link 1.2.10 → 1.2.12

package/src/lib/Flow/hooks/useGraphOperations.js

@@ -0,0 +1,362 @@
+import { v4 as uuidv4 } from "uuid";
+
+import React, { useCallback } from "react";
+import {
+  addToNext,
+  cleanupReferences,
+  collectSubtree,
+  getRootsToConnect,
+  getSelectedInStructure,
+  removeFromNext,
+  splitFloatingStructure,
+  toNextArray,
+} from "../utils/flowUtils";
+
+export const useGraphOperations = ({
+  nodesById,
+  roots,
+  onChange,
+  floatingNodes,
+  setFloatingNodes,
+  editable,
+}) => {
+  const findFloatingStructure = useCallback(
+    (nodeId) => {
+      const index = floatingNodes.findIndex(
+        (s) => s?.nodes && nodeId in s.nodes
+      );
+      return index >= 0 ? { structure: floatingNodes[index], index } : null;
+    },
+    [floatingNodes]
+  );
+
+  const handleCut = useCallback(
+    (nodeIds) => {
+      if (!editable || !onChange || !nodesById) return;
+
+      const cutSet = new Set(nodeIds);
+
+      const isInMainTree = nodeIds.some((id) => nodesById[id]);
+      const isInFloating = nodeIds.some((id) =>
+        floatingNodes.some((s) => s.nodes?.[id])
+      );
+
+      if (isInMainTree) {
+        const updatedNodes = { ...nodesById };
+        let updatedRoots = [...(roots || [])];
+
+        nodeIds.forEach((cutId) => {
+          const cutNode = updatedNodes[cutId];
+          if (!cutNode) return;
+
+          const parentId = cutNode.previous;
+          const childIds = toNextArray(cutNode.next);
+          const orphanIds = childIds.filter((id) => !cutSet.has(id));
+
+          orphanIds.forEach((orphanId) => {
+            const orphan = updatedNodes[orphanId];
+            if (!orphan) return;
+
+            const hasValidParent =
+              parentId && updatedNodes[parentId] && !cutSet.has(parentId);
+
+            if (hasValidParent) {
+              orphan.previous = parentId;
+              addToNext(updatedNodes[parentId], [orphanId]);
+            } else {
+              delete orphan.previous;
+              if (!updatedRoots.includes(orphanId)) {
+                updatedRoots.push(orphanId);
+              }
+            }
+          });
+        });
+
+        nodeIds.forEach((id) => delete updatedNodes[id]);
+        updatedRoots = updatedRoots.filter((r) => !cutSet.has(r));
+
+        cleanupReferences(updatedNodes, nodeIds);
+
+        onChange({ nodes: updatedNodes, roots: [...new Set(updatedRoots)] });
+      }
+
+      if (isInFloating) {
+        setFloatingNodes((prev) =>
+          prev
+            .map((structure) => {
+              const hasAffectedNodes = nodeIds.some(
+                (id) => structure.nodes?.[id]
+              );
+              if (!hasAffectedNodes) return structure;
+
+              const newNodes = { ...structure.nodes };
+              const newRoots = [...(structure.roots || [])];
+
+              nodeIds.forEach((id) => {
+                if (newNodes[id]) {
+                  const node = newNodes[id];
+                  const childIds = toNextArray(node.next);
+                  const orphanIds = childIds.filter((cid) => !cutSet.has(cid));
+
+                  orphanIds.forEach((orphanId) => {
+                    if (newNodes[orphanId]) {
+                      const parent = node.previous;
+                      if (parent && newNodes[parent] && !cutSet.has(parent)) {
+                        newNodes[orphanId].previous = parent;
+                        addToNext(newNodes[parent], [orphanId]);
+                      } else {
+                        delete newNodes[orphanId].previous;
+                        if (!newRoots.includes(orphanId)) {
+                          newRoots.push(orphanId);
+                        }
+                      }
+                    }
+                  });
+
+                  delete newNodes[id];
+                }
+              });
+
+              const filteredRoots = newRoots.filter(
+                (r) => !cutSet.has(r) && newNodes[r]
+              );
+
+              cleanupReferences(newNodes, nodeIds);
+
+              if (Object.keys(newNodes).length === 0) return null;
+
+              return {
+                ...structure,
+                nodes: newNodes,
+                roots: [...new Set(filteredRoots)],
+              };
+            })
+            .filter(Boolean)
+        );
+      }
+    },
+    [editable, onChange, nodesById, roots, floatingNodes, setFloatingNodes]
+  );
+
+  const handlePaste = useCallback(
+    (structure) => {
+      if (!editable || !structure?.nodes || !structure?.roots?.length) return;
+
+      const mainNodeIds = new Set(Object.keys(nodesById || {}));
+
+      const validNodes = {};
+      const validNodeIds = Object.keys(structure.nodes).filter(
+        (id) => !mainNodeIds.has(id)
+      );
+
+      if (validNodeIds.length === 0) return;
+
+      validNodeIds.forEach((id) => {
+        validNodes[id] = structure.nodes[id];
+      });
+
+      const internalChildIds = new Set();
+
+      validNodeIds.forEach((id) => {
+        const node = validNodes[id];
+
+        const nextIds = toNextArray(node.next || node.raw?.next);
+        nextIds.forEach((childId) => internalChildIds.add(childId));
+      });
+
+      const validRoots = structure.roots.filter(
+        (id) => validNodes[id] && !internalChildIds.has(id)
+      );
+
+      if (validRoots.length === 0) return;
+
+      const newPasteItem = {
+        ...structure,
+        nodes: validNodes,
+        roots: [...new Set(validRoots)],
+        _pasteId: uuidv4(),
+      };
+
+      setFloatingNodes((prev) => {
+        const existingFloatingIds = new Set(
+          prev.flatMap((item) => Object.keys(item.nodes))
+        );
+
+        const hasOverlap = validNodeIds.some((id) =>
+          existingFloatingIds.has(id)
+        );
+
+        if (hasOverlap) {
+          console.log("Paste blocked: Nodes already exist in floating layer.");
+          return prev;
+        }
+
+        return [...prev, newPasteItem];
+      });
+    },
+    [editable, nodesById, setFloatingNodes]
+  );
+
+  const handleConnect = useCallback(
+    (targetNodeId, selectedIds) => {
+      if (!editable || !onChange || !selectedIds?.length) return;
+
+      const targetInTree = nodesById?.[targetNodeId];
+      const targetFloating = findFloatingStructure(targetNodeId);
+      const sourceInTree = selectedIds.some((id) => nodesById?.[id]);
+      const sourceFloating = selectedIds
+        .map((id) => findFloatingStructure(id))
+        .find(Boolean);
+
+      if (sourceFloating && targetInTree) {
+        const { structure, index } = sourceFloating;
+        const selectedInStructure = getSelectedInStructure(
+          structure,
+          selectedIds
+        );
+        if (!selectedInStructure.length) return;
+
+        const rootsToConnect = getRootsToConnect(
+          structure,
+          selectedInStructure
+        );
+        const connectedNodeIds = collectSubtree(
+          structure,
+          rootsToConnect,
+          selectedInStructure
+        );
+
+        const updatedNodes = { ...nodesById };
+
+        connectedNodeIds.forEach((id) => {
+          updatedNodes[id] = { ...structure.nodes[id] };
+        });
+
+        rootsToConnect.forEach((rootId) => {
+          updatedNodes[rootId].previous = targetNodeId;
+        });
+
+        addToNext(updatedNodes[targetNodeId], rootsToConnect);
+
+        onChange({ nodes: updatedNodes, roots });
+
+        setFloatingNodes((prev) => {
+          if (connectedNodeIds.size === Object.keys(structure.nodes).length) {
+            return prev.filter((_, i) => i !== index);
+          }
+
+          const updated = [...prev];
+          updated[index] = splitFloatingStructure(structure, connectedNodeIds);
+          return updated.filter((s) => Object.keys(s.nodes).length > 0);
+        });
+        return;
+      }
+
+      if (sourceInTree && targetFloating) {
+        const { structure, index } = targetFloating;
+        const updatedNodes = { ...nodesById };
+        let updatedRoots = [...(roots || [])];
+
+        selectedIds.forEach((id) => {
+          const node = updatedNodes[id];
+          if (!node) return;
+
+          if (node.previous) {
+            removeFromNext(updatedNodes[node.previous], [id]);
+          }
+
+          updatedRoots = updatedRoots.filter((r) => r !== id);
+          delete updatedNodes[id];
+        });
+
+        onChange({ nodes: updatedNodes, roots: updatedRoots });
+
+        setFloatingNodes((prev) => {
+          const updated = [...prev];
+          const newStructure = {
+            ...structure,
+            nodes: { ...structure.nodes },
+          };
+
+          selectedIds.forEach((id) => {
+            if (nodesById[id]) {
+              newStructure.nodes[id] = {
+                ...nodesById[id],
+                previous: targetNodeId,
+                next: undefined,
+              };
+            }
+          });
+
+          addToNext(newStructure.nodes[targetNodeId], selectedIds);
+          updated[index] = newStructure;
+          return updated;
+        });
+        return;
+      }
+
+      if (sourceFloating && targetFloating) {
+        const { structure: sourceStruct, index: sourceIndex } = sourceFloating;
+        const { index: targetIndex } = targetFloating;
+        if (sourceIndex === targetIndex) return;
+
+        const selectedInStructure = getSelectedInStructure(
+          sourceStruct,
+          selectedIds
+        );
+        if (!selectedInStructure.length) return;
+
+        const rootsToConnect = getRootsToConnect(
+          sourceStruct,
+          selectedInStructure
+        );
+        const connectedNodeIds = collectSubtree(
+          sourceStruct,
+          rootsToConnect,
+          selectedInStructure
+        );
+
+        setFloatingNodes((prev) => {
+          const updated = prev.filter((_, i) => i !== sourceIndex);
+          const adjustedIndex =
+            targetIndex > sourceIndex ? targetIndex - 1 : targetIndex;
+
+          const targetStruct = updated[adjustedIndex];
+          const merged = {
+            ...targetStruct,
+            nodes: { ...targetStruct.nodes },
+          };
+
+          connectedNodeIds.forEach((id) => {
+            merged.nodes[id] = { ...sourceStruct.nodes[id] };
+          });
+
+          rootsToConnect.forEach((rootId) => {
+            merged.nodes[rootId].previous = targetNodeId;
+          });
+
+          addToNext(merged.nodes[targetNodeId], rootsToConnect);
+          updated[adjustedIndex] = merged;
+
+          if (connectedNodeIds.size < Object.keys(sourceStruct.nodes).length) {
+            updated.push(
+              splitFloatingStructure(sourceStruct, connectedNodeIds)
+            );
+          }
+
+          return updated.filter((s) => Object.keys(s.nodes).length > 0);
+        });
+      }
+    },
+    [
+      editable,
+      onChange,
+      nodesById,
+      roots,
+      findFloatingStructure,
+      setFloatingNodes,
+    ]
+  );
+
+  return { handleCut, handlePaste, handleConnect };
+};

package/src/lib/Flow/hooks/useNodeStyle.js

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+
+import {
+  applySemanticTokens,
+  getBaseStyleForVariant,
+  getDecisionNodeStyle,
+} from "../styles";
+
+export const useNodeStyle = ({ node, type, variant, style, plugin }) => {
+  return useMemo(() => {
+    const baseStyle = getBaseStyleForVariant(variant);
+
+    const variantTokens =
+      variant === "decision" ? getDecisionNodeStyle(node?.type) : {};
+
+    let styleTokens = {};
+    if (typeof style === "function") {
+      styleTokens = style(node) || {};
+    } else if (style && typeof style === "object") {
+      styleTokens = style;
+    }
+
+    let resolvedPlugin = null;
+    if (plugin) {
+      if (typeof plugin === "function") {
+        resolvedPlugin = plugin(type, node) || null;
+      } else if (typeof plugin === "object") {
+        resolvedPlugin = plugin;
+      }
+    }
+
+    let pluginTokens = {};
+    if (resolvedPlugin && typeof resolvedPlugin.style === "function") {
+      pluginTokens =
+        resolvedPlugin.style({
+          node,
+          style: styleTokens,
+        }) || {};
+    }
+
+    const rawNodeStyle = {
+      ...baseStyle,
+      ...variantTokens,
+      ...styleTokens,
+      ...pluginTokens,
+    };
+
+    const nodeStyle = applySemanticTokens(rawNodeStyle, baseStyle);
+
+    return {
+      baseStyle,
+      nodeStyle,
+      plugin: resolvedPlugin,
+    };
+  }, [node, type, variant, style, plugin]);
+};

package/src/lib/Flow/index.js

@@ -1 +1 @@
-export { default as Flow } from "./Flow";
+export { default as Flow } from "./core/Flow";

package/src/lib/Flow/nodes/DefaultCard.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { Box, Card, Typography } from "@mui/material";
+
+const DefaultNodeCard = ({
+  title,
+  subtitle,
+  metaEntries,
+  nodeStyle,
+  baseStyle,
+  variant,
+  borderWidth,
+  borderColor,
+  cardWidth,
+  shape,
+  shadowLevel,
+  minHeight,
+  nodeSx = {},
+}) => {
+  const effectiveWidth = cardWidth || 220;
+  const effectiveBorderWidth = borderWidth || 1;
+  const effectiveRadius =
+    typeof shape === "number" ? shape : baseStyle.shape || 4;
+
+  const effectiveShadow =
+    typeof shadowLevel === "number" ? shadowLevel : variant === "card" ? 2 : 1;
+
+  const effectiveMinHeight = minHeight || 80;
+
+  return (
+    <Card
+      sx={{
+        p: 2,
+        width: effectiveWidth,
+        minHeight: effectiveMinHeight,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        position: "relative",
+        borderRadius: effectiveRadius,
+        bgcolor: nodeStyle.bg || "background.paper",
+        border: `${effectiveBorderWidth}px solid ${
+          borderColor || "transparent"
+        }`,
+        boxShadow: effectiveShadow,
+        transition: "background-color 0.3s ease, box-shadow 0.3s ease",
+        "&:hover": {
+          bgcolor: nodeStyle.hoverBg || nodeStyle.bg || "grey.100",
+          boxShadow: effectiveShadow + 1,
+          cursor: "pointer",
+        },
+        ...nodeSx,
+      }}
+    >
+      <Box sx={{ textAlign: "left", width: "100%" }}>
+        <Typography
+          variant="subtitle2"
+          sx={{
+            textAlign: "center",
+            fontWeight: 600,
+            fontSize: 13,
+            mb: subtitle ? 0.5 : 0,
+          }}
+        >
+          {title}
+        </Typography>
+
+        {subtitle && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              textAlign: "center",
+              fontSize: 11,
+              mb: metaEntries.length ? 0.5 : 0,
+            }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+
+        {metaEntries.length > 0 && (
+          <Box sx={{ mt: 0.25 }}>
+            {metaEntries.map(([key, value]) => (
+              <Typography
+                key={key}
+                variant="caption"
+                color="text.secondary"
+                sx={{
+                  textAlign: "center",
+                  display: "block",
+                  fontSize: 10,
+                }}
+              >
+                {key}: {String(value)}
+              </Typography>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Card>
+  );
+};
+
+export default DefaultNodeCard;

package/src/lib/Flow/nodes/DraggableNode.jsx

@@ -0,0 +1,162 @@
+import { Box } from "@mui/material";
+import { useSelection } from "../selection/SelectionContext";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const DraggableNode = ({
+  children,
+  registerRef,
+  onDrag,
+  nodeId,
+  selectionColor = "#64748b",
+  initialPosition,
+  onConnect,
+}) => {
+  const [offset, setOffset] = useState(() =>
+    initialPosition ? { ...initialPosition } : { x: 0, y: 0 }
+  );
+
+  useEffect(() => {
+    if (initialPosition) {
+      setOffset({ ...initialPosition });
+    } else {
+      setOffset({ x: 0, y: 0 });
+    }
+  }, [initialPosition]);
+
+  const localRef = useRef(null);
+  const lastDeltaRef = useRef({ x: 0, y: 0 });
+  const onDragRef = useRef(onDrag);
+
+  const {
+    isSelected,
+    selectNode,
+    toggleSelection,
+    clearSelection,
+    registerNodeHandlers,
+    moveSelectedNodes,
+    selectedIds,
+  } = useSelection();
+
+  const selected = isSelected(nodeId);
+
+  useEffect(() => {
+    onDragRef.current = onDrag;
+  }, [onDrag]);
+
+  useEffect(() => {
+    if (!nodeId) return;
+
+    return registerNodeHandlers(nodeId, {
+      setOffset,
+      onDrag: () => onDragRef.current?.(),
+    });
+  }, [nodeId, registerNodeHandlers]);
+
+  const setRef = useCallback(
+    (el) => {
+      localRef.current = el;
+      registerRef?.(el);
+    },
+    [registerRef]
+  );
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+
+      if (onConnect && e.altKey) {
+        e.preventDefault();
+        onConnect(nodeId, [...selectedIds]);
+        return;
+      }
+
+      if (e.shiftKey || e.ctrlKey || e.metaKey) {
+        toggleSelection(nodeId);
+        return;
+      }
+
+      if (!selected) {
+        clearSelection();
+        selectNode(nodeId);
+      }
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startOffset = { ...offset };
+      lastDeltaRef.current = { x: 0, y: 0 };
+
+      const handleMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+
+        const deltaDx = dx - lastDeltaRef.current.x;
+        const deltaDy = dy - lastDeltaRef.current.y;
+        lastDeltaRef.current = { x: dx, y: dy };
+
+        setOffset({
+          x: startOffset.x + dx,
+          y: startOffset.y + dy,
+        });
+
+        if (selectedIds.size > 1) {
+          moveSelectedNodes(deltaDx, deltaDy, nodeId);
+        }
+
+        onDragRef.current?.();
+      };
+
+      const handleUp = () => {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      };
+
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [
+      nodeId,
+      offset,
+      selected,
+      selectedIds,
+      selectNode,
+      toggleSelection,
+      clearSelection,
+      moveSelectedNodes,
+      onConnect,
+    ]
+  );
+
+  return (
+    <Box
+      ref={setRef}
+      data-node-id={nodeId}
+      onMouseDown={handleMouseDown}
+      sx={{
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+        cursor: "grab",
+        "&:active": { cursor: "grabbing" },
+        ...(selected && {
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: -6,
+            border: `2px solid ${selectionColor}`,
+            borderRadius: "12px",
+            pointerEvents: "none",
+            boxShadow: `0 0 8px ${selectionColor}66`,
+          },
+        }),
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableNode;