@ebubekirylmaz/link-test 1.0.0

package/src/lib/Flow/connectors/DynamicConnector.jsx

@@ -0,0 +1,247 @@
+import React, { useId, useLayoutEffect, useMemo, useState } from "react";
+
+const DynamicConnector = ({
+  containerEl,
+  parentEl,
+  childEls,
+  stroke = "#b1b1b7",
+  strokeWidth = 2,
+  lineStyle = "solid",
+  tick = 0,
+  orientation = "vertical",
+  showDots = false,
+  dotRadius = 4,
+  dotColor,
+  showArrow = true,
+  arrowSize = 6,
+  animated = false,
+  animationSpeed = 1,
+  gradient = null,
+  curvature = 0.5,
+}) => {
+  const uniqueId = useId();
+  const [dims, setDims] = useState(null);
+  const [points, setPoints] = useState({
+    parent: null,
+    children: [],
+  });
+
+  const isHorizontal = orientation === "horizontal";
+
+  useLayoutEffect(() => {
+    if (!containerEl || !parentEl || !childEls?.length) return;
+
+    const update = () => {
+      const cRect = containerEl.getBoundingClientRect();
+      const pRect = parentEl.getBoundingClientRect();
+
+      let parentPoint;
+      let childPoints = [];
+
+      if (isHorizontal) {
+        parentPoint = {
+          x: pRect.right - cRect.left,
+          y: pRect.top + pRect.height / 2 - cRect.top,
+        };
+
+        childPoints = childEls.map((el) => {
+          if (!el) return { x: parentPoint.x + 100, y: parentPoint.y };
+          const r = el.getBoundingClientRect();
+          return {
+            x: r.left - cRect.left,
+            y: r.top + r.height / 2 - cRect.top,
+          };
+        });
+      } else {
+        parentPoint = {
+          x: pRect.left + pRect.width / 2 - cRect.left,
+          y: pRect.bottom - cRect.top,
+        };
+
+        childPoints = childEls.map((el) => {
+          if (!el) return { x: parentPoint.x, y: parentPoint.y + 100 };
+          const r = el.getBoundingClientRect();
+          return {
+            x: r.left + r.width / 2 - cRect.left,
+            y: r.top - cRect.top,
+          };
+        });
+      }
+
+      setPoints({ parent: parentPoint, children: childPoints });
+      setDims({ w: cRect.width, h: cRect.height });
+    };
+
+    update();
+
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    ro.observe(parentEl);
+    childEls.forEach((el) => el && ro.observe(el));
+
+    return () => ro.disconnect();
+  }, [containerEl, parentEl, childEls, tick, isHorizontal]);
+
+  const ids = useMemo(
+    () => ({
+      gradient: `gradient-${uniqueId}`,
+      arrow: `arrow-${uniqueId}`,
+    }),
+    [uniqueId]
+  );
+
+  const getPath = (from, to) => {
+    const dx = Math.abs(to.x - from.x);
+    const dy = Math.abs(to.y - from.y);
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    const baseCurvature = Math.max(40, Math.min(distance * curvature, 150));
+
+    if (isHorizontal) {
+      const cp1x = from.x + baseCurvature;
+      const cp2x = to.x - baseCurvature;
+      return `M ${from.x} ${from.y} C ${cp1x} ${from.y}, ${cp2x} ${to.y}, ${to.x} ${to.y}`;
+    } else {
+      const cp1y = from.y + baseCurvature;
+      const cp2y = to.y - baseCurvature;
+      return `M ${from.x} ${from.y} C ${from.x} ${cp1y}, ${to.x} ${cp2y}, ${to.x} ${to.y}`;
+    }
+  };
+
+  const getDashArray = () => {
+    if (lineStyle === "dashed") return `${strokeWidth * 4},${strokeWidth * 3}`;
+    if (lineStyle === "dotted") return `${strokeWidth},${strokeWidth * 2}`;
+    return undefined;
+  };
+
+  const animationStyle = animated
+    ? `
+    @keyframes flowAnimation {
+      from { stroke-dashoffset: 24; }
+      to { stroke-dashoffset: 0; }
+    }
+  `
+    : "";
+
+  if (!dims || !points.parent || !points.children.length) return null;
+
+  const effectiveDotColor = dotColor || stroke;
+  const dashArray = getDashArray();
+
+  return (
+    <svg
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "visible",
+        zIndex: 0,
+      }}
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${dims.w} ${dims.h}`}
+    >
+      <defs>
+        {gradient && (
+          <linearGradient
+            id={ids.gradient}
+            gradientUnits="userSpaceOnUse"
+            x1={points.parent.x}
+            y1={points.parent.y}
+            x2={points.children[0]?.x || points.parent.x}
+            y2={points.children[0]?.y || points.parent.y}
+          >
+            <stop offset="0%" stopColor={gradient.from} />
+            <stop offset="100%" stopColor={gradient.to} />
+          </linearGradient>
+        )}
+
+        {showArrow && (
+          <marker
+            id={ids.arrow}
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="5"
+            markerWidth={arrowSize}
+            markerHeight={arrowSize}
+            orient="auto-start-reverse"
+          >
+            <path
+              d="M 0 0 L 10 5 L 0 10 z"
+              fill={gradient ? `url(#${ids.gradient})` : stroke}
+            />
+          </marker>
+        )}
+
+        {animated && <style>{animationStyle}</style>}
+      </defs>
+
+      {points.children.map((child, i) => {
+        const pathD = getPath(points.parent, child);
+        const pathStroke = gradient ? `url(#${ids.gradient})` : stroke;
+
+        return (
+          <g key={i}>
+            <path
+              d={pathD}
+              fill="none"
+              stroke={pathStroke}
+              strokeWidth={strokeWidth}
+              strokeDasharray={animated ? "8,4" : dashArray}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              markerEnd={showArrow ? `url(#${ids.arrow})` : undefined}
+              style={{
+                transition: "stroke 0.2s ease, stroke-width 0.2s ease",
+                ...(animated
+                  ? {
+                      animation: `flowAnimation ${
+                        0.5 / animationSpeed
+                      }s linear infinite`,
+                    }
+                  : {}),
+              }}
+            />
+          </g>
+        );
+      })}
+
+      {showDots && (
+        <>
+          <circle
+            cx={points.parent.x}
+            cy={points.parent.y}
+            r={dotRadius}
+            fill={gradient ? gradient.from : effectiveDotColor}
+            stroke="#fff"
+            strokeWidth={1.5}
+            style={{
+              filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+            }}
+          />
+
+          {points.children.map((child, i) => {
+            const dotFill = gradient ? gradient.to : effectiveDotColor;
+
+            return (
+              <circle
+                key={i}
+                cx={child.x}
+                cy={child.y}
+                r={dotRadius}
+                fill={dotFill}
+                stroke="#fff"
+                strokeWidth={1.5}
+                style={{
+                  filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+                }}
+              />
+            );
+          })}
+        </>
+      )}
+    </svg>
+  );
+};
+
+export default DynamicConnector;

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;