@canmingir/link 1.2.17 → 1.2.19

package/package.json

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

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

@@ -1,3 +1,5 @@
+import { Box } from "@mui/material";
+
 import React, { useId, useLayoutEffect, useMemo, useState } from "react";
 
 const DynamicConnector = ({
@@ -18,6 +20,12 @@ const DynamicConnector = ({
   animationSpeed = 1,
   gradient = null,
   curvature = 0.5,
+  connectorType = "curved",
+  label = null,
+  labelStyle = {},
+  labelPosition = 0.5,
+  labelOffsetX = 0,
+  labelOffsetY = -10,
 }) => {
   const uniqueId = useId();
   const [dims, setDims] = useState(null);
@@ -91,6 +99,19 @@ const DynamicConnector = ({
   );
 
   const getPath = (from, to) => {
+    const isCornered =
+      connectorType === "cornered" || connectorType === "normal";
+
+    if (isCornered) {
+      if (isHorizontal) {
+        const midX = from.x + (to.x - from.x) / 2;
+        return `M ${from.x} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x} ${to.y}`;
+      }
+
+      const midY = from.y + (to.y - from.y) / 2;
+      return `M ${from.x} ${from.y} L ${from.x} ${midY} L ${to.x} ${midY} L ${to.x} ${to.y}`;
+    }
+
     const dx = Math.abs(to.x - from.x);
     const dy = Math.abs(to.y - from.y);
     const distance = Math.sqrt(dx * dx + dy * dy);
@@ -129,118 +150,169 @@ const DynamicConnector = ({
   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>
-        )}
+    <>
+      <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>
-        )}
+          {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}
+          {animated && <style>{animationStyle}</style>}
+        </defs>
+
+        {points.children.map((child, i) => {
+          const pathD = getPath(points.parent, child);
+          const pathStroke = gradient ? `url(#${ids.gradient})` : stroke;
+
+          const labelX =
+            points.parent.x +
+            (child.x - points.parent.x) * labelPosition +
+            labelOffsetX;
+          const labelY =
+            points.parent.y +
+            (child.y - points.parent.y) * labelPosition +
+            labelOffsetY;
+
+          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={{
-                  filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+                  transition: "stroke 0.2s ease, stroke-width 0.2s ease",
+                  ...(animated
+                    ? {
+                        animation: `flowAnimation ${
+                          0.5 / animationSpeed
+                        }s linear infinite`,
+                      }
+                    : {}),
                 }}
               />
-            );
-          })}
-        </>
-      )}
-    </svg>
+            </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>
+
+      {label &&
+        points.children.map((child, i) => {
+          const labelX =
+            points.parent.x +
+            (child.x - points.parent.x) * labelPosition +
+            labelOffsetX;
+          const labelY =
+            points.parent.y +
+            (child.y - points.parent.y) * labelPosition +
+            labelOffsetY;
+
+          return (
+            <Box
+              key={`label-${i}`}
+              sx={{
+                position: "absolute",
+                left: labelX,
+                top: labelY,
+                transform: "translate(-50%, -50%)",
+                px: 1,
+                py: 0.5,
+                borderRadius: 1,
+                backgroundColor: "background.paper",
+                border: 1,
+                borderColor: labelStyle.color || stroke,
+                fontSize: labelStyle.fontSize || "12px",
+                fontWeight: labelStyle.fontWeight || 600,
+                color: labelStyle.textColor || stroke,
+                pointerEvents: "none",
+                userSelect: "none",
+                zIndex: 10,
+                boxShadow: 1,
+                whiteSpace: "nowrap",
+              }}
+            >
+              {label}
+            </Box>
+          );
+        })}
+    </>
   );
 };
 

package/src/lib/Flow/hooks/useNodeStyle.js

@@ -38,6 +38,15 @@ export const useNodeStyle = ({ node, type, variant, style, plugin }) => {
         }) || {};
     }
 
+    let pluginEdgeTokens = {};
+    if (resolvedPlugin && typeof resolvedPlugin.edge === "function") {
+      pluginEdgeTokens =
+        resolvedPlugin.edge({
+          node,
+          style: styleTokens,
+        }) || {};
+    }
+
     const rawNodeStyle = {
       ...baseStyle,
       ...variantTokens,
@@ -47,9 +56,14 @@ export const useNodeStyle = ({ node, type, variant, style, plugin }) => {
 
     const nodeStyle = applySemanticTokens(rawNodeStyle, baseStyle);
 
+    const edgeStyle = {
+      ...pluginEdgeTokens,
+    };
+
     return {
       baseStyle,
       nodeStyle,
+      edgeStyle,
       plugin: resolvedPlugin,
     };
   }, [node, type, variant, style, plugin]);

package/src/lib/Flow/nodes/FlowNodeView.jsx

