@canmingir/link 1.2.3 → 1.2.5

package/package.json

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

package/src/lib/Flow/DraggableNode.jsx

@@ -0,0 +1,62 @@
+import { Box } from "@mui/material";
+
+import React, { useRef, useState } from "react";
+
+const DraggableNode = ({ children, registerRef, onDrag }) => {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const localRef = useRef(null);
+
+  const setRef = (el) => {
+    localRef.current = el;
+    if (registerRef) registerRef(el);
+  };
+
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      setOffset({
+        x: startOffset.x + dx,
+        y: startOffset.y + dy,
+      });
+      if (onDrag) onDrag();
+    };
+
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      ref={setRef}
+      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",
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableNode;

package/src/lib/Flow/DynamicConnector.jsx

@@ -0,0 +1,172 @@
+import React, { useLayoutEffect, useState } from "react";
+
+const DynamicConnector = ({
+  containerEl,
+  parentEl,
+  childEls,
+  stroke,
+  strokeWidth,
+  lineStyle,
+  connectorType = "default",
+  tick = 0,
+}) => {
+  const [dims, setDims] = useState(null);
+  const [points, setPoints] = useState({
+    parent: null,
+    children: [],
+    yMid: null,
+  });
+
+  useLayoutEffect(() => {
+    if (!containerEl || !parentEl || !childEls?.length) return;
+
+    const update = () => {
+      const cRect = containerEl.getBoundingClientRect();
+      const pRect = parentEl.getBoundingClientRect();
+
+      const parent = {
+        x: pRect.left + pRect.width / 2 - cRect.left,
+        y: pRect.bottom - cRect.top,
+      };
+
+      const children = childEls.map((el) => {
+        const r = el.getBoundingClientRect();
+        return {
+          x: r.left + r.width / 2 - cRect.left,
+          y: r.top - cRect.top,
+        };
+      });
+
+      const firstTop = Math.min(...children.map((c) => c.y));
+      const yMid =
+        parent.y + Math.max(12, Math.min(24, (firstTop - parent.y) * 0.4));
+
+      setPoints({ parent, children, yMid });
+      setDims({ w: cRect.width, h: cRect.height });
+    };
+
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    ro.observe(parentEl);
+    childEls.forEach((el) => el && ro.observe(el));
+
+    update();
+    return () => ro.disconnect();
+  }, [containerEl, parentEl, childEls, tick]);
+
+  if (!dims || !points.parent || !points.children.length) return null;
+
+  const dash =
+    lineStyle === "dashed"
+      ? `${strokeWidth * 3},${strokeWidth * 2}`
+      : lineStyle === "dotted"
+      ? `${strokeWidth},${strokeWidth * 1.5}`
+      : undefined;
+
+  const onlyOne = points.children.length === 1;
+
+  if (connectorType === "curved" || connectorType === "n8n") {
+    const createN8nPath = (from, to) => {
+      const v = Math.max(32, Math.abs(to.y - from.y) * 0.35);
+      const h = Math.max(24, Math.abs(to.x - from.x) * 0.35);
+
+      const c1 = {
+        x: to.x > from.x ? from.x + h : from.x - h,
+        y: from.y + v,
+      };
+      const c2 = {
+        x: to.x > from.x ? to.x - h : to.x + h,
+        y: to.y - v,
+      };
+
+      return `M ${from.x} ${from.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${to.x} ${to.y}`;
+    };
+
+    return (
+      <svg
+        style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${dims.w} ${dims.h}`}
+      >
+        {points.children.map((child, i) => (
+          <path
+            key={i}
+            d={createN8nPath(points.parent, child)}
+            fill="none"
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={dash}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        ))}
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${dims.w} ${dims.h}`}
+    >
+      {onlyOne ? (
+        <line
+          x1={points.parent.x}
+          y1={points.parent.y}
+          x2={points.children[0].x}
+          y2={points.children[0].y}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeDasharray={dash}
+        />
+      ) : (
+        <>
+          <line
+            x1={points.parent.x}
+            y1={points.parent.y}
+            x2={points.parent.x}
+            y2={points.yMid}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={dash}
+          />
+
+          {(() => {
+            const xs = points.children.map((c) => c.x);
+            const xMin = Math.min(...xs);
+            const xMax = Math.max(...xs);
+            return (
+              <line
+                x1={xMin}
+                y1={points.yMid}
+                x2={xMax}
+                y2={points.yMid}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                strokeDasharray={dash}
+              />
+            );
+          })()}
+
+          {points.children.map((c, i) => (
+            <line
+              key={i}
+              x1={c.x}
+              y1={points.yMid}
+              x2={c.x}
+              y2={c.y}
+              stroke={stroke}
+              strokeWidth={strokeWidth}
+              strokeDasharray={dash}
+            />
+          ))}
+        </>
+      )}
+    </svg>
+  );
+};
+
+export default DynamicConnector;

