@canmingir/link 1.2.58 → 1.2.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.58",
+  "version": "1.2.60",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {

package/src/config/schemas.js

@@ -2,7 +2,7 @@ import Joi from "joi";
 
 export const ConfigSchema = Joi.object({
   appId: Joi.string().uuid().required(),
-  name: Joi.string().required(),
+  name: Joi.string().optional().default(""),
   beta: Joi.boolean().optional(),
   base: Joi.string().required(),
   api: Joi.string().uri().required(),

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -73,7 +73,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
             mt: 3,
           }}
         >
-          <Logo sx={{ ml: 4, mb: 1 }} />
+          <Logo maxSize={name ? 100 : 200} sx={{ ml: 4, mb: 1 }} />
           <Link to="/" style={{ textDecoration: "none", color: "white" }}>
             <Typography
               sx={{
@@ -105,7 +105,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
             mt: 3,
           }}
         >
-          <Logo sx={{ ml: 4 }} />
+          <Logo maxSize={name ? 100 : 150} sx={{ ml: name ? 4 : -10 }} />
           <Typography
             sx={{
               ml: 2,

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

@@ -26,6 +26,8 @@ const DynamicConnector = ({
   labelPosition = 0.5,
   labelOffsetX = 0,
   labelOffsetY = -10,
+  startGap = 8,
+  endGap = 10,
 }) => {
   const uniqueId = useId();
   const [dims, setDims] = useState(null);
@@ -53,32 +55,38 @@ const DynamicConnector = ({
       let parentPoint;
       let childPoints = [];
 
+      const headRoom = showArrow ? arrowSize * strokeWidth * 0.5 : 0;
+      const tailInset = startGap;
+      const headInset = endGap + headRoom;
+
       if (isHorizontal) {
         parentPoint = {
-          x: (pRect.right - cRect.left) / scaleX,
+          x: (pRect.right - cRect.left) / scaleX + tailInset,
           y: (pRect.top + pRect.height / 2 - cRect.top) / scaleY,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x + 100, y: parentPoint.y };
           const r = el.getBoundingClientRect();
+          const x = (r.left - cRect.left) / scaleX - headInset;
           return {
-            x: (r.left - cRect.left) / scaleX,
+            x: Math.max(x, parentPoint.x),
             y: (r.top + r.height / 2 - cRect.top) / scaleY,
           };
         });
       } else {
         parentPoint = {
           x: (pRect.left + pRect.width / 2 - cRect.left) / scaleX,
-          y: (pRect.bottom - cRect.top) / scaleY,
+          y: (pRect.bottom - cRect.top) / scaleY + tailInset,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x, y: parentPoint.y + 100 };
           const r = el.getBoundingClientRect();
+          const y = (r.top - cRect.top) / scaleY - headInset;
           return {
             x: (r.left + r.width / 2 - cRect.left) / scaleX,
-            y: (r.top - cRect.top) / scaleY,
+            y: Math.max(y, parentPoint.y),
           };
         });
       }
@@ -95,7 +103,18 @@ const DynamicConnector = ({
     childEls.forEach((el) => el && ro.observe(el));
 
     return () => ro.disconnect();
-  }, [containerEl, parentEl, childEls, tick, isHorizontal]);
+  }, [
+    containerEl,
+    parentEl,
+    childEls,
+    tick,
+    isHorizontal,
+    showArrow,
+    arrowSize,
+    strokeWidth,
+    startGap,
+    endGap,
+  ]);
 
   const ids = useMemo(
     () => ({
@@ -189,15 +208,18 @@ const DynamicConnector = ({
             <marker
               id={ids.arrow}
               viewBox="0 0 10 10"
-              refX="9"
+              refX="10"
               refY="5"
               markerWidth={arrowSize}
               markerHeight={arrowSize}
               orient="auto-start-reverse"
             >
               <path
-                d="M 0 0 L 10 5 L 0 10 z"
+                d="M 0.5 1 L 10 5 L 0.5 9 Z"
                 fill={gradient ? `url(#${ids.gradient})` : stroke}
+                stroke={gradient ? `url(#${ids.gradient})` : stroke}
+                strokeWidth="1"
+                strokeLinejoin="round"
               />
             </marker>
           )}
@@ -209,15 +231,6 @@ const DynamicConnector = ({
           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
@@ -226,7 +239,7 @@ const DynamicConnector = ({
                 stroke={pathStroke}
                 strokeWidth={strokeWidth}
                 strokeDasharray={animated ? "8,4" : dashArray}
-                strokeLinecap="round"
+                strokeLinecap={dashArray || animated ? "round" : "butt"}
                 strokeLinejoin="round"
                 markerEnd={showArrow ? `url(#${ids.arrow})` : undefined}
                 style={{
@@ -258,24 +271,25 @@ const DynamicConnector = ({
               }}
             />
 
-            {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))",
-                  }}
-                />
-              );
-            })}
+            {!showArrow &&
+              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>

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

@@ -1,3 +1,5 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
 import { Box } from "@mui/material";
 import DefaultNodeCard from "./DefaultCard";
 import DraggableNode from "./DraggableNode";
@@ -7,8 +9,6 @@ import { getContentParts } from "../utils/flowUtils";
 import { toPxNumber } from "../styles";
 import { useNodeStyle } from "../hooks/useNodeStyle";
 
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-
 const FlowNodeView = ({
   node,
   type,
@@ -59,6 +59,8 @@ const FlowNodeView = ({
     gradient = baseStyle.gradient ?? null,
     curvature = baseStyle.curvature ?? 0.5,
     connectorType = baseStyle.connectorType ?? "curved",
+    startGap = baseStyle.startGap ?? 8,
+    endGap = baseStyle.endGap ?? 10,
     selectionColor = baseStyle.selectionColor ?? "#64748b",
   } = nodeStyle;
 
@@ -76,6 +78,8 @@ const FlowNodeView = ({
     gradient: edgeStyle.gradient ?? gradient,
     curvature: edgeStyle.curvature ?? curvature,
     connectorType: edgeStyle.connectorType ?? connectorType,
+    startGap: edgeStyle.startGap ?? startGap,
+    endGap: edgeStyle.endGap ?? endGap,
   };
 
   const isHorizontal = direction === "horizontal";
@@ -241,6 +245,9 @@ const FlowNodeView = ({
                   connectorType:
                     childSpecificStyle.connectorType ??
                     childEdgeProps.connectorType,
+                  startGap:
+                    childSpecificStyle.startGap ?? childEdgeProps.startGap,
+                  endGap: childSpecificStyle.endGap ?? childEdgeProps.endGap,
                   label: childSpecificStyle.label,
                   labelStyle: childSpecificStyle.labelStyle,
                   labelPosition: childSpecificStyle.labelPosition,
@@ -278,6 +285,8 @@ const FlowNodeView = ({
                 gradient={childEdgeProps.gradient}
                 curvature={childEdgeProps.curvature}
                 connectorType={childEdgeProps.connectorType}
+                startGap={childEdgeProps.startGap}
+                endGap={childEdgeProps.endGap}
                 label={childEdgeProps.label}
                 labelStyle={childEdgeProps.labelStyle}
                 labelPosition={childEdgeProps.labelPosition}