Function generateEdgePath

frontend/src/webview-client/utils.ts:157–201

(
    edge: any,
    sourceNode: any,
    targetNode: any,
    workflowGroups: any[],
    targetWidth: number = 200,
    targetHeight: number = 54,
    sourceWidth: number = 200,
    sourceHeight: number = 54,
    allEdges: any[] = []
)

 * For top-down layout: exit bottom, bend horizontally, enter top
 */
export function generateEdgePath(
    edge: any,
    sourceNode: any,
    targetNode: any,
    workflowGroups: any[],
    targetWidth: number = 200,
    targetHeight: number = 54,
    sourceWidth: number = 200,
    sourceHeight: number = 54,
    allEdges: any[] = []
): string {
    // Validate nodes exist and have valid coordinates
    if (!sourceNode || !targetNode ||
        typeof sourceNode.x !== 'number' || typeof sourceNode.y !== 'number' ||
        typeof targetNode.x !== 'number' || typeof targetNode.y !== 'number' ||
        isNaN(sourceNode.x) || isNaN(sourceNode.y) ||
        isNaN(targetNode.x) || isNaN(targetNode.y)) {
        console.warn(`Invalid edge coordinates for ${edge.source} -> ${edge.target}`);
        return '';
    }

    // Use dynamic dimensions from node if available
    const srcWidth = sourceNode.width || sourceWidth;
    const srcHeight = sourceNode.height || sourceHeight;
    const tgtWidth = targetNode.width || targetWidth;
    const tgtHeight = targetNode.height || targetHeight;

    // For top-down layout: source exits from bottom, target enters from top
    const startX = sourceNode.x;
    const startY = sourceNode.y + srcHeight / 2;  // Bottom of source
    const endX = targetNode.x;
    const endY = targetNode.y - tgtHeight / 2 - ARROW_HEAD_LENGTH;  // Top of target (with arrow offset)

    // If nodes are vertically aligned (or very close), draw straight line
    if (Math.abs(startX - endX) < 5) {
        return `M${startX},${startY} L${endX},${endY}`;
    }

    // Create orthogonal path with one horizontal segment
    // Midpoint Y is halfway between source bottom and target top
    const midY = (startY + endY) / 2;

    // Path: down from source, horizontal, down to target
    return `M${startX},${startY} L${startX},${midY} L${endX},${midY} L${endX},${endY}`;
}