package/src/lib/Flow/Flow.jsx

@@ -0,0 +1,34 @@
+import FlowNode from "./FlowNode";
+
+import React, { useMemo } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "./flowUtils";
+
+export const Flow = ({ data, variant = "simple", style, plugin }) => {
+  const { nodesById, roots } = useMemo(() => assertLinkedGraph(data), [data]);
+
+  const treeData = useMemo(() => {
+    if (!roots?.length)
+      return { id: "__empty__", label: "(empty)", children: [] };
+
+    if (roots.length === 1) {
+      return (
+        buildTreeFromLinked(roots[0], nodesById) || {
+          id: roots[0],
+          children: [],
+        }
+      );
+    }
+
+    const children = roots
+      .map((r) => buildTreeFromLinked(r, nodesById))
+      .filter(Boolean);
+
+    return { id: "__root__", label: "Root", children };
+  }, [nodesById, roots]);
+
+  return (
+    <FlowNode node={treeData} variant={variant} style={style} plugin={plugin} />
+  );
+};
+
+export default Flow;

package/src/lib/Flow/FlowNode.jsx

@@ -0,0 +1,270 @@
+import DraggableNode from "./DraggableNode";
+import DynamicConnector from "./DynamicConnector";
+import { getContentParts } from "./flowUtils";
+
+import { Box, Card, Typography } from "@mui/material";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  applySemanticTokens,
+  getBaseStyleForVariant,
+  getDecisionNodeStyle,
+  toPxNumber,
+} from "./styles";
+
+const FlowNode = ({ node, type, variant, style, plugin }) => {
+  const baseStyle = getBaseStyleForVariant(variant);
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+
+  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 plugins = null;
+  if (plugin) {
+    if (typeof plugin === "function") {
+      plugin = plugin(type, node);
+    } else if (
+      typeof plugin === "object" &&
+      (typeof plugin.renderNode === "function" ||
+        typeof plugin.resolveStyle === "function")
+    ) {
+      plugins = plugin;
+    }
+  }
+
+  let pluginTokens = {};
+  if (plugins && typeof plugins.resolveStyle === "function") {
+    pluginTokens =
+      plugins.resolveStyle({
+        node,
+        style: styleTokens,
+      }) || {};
+  }
+
+  const rawNodeStyle = {
+    ...baseStyle,
+    ...variantTokens,
+    ...styleTokens,
+    ...pluginTokens,
+  };
+
+  const nodeStyle = applySemanticTokens(rawNodeStyle, baseStyle);
+
+  const {
+    lineColor = baseStyle.lineColor,
+    lineWidth = baseStyle.lineWidth,
+    lineStyle = baseStyle.lineStyle,
+    gap = baseStyle.gap,
+    levelGap = baseStyle.levelGap ?? 2.5,
+    nodeSx = {},
+    borderWidth,
+    borderColor = baseStyle.borderColor,
+    cardWidth,
+    shape,
+    shadowLevel,
+    minHeight,
+    connectorType = baseStyle.connectorType ?? "default",
+  } = nodeStyle;
+
+  const strokeWidth = toPxNumber(lineWidth, 1.5);
+  const dashStyle =
+    lineStyle === "dashed" || lineStyle === "dotted" ? lineStyle : "solid";
+
+  const containerRef = useRef(null);
+  const parentRef = useRef(null);
+  const childRefs = useRef({});
+  const [childElList, setChildElList] = useState([]);
+
+  const [connectorTick, setConnectorTick] = useState(0);
+  const notifyDrag = () => setConnectorTick((t) => t + 1);
+
+  useLayoutEffect(() => {
+    const els = (node.children || [])
+      .map((c) => childRefs.current[c.id])
+      .filter(Boolean);
+    setChildElList(els);
+  }, [node.children]);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      const els = (node.children || [])
+        .map((c) => childRefs.current[c.id])
+        .filter(Boolean);
+      setChildElList(els);
+    }, 0);
+    return () => clearTimeout(t);
+  }, [node.children]);
+
+  const { title, subtitle, metaEntries } = getContentParts(node);
+
+  const renderDefaultCard = () => {
+    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>
+    );
+  };
+
+  const renderContent = () => {
+    if (plugin && typeof plugin.renderNode === "function") {
+      return plugin.renderNode({
+        node,
+        title,
+        subtitle,
+        metaEntries,
+        nodeStyle,
+        baseStyle,
+      });
+    }
+    return renderDefaultCard();
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+      }}
+    >
+      <Box ref={parentRef} sx={{ position: "relative" }}>
+        {renderContent()}
+      </Box>
+
+      {hasChildren && (
+        <>
+          <DynamicConnector
+            containerEl={containerRef.current}
+            parentEl={parentRef.current}
+            childEls={childElList}
+            stroke={lineColor}
+            strokeWidth={strokeWidth}
+            lineStyle={dashStyle}
+            connectorType={connectorType}
+            tick={connectorTick}
+          />
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              columnGap: gap,
+              marginTop: levelGap,
+              position: "relative",
+              alignItems: "flex-start",
+              justifyContent: "center",
+            }}
+          >
+            {node.children.map((child) => (
+              <DraggableNode
+                key={child.id}
+                registerRef={(el) => (childRefs.current[child.id] = el)}
+                onDrag={notifyDrag}
+              >
+                <FlowNode
+                  node={child}
+                  type={type}
+                  variant={variant}
+                  style={style}
+                  plugin={plugin}
+                />
+              </DraggableNode>
+            ))}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default FlowNode;

