@canmingir/link 1.2.17 → 1.2.18

package/package.json

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

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

@@ -18,6 +18,7 @@ const DynamicConnector = ({
   animationSpeed = 1,
   gradient = null,
   curvature = 0.5,
+  connectorType = "curved",
 }) => {
   const uniqueId = useId();
   const [dims, setDims] = useState(null);
@@ -91,6 +92,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);

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

@@ -56,6 +56,7 @@ const FlowNodeView = ({
     animationSpeed = baseStyle.animationSpeed ?? 1,
     gradient = baseStyle.gradient ?? null,
     curvature = baseStyle.curvature ?? 0.5,
+    connectorType = baseStyle.connectorType ?? "curved",
     selectionColor = baseStyle.selectionColor ?? "#64748b",
   } = nodeStyle;
 
@@ -170,6 +171,7 @@ const FlowNodeView = ({
             animationSpeed={animationSpeed}
             gradient={gradient}
             curvature={curvature}
+            connectorType={connectorType}
           />
 
           <Box

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",
       };
   }
 };