@canmingir/link 1.2.8 → 1.2.10

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.10",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/Flow/DraggableNode.jsx

@@ -1,10 +1,44 @@
 import { Box } from "@mui/material";
+import { useSelection } from "./SelectionContext";
 
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-const DraggableNode = ({ children, registerRef, onDrag }) => {
+const DraggableNode = ({
+  children,
+  registerRef,
+  onDrag,
+  nodeId,
+  selectionColor = "#64748b",
+}) => {
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const localRef = useRef(null);
+  const lastDeltaRef = useRef({ x: 0, y: 0 });
+
+  const {
+    isSelected,
+    selectNode,
+    toggleSelection,
+    clearSelection,
+    registerNodeHandlers,
+    moveSelectedNodes,
+    selectedIds,
+  } = useSelection();
+
+  const selected = isSelected(nodeId);
+  const onDragRef = useRef(onDrag);
+
+  useEffect(() => {
+    onDragRef.current = onDrag;
+  }, [onDrag]);
+
+  useEffect(() => {
+    if (nodeId) {
+      return registerNodeHandlers(nodeId, {
+        setOffset,
+        onDrag: () => onDragRef.current?.(),
+      });
+    }
+  }, [nodeId, registerNodeHandlers]);
 
   const setRef = (el) => {
     localRef.current = el;
@@ -15,17 +49,37 @@ const DraggableNode = ({ children, registerRef, onDrag }) => {
     if (e.button !== 0) return;
     e.stopPropagation();
 
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      toggleSelection(nodeId);
+      return;
+    }
+    if (!selected) {
+      clearSelection();
+      selectNode(nodeId);
+    }
+
     const startX = e.clientX;
     const startY = e.clientY;
     const startOffset = { ...offset };
+    lastDeltaRef.current = { x: 0, y: 0 };
 
     const onMove = (ev) => {
       const dx = ev.clientX - startX;
       const dy = ev.clientY - startY;
+
+      const deltaDx = dx - lastDeltaRef.current.x;
+      const deltaDy = dy - lastDeltaRef.current.y;
+      lastDeltaRef.current = { x: dx, y: dy };
+
       setOffset({
         x: startOffset.x + dx,
         y: startOffset.y + dy,
       });
+
+      if (selectedIds.size > 1) {
+        moveSelectedNodes(deltaDx, deltaDy, nodeId);
+      }
+
       if (onDrag) onDrag();
     };
 
@@ -41,6 +95,7 @@ const DraggableNode = ({ children, registerRef, onDrag }) => {
   return (
     <Box
       ref={setRef}
+      data-node-id={nodeId}
       onMouseDown={handleMouseDown}
       sx={{
         display: "inline-flex",
@@ -52,6 +107,17 @@ const DraggableNode = ({ children, registerRef, onDrag }) => {
         "&:active": {
           cursor: "grabbing",
         },
+        ...(selected && {
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: -6,
+            border: `2px solid ${selectionColor}`,
+            borderRadius: "12px",
+            pointerEvents: "none",
+            boxShadow: `0 0 8px ${selectionColor}66`,
+          },
+        }),
       }}
     >
       {children}

package/src/lib/Flow/DynamicConnector.jsx

@@ -1,22 +1,33 @@
-import React, { useLayoutEffect, useState } from "react";
+import React, { useId, useLayoutEffect, useMemo, useState } from "react";
 
 const DynamicConnector = ({
   containerEl,
   parentEl,
   childEls,
-  stroke,
-  strokeWidth,
-  lineStyle,
-  connectorType = "default",
+  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: [],
-    yMid: null,
   });
 
+  const isHorizontal = orientation === "horizontal";
+
   useLayoutEffect(() => {
     if (!containerEl || !parentEl || !childEls?.length) return;
 
@@ -24,25 +35,40 @@ const DynamicConnector = ({
       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) => {
-        if (!el) return { x: parent.x, y: parent.y };
-        const r = el.getBoundingClientRect();
-        return {
-          x: r.left + r.width / 2 - cRect.left,
-          y: r.top - cRect.top,
+      let parentPoint;
+      let childPoints = [];
+
+      if (isHorizontal) {
+        parentPoint = {
+          x: pRect.right - cRect.left,
+          y: pRect.top + pRect.height / 2 - 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));
+        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,
+        };
 
-      setPoints({ parent, children, yMid });
+        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 });
     };
 
@@ -54,119 +80,164 @@ const DynamicConnector = ({
     childEls.forEach((el) => el && ro.observe(el));
 
     return () => ro.disconnect();
-  }, [containerEl, parentEl, childEls, tick]);
+  }, [containerEl, parentEl, childEls, tick, isHorizontal]);
+
+  const ids = useMemo(
+    () => ({
+      gradient: `gradient-${uniqueId}`,
+      arrow: `arrow-${uniqueId}`,
+    }),
+    [uniqueId]
+  );
 
-  if (!dims || !points.parent || !points.children.length) return null;
+  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 dash =
-    lineStyle === "dashed"
-      ? `${strokeWidth * 3},${strokeWidth * 2}`
-      : lineStyle === "dotted"
-      ? `${strokeWidth},${strokeWidth * 1.5}`
-      : undefined;
-
-  const onlyOne = points.children.length === 1;
-
-  const svgProps = {
-    style: {
-      position: "absolute",
-      inset: 0,
-      pointerEvents: "none",
-      overflow: "visible",
-    },
-    width: "100%",
-    height: "100%",
-    viewBox: `0 0 ${dims.w} ${dims.h}`,
+  const getDashArray = () => {
+    if (lineStyle === "dashed") return `${strokeWidth * 4},${strokeWidth * 3}`;
+    if (lineStyle === "dotted") return `${strokeWidth},${strokeWidth * 2}`;
+    return undefined;
   };
 
-  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}`;
-    };
+  const animationStyle = animated
+    ? `
+    @keyframes flowAnimation {
+      from { stroke-dashoffset: 24; }
+      to { stroke-dashoffset: 0; }
+    }
+  `
+    : "";
 
-    return (
-      <svg {...svgProps}>
-        {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>
-    );
-  }
+  if (!dims || !points.parent || !points.children.length) return null;
+
+  const effectiveDotColor = dotColor || stroke;
+  const dashArray = getDashArray();
 
   return (
-    <svg {...svgProps}>
-      {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
+    <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.parent.x}
-            y2={points.yMid}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            strokeDasharray={dash}
+            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))",
+            }}
           />
 
-          {(() => {
-            const xs = points.children.map((c) => c.x);
-            const xMin = Math.min(...xs, points.parent.x);
-            const xMax = Math.max(...xs, points.parent.x);
+          {points.children.map((child, i) => {
+            const dotFill = gradient ? gradient.to : effectiveDotColor;
+
             return (
-              <line
-                x1={xMin}
-                y1={points.yMid}
-                x2={xMax}
-                y2={points.yMid}
-                stroke={stroke}
-                strokeWidth={strokeWidth}
-                strokeDasharray={dash}
+              <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))",
+                }}
               />
             );
-          })()}
-
-          {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>