package/src/lib/Flow/flowUtils.js

@@ -0,0 +1,111 @@
+export function assertLinkedGraph(data) {
+  if (!data || typeof data !== "object") {
+    throw new Error(
+      "FlowChart expected a linked graph object: { nodes, roots? }."
+    );
+  }
+  const { nodes, roots } = data;
+  if (!nodes || typeof nodes !== "object") {
+    throw new Error("FlowChart expected data.nodes to be an object.");
+  }
+
+  let useRoots = Array.isArray(roots) ? [...roots] : null;
+  if (!useRoots || useRoots.length === 0) {
+    useRoots = Object.keys(nodes).filter((id) => !nodes[id]?.previous);
+  }
+  if (useRoots.length === 0) {
+    const first = Object.keys(nodes)[0];
+    if (first) useRoots = [first];
+  }
+
+  for (const r of useRoots) {
+    if (!nodes[r]) throw new Error(`Root id "${r}" not found in data.nodes.`);
+  }
+
+  return { nodesById: nodes, roots: useRoots };
+}
+
+export function buildTreeFromLinked(rootId, nodesById) {
+  if (!rootId || !nodesById?.[rootId]) return null;
+  const seen = new Set();
+
+  const cloneNode = (node) => {
+    if (!node) return null;
+    const { next, previous, children, ...rest } = node;
+    return { ...rest, id: node.id, previous, next, children: [] };
+  };
+
+  const dfs = (id) => {
+    if (!id || seen.has(id) || !nodesById[id]) return null;
+    seen.add(id);
+
+    const node = nodesById[id];
+    const out = cloneNode(node);
+
+    const nextArr = Array.isArray(node.next)
+      ? node.next
+      : node.next != null
+      ? [node.next]
+      : [];
+
+    for (const nxt of nextArr) {
+      const nextId = typeof nxt === "string" ? nxt : nxt?.id;
+      if (!nextId || !nodesById[nextId]) continue;
+
+      const target = nodesById[nextId];
+      if (target.previous == null || target.previous === id) {
+        const built = dfs(nextId);
+        if (built) out.children.push(built);
+      }
+    }
+    return out;
+  };
+
+  return dfs(rootId);
+}
+
+export const getContentParts = (n) => {
+  const entries = Object.entries(n).filter(
+    ([key]) =>
+      key !== "children" && key !== "id" && key !== "previous" && key !== "next"
+  );
+
+  if (entries.length === 0) {
+    return {
+      title: "(empty)",
+      subtitle: null,
+      metaEntries: [],
+    };
+  }
+
+  const preferredTitleKeys = ["label", "title", "name"];
+  const titleEntry =
+    entries.find(([key]) => preferredTitleKeys.includes(key)) || entries[0];
+  const [titleKey, rawTitle] = titleEntry;
+  const title = String(rawTitle);
+  let remaining = entries.filter(([key]) => key !== titleKey);
+
+  const preferredSubtitleKeys = ["description", "role", "type", "status"];
+  const subtitleEntry =
+    remaining.find(([key]) => preferredSubtitleKeys.includes(key)) || null;
+
+  let subtitle = null;
+  if (subtitleEntry) {
+    const [subtitleKey, raw] = subtitleEntry;
+    subtitle = String(raw);
+    remaining = remaining.filter(([key]) => key !== subtitleKey);
+  }
+
+  const metaEntries = remaining
+    .filter(([, value]) => {
+      const t = typeof value;
+      return (
+        (t === "string" || t === "number" || t === "boolean") &&
+        value !== "" &&
+        value !== null
+      );
+    })
+    .map(([k, v]) => [k, v]);
+
+  return { title, subtitle, metaEntries };
+};

package/src/lib/Flow/index.js

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