@sapui5/sap.suite.ui.commons 1.136.12 → 1.136.15

package/src/sap/suite/ui/commons/networkgraph/util/ConnectionPathUtils.js

@@ -0,0 +1,1420 @@
+/*!
+ * 
+		SAP UI development toolkit for HTML5 (SAPUI5)
+		(c) Copyright 2009-2015 SAP SE. All rights reserved
+	
+ */
+sap.ui.define([
+    "sap/suite/ui/commons/library"
+], function (library) {
+    "use strict";
+    const ConnectionType = library.networkgraph.ConnectionType;
+    const GRID_SIZE = 54; // Size of each grid cell
+    const MIN_EDGE_LENGTH = 44; // Minimum length of an edge to avoid too short lines
+    /**
+     * Utility class for calculating connection paths between nodes in network graphs.
+     * This utility provides a method to normalize lines and calculate path coordinates
+     * based on different connection types.
+     *
+     * @namespace sap.suite.ui.commons.networkgraph.util.ConnectionPathUtils
+     * @public
+     * @since 1.136.19
+     */
+    var ConnectionPathUtils = {
+        /**
+         * Gets the effective connection type for path calculation based on RTL mode.
+         * In RTL mode, semantic directions are reversed since nodes are already mirrored.
+         *
+         * @param {string} sConnectionType - The configured connection type
+         * @param {boolean} bIsRTL - Whether RTL mode is enabled
+         * @returns {string} The effective connection type to use for calculations
+         * @private
+         */
+        _getEffectiveConnectionType: function (sConnectionType, bIsRTL) {
+            if (!bIsRTL) {
+                return sConnectionType;
+            }
+
+            // In RTL mode, semantic directions are reversed (nodes are already mirrored)
+            const rtlMapping = {
+                [ConnectionType.RightToLeft]: ConnectionType.LeftToRight,
+                [ConnectionType.LeftToRight]: ConnectionType.RightToLeft,
+                [ConnectionType.LeftToLeft]: ConnectionType.RightToRight,
+                [ConnectionType.RightToRight]: ConnectionType.LeftToLeft
+            };
+
+            return rtlMapping[sConnectionType] || sConnectionType;
+        },
+
+        /**
+         * Normalizes lines in a network graph by calculating path coordinates
+         * between source and target nodes based on connection types.
+         *
+         * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+         * @param {object} [mConfig] - Configuration object
+         * @param {number} [mConfig.gridSize=50] - Size of each grid cell
+         * @param {number} [mConfig.minEdgeLength=20] - Minimum length of an edge
+         * @public
+         */
+        normalizeLines: function (oGraph, mConfig) {
+            const config = Object.assign({
+                gridSize: GRID_SIZE,
+                minEdgeLength: MIN_EDGE_LENGTH
+            }, mConfig || {});
+
+            // Enable multiple directed arrows feature when using ConnectionPathUtils
+            oGraph._enableMultipleDirectedArrows = true;
+
+            // Detect RTL mode from graph
+            const bIsRTL = oGraph._bIsRtl || false;
+            const bEnhanced = oGraph.getEnableEnhancedLineRouting ? oGraph.getEnableEnhancedLineRouting() : false;
+
+            try {
+                if (bEnhanced) {
+                    this._routingRowCache = this._buildRoutingRowCache(oGraph.getNodes(), config.gridSize);
+
+                    // Precompute per-node connection counts once to avoid rescanning all lines on each call.
+                    // Keys are normalized to strings on both write and read — node keys may be numeric
+                    // while Line#getFrom/getTo return them as-is, and Map.get() uses strict key identity.
+                    this._analysisCache = new Map();
+                    oGraph.getNodes().forEach(function(oNode) {
+                        this._analysisCache.set(String(oNode.getKey()), { leftIncoming: 0, leftOutgoing: 0, rightIncoming: 0, rightOutgoing: 0 });
+                    }, this);
+                    oGraph.getLines().forEach(function(oLine) {
+                        if (!oLine.getVisible() || oLine._isIgnored()) { return; }
+                        var sFrom = oLine.getFrom();
+                        var sTo = oLine.getTo();
+                        var sType = oLine.getConnectionType();
+                        var oFrom = this._analysisCache.get(String(sFrom));
+                        var oTo = this._analysisCache.get(String(sTo));
+                        if (oFrom) {
+                            switch (sType) {
+                                case "LeftToLeft": case "LeftToRight": oFrom.leftOutgoing++; break;
+                                default: oFrom.rightOutgoing++; break;
+                            }
+                        }
+                        if (oTo) {
+                            switch (sType) {
+                                case "LeftToLeft": case "RightToLeft": oTo.leftIncoming++; break;
+                                default: oTo.rightIncoming++; break;
+                            }
+                        }
+                    }, this);
+                }
+                // Iterate over all lines in the graph
+                oGraph.getLines().forEach((oLine) => {
+                    const configuredConnectionType = oLine.getConnectionType(); // Get the connection type, if not configured at Line level then the default is Right to Left from source to target.
+                    // In RTL mode, use effective connection type (semantically reversed)
+                    const effectiveConnectionType = this._getEffectiveConnectionType(configuredConnectionType, bIsRTL);
+                    const oSourceNode = oLine.getFromNode();
+                    const oTargetNode = oLine.getToNode();
+                    // Get anchor coordinates for source and target nodes, usually the center of the respective sides
+                    const oSourceAnchor = this._getNodeAnchorCoordinates(oLine.getFromNode(), effectiveConnectionType, "source");
+                    const oTargetAnchor = this._getNodeAnchorCoordinates(oLine.getToNode(), effectiveConnectionType, "target");
+
+                    const mParams = {
+                        sourceAnchor: oSourceAnchor,
+                        targetAnchor: oTargetAnchor,
+                        sourceNode: oSourceNode,
+                        targetNode: oTargetNode,
+                        sConnectionType: effectiveConnectionType,
+                        gridSize: config.gridSize,
+                        minEdgeLength: config.minEdgeLength,
+                        bEnhanced: bEnhanced
+                    };
+                    // Calculate the path coordinates between the source and target anchors
+                    const aCoordinates = this._calculatePathCoordinates(mParams);
+                    // set the anchor points of the source and target nodes on the line as source and target for drawing the path.
+                    oLine.setSource({
+                        x: oSourceAnchor.x,
+                        y: oSourceAnchor.y
+                    });
+                    oLine.setTarget({
+                        x: oTargetAnchor.x,
+                        y: oTargetAnchor.y
+                    });
+                    // Set the calculated bend points on the line
+                    oLine.clearBends();
+                    // Set the calculated bend points on the line, determined by the connection type.
+                    if (aCoordinates && aCoordinates.length) {
+                        aCoordinates.forEach((oBend) => {
+                            oLine.addBend(oBend);
+                        });
+                    }
+                });
+            } finally {
+                this._routingRowCache = null;
+                this._analysisCache = null;
+            }
+
+            if (bEnhanced) {
+                this._resolveLineNodeCollisions(oGraph.getLines(), oGraph.getNodes(), config.gridSize);
+            }
+        },
+        /**
+         * Calculates path coordinates between source and target anchors based on connection type.
+         *
+         * @param {object} mParams - Parameters for path calculation
+         * @param {object} mParams.sourceAnchor - Source anchor coordinates {x, y}
+         * @param {object} mParams.targetAnchor - Target anchor coordinates {x, y}
+         * @param {object} mParams.sourceNode - Source node object
+         * @param {object} mParams.targetNode - Target node object
+         * @param {string} mParams.sConnectionType - Connection type
+         * @param {number} [mParams.gridSize=50] - Grid size for calculations
+         * @param {number} [mParams.minEdgeLength=20] - Minimum edge length
+         * @returns {Array<object>} Array of bend point coordinates
+         * @private
+         */
+        _calculatePathCoordinates: function (mParams) {
+            const { sConnectionType } = mParams;
+            switch (sConnectionType) {
+                case ConnectionType.RightToLeft:
+                    return this._handleRightToLeftConnection(mParams);
+                case ConnectionType.LeftToRight:
+                    return this._handleLeftToRightConnection(mParams);
+                case ConnectionType.LeftToLeft:
+                    return this._handleLeftToLeftConnection(mParams);
+                case ConnectionType.RightToRight:
+                    return this._handleRightToRightConnection(mParams);
+                default:
+                    // default RightToLeft case
+                    // This is a fallback for any unrecognized connection type
+                    return this._handleRightToLeftConnection(mParams);
+            }
+        },
+        /**
+         * ╔══════════════════════════════════════════════════════════════════════════════╗
+         * ║                        RIGHT-TO-LEFT CONNECTION HANDLER                      ║
+         * ╠══════════════════════════════════════════════════════════════════════════════╣
+         * ║                                                                              ║
+         * ║  [SRC NODE]→  ········→  ←[TGT NODE]                                         ║
+         * ║                                                                              ║
+         * ║  Calculates optimal path from right anchor of source to left anchor of       ║
+         * ║  target, creating L-shaped, U-shaped, Z-bend, or S-shaped connections        ║
+         * ║  based on node positions and grid constraints.                               ║
+         * ║                                                                              ║
+         * ╚══════════════════════════════════════════════════════════════════════════════╝
+         */
+        /**
+         * Handles RightToLeft connection path calculation.
+         * Connection flows from the right side of source node to the left side of target node.
+         *
+         * @param {object} mParams - Parameters for path calculation
+         * @returns {Array<object>} Array of bend point coordinates
+         * @private
+         */
+         _handleRightToLeftConnection: function (mParams) {
+            const { sourceNode, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH, bEnhanced } = mParams;
+            const { x1, y1, x2, y2, AX1, AY1, AX2, AY2, dx } = this._transformSourceTargetCoordinates(mParams);
+
+            // CASE 1: Source and target nodes are on the same horizontal line (y1 === y2)
+            if (y1 === y2) {
+                if (x2 > x1) {
+                    // SCENARIO 1A: Direct horizontal connection (source right → target left)
+                    // Check if anchors are aligned and connection pattern allows straight line
+                    const anchorVerticalOffset = Math.abs(AY1 - AY2);
+                    const shouldUseStraightLine = this._shouldUseHorizontalStraightLine(mParams.sourceNode, mParams.targetNode, mParams.sConnectionType);
+
+                    if (shouldUseStraightLine && anchorVerticalOffset <= 5) {
+                        // Visual: [SRC]----→[TGT] (perfect alignment)
+                        return [];
+                    } else if (anchorVerticalOffset > 5) {
+                        // Offset anchors due to different node heights in the same row.
+                        // For skip-layer (intermediate nodes exist), route using corridor to avoid
+                        // the vertical Z-bend passing through intermediate nodes.
+                        if (bEnhanced) {
+                            const iNodeWidthOff = sourceNode._iWidth || 0;
+                            const iHorizontalGapOff = x2 - (x1 + iNodeWidthOff);
+                            if (iHorizontalGapOff > Math.max(iNodeWidthOff, gridSize)) {
+                                const xDrop = this.getRightGridIntersectionPoint(x1 + iNodeWidthOff, AY1, gridSize, minEdgeLength).x;
+                                const xRise = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                                const y3 = this._getRoutingYBelow(sourceNode, gridSize);
+                                return [{ x: xDrop, y: AY1 }, { x: xDrop, y: y3 }, { x: xRise, y: y3 }, { x: xRise, y: AY2 }];
+                            }
+                        }
+                        // Adjacent nodes — simple Z-bend through the gap between them
+                        const midX = AX1 + (AX2 - AX1) / 2;
+                        return [
+                            { x: midX, y: AY1 },
+                            { x: midX, y: AY2 }
+                        ];
+                    } else {
+                        // Multiple connections from same side.
+                        if (bEnhanced) {
+                            // If the gap is large enough to suggest intermediate nodes, route below
+                            // to avoid the line passing through them visually.
+                            const iNodeWidth = sourceNode._iWidth || 0;
+                            const iHorizontalGap = x2 - (x1 + iNodeWidth);
+                            if (iHorizontalGap > Math.max(iNodeWidth, gridSize)) {
+                                const xDrop = this.getRightGridIntersectionPoint(x1 + iNodeWidth, AY1, gridSize, minEdgeLength).x;
+                                const xRise = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                                const y3 = this._getRoutingYBelow(sourceNode, gridSize);
+                                return [{ x: xDrop, y: AY1 }, { x: xDrop, y: y3 }, { x: xRise, y: y3 }, { x: xRise, y: AY2 }];
+                            }
+                        }
+                        return [];
+                    }
+                } else if (x1 >= x2) {
+                    // SCENARIO 1B: Backward horizontal connection (source overlaps/behind target)
+                    // Visual: [TGT]    [SRC]
+                    //             ↑----→ |
+                    //             |      |
+                    //             ←------↓
+                    // Create U-shaped path going around both nodes
+                    const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+
+                    return [
+                        { x: x3, y: AY1 }, // Right from source
+                        { x: x3, y: y3 },  // Down below both nodes
+                        { x: x4, y: y3 },  // Left to target column
+                        { x: x4, y: AY2 }  // Up to target
+                    ];
+                }
+            } else if (y1 != y2) {
+                if (x1 <= x2) {
+                    // SCENARIO 2A: Source is to the left or aligned with target
+                    if (dx >= minEdgeLength + sourceNode._iWidth) {
+                        if (Math.abs(x1 + sourceNode._iWidth - x2) <= gridSize) {
+                            // SCENARIO 2A1: Nodes are close - use midpoint connection
+                            // Visual: [SRC]→  ←[TGT]
+                            //              |  |
+                            //              ↓  ↑
+                            //              (midpoint)
+                            const x3 = AX1 + (x2 - (x1 + sourceNode._iWidth)) / 2;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                        } else {
+                            // SCENARIO 2A2: Nodes are far apart
+                            // If the horizontal gap is larger than one node width, intermediate nodes
+                            // likely occupy the space — route the vertical segments at source/target
+                            // column boundaries to avoid passing through them.
+                            const iGap = x2 - (x1 + sourceNode._iWidth);
+                            if (bEnhanced && iGap > sourceNode._iWidth) {
+                                // SCENARIO 2A2-SKIP: Skip-layer connection.
+                                // First go right to the nearest grid point (so the line visually exits the
+                                // source from the center-right side), then drop/rise outside intermediate
+                                // columns, then go horizontally to the target.
+                                // Visual (y1 ≤ y2):  [SRC]→——|        Visual (y1 > y2):  [SRC]→——|
+                                //                            |                                    ↑
+                                //                            ↓————————→ |             ←———————————|
+                                //                                       ↑
+                                //                                    ←[TGT]
+                                const xDrop = this.getRightGridIntersectionPoint(x1 + sourceNode._iWidth, AY1, gridSize, minEdgeLength).x;
+                                const xRise = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                                let y3;
+                                if (y1 <= y2) {
+                                    y3 = this._getRoutingYBelow(sourceNode, gridSize);
+                                } else {
+                                    y3 = this.getTopGridIntersectionPoint(xDrop, Math.min(y1, y2), gridSize, minEdgeLength).y;
+                                    if (y3 <= 0) {
+                                        y3 = this._getRoutingYBelow(sourceNode, gridSize);
+                                    }
+                                }
+                                return [{ x: xDrop, y: AY1 }, { x: xDrop, y: y3 }, { x: xRise, y: y3 }, { x: xRise, y: AY2 }];
+                            } else {
+                                // SCENARIO 2A2: Adjacent layers — grid-aligned Z-bend
+                                // Visual: [SRC]→ |
+                                //               |
+                                //               ↓
+                                //               ←[TGT]
+                                const x3 = this.getRightGridIntersectionPoint(x1 + sourceNode._iWidth, AY1, gridSize, minEdgeLength).x;
+                                return [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                            }
+                        }
+                    } else if (dx <= minEdgeLength + sourceNode._iWidth) {
+                        // SCENARIO 2B: Nodes are too close - create S-shaped path
+                        if (y1 < y2) {
+                            // SCENARIO 2B1: Source above target - S-bend going down
+                            // Visual: [SRC]→ |
+                            //               |
+                            //               ↓----→ |
+                            //                     |
+                            //                     ↓
+                            //               ←[TGT]
+                            const x3 = this.getRightGridIntersectionPoint(x1 + sourceNode._iWidth, y1, gridSize, minEdgeLength).x;
+                            const x4 = this.getLeftGridIntersectionPoint(x2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        } else if (y1 > y2) {
+                            // SCENARIO 2B2: Source below target - S-bend going up
+                            // Visual:       ←[TGT]
+                            //                     ↑
+                            //               ↑----→ |
+                            //               |
+                            //               |
+                            // [SRC]→ |
+                            const x3 = this.getRightGridIntersectionPoint(AX1, AY2, gridSize, minEdgeLength).x;
+                            const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    }
+                } else if (x1 > x2) {
+                    // SCENARIO 3: Source is to the right of target - create S-shaped path
+                    if (y1 < y2) {
+                        // SCENARIO 3A: Source above and right of target - S-bend down and left
+                        // Visual:       [SRC]→ |
+                        //                     |
+                        //                     ↓
+                        // ←[TGT]    ←---------
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+                        return [
+                            { x: x3, y: AY1 }, // Right from source
+                            { x: x3, y: y3 },  // Down past both nodes
+                            { x: x4, y: y3 },  // Left to target column
+                            { x: x4, y: AY2 }  // Up to target
+                        ];
+                    } else if (y1 > y2) {
+                        // SCENARIO 3B: Source below and right of target - S-bend up and left
+                        // Visual: ←[TGT]    ←---------
+                        //                           ↑
+                        //                           |
+                        //       [SRC]→ |
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        const y3 = this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                        return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                    }
+                }
+            }
+            // DEFAULT: No bends needed (direct connection possible)
+            return [];
+        },
+        /**
+         * ╔══════════════════════════════════════════════════════════════════════════════╗
+         * ║                        LEFT-TO-RIGHT CONNECTION HANDLER                      ║
+         * ╠══════════════════════════════════════════════════════════════════════════════╣
+         * ║                                                                              ║
+         * ║  ←[SRC NODE]  ········→  [TGT NODE]→                                         ║
+         * ║                                                                              ║
+         * ║  Calculates optimal path from left anchor of source to right anchor of       ║
+         * ║  target, creating direct, U-shaped, Z-bend, or S-shaped connections          ║
+         * ║  based on node positions and grid alignment.                                 ║
+         * ║                                                                              ║
+         * ╚══════════════════════════════════════════════════════════════════════════════╝
+         */
+        /**
+         * Handles LeftToRight connection path calculation.
+         * Connection flows from the left side of source node to the right side of target node.
+         *
+         * @param {object} mParams - Parameters for path calculation
+         * @returns {Array<object>} Array of bend point coordinates
+         * @private
+         */
+        _handleLeftToRightConnection: function (mParams) {
+            const { sourceNode, targetNode, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH, bEnhanced } = mParams;
+            const { x1, y1, x2, y2, AX1, AY1, AX2, AY2, dx } = this._transformSourceTargetCoordinates(mParams);
+            // CASE 1: Source and target nodes are on the same horizontal line (y1 === y2)
+            if (y1 === y2) {
+                if (x1 > x2) {
+                    // SCENARIO 1A: Direct horizontal connection (source left → target right, but source is actually to the right)
+                    // Check if anchors are aligned and connection pattern allows straight line
+                    const anchorVerticalOffset = Math.abs(AY1 - AY2);
+                    const shouldUseStraightLine = this._shouldUseHorizontalStraightLine(mParams.sourceNode, mParams.targetNode, mParams.sConnectionType);
+
+                    if (shouldUseStraightLine && anchorVerticalOffset <= 5) {
+                        // Visual: [TGT]←----[SRC] (perfect alignment)
+                        return [];
+                    } else if (anchorVerticalOffset > 5) {
+                        // Visual: ←[SRC]     [TGT]→ (offset anchors - add horizontal correction)
+                        //          |           |
+                        //          └───────────┘
+                        const midX = AX1 + (AX2 - AX1) / 2;
+                        return [
+                            { x: midX, y: AY1 },
+                            { x: midX, y: AY2 }
+                        ];
+                    } else {
+                        // Multiple connections - use straight line anyway for now
+                        return [];
+                    }
+                } else if (x1 <= x2) {
+                    // SCENARIO 1B: Forward horizontal connection but needs U-shape (source overlaps/in front of target)
+                    // Visual: [SRC] [TGT]
+                    //          ↓----→ |
+                    //          |      |
+                    //          ↑------↓
+                    // Create U-shaped path going around both nodes
+                    const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+
+                    return [
+                        { x: x3, y: AY1 }, // Right from source
+                        { x: x3, y: y3 },  // Down below both nodes
+                        { x: x4, y: y3 },  // Left to target column
+                        { x: x4, y: AY2 }  // Up to target
+                    ];
+                }
+            } else if (y1 != y2) {
+                // CASE 2: Source and target nodes are on different horizontal lines (y1 != y2)
+                if (x1 >= x2) {
+                    // SCENARIO 2A: Source is to the right or aligned with target
+                    if (dx >= minEdgeLength + targetNode._iWidth) {
+                        if (Math.abs(x1 - (x2 + targetNode._iWidth)) <= gridSize) {
+                            // SCENARIO 2A1: Nodes are close - use midpoint connection
+                            // Visual: ←[SRC]  [TGT]→
+                            //         |        |
+                            //         ↓        ↑
+                            //         (midpoint)
+                            const x3 = (AX1 + AX2) / 2;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                        } else {
+                            // SCENARIO 2A2: Nodes are far apart - use grid-aligned Z-bend
+                            // Visual: ←[SRC] |
+                            //               |
+                            //               ↓
+                            //         [TGT]→
+                            const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                        }
+                    } else if (dx <= minEdgeLength + targetNode._iWidth) {
+                        // SCENARIO 2B: Nodes are too close - create S-shaped path
+                        if (y1 < y2) {
+                            // SCENARIO 2B1: Source above target - S-bend going down
+                            // Visual: ←[SRC] |
+                            //               |
+                            //         ←---- ↓
+                            //         |
+                            //         ↓
+                            //         [TGT]→
+                            const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                            const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        } else if (y1 > y2) {
+                            // SCENARIO 2B2: Source below target - S-bend going up
+                            // Visual:         [TGT]→
+                            //                     ↑
+                            //         ←------     |
+                            //         |
+                            //         |
+                            // ←[SRC] |
+                            const x3 = this.getLeftGridIntersectionPoint(AX1, AY2, gridSize, minEdgeLength).x;
+                            const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    }
+                } else if (x1 < x2) {
+                    // SCENARIO 3: Source is to the left of target - create S-shaped path
+                    if (y1 < y2) {
+                        // SCENARIO 3A: Source above and left of target - S-bend down and right
+                        // Visual: ←[SRC] |
+                        //               |
+                        //               ↓
+                        //               --------→[TGT]
+                        const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        const y3 = bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y;
+                        return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                    } else if (y1 > y2) {
+                        // SCENARIO 3B: Source below and left of target - S-bend up and right
+                        // Visual:               --------→[TGT]
+                        //                               ↑
+                        //                               |
+                        //         ←[SRC] |
+                        const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        const y3 = this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                        return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                    }
+                }
+            }
+            // DEFAULT: No bends needed (direct connection possible)
+            return [];
+        },
+        /**
+         * ╔══════════════════════════════════════════════════════════════════════════════╗
+         * ║                         LEFT-TO-LEFT CONNECTION HANDLER                      ║
+         * ╠══════════════════════════════════════════════════════════════════════════════╣
+         * ║                                                                              ║
+         * ║  ←[SRC NODE]  ········→  ←[TGT NODE]                                         ║
+         * ║                                                                              ║
+         * ║  Calculates optimal path from left anchor of source to left anchor of        ║
+         * ║  target, creating C-shaped or stepped connections that route around          ║
+         * ║  the left side of both nodes to avoid overlaps.                              ║
+         * ║                                                                              ║
+         * ╚══════════════════════════════════════════════════════════════════════════════╝
+         */
+        /**
+         * Handles LeftToLeft connection path calculation.
+         * Connection flows from the left side of source node to the left side of target node.
+         *
+         * @param {object} mParams - Parameters for path calculation
+         * @returns {Array<object>} Array of bend point coordinates
+         * @private
+         */
+        _handleLeftToLeftConnection: function (mParams) {
+            const { sourceNode, targetNode, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH, bEnhanced } = mParams;
+            const { x1, y1, x2, y2, AX1, AY1, AX2, AY2 } = this._transformSourceTargetCoordinates(mParams);
+            // CASE 1: Source and target nodes are on the same horizontal line (y1 === y2)
+            if (y1 === y2) {
+                if (x1 > x2) {
+                    // SCENARIO 1A: Source to the right of target - create C-shaped path on left side
+                    // Visual:    ←[TGT] ←[SRC]
+                    //            |           |
+                    //            ↓           |
+                    //            ←-----------↓
+                    // Check if nodes are close enough for midpoint, else use grid-aligned path
+                    const x3 = Math.abs(x1 - x2 + targetNode._iWidth) <= gridSize ?
+                        (AX1 + (x2 + targetNode._iWidth)) / 2 :
+                        this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = y1 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                    return [
+                        { x: x3, y: AY1 }, // Left from source
+                        { x: x3, y: y3 },  // Down/up to avoid nodes
+                        { x: x4, y: y3 },  // Across to target column
+                        { x: x4, y: AY2 }  // Up/down to target
+                    ];
+                } else if (x1 <= x2) {
+                    // SCENARIO 1B: Source to the left of target - create C-shaped path on left side
+                    // Visual: ←[SRC]    ←[TGT]
+                    //         |             |
+                    //         ↓             |
+                    //         →-------------↓
+                    const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const x4 = Math.abs(x1 + sourceNode._iWidth - x2) <= gridSize ?
+                        (AX2 + x2) / 2 :
+                        this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = y1 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                    return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                }
+            } else if (y1 != y2) {
+                // CASE 2: Source and target nodes are on different horizontal lines (y1 != y2)
+                /**
+                 * When the source and target nodes are not on the same horizontal line (y1 != y2)
+                 * Then nodes can be placed in either x1 > x2 or x1 < x2
+                 * with these positions there can be two cases:
+                 * 1. y1 < y2: source node is above the target node
+                 * 2. y1 > y2: source node is below the target node
+                 * In both cases we need to calculate the vertical bend points based on node's y so that the lines do not overlap with the target node.
+                 * If x1 < x2 and y1 < y2 then we know that source node is above the target node and to the left of it. Based on AY2 we can calculate above or below bend points.
+                 */
+                if (x1 > x2) {
+                    // SCENARIO 2A: Source is to the right of target
+                    if (y1 < y2) {
+                        // SCENARIO 2A1: Source above and right of target
+                        if (AY1 < y2) {
+                            // Simple vertical connection if source anchor is above target node
+                            // Visual: ←[SRC]
+                            //         |
+                            //         |
+                            //         ↓
+                            //         ←[TGT]
+                            const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            return [{ x: x4, y: AY1 }, { x: x4, y: AY2 }];
+                        } else if (AY1 >= y2) {
+                            // Need to avoid target node - create stepped path
+                            // Visual:        ←[SRC]
+                            //                |
+                            //  ←[TGT]  ←-----↓
+                            const iDiff = Math.abs(AX1 - (x2 + targetNode._iWidth));
+                            let x3 = null;
+                            if (iDiff <= gridSize) {
+                                x3 = iDiff < minEdgeLength ? (AX1 + (x2 + targetNode._iWidth) / 2) : AX1 - minEdgeLength;
+                            } else {
+                                x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                            }
+                            const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = this.getTopGridIntersectionPoint(x4, y2, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    } else if (y1 > y2) {
+                        // SCENARIO 2A2: Source below and right of target
+                        if (AY1 > y2 + targetNode._iHeight) {
+                            // Simple vertical connection if source anchor is below target node
+                            // Visual: ←[TGT]
+                            //         |
+                            //         |
+                            //         ↑
+                            //         ←[SRC]
+                            const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            return [{ x: x4, y: AY1 }, { x: x4, y: AY2 }];
+                        } else if (AY1 <= y2 + targetNode._iHeight) {
+                            // Need to avoid target node - create stepped path
+                            // Visual:  ←[TGT]  ←-----↑
+                            //                 |
+                            //         ←[SRC]
+                            const iDiff = Math.abs(AX1 - (x2 + targetNode._iWidth));
+                            let x3 = null;
+                            if (iDiff <= gridSize) {
+                                x3 = iDiff < AX1 + minEdgeLength ? (AX1 + (x2 + targetNode._iWidth) / 2) : AX1 + minEdgeLength;
+                            } else {
+                                x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                            }
+                            const x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                            const y3 = bEnhanced ? this._getRoutingYBelow(targetNode, gridSize) : this.getBottomGridIntersectionPoint(x4, y2 + targetNode._iHeight, gridSize, minEdgeLength).y;
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    }
+                } else if (x1 <= x2) {
+                    // SCENARIO 2B: Source is to the left of target
+                    if (y1 < y2) {
+                        // SCENARIO 2B1: Source above and left of target
+                        // Visual: ←[SRC]
+                        //         |
+                        //         ↓-------→ |
+                        //                  ↓
+                        //                  ←[TGT]
+                        const x3 = this.getLeftGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(x1 + sourceNode._iWidth - x2);
+                        let x4 = null;
+                        if (iDiff <= gridSize) {
+                            x4 = iDiff < minEdgeLength ? (AX2 + (x1 + sourceNode._iWidth)) / 2 : AX2 + minEdgeLength;
+                        } else {
+                            x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = (AY2 > (y1 + sourceNode._iHeight)) ? AY2 : (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y);
+                        const aCoordinates = AY2 > (y1 + sourceNode._iHeight) ? [{ x: x3, y: AY1 }, { x: x3, y: y3 }] : [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        return aCoordinates;
+                    } else if (y1 > y2) {
+                        // SCENARIO 2B2: Source below and left of target
+                        // Visual:                  ←[TGT]
+                        //                          ↑
+                        //         ←-------→ |
+                        //         |
+                        //         ←[SRC]
+                        const x3 = this.getLeftGridIntersectionPoint(AX1, AY2, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(x1 + sourceNode._iWidth - x2);
+                        let x4 = null;
+                        if (iDiff <= gridSize) {
+                            x4 = iDiff < minEdgeLength ? (AX2 + (x1 + sourceNode._iWidth)) / 2 : AX2 + minEdgeLength;
+                        } else {
+                            x4 = this.getLeftGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = (AY2 < y1) ? AY2 : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                        const aCoordinates = AY2 < y1 ? [{ x: x3, y: AY1 }, { x: x3, y: y3 }] : [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        return aCoordinates;
+                    }
+                }
+            }
+            // DEFAULT: No bends needed (direct connection possible)
+            return [];
+        },
+        /**
+         * ╔══════════════════════════════════════════════════════════════════════════════╗
+         * ║                       RIGHT-TO-RIGHT CONNECTION HANDLER                      ║
+         * ╠══════════════════════════════════════════════════════════════════════════════╣
+         * ║                                                                              ║
+         * ║  [SRC NODE]→  ········→  [TGT NODE]→                                         ║
+         * ║                                                                              ║
+         * ║  Calculates optimal path from right anchor of source to right anchor of      ║
+         * ║  target, creating C-shaped or stepped connections that route around          ║
+         * ║  the right side of both nodes to avoid overlaps.                             ║
+         * ║                                                                              ║
+         * ╚══════════════════════════════════════════════════════════════════════════════╝
+         */
+        /**
+         * Handles RightToRight connection path calculation.
+         * Connection flows from the right side of source node to the right side of target node.
+         *
+         * @param {object} mParams - Parameters for path calculation
+         * @returns {Array<object>} Array of bend point coordinates
+         * @private
+         */
+        _handleRightToRightConnection: function (mParams) {
+            const { sourceNode, targetNode, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH, bEnhanced } = mParams;
+            const { x1, y1, x2, y2, AX1, AY1, AX2, AY2 } = this._transformSourceTargetCoordinates(mParams);
+            // CASE 1: Source and target nodes are on the same horizontal line (y1 === y2)
+            if (y1 === y2) {
+                if (x1 > x2) {
+                    // SCENARIO 1A: Source to the right of target - create C-shaped path on right side
+                    // Visual: [TGT]→     [SRC]→
+                    //              |         |
+                    //              ↓         |
+                    //              →---------↓
+                    const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const iDiff = Math.abs(x1 - AX2);
+                    const x4 = iDiff <= gridSize ? (x1 + x2) / 2 : this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = y1 < gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                    return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                } else if (x1 <= x2) {
+                    // SCENARIO 1B: Source to the left of target - create C-shaped path on right side
+                    // Visual: [SRC]→             [TGT]→
+                    //              |                 |
+                    //              ↓                 |
+                    //              →-----------------↓
+                    const iDff = Math.abs(AX1 - x2);
+                    const x3 = iDff <= gridSize ? (AX1 + x2) / 2 : this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                    const x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                    const y3 = y1 < gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                    return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                }
+            } else if (y1 != y2) {
+                // CASE 2: Source and target nodes are on different horizontal lines (y1 != y2)
+                if (x1 > x2) {
+                    // SCENARIO 2A: Source is to the right of target
+                    if (y1 < y2) {
+                        // SCENARIO 2A1: Source above and right of target
+                        // Visual: [SRC]→
+                        //              |
+                        //              ↓--------→ |
+                        //                         ↓
+                        //                    [TGT]→
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(AX2 - x1);
+                        let x4 = null;
+                        if (iDiff <= gridSize) {
+                            x4 = iDiff < minEdgeLength ? (AX2 + x1) / 2 : AX2 + minEdgeLength;
+                        } else {
+                            x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = y1 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                        if (AY2 > y1 + sourceNode._iHeight) {
+                            // Simple vertical connection if target anchor is below source node
+                            // Visual: [SRC]→
+                            //              |
+                            //              ↓
+                            //              [TGT]→
+                            const aCords = AX2 > AX1 ? [{x: x4, y: AY1}, {x: x4, y: AY2}] : [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                            return aCords;
+                        } else {
+                            // Need to avoid target node - create stepped path
+                            // Visual: [SRC]→
+                            //              |
+                            //         ↓---- →
+                            //         |
+                            //     [TGT]→
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    } else if (y1 > y2) {
+                        // SCENARIO 2A2: Source below and right of target
+                        // Visual:                    [TGT]→
+                        //                                 ↑
+                        //              ↑--------→ |
+                        //              |
+                        //         [SRC]→
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(AX2 - x1);
+                        let x4 = null;
+                        if (iDiff <= gridSize) {
+                            x4 = iDiff < minEdgeLength ? (AX2 + x1) / 2 : AX2 + minEdgeLength;
+                        } else {
+                            x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = y2 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength)) : this.getTopGridIntersectionPoint(x4, y2, gridSize, minEdgeLength).y;
+                        if (AY1 > y2 + targetNode._iHeight) {
+                            // Simple vertical connection if target anchor is below source node
+                            // Visual: [SRC]→
+                            //              |
+                            //              ↓
+                            //              [TGT]→
+                            const aCords = AX2 > AX1 ? [{x: x4, y: AY1}, {x: x4, y: AY2}] : [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                            return aCords;
+                        } else {
+                            // Need to avoid target node - create stepped path
+                            // Visual: [SRC]→
+                            //              |
+                            //         ↓---- →
+                            //         |
+                            //     [TGT]→
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                    }
+                } else if (x1 <= x2) {
+                    // SCENARIO 2B: Source is to the left of target
+                    if (y1 < y2) {
+                        // SCENARIO 2B1: Source above and left of target
+                        // Visual: [SRC]→
+                        //              |
+                        //              ↓----------→ |
+                        //                           ↓
+                        //                      [TGT]→
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(x2 - AX1);
+                        let x4 = null;
+                        if (iDiff <= gridSize && !(AY2 > y1 + sourceNode._iHeight)) {
+                            x4 = iDiff < minEdgeLength ? (x2 + AX1) / 2 : AX1 - minEdgeLength;
+                        } else {
+                            x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = y1 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength).y) : this.getTopGridIntersectionPoint(x3, y1, gridSize, minEdgeLength).y;
+                        if (AY2 > y1 + sourceNode._iHeight) {
+                            // Simple vertical connection if target anchor is below source node
+                            // Visual: [SRC]→
+                            //              |
+                            //              ↓
+                            //              [TGT]→
+                            const aCords = AX2 > AX1 ? [{x: x4, y: AY1}, {x: x4, y: AY2}] : [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                            return aCords;
+                        } else {
+                            // Need to avoid target node - create stepped path
+                            // Visual: [SRC]→
+                            //              |
+                            //         ↓---- →
+                            //         |
+                            //     [TGT]→
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                        // const aCoordinates = (AY2 > y1 + sourceNode._iHeight) ? [{ x: x4, y: AY1 }, { x: x4, y: AY2 }] : [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        // return aCoordinates;
+                    } else if (y1 > y2) {
+                        // SCENARIO 2B2: Source below and left of target
+                        // Visual:                      [TGT]→
+                        //                                   ↑
+                        //              ↑----------→ |
+                        //              |
+                        //         [SRC]→
+                        const x3 = this.getRightGridIntersectionPoint(AX1, AY1, gridSize, minEdgeLength).x;
+                        const iDiff = Math.abs(x2 - AX1);
+                        let x4 = null;
+                        if (iDiff <= gridSize && !(AY1 > y2 + targetNode._iHeight)) {
+                            x4 = iDiff < minEdgeLength ? (x2 + AX1) / 2 : AX1 - minEdgeLength;
+                        } else {
+                            x4 = this.getRightGridIntersectionPoint(AX2, AY2, gridSize, minEdgeLength).x;
+                        }
+                        const y3 = y2 <= gridSize ? (bEnhanced ? this._getRoutingYBelow(sourceNode, gridSize) : this.getBottomGridIntersectionPoint(x3, y1 + sourceNode._iHeight, gridSize, minEdgeLength)) : this.getTopGridIntersectionPoint(x4, y2, gridSize, minEdgeLength).y;
+                        if (AY1 > y2 + targetNode._iHeight) {
+                            // Simple vertical connection if target anchor is below source node
+                            // Visual: [SRC]→
+                            //              |
+                            //              ↓
+                            //              [TGT]→
+                            const aCords = AX2 > AX1 ? [{x: x4, y: AY1}, {x: x4, y: AY2}] : [{ x: x3, y: AY1 }, { x: x3, y: AY2 }];
+                            return aCords;
+                        } else {
+                            // Need to avoid target node - create stepped path
+                            // Visual: [SRC]→
+                            //              |
+                            //         ↓---- →
+                            //         |
+                            //     [TGT]→
+                            return [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        }
+                        // const aCoordinates = (AY1 > y2 + targetNode._iHeight) ? [{ x: x4, y: AY1 }, { x: x4, y: AY2 }] : [{ x: x3, y: AY1 }, { x: x3, y: y3 }, { x: x4, y: y3 }, { x: x4, y: AY2 }];
+                        // return aCoordinates;
+                    }
+                }
+            }
+            // DEFAULT: No bends needed (direct connection possible)
+            return [];
+        },
+        /**
+         * Calculates the right grid intersection point.
+         *
+         * @param {number} x - X coordinate
+         * @param {number} y - Y coordinate
+         * @param {number} [gridSize=50] - Size of grid cells
+         * @param {number} [minEdgeLength=20] - Minimum edge length
+         * @returns {object} Intersection point {x, y}
+         * @public
+         */
+        getRightGridIntersectionPoint: function (x, y, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH) {
+            let xIntersection = Math.ceil(x / gridSize) * gridSize;
+            if (xIntersection - x < minEdgeLength) {
+                xIntersection += gridSize; // Ensure the intersection is at least MIN_EDGE_LENGTH away
+            }
+            return { x: xIntersection, y: y };
+        },
+        /**
+         * Calculates the left grid intersection point.
+         *
+         * @param {number} x - X coordinate
+         * @param {number} y - Y coordinate
+         * @param {number} [gridSize=50] - Size of grid cells
+         * @param {number} [minEdgeLength=20] - Minimum edge length
+         * @returns {object} Intersection point {x, y}
+         * @public
+         */
+        getLeftGridIntersectionPoint: function (x, y, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH) {
+            let xIntersection = Math.floor(x / gridSize) * gridSize;
+            if (x - xIntersection < minEdgeLength) {
+                xIntersection -= gridSize; // Ensure the intersection is at least MIN_EDGE_LENGTH away
+            }
+            return { x: xIntersection, y: y };
+        },
+        /**
+         * Calculates the top grid intersection point.
+         *
+         * @param {number} x - X coordinate
+         * @param {number} y - Y coordinate
+         * @param {number} [gridSize=50] - Size of grid cells
+         * @param {number} [minEdgeLength=20] - Minimum edge length
+         * @returns {object} Intersection point {x, y}
+         * @public
+         */
+        getTopGridIntersectionPoint: function (x, y, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH) {
+            let yIntersection = Math.floor(y / gridSize) * gridSize;
+            if (y - yIntersection < minEdgeLength) {
+                yIntersection -= gridSize; // Ensure the intersection is at least MIN_EDGE_LENGTH away
+            }
+            return { x: x, y: yIntersection };
+        },
+        /**
+         * Calculates the bottom grid intersection point.
+         *
+         * @param {number} x - X coordinate
+         * @param {number} y - Y coordinate
+         * @param {number} [gridSize=50] - Size of grid cells
+         * @param {number} [minEdgeLength=20] - Minimum edge length
+         * @returns {object} Intersection point {x, y}
+         * @public
+         */
+        getBottomGridIntersectionPoint: function (x, y, gridSize = GRID_SIZE, minEdgeLength = MIN_EDGE_LENGTH) {
+            let yIntersection = Math.ceil(y / gridSize) * gridSize;
+            if (yIntersection - y < minEdgeLength) {
+                yIntersection += gridSize; // Ensure the intersection is at least MIN_EDGE_LENGTH away
+            }
+            return { x: x, y: yIntersection };
+        },
+        /**
+         * Post-processing pass: detects horizontal line segments that pass through a node's
+         * bounding box and shifts them below the collision.
+         * Only interior segments are adjusted, source and target anchors are never moved.
+         *
+         * @param {sap.suite.ui.commons.networkgraph.Line[]} aLines
+         * @param {sap.suite.ui.commons.networkgraph.Node[]} aNodes
+         * @param {number} gridSize
+         * @private
+         */
+        _resolveLineNodeCollisions: function(aLines, aNodes, gridSize) {
+            var aBounds = aNodes.map(function(oNode) {
+                return {
+                    x: oNode.getX(),
+                    y: oNode.getY(),
+                    r: oNode.getX() + (oNode._iWidth || 0),
+                    b: oNode.getY() + (oNode._iHeight || 0)
+                };
+            }).filter(function(b) { return b.r > b.x && b.b > b.y; });
+
+            aLines.forEach(function(oLine) {
+                if (oLine.getVisible && !oLine.getVisible()) { return; }
+                if (oLine._isIgnored && oLine._isIgnored()) { return; }
+
+                var aBends = oLine.getBends();
+                var aPoints = [{ x: oLine.getSource().getX(), y: oLine.getSource().getY() }];
+                aBends.forEach(function(oBend) { aPoints.push({ x: oBend.getX(), y: oBend.getY() }); });
+                aPoints.push({ x: oLine.getTarget().getX(), y: oLine.getTarget().getY() });
+
+                var iPointCount = aPoints.length;
+                var bChanged = false;
+
+                // Only check interior segments — never move source (0) or target (iPointCount-1)
+                for (var i = 1; i < iPointCount - 2; i++) {
+                    var p1 = aPoints[i], p2 = aPoints[i + 1];
+                    if (p1.y !== p2.y) { continue; } // skip vertical segments
+
+                    var y = p1.y;
+                    var xMin = Math.min(p1.x, p2.x);
+                    var xMax = Math.max(p1.x, p2.x);
+
+                    var iMaxBottom = -Infinity;
+                    var bCollision = false;
+                    aBounds.forEach(function(oBound) {
+                        if (y > oBound.y && y <= oBound.b && xMin < oBound.r && xMax > oBound.x) {
+                            bCollision = true;
+                            if (oBound.b > iMaxBottom) { iMaxBottom = oBound.b; }
+                        }
+                    });
+
+                    if (bCollision) {
+                        var iNewY = iMaxBottom + Math.round(gridSize * 0.5);
+                        aPoints[i].y = iNewY;
+                        aPoints[i + 1].y = iNewY;
+                        bChanged = true;
+                    }
+                }
+
+                if (bChanged) {
+                    oLine.clearBends();
+                    for (var j = 1; j < iPointCount - 1; j++) {
+                        oLine.addBend(aPoints[j]);
+                    }
+                }
+            });
+        },
+
+        /**
+         * Builds a WeakMap of per-node row boundary data used by _getRoutingYBelow.
+         * Uses two passes to avoid the single-pass bug where iRowBottom is not yet finalised
+         * when a next-row candidate is evaluated.
+         *
+         * @param {object[]} aNodes - All graph nodes
+         * @param {number} gridSize - Grid size used for same-row proximity threshold
+         * @returns {WeakMap} node → { rowBottom, nextRowTop }
+         * @private
+         */
+        _buildRoutingRowCache: function(aNodes, gridSize) {
+            var mCache = new WeakMap();
+            if (!aNodes.length) { return mCache; }
+
+            // Pass 1: group nodes by row (center within gridSize/2) and compute rowBottom per group.
+            // The representative centerY is intentionally kept as the first node's center, a deliberate
+            // approximation that avoids updating all prior comparisons when new nodes join.
+            var aRows = [];
+            aNodes.forEach(function(oNode) {
+                var h = oNode._iHeight || 0;
+                var centerY = oNode.getY() + h / 2;
+                var oRow = null;
+                for (var i = 0; i < aRows.length; i++) {
+                    if (Math.abs(aRows[i].centerY - centerY) < gridSize / 2) {
+                        oRow = aRows[i];
+                        break;
+                    }
+                }
+                if (oRow) {
+                    oRow.nodes.push(oNode);
+                    oRow.rowBottom = Math.max(oRow.rowBottom, oNode.getY() + h);
+                    oRow.rowTop    = Math.min(oRow.rowTop,    oNode.getY());
+                } else {
+                    aRows.push({ centerY: centerY, nodes: [oNode], rowBottom: oNode.getY() + h, rowTop: oNode.getY() });
+                }
+            });
+
+            // Pass 2: for each row, find the nearest next rowTop. rowTop isn't monotonic with
+            // rowBottom if the heights vary, so the scan can't stop at the first match. It must
+            // keep the minimum qualifying rowTop across all subsequent rows.
+            aRows.sort(function(a, b) { return a.rowBottom - b.rowBottom; });
+            aRows.forEach(function(oRow, iRowIdx) {
+                var iNextRowTop = Infinity;
+                for (var k = iRowIdx + 1; k < aRows.length; k++) {
+                    if (aRows[k].rowTop > oRow.rowBottom && aRows[k].rowTop < iNextRowTop) {
+                        iNextRowTop = aRows[k].rowTop;
+                    }
+                }
+                oRow.nodes.forEach(function(oNode) {
+                    mCache.set(oNode, { rowBottom: oRow.rowBottom, nextRowTop: iNextRowTop });
+                });
+            });
+
+            return mCache;
+        },
+
+        /**
+         * Returns the Y coordinate of the horizontal routing corridor below a node's row.
+         * Uses pre-computed row boundary data from _buildRoutingRowCache (O(1) lookup).
+         * Falls back to node-bottom + 0.75 * gridSize when called outside normalizeLines.
+         *
+         * @param {object} oNode - Source/target node
+         * @param {number} gridSize - Grid size for fallback spacing
+         * @returns {number} Y coordinate of the routing corridor
+         * @private
+         */
+        _getRoutingYBelow: function(oNode, gridSize) {
+            var oData = this._routingRowCache && this._routingRowCache.get(oNode);
+            var iRowBottom = oData ? oData.rowBottom : oNode.getY() + (oNode._iHeight || 0);
+            var iNextRowTop = oData ? oData.nextRowTop : Infinity;
+
+            if (iNextRowTop === Infinity) {
+                return iRowBottom + Math.round(gridSize * 0.75);
+            }
+            return Math.round((iRowBottom + iNextRowTop) / 2);
+        },
+
+        /**
+         * Gets the anchor coordinates for a node based on connection type and anchor type.
+         * Enhanced to handle center positioning for single connections and offset positioning for mixed connections.
+         *
+         * @param {object} oNode - The node object
+         * @param {string} sConnectionType - Connection type
+         * @param {string} sAnchorType - Anchor type ("source" or "target")
+         * @returns {object} Anchor coordinates {x, y}
+         * @private
+         */
+        _getNodeAnchorCoordinates: function (oNode, sConnectionType, sAnchorType) {
+            const x = oNode.getX();
+            const y = oNode.getY();
+            const width = oNode._iWidth;
+            const height = oNode._iHeight;
+            const centerY = y + (height / 2);
+
+            // Enhanced anchor calculation with connection pattern analysis
+            const oConnectionAnalysis = this._analyzeNodeConnectionPatterns(oNode);
+            // Determine the port position based on the connection type and analysis
+            switch (sConnectionType) {
+                case "LeftToLeft":
+                    if (sAnchorType === "source") {
+                        // Source anchor on left side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "left",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    } else {
+                        // Target anchor on left side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "left",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    }
+                case "LeftToRight":
+                    if (sAnchorType === "source") {
+                        // Source anchor on left side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "left",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    } else {
+                        // Target anchor on right side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "right",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    }
+                case "RightToLeft":
+                    if (sAnchorType === "source") {
+                        // Source anchor on right side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "right",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    } else {
+                        // Target anchor on left side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "left",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    }
+                case "RightToRight":
+                    if (sAnchorType === "source") {
+                        // Source anchor on right side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "right",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    } else {
+                        // Target anchor on right side
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "right",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    }
+                default:
+                    // Default RightToLeft case
+                    if (sAnchorType === "source") {
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "right",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    } else {
+                        return this._calculateEnhancedAnchor({
+                            node: { x, y, width, height, centerY },
+                            side: "left",
+                            analysis: oConnectionAnalysis,
+                            anchorType: sAnchorType
+                        });
+                    }
+            }
+        },
+        /**
+         * Transforms source and target coordinates into a normalized format for calculations.
+         *
+         * @param {object} mParams - Parameters containing node and anchor information
+         * @returns {object} Transformed coordinates object
+         * @private
+         */
+        _transformSourceTargetCoordinates: function (mParams) {
+            return {
+                x1: mParams.sourceNode.getX(), // x coordinate of the source node
+                y1: mParams.sourceNode.getY(), // y coordinate of the source node
+                x2: mParams.targetNode.getX(), // x cordinate of the target node
+                y2: mParams.targetNode.getY(), // y coordinate of the target node
+                AX1: mParams.sourceAnchor.x, // x coordinate of the source anchor
+                AY1: mParams.sourceAnchor.y, // y coordinate of the source anchor
+                AX2: mParams.targetAnchor.x, // x coordinate of the target anchor
+                AY2: mParams.targetAnchor.y, // y coordinate of the target anchor
+                connectionType: mParams.connectionType, // type of the connection
+                dx: Math.abs(mParams.targetNode.getX() - mParams.sourceNode.getX()), // horizontal distance between source and target nodes
+                dy: Math.abs(mParams.targetNode.getY() - mParams.sourceNode.getY()) // vertical distance between source and target nodes
+            };
+        },
+        /**
+         * Analyzes the connection patterns for a node to determine optimal anchor placement
+         * @param {object} oNode - The node to analyze
+         * @returns {object} Analysis object with connection counts per side
+         * @private
+         */
+        _analyzeNodeConnectionPatterns: function (oNode) {
+            if (!oNode || !oNode.getParent || !oNode.getParent()) {
+                return { leftIncoming: 0, leftOutgoing: 0, rightIncoming: 0, rightOutgoing: 0 };
+            }
+
+            if (this._analysisCache) {
+                var sCachedKey = oNode.getKey && oNode.getKey();
+                if (sCachedKey !== undefined && this._analysisCache.has(String(sCachedKey))) {
+                    return this._analysisCache.get(String(sCachedKey));
+                }
+            }
+
+            const oGraph = oNode.getParent();
+            const aLines = oGraph.getLines();
+            const sNodeKey = oNode.getKey();
+
+            let leftIncoming = 0, leftOutgoing = 0, rightIncoming = 0, rightOutgoing = 0;
+
+            aLines.forEach(function(oLine) {
+                if (!oLine.getVisible() || oLine._isIgnored()) {
+                    return;
+                }
+
+                const sFromKey = oLine.getFrom();
+                const sToKey = oLine.getTo();
+                const sLineConnectionType = oLine.getConnectionType();
+
+                // Check if this line involves our node
+                if (sFromKey === sNodeKey) {
+                    // Outgoing connection from our node
+                    switch (sLineConnectionType) {
+                        case "LeftToLeft":
+                        case "LeftToRight":
+                            leftOutgoing++;
+                            break;
+                        case "RightToLeft":
+                        case "RightToRight":
+                            rightOutgoing++;
+                            break;
+                        default:
+                            // Default to right for unrecognized connection types
+                            rightOutgoing++;
+                            break;
+                    }
+                } else if (sToKey === sNodeKey) {
+                    // Incoming connection to our node
+                    switch (sLineConnectionType) {
+                        case "LeftToLeft":
+                        case "RightToLeft":
+                            leftIncoming++;
+                            break;
+                        case "LeftToRight":
+                        case "RightToRight":
+                            rightIncoming++;
+                            break;
+                        default:
+                            // Default to left for unrecognized connection types
+                            leftIncoming++;
+                            break;
+                    }
+                }
+            });
+
+            return {
+                leftIncoming: leftIncoming,
+                leftOutgoing: leftOutgoing,
+                rightIncoming: rightIncoming,
+                rightOutgoing: rightOutgoing
+            };
+        },
+
+        /**
+         * Calculates enhanced anchor position based on connection analysis
+         * @param {object} mParams - Parameters for anchor calculation
+         * @param {object} mParams.node - Node position and size info
+         * @param {string} mParams.side - Side of the node ("left" or "right")
+         * @param {object} mParams.analysis - Connection pattern analysis
+         * @param {string} mParams.anchorType - Anchor type ("source" or "target")
+         * @returns {object} Anchor coordinates {x, y}
+         * @private
+         */
+        _calculateEnhancedAnchor: function (mParams) {
+            const { node, side, analysis, anchorType } = mParams;
+            const { x, y, width, height, centerY } = node;
+
+            const offsetDistance = height * 0.15; // 15% of node height for offset positioning
+
+            // Determine base X coordinate for the side
+            const baseX = side === "left" ? x : (x + width);
+
+            // Get connection counts for this side
+            const sideIncoming = side === "left" ? analysis.leftIncoming : analysis.rightIncoming;
+            const sideOutgoing = side === "left" ? analysis.leftOutgoing : analysis.rightOutgoing;
+
+            // Calculate Y position based on connection patterns
+            let anchorY = centerY; // Default to center
+
+            // ENHANCEMENT 1: Single connection type on this side -> use center
+            if ((sideIncoming === 0 && sideOutgoing === 1) || (sideIncoming === 1 && sideOutgoing === 0)) {
+                anchorY = centerY; // Center position for single connection
+            } else if (sideIncoming > 0 && sideOutgoing > 0) {
+                // ENHANCEMENT 2: Mixed connections on this side -> offset positioning
+                if (anchorType === "target") {
+                    // Incoming connections (targets) go above center
+                    anchorY = centerY - offsetDistance;
+                } else {
+                    // Outgoing connections (sources) go below center
+                    anchorY = centerY + offsetDistance;
+                }
+            } else {
+                // Multiple connections of same type -> use center (for now)
+                anchorY = centerY;
+            }
+
+            // Ensure anchor stays within node boundaries
+            const minY = y + (height * 0.1); // 10% margin from top
+            const maxY = y + (height * 0.9); // 10% margin from bottom
+            anchorY = Math.max(minY, Math.min(maxY, anchorY));
+
+            return {
+                x: baseX,
+                y: Math.floor(anchorY)
+            };
+        },
+
+        /**
+         * Determines if a horizontal connection should use a straight line based on connection patterns.
+         * Returns true only when both nodes have single dedicated connections (source has single outgoing, target has single incoming).
+         *
+         * @param {object} sourceNode - The source node
+         * @param {object} targetNode - The target node
+         * @param {string} connectionType - The connection type
+         * @returns {boolean} True if straight line should be used, false if bends are needed
+         * @private
+         */
+        _shouldUseHorizontalStraightLine: function (sourceNode, targetNode, connectionType) {
+            const sourceAnalysis = this._analyzeNodeConnectionPatterns(sourceNode);
+            const targetAnalysis = this._analyzeNodeConnectionPatterns(targetNode);
+
+            // Determine which sides are involved based on connection type
+            let sourceOutgoingCount, targetIncomingCount;
+
+            switch (connectionType) {
+                case "RightToLeft":
+                    sourceOutgoingCount = sourceAnalysis.rightOutgoing;
+                    targetIncomingCount = targetAnalysis.leftIncoming;
+                    break;
+                case "LeftToRight":
+                    sourceOutgoingCount = sourceAnalysis.leftOutgoing;
+                    targetIncomingCount = targetAnalysis.rightIncoming;
+                    break;
+                case "LeftToLeft":
+                    sourceOutgoingCount = sourceAnalysis.leftOutgoing;
+                    targetIncomingCount = targetAnalysis.leftIncoming;
+                    break;
+                case "RightToRight":
+                    sourceOutgoingCount = sourceAnalysis.rightOutgoing;
+                    targetIncomingCount = targetAnalysis.rightIncoming;
+                    break;
+                default:
+                    // Default to RightToLeft
+                    sourceOutgoingCount = sourceAnalysis.rightOutgoing;
+                    targetIncomingCount = targetAnalysis.leftIncoming;
+                    break;
+            }
+
+            // Allow straight line only when both nodes have single dedicated connections
+            return (sourceOutgoingCount === 1 && targetIncomingCount === 1);
+        }
+    };
+    return ConnectionPathUtils;
+});