@canmingir/link 1.2.10 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "type": "module",
   "exports": {
     ".": "./index.js",

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

@@ -0,0 +1,79 @@
+import FlowNode from "./FlowNode";
+import { useGraphOperations } from "../hooks/useGraphOperations";
+
+import React, { useMemo, useState } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
+
+export const Flow = ({
+  data,
+  variant = "simple",
+  style,
+  plugin,
+  editable = false,
+  onChange,
+}) => {
+  const [floatingNodes, setFloatingNodes] = useState([]);
+
+  const { nodesById, roots } = useMemo(() => assertLinkedGraph(data), [data]);
+
+  const { handleCut, handlePaste, handleConnect } = useGraphOperations({
+    nodesById,
+    roots,
+    onChange,
+    floatingNodes,
+    setFloatingNodes,
+    editable,
+  });
+
+  const allNodesById = useMemo(() => {
+    if (!floatingNodes.length) return nodesById;
+
+    const merged = { ...nodesById };
+
+    for (const structure of floatingNodes) {
+      if (structure?.nodes) {
+        Object.assign(merged, structure.nodes);
+      }
+    }
+
+    return merged;
+  }, [nodesById, floatingNodes]);
+
+  const treeData = useMemo(() => {
+    if (!roots?.length) return null;
+
+    if (roots.length === 1) {
+      return (
+        buildTreeFromLinked(roots[0], nodesById) || {
+          id: roots[0],
+          children: [],
+        }
+      );
+    }
+
+    const children = roots
+      .map((r) => buildTreeFromLinked(r, nodesById))
+      .filter(Boolean);
+
+    return children.length > 0
+      ? { id: "__root__", label: "Start", children }
+      : null;
+  }, [nodesById, roots]);
+
+  return (
+    <FlowNode
+      node={treeData}
+      variant={variant}
+      style={style}
+      plugin={plugin}
+      isRoot={true}
+      nodesById={allNodesById}
+      onPaste={editable ? handlePaste : undefined}
+      onCut={editable ? handleCut : undefined}
+      onConnect={editable ? handleConnect : undefined}
+      floatingNodes={floatingNodes}
+    />
+  );
+};
+
+export default Flow;

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

@@ -0,0 +1,68 @@
+import FlowNodeView from "../nodes/FlowNodeView";
+import FlowViewport from "./FlowViewport";
+import React from "react";
+import { SelectionProvider } from "../selection/SelectionContext";
+import { getBaseStyleForVariant } from "../styles";
+
+const FlowNode = ({
+  isRoot = false,
+  onAddNode,
+  variant,
+  nodesById,
+  onPaste,
+  onCut,
+  onConnect,
+  floatingNodes,
+  style,
+  plugin,
+  node,
+  ...props
+}) => {
+  if (!isRoot) {
+    if (!node) return null;
+    return (
+      <FlowNodeView
+        node={node}
+        onAddNode={onAddNode}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+        onConnect={onConnect}
+        {...props}
+      />
+    );
+  }
+
+  const baseStyle = getBaseStyleForVariant(variant);
+  const selectionColor = baseStyle.selectionColor ?? "#64748b";
+
+  return (
+    <SelectionProvider>
+      <FlowViewport
+        selectionColor={selectionColor}
+        nodesById={nodesById}
+        onPaste={onPaste}
+        onCut={onCut}
+        onConnect={onConnect}
+        floatingNodes={floatingNodes}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+      >
+        {node && (
+          <FlowNodeView
+            node={node}
+            onAddNode={onAddNode}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+            onConnect={onConnect}
+            {...props}
+          />
+        )}
+      </FlowViewport>
+    </SelectionProvider>
+  );
+};
+
+export default FlowNode;

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;