@@ -24,6 +24,7 @@ const FlowNodeView = ({
   const {
     baseStyle,
     nodeStyle,
+    edgeStyle,
     plugin: _plugin,
   } = useNodeStyle({
     node,
@@ -56,14 +57,33 @@ const FlowNodeView = ({
     animationSpeed = baseStyle.animationSpeed ?? 1,
     gradient = baseStyle.gradient ?? null,
     curvature = baseStyle.curvature ?? 0.5,
+    connectorType = baseStyle.connectorType ?? "curved",
     selectionColor = baseStyle.selectionColor ?? "#64748b",
   } = nodeStyle;
 
+  const edgeProps = {
+    lineColor: edgeStyle.lineColor ?? lineColor,
+    lineWidth: edgeStyle.lineWidth ?? lineWidth,
+    lineStyle: edgeStyle.lineStyle ?? lineStyle,
+    showDots: edgeStyle.showDots ?? showDots,
+    dotRadius: edgeStyle.dotRadius ?? dotRadius,
+    dotColor: edgeStyle.dotColor ?? dotColor,
+    showArrow: edgeStyle.showArrow ?? showArrow,
+    arrowSize: edgeStyle.arrowSize ?? arrowSize,
+    animated: edgeStyle.animated ?? animated,
+    animationSpeed: edgeStyle.animationSpeed ?? animationSpeed,
+    gradient: edgeStyle.gradient ?? gradient,
+    curvature: edgeStyle.curvature ?? curvature,
+    connectorType: edgeStyle.connectorType ?? connectorType,
+  };
+
   const isHorizontal = direction === "horizontal";
 
-  const strokeWidth = toPxNumber(lineWidth, 1.5);
+  const strokeWidth = toPxNumber(edgeProps.lineWidth, 1.5);
   const dashStyle =
-    lineStyle === "dashed" || lineStyle === "dotted" ? lineStyle : "solid";
+    edgeProps.lineStyle === "dashed" || edgeProps.lineStyle === "dotted"
+      ? edgeProps.lineStyle
+      : "solid";
 
   const containerRef = useRef(null);
   const parentRef = useRef(null);
@@ -152,25 +172,89 @@ const FlowNodeView = ({
 
       {hasChildren && (
         <>
-          <DynamicConnector
-            containerEl={containerRef.current}
-            parentEl={parentRef.current}
-            childEls={childElList}
-            stroke={lineColor}
-            strokeWidth={strokeWidth}
-            lineStyle={dashStyle}
-            tick={connectorTick}
-            orientation={direction}
-            showDots={showDots}
-            dotRadius={dotRadius}
-            dotColor={dotColor}
-            showArrow={showArrow}
-            arrowSize={arrowSize}
-            animated={animated}
-            animationSpeed={animationSpeed}
-            gradient={gradient}
-            curvature={curvature}
-          />
+          {node.children.map((child, index) => {
+            let childEdgeProps = { ...edgeProps };
+            if (_plugin && typeof _plugin.edge === "function") {
+              const childSpecificStyle = _plugin.edge({
+                node,
+                child,
+                style: nodeStyle,
+              });
+              if (childSpecificStyle) {
+                childEdgeProps = {
+                  lineColor:
+                    childSpecificStyle.lineColor ?? childEdgeProps.lineColor,
+                  lineWidth:
+                    childSpecificStyle.lineWidth ?? childEdgeProps.lineWidth,
+                  lineStyle:
+                    childSpecificStyle.lineStyle ?? childEdgeProps.lineStyle,
+                  showDots:
+                    childSpecificStyle.showDots ?? childEdgeProps.showDots,
+                  dotRadius:
+                    childSpecificStyle.dotRadius ?? childEdgeProps.dotRadius,
+                  dotColor:
+                    childSpecificStyle.dotColor ?? childEdgeProps.dotColor,
+                  showArrow:
+                    childSpecificStyle.showArrow ?? childEdgeProps.showArrow,
+                  arrowSize:
+                    childSpecificStyle.arrowSize ?? childEdgeProps.arrowSize,
+                  animated:
+                    childSpecificStyle.animated ?? childEdgeProps.animated,
+                  animationSpeed:
+                    childSpecificStyle.animationSpeed ??
+                    childEdgeProps.animationSpeed,
+                  gradient:
+                    childSpecificStyle.gradient ?? childEdgeProps.gradient,
+                  curvature:
+                    childSpecificStyle.curvature ?? childEdgeProps.curvature,
+                  connectorType:
+                    childSpecificStyle.connectorType ??
+                    childEdgeProps.connectorType,
+                  label: childSpecificStyle.label,
+                  labelStyle: childSpecificStyle.labelStyle,
+                  labelPosition: childSpecificStyle.labelPosition,
+                  labelOffsetX: childSpecificStyle.labelOffsetX,
+                  labelOffsetY: childSpecificStyle.labelOffsetY,
+                };
+              }
+            }
+
+            const childStrokeWidth = toPxNumber(childEdgeProps.lineWidth, 1.5);
+            const childDashStyle =
+              childEdgeProps.lineStyle === "dashed" ||
+              childEdgeProps.lineStyle === "dotted"
+                ? childEdgeProps.lineStyle
+                : "solid";
+
+            return (
+              <DynamicConnector
+                key={child.id}
+                containerEl={containerRef.current}
+                parentEl={parentRef.current}
+                childEls={[childElList[index]]}
+                stroke={childEdgeProps.lineColor}
+                strokeWidth={childStrokeWidth}
+                lineStyle={childDashStyle}
+                tick={connectorTick}
+                orientation={direction}
+                showDots={childEdgeProps.showDots}
+                dotRadius={childEdgeProps.dotRadius}
+                dotColor={childEdgeProps.dotColor}
+                showArrow={childEdgeProps.showArrow}
+                arrowSize={childEdgeProps.arrowSize}
+                animated={childEdgeProps.animated}
+                animationSpeed={childEdgeProps.animationSpeed}
+                gradient={childEdgeProps.gradient}
+                curvature={childEdgeProps.curvature}
+                connectorType={childEdgeProps.connectorType}
+                label={childEdgeProps.label}
+                labelStyle={childEdgeProps.labelStyle}
+                labelPosition={childEdgeProps.labelPosition}
+                labelOffsetX={childEdgeProps.labelOffsetX}
+                labelOffsetY={childEdgeProps.labelOffsetY}
+              />
+            );
+          })}
 
           <Box
             sx={{

package/src/lib/Flow/styles.js

@@ -25,6 +25,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "pill":
       return {
@@ -44,6 +45,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.4,
+        connectorType: "curved",
       };
     case "n8n":
       return {
@@ -63,6 +65,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "simple":
     default:
@@ -83,6 +86,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
   }
 };