@canmingir/link 1.2.8 → 1.2.11

package/src/lib/Flow/core/FlowViewport.jsx

@@ -0,0 +1,259 @@
+import { Box } from "@mui/material";
+import FloatingGraph from "../graph/FloatingGraph";
+import SelectionOverlay from "../selection/SelectionOverlay";
+import { useSelection } from "../selection/SelectionContext";
+
+import React, { useEffect, useRef, useState } from "react";
+
+const FlowViewport = ({
+  children,
+  selectionColor = "#64748b",
+  nodesById,
+  onPaste,
+  onCut,
+  onConnect,
+  floatingNodes = [],
+  variant,
+  style,
+  plugin,
+}) => {
+  const clampZoom = (zoom) => Math.min(2.5, Math.max(0.25, zoom));
+
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectionBox, setSelectionBox] = useState(null);
+
+  const containerRef = useRef(null);
+  const selectionBoxRef = useRef(null);
+  const mousePositionRef = useRef({ x: 0, y: 0 });
+
+  const {
+    clearSelection,
+    selectMultiple,
+    addToSelection,
+    cutSelectedNodes,
+    pasteNodes,
+    selectedIds,
+  } = useSelection();
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onWheel = (e) => {
+      const wantsZoom = e.ctrlKey || e.metaKey;
+      if (!wantsZoom) return;
+      e.preventDefault();
+      const direction = e.deltaY > 0 ? -1 : 1;
+      const factor = direction > 0 ? 1.1 : 1 / 1.1;
+      setZoom((z) => clampZoom(z * factor));
+    };
+    window.addEventListener("wheel", onWheel, { passive: false });
+    return () => window.removeEventListener("wheel", onWheel);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const isMod = e.ctrlKey || e.metaKey;
+      if (!isMod) return;
+
+      if (e.key === "x" && selectedIds.size > 0 && nodesById) {
+        e.preventDefault();
+        cutSelectedNodes(nodesById, onCut);
+      }
+
+      if (e.key === "v" && onPaste) {
+        e.preventDefault();
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        const mousePos = mousePositionRef.current;
+
+        const canvasX = containerRect
+          ? (mousePos.x -
+              containerRect.left -
+              containerRect.width / 2 -
+              offset.x) /
+            zoom
+          : 0;
+        const canvasY = containerRect
+          ? (mousePos.y -
+              containerRect.top -
+              containerRect.height / 2 -
+              offset.y) /
+            zoom
+          : 0;
+
+        pasteNodes(onPaste, canvasX, canvasY);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    cutSelectedNodes,
+    pasteNodes,
+    selectedIds,
+    nodesById,
+    onPaste,
+    onCut,
+    offset,
+    zoom,
+  ]);
+
+  const handleViewportMouseDown = (e) => {
+    if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
+      return;
+
+    if (e.button !== 0) return;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      setSelectionBox({ startX, startY, currentX: startX, currentY: startY });
+      selectionBoxRef.current = {
+        startX,
+        startY,
+        currentX: startX,
+        currentY: startY,
+      };
+
+      const onMove = (ev) => {
+        const newBox = {
+          startX,
+          startY,
+          currentX: ev.clientX,
+          currentY: ev.clientY,
+        };
+        setSelectionBox(newBox);
+        selectionBoxRef.current = newBox;
+      };
+
+      const onUp = () => {
+        if (containerRef.current && selectionBoxRef.current) {
+          const box = selectionBoxRef.current;
+          const nodes = containerRef.current.querySelectorAll("[data-node-id]");
+          const selectedNodeIds = [];
+
+          const boxLeft = Math.min(box.startX, box.currentX);
+          const boxRight = Math.max(box.startX, box.currentX);
+          const boxTop = Math.min(box.startY, box.currentY);
+          const boxBottom = Math.max(box.startY, box.currentY);
+
+          nodes.forEach((node) => {
+            const rect = node.getBoundingClientRect();
+
+            if (
+              rect.left < boxRight &&
+              rect.right > boxLeft &&
+              rect.top < boxBottom &&
+              rect.bottom > boxTop
+            ) {
+              const nodeId = node.getAttribute("data-node-id");
+              if (nodeId) selectedNodeIds.push(nodeId);
+            }
+          });
+
+          if (selectedNodeIds.length > 0) {
+            if (e.shiftKey) {
+              addToSelection(selectedNodeIds);
+            } else {
+              selectMultiple(selectedNodeIds);
+            }
+          }
+        }
+
+        setSelectionBox(null);
+        selectionBoxRef.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      return;
+    }
+
+    clearSelection();
+
+    setIsDragging(true);
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      setOffset({
+        x: startOffset.x + (ev.clientX - startX),
+        y: startOffset.y + (ev.clientY - startY),
+      });
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      onMouseDown={handleViewportMouseDown}
+      sx={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        bgcolor: "none",
+        cursor: isDragging ? "grabbing" : "default",
+        userSelect: "none",
+        position: "relative",
+      }}
+    >
+      <SelectionOverlay box={selectionBox} selectionColor={selectionColor} />
+      <Box
+        sx={{
+          transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+          transformOrigin: "center center",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: isDragging ? "none" : "transform 0.1s ease-out",
+          pointerEvents: "auto",
+          position: "relative",
+        }}
+      >
+        {children}
+        {floatingNodes.map((structure, index) => {
+          const structureKey =
+            (structure && (structure.id || structure.key)) ??
+            `floating-${index}`;
+          return (
+            <FloatingGraph
+              key={structureKey}
+              structure={structure}
+              variant={variant}
+              style={style}
+              plugin={plugin}
+              selectionColor={selectionColor}
+              onConnect={onConnect}
+            />
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+
+export default FlowViewport;

package/src/lib/Flow/graph/FloatingGraph.jsx

@@ -0,0 +1,44 @@
+import { Box } from "@mui/material";
+import FlowNodeView from "../nodes/FlowNodeView";
+import { buildDetachedTree } from "../utils/flowUtils";
+
+import React, { useMemo } from "react";
+
+const FloatingGraph = ({ structure, variant, style, plugin, onConnect }) => {
+  const position = structure?._pastePosition || { x: 0, y: 0 };
+
+  const treesData = useMemo(() => {
+    if (!structure?.roots?.length || !structure?.nodes) return [];
+    return structure.roots
+      .map((rootId) => buildDetachedTree(rootId, structure.nodes))
+      .filter(Boolean);
+  }, [structure]);
+
+  if (!treesData.length) return null;
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        display: "flex",
+        gap: 2,
+      }}
+    >
+      {treesData.map((tree, idx) => (
+        <FlowNodeView
+          key={tree.id || `floating-${idx}`}
+          node={tree}
+          variant={variant}
+          style={style}
+          plugin={plugin}
+          onConnect={onConnect}
+        />
+      ))}
+    </Box>
+  );
+};
+
+export default FloatingGraph;

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]);
+};