The curved lines are looking clearer now

src/modules/manager/workflowTemplates/components/VisualisetTab.tsx

@@ -23,7 +23,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
   const taskColumnMap = useRef<Map<string, number>>(new Map());
   const visualiserContainerRef = useRef<HTMLDivElement>(null);
   const [taskDOMPositions, setTaskDOMPositions] = useState<
-    Map<string, { x: number; y: number }>
+    Map<string, { x: number; y: number; width: number; height: number }>
   >(new Map());
 
   // Calculate column range directly from taskColumnMap in render
@@ -223,7 +223,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
 
     const containerRect =
       visualiserContainerRef.current.getBoundingClientRect();
-    const positions = new Map<string, { x: number; y: number }>();
+    const positions = new Map<
+      string,
+      { x: number; y: number; width: number; height: number }
+    >();
 
     const nodes =
       visualiserContainerRef.current.querySelectorAll(".visualiser-node");
@@ -246,8 +249,15 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
         ((nodeRect.top - containerRect.top + nodeRect.height / 2) /
           containerRect.height) *
         100;
+      const widthPercent = (nodeRect.width / containerRect.width) * 100;
+      const heightPercent = (nodeRect.height / containerRect.height) * 100;
 
-      positions.set(task.config.guid as string, { x: relX, y: relY });
+      positions.set(task.config.guid as string, {
+        x: relX,
+        y: relY,
+        width: widthPercent,
+        height: heightPercent,
+      });
     });
 
     setTaskDOMPositions(positions);
@@ -557,6 +567,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
     targetX: number;
     sourceY: number;
     targetY: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    targetWidth: number;
+    targetHeight: number;
     curveOffset: number;
   }> => {
     const connections: Array<{
@@ -567,6 +581,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
       targetX: number;
       sourceY: number;
       targetY: number;
+      sourceWidth: number;
+      sourceHeight: number;
+      targetWidth: number;
+      targetHeight: number;
       curveOffset: number;
     }> = [];
 
@@ -591,6 +609,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
               sourceY: sourcePos.y,
               targetX: targetPos.x,
               targetY: targetPos.y,
+              sourceWidth: sourcePos.width,
+              sourceHeight: sourcePos.height,
+              targetWidth: targetPos.width,
+              targetHeight: targetPos.height,
               curveOffset: 0, // Will be calculated below
             });
           }
@@ -825,6 +847,17 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
             const isBackwardFlow = conn.sourceY > conn.targetY;
             const curveDirection = isBackwardFlow ? -1 : 1;
 
+            // Calculate edge points based on curve direction
+            const sourceEdgeX =
+              curveDirection > 0
+                ? conn.sourceX + conn.sourceWidth / 2 // right edge for rightward curves
+                : conn.sourceX - conn.sourceWidth / 2; // left edge for leftward curves
+
+            const targetEdgeX =
+              curveDirection > 0
+                ? conn.targetX + conn.targetWidth / 2 // right edge for rightward curves
+                : conn.targetX - conn.targetWidth / 2; // left edge for leftward curves
+
             const baseControlOffsetX = 20 + Math.abs(conn.curveOffset) * 0.3;
             const controlOffsetY =
               (Math.abs(conn.targetY - conn.sourceY) / 2) * 0.3;
@@ -834,16 +867,16 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
 
             // Calculate text position at the curve's midpoint (t=0.5 on Bezier curve)
             const t = 0.5;
-            const p0 = { x: conn.sourceX, y: conn.sourceY };
+            const p0 = { x: sourceEdgeX, y: conn.sourceY };
             const p1 = {
-              x: conn.sourceX + baseControlOffsetX * curveDirection + offsetX,
+              x: sourceEdgeX + baseControlOffsetX * curveDirection + offsetX,
               y: conn.sourceY + controlOffsetY,
             };
             const p2 = {
-              x: conn.targetX + baseControlOffsetX * curveDirection + offsetX,
+              x: targetEdgeX + baseControlOffsetX * curveDirection + offsetX,
               y: conn.targetY - controlOffsetY,
             };
-            const p3 = { x: conn.targetX, y: conn.targetY };
+            const p3 = { x: targetEdgeX, y: conn.targetY };
 
             // Cubic Bezier curve formula at t
             const textX =
@@ -893,10 +926,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
               >
                 <path
                   className="visualiser-outcome-connector-line"
-                  d={`M ${conn.sourceX} ${conn.sourceY} 
+                  d={`M ${sourceEdgeX} ${conn.sourceY} 
                      C ${p1.x} ${p1.y}, 
                        ${p2.x} ${p2.y}, 
-                       ${conn.targetX} ${conn.targetY}`}
+                       ${targetEdgeX} ${conn.targetY}`}
                 />
                 {/* Directional arrow along curve */}
                 <polygon
@@ -907,7 +940,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
                 {/* End arrow */}
                 <polygon
                   className="visualiser-outcome-connector-arrow"
-                  points={`${conn.targetX - 1},${conn.targetY - 3} ${conn.targetX + 1},${conn.targetY - 3} ${conn.targetX},${conn.targetY}`}
+                  points={`${targetEdgeX - 1},${conn.targetY - 3} ${targetEdgeX + 1},${conn.targetY - 3} ${targetEdgeX},${conn.targetY}`}
                 />
                 <text
                   x={textX}