@canmingir/link 1.2.8 → 1.2.11

package/.github/workflows/publish.yml

@@ -1,9 +1,66 @@
-name: publish
+name: Publish NPM Package
+
 on:
-    push:
-      tags:
-        - v[0-9]+.[0-9]+.[0-9]+
+  workflow_dispatch:
+    inputs:
+      version_type:
+        description: 'Version bump type'
+        required: true
+        default: 'patch'
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+  release:
+    types: [created]
+
 jobs:
-  deploy:
-    uses: NucleoidAI/actions/.github/workflows/publish.yml@main
-    secrets: inherit
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Configure Git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Bump version
+        id: version_bump
+        run: |
+          npm version ${{ github.event.inputs.version_type }} -m "Bump version to %s [skip ci]"
+          echo "NEW_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+          git push --follow-tags
+      
+      - name: Publish to NPM
+        id: npm_publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Notify Slack
+        uses: slackapi/slack-github-action@v2.0.0
+        with:
+          webhook: https://hooks.slack.com/services/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
+          webhook-type: incoming-webhook
+          payload: |
+            {
+              "text": "Successfully published @canmingir/link@${{ steps.version_bump.outputs.NEW_VERSION }}"
+            }

package/package.json

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

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;