@sapui5/sap.suite.ui.commons 1.143.0 → 1.145.0

package/src/sap/suite/ui/commons/networkgraph/Line.js

@@ -21,12 +21,17 @@ sap.ui.define([
 		ArrowOrientation = library.networkgraph.LineArrowOrientation,
 		Shape = library.networkgraph.NodeShape,
 		Orientation = library.networkgraph.Orientation,
-		SemanticColorType = library.SemanticColorType;
+		SemanticColorType = library.SemanticColorType,
+		ConnectionType = library.networkgraph.ConnectionType;
 
 	var BEND_RADIUS = 6, // Bezier 'radius' of smooth bends
 		FOCUS_LANE_WIDTH = 5, // Distance of focus shadow line from the main line
 		RELATIVE_ARROW_POSITION = 0.45,
 		FIXED_ARROW_POSITION = 15,
+		MULTIPLE_ARROW_DISTANCE = 44,
+		LABEL_BOX_WIDTH = 30,
+		LABEL_BOX_HEIGHT = 22,
+		ARROW_LENGTH = 11, // Length of arrow from apex to tail
 		ZERO_ANGLE_ARROW_POINTS = {
 			Apex: {x: 5.5, y: 0},
 			Second: {x: -5.5, y: -7.5},
@@ -117,6 +122,34 @@ sap.ui.define([
 				 */
 				stretchToCenter: {
 					type: "boolean", group: "Misc", defaultValue: false
+				},
+				/**
+				 * Defines the connection type between the source and target nodes.
+				 * Can be set to RightToLeft, LeftToRight, TopToBottom, or BottomToTop using {@link sap.suite.ui.commons.networkgraph.ConnectionType ConnectionType} enumeration.
+				 * This property is used to determine how the line connects the source and target nodes. For example, if set to RightToLeft, the line starts from the right side of the source node and end at the left side of the target node.
+				 * This property is valid only with the NoopLayout and drag and drop enabled network graph.
+				 * @public
+				 * @since 1.144
+				 *
+				 */
+				connectionType: {
+					type: "sap.suite.ui.commons.networkgraph.ConnectionType", defaultValue: ConnectionType.RightToLeft
+				},
+				/**
+				 * Defines the text label to be displayed on the line.
+				 *
+				 * When set, displays the label text in a rounded rectangle box positioned near the target arrow.
+				 * The label is rendered only when all of the following conditions are met:
+				 * - This property has a non-empty value
+				 * - The graph is using NoopLayout
+				 * - The line's arrowPosition is set to "Both"
+				 * - The line is long enough to accommodate the label
+				 * If this property is empty or not set, no label is displayed on the line
+				 * @public
+				 * @since 1.144.
+				 */
+				labelName: {
+					type: "string", group: "Behavior", defaultValue: ""
 				}
 			},
 			aggregations: {
@@ -192,7 +225,10 @@ sap.ui.define([
 	/* =========================================================== */
 	Line.prototype._afterRendering = function () {
 		this._setupEvents();
-		if (this.getFromNode()._bIsHidden || this.getToNode()._bIsHidden) {
+		// Only check node visibility if data is fully loaded
+		var oFromNode = this.getFromNode();
+		var oToNode = this.getToNode();
+		if (oFromNode && oToNode && (oFromNode._bIsHidden || oToNode._bIsHidden)) {
 			this.$().hide();
 		}
 
@@ -231,18 +267,20 @@ sap.ui.define([
 		}.bind(this);
 
 		var fnCreateArrowAttr = function (iIndex, aPoints, sArrowId) {
+			var sArrowClass = "sapSuiteUiCommonsNetworkLineArrow";
+			if (sColorClass) {
+				sArrowClass += " " + sColorClass;
+			}
 			return {
 				id: sId + "-" + sArrowId,
-				"class": "sapSuiteUiCommonsNetworkLineArrow " + sColorClass,
+				"class": sArrowClass,
 				style: sColorStyle,
 				d: "M " + aPoints[iIndex + 0].x + "," + aPoints[iIndex + 0].y +
 					" L " + aPoints[iIndex + 1].x + "," + aPoints[iIndex + 1].y +
 					" L " + aPoints[iIndex + 2].x + "," + aPoints[iIndex + 2].y +
 					" Z"
 			};
-		};
-
-		var fnRenderArrow = function (sOrientation, sPosition, sArrowId) {
+		}; var fnRenderArrow = function (sOrientation, sPosition, sArrowId) {
 			var aPoints = this._getArrowPoints(sOrientation, sPosition);
 			this._renderControl("path", fnCreateArrowAttr(0, aPoints, sArrowId || "arrow"), null, oRm);
 
@@ -300,13 +338,57 @@ sap.ui.define([
 			"data-sap-ui": sId
 		}, false, oRm);
 
+		// Add title for tooltip showing connection type (always shown)
+		if (this.getParent()._isNoopLayout() &&
+			this.getArrowPosition() === ArrowPosition.Both) {
+
+			var sConnectionType = this.getConnectionType();
+			var oMapping = this.getParent().getConnectionTypeMapping();
+			var sTooltipText = "";
+
+			if (sConnectionType === ConnectionType.LeftToRight) {
+				sTooltipText = oMapping.LeftToRight || ConnectionType.LeftToRight;
+			} else if (sConnectionType === ConnectionType.RightToLeft) {
+				sTooltipText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+			} else if (sConnectionType === ConnectionType.LeftToLeft) {
+				sTooltipText = oMapping.LeftToLeft || ConnectionType.LeftToLeft;
+			} else if (sConnectionType === ConnectionType.RightToRight) {
+				sTooltipText = oMapping.RightToRight || ConnectionType.RightToRight;
+			} else {
+				sTooltipText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+			}
+
+			if (sTooltipText) {
+				oRm.openStart("title");
+				oRm.openEnd();
+				oRm.text(sTooltipText);
+				oRm.close("title");
+			}
+		}
+
 		// invisible wrapper for better event handling
 		fnRenderPath("sapSuiteUiCommonsNetworkLineInvisibleWrapper", "invisibleWrapper", true);
 
 		// path itself
-		 fnRenderPath("", "path");
+		fnRenderPath("", "path");
 
-		if (this.getArrowOrientation() !== ArrowOrientation.None && this.getCoordinates().length >= 2) {
+		if (this.getArrowPosition() === ArrowPosition.Both && this._hasMultipleDirectedArrows() && this.getCoordinates().length >= 2 ) {
+			// Calculate total line length to determine arrow placement strategy
+			var fTotalLineLength = this._calculateTotalLineLength();
+			var bCanFitTwoArrows = this._canLineFitTwoArrows(fTotalLineLength);
+
+			if (bCanFitTwoArrows) {
+				// Line is long enough for both arrows - use smart source arrow logic
+				if (this._shouldRenderSourceArrow()) {
+					fnRenderArrow(ArrowOrientation.ParentOf, "multipleSource", "arrow-source");
+				}
+				// Always render target arrow (each incoming line gets its own target arrow)
+				fnRenderArrow(ArrowOrientation.ParentOf, "multipleTarget", "arrow-target");
+			} else {
+				// Line is too short for two arrows - only render target arrow
+				fnRenderArrow(ArrowOrientation.ParentOf, "multipleTarget", "arrow-target");
+			}
+		} else if (this.getArrowOrientation() !== ArrowOrientation.None && this.getCoordinates().length >= 2) {
 			if (this.getArrowOrientation() === ArrowOrientation.Both) {
 				if (this.getArrowPosition() === ArrowPosition.Middle) {
 					// middle arrow is rendered "at once" using two groups of points
@@ -325,18 +407,184 @@ sap.ui.define([
 			var sColorStyleText = sColorStyle ? sColorStyle : "";
 			this._aNipples.forEach(function (oNipple) {
 				oRm.openStart("path");
-				this.applyStyles(oRm,this.getStyleObject(sColorStyleText));
+				this.applyStyles(oRm, this.getStyleObject(sColorStyleText));
 				oRm.class("sapSuiteUiCommonsNetworkLineNipple");
 				((sColorClass || "").split(" ") || []).forEach((sClass) => {
-					oRm.class(sClass);
+					if (sClass) {
+						oRm.class(sClass);
+					}
 				})
-				oRm.attr("d",fnCreateArc(oNipple.x, oNipple.y, oNipple.orientation));
+				oRm.attr("d", fnCreateArc(oNipple.x, oNipple.y, oNipple.orientation));
 				oRm.openEnd();
 				oRm.close("path");
 			}.bind(this));
+		} oRm.close("g");
+	};
+
+	/**
+	 * Renders the text label for this line. Used by batch text rendering.
+	 * @param {sap.ui.core.RenderManager} oRm The RenderManager to use for rendering
+	 * @param {string} [sIdSuffix] Optional suffix for element ID
+	 * @private
+	 */
+	Line.prototype._renderLineText = function (oRm, sIdSuffix) {
+		// Early return if any condition is not met:
+		// - labelName has a non-empty value
+		// - Graph must be in NoopLayout
+		// - arrowPosition must be Both (labels only shown when both arrows are present)
+		if (!this.getLabelName() ||
+			!this.getParent()._isNoopLayout() ||
+			this.getArrowPosition() !== ArrowPosition.Both) {
+			return;
 		}
 
-		oRm.close("g");
+		// Always use the base line ID without any suffix to ensure consistency
+		// with _hideShowLineText which can't know what suffix was used during rendering
+		var sId = this.getId();
+		var {style: sStyle, class: sStatusClass} = this._getStatusStyle({
+			"stroke": ElementBase.ColorType.Border,
+			"stroke-width": ElementBase.ColorType.BorderWidth,
+			"stroke-dasharray": ElementBase.ColorType.BorderStyle
+		});
+
+		// Get the connection type and convert to display text
+		var sConnectionType = this.getConnectionType();
+		var oMapping = this.getParent().getConnectionTypeMapping();
+		var sFullText = ""; // Store the full text for tooltip
+
+		// Check if custom mapping exists for this connection type
+		switch (sConnectionType) {
+			case ConnectionType.LeftToRight:
+				sFullText = oMapping.LeftToRight || ConnectionType.LeftToRight;
+				break;
+			case ConnectionType.RightToLeft:
+				sFullText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+				break;
+			case ConnectionType.LeftToLeft:
+				sFullText = oMapping.LeftToLeft || ConnectionType.LeftToLeft;
+				break;
+			case ConnectionType.RightToRight:
+				sFullText = oMapping.RightToRight || ConnectionType.RightToRight;
+				break;
+			default:
+				sFullText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+				break;
+		}
+
+		// Calculate position near the ingoing arrow (end of the line)
+		// When ArrowPosition.Both, the target arrow is positioned at MULTIPLE_ARROW_DISTANCE (44px) from the end
+		var oCoords = this.getCoordinates();
+		if (oCoords && oCoords.length >= 2) {
+			var aFragmentLengthSum = [], fTotalDistance = 0;
+			var iLastIndex = oCoords.length - 1;
+
+			// Calculate cumulative distances along the path
+			for (var i = 0; i < iLastIndex; i++) {
+				if (oCoords[i].getX() === oCoords[i + 1].getX()) {
+					// Vertical line - only Y changes
+					fTotalDistance += Math.abs(oCoords[i + 1].getY() - oCoords[i].getY());
+				} else if (oCoords[i].getY() === oCoords[i + 1].getY()) {
+					// Horizontal line - only X changes
+					fTotalDistance += Math.abs(oCoords[i + 1].getX() - oCoords[i].getX());
+				} else {
+					// Diagonal line - use Pythagorean theorem If Lines are plotted Diagonally
+					fTotalDistance += Math.sqrt(
+						Math.pow(oCoords[i + 1].getX() - oCoords[i].getX(), 2) +
+						Math.pow(oCoords[i + 1].getY() - oCoords[i].getY(), 2)
+					);
+				}
+				// Store cumulative distance
+				aFragmentLengthSum.push(fTotalDistance);
+			}
+
+			// Check if there's enough space for the label box with 8px padding from target arrow
+			// When line is long enough for both arrows, check gap between them
+			// When line is short, source arrow is hidden and target arrow position is adjusted
+			var bCanFitTwoArrows = this._canLineFitTwoArrows(fTotalDistance);
+			var fTargetArrowDistance;
+			var fAvailableSpace;
+
+			if (bCanFitTwoArrows) {
+				// Both arrows present at fixed positions
+				fTargetArrowDistance = MULTIPLE_ARROW_DISTANCE;
+				// Available space = total - (source position + source arrow + target position + target arrow + 8px padding)
+				fAvailableSpace = fTotalDistance - (MULTIPLE_ARROW_DISTANCE + ARROW_LENGTH + MULTIPLE_ARROW_DISTANCE + ARROW_LENGTH + 8);
+			} else {
+				// Only target arrow present
+				fTargetArrowDistance = Math.min(MULTIPLE_ARROW_DISTANCE, fTotalDistance * 0.3);
+				// Available space = total - (target position + target arrow + 8px padding)
+				fAvailableSpace = fTotalDistance - (fTargetArrowDistance + ARROW_LENGTH + 8);
+			}
+
+			var fRequiredSpace = LABEL_BOX_WIDTH; // 30px box width
+			if (fAvailableSpace < fRequiredSpace) {
+				return;
+			}
+
+			// Position label so its end is 8px away from the target arrow
+			var fTargetDistance = fTotalDistance - fTargetArrowDistance - 8 - LABEL_BOX_WIDTH; // arrow position + 8px offset + full box width
+			var iTargetIndex = 0;
+			for (var j = 0; j < iLastIndex; j++) {
+				if (aFragmentLengthSum[j] >= fTargetDistance) {
+					iTargetIndex = j;
+					break;
+				}
+			}
+
+			// Calculate the exact position on the segment
+			var fSegmentStart = iTargetIndex > 0 ? aFragmentLengthSum[iTargetIndex - 1] : 0;
+			var fSegmentLength = aFragmentLengthSum[iTargetIndex] - fSegmentStart;
+			var fPositionInSegment = (fTargetDistance - fSegmentStart) / fSegmentLength;
+			var fLabelX = oCoords[iTargetIndex].getX() +
+				(oCoords[iTargetIndex + 1].getX() - oCoords[iTargetIndex].getX()) * fPositionInSegment;
+			var fLabelY = oCoords[iTargetIndex].getY() +
+				(oCoords[iTargetIndex + 1].getY() - oCoords[iTargetIndex].getY()) * fPositionInSegment;
+
+			// Calculate box position (centered on label coordinates)
+			var fBoxX = fLabelX - LABEL_BOX_WIDTH / 2;
+			var fBoxY = fLabelY - LABEL_BOX_HEIGHT / 2;
+
+			// Create a group to contain both rectangle and text
+			oRm.openStart("g");
+			oRm.class("sapSuiteUiCommonsNetworkLineTextBox");
+			oRm.attr("id", sId + "-textbox-middle");
+			oRm.attr("data-line-id", this._getLineId());
+			oRm.openEnd();
+
+			// Add title for tooltip on the label box group
+			oRm.openStart("title");
+			oRm.openEnd();
+			oRm.text(sFullText);
+			oRm.close("title");
+
+			// Render the rectangle background
+			oRm.openStart("rect");
+			oRm.class("sapSuiteUiCommonsNetworkLineTextBoxBackground");
+			if (sStatusClass) {
+				oRm.class(sStatusClass);
+			}
+			//this.applyStyles(oRm, this.getStyleObject(sStyle)); //ToDo:  to be applied if Box should also adhere to status styles
+			oRm.attr("x", fBoxX);
+			oRm.attr("y", fBoxY);
+			oRm.attr("width", LABEL_BOX_WIDTH);
+			oRm.attr("height", LABEL_BOX_HEIGHT);
+			oRm.attr("rx", 8); // Rounded corners
+			oRm.attr("ry", 8);
+			oRm.openEnd();
+			oRm.close("rect");
+
+			// Render the text inside the rectangle
+			oRm.openStart("text");
+			oRm.class("sapSuiteUiCommonsNetworkLineText");
+			oRm.attr("x", fLabelX);
+			oRm.attr("y", fLabelY); // Center vertically in the box
+			oRm.openEnd();
+			oRm.text(this.getLabelName());
+			oRm.close("text");
+
+			// Close the group
+			oRm.close("g");
+		}
 	};
 
 	Line.prototype._renderFocusWrapper = function () {
@@ -346,7 +594,19 @@ sap.ui.define([
 				"class": "sapSuiteUiCommonsNetworkLineFocus"
 			});
 
-			this.$()[0].appendChild(oPath);
+			// Find the first text box group to insert before it
+			var oContainer = this.getDomRef();
+			var oFirstTextBox = oContainer ? oContainer.querySelector(".sapSuiteUiCommonsNetworkLineTextBox") : null;
+
+			if (oFirstTextBox) {
+				// Insert the focus line before the first text box group
+				oContainer.insertBefore(oPath, oFirstTextBox);
+			} else {
+				// Fallback: append to end if no text boxes found
+				if (oContainer) {
+					oContainer.appendChild(oPath);
+				}
+			}
 		}.bind(this);
 
 		if (!this._bFocusRendered) {
@@ -433,6 +693,33 @@ sap.ui.define([
 
 		sPosition = sPosition || this.getArrowPosition();
 
+		// Handle multiple directed arrows positioning
+		if (sPosition === "multipleSource" || sPosition === "multipleTarget") {
+			// Check if line is long enough for the requested arrow position
+			var fTotalLineLength = this._calculateTotalLineLength();
+			var bCanFitTwoArrows = this._canLineFitTwoArrows(fTotalLineLength);
+
+			// If line is too short and we're trying to render source arrow, skip it
+			if (!bCanFitTwoArrows && sPosition === "multipleSource") {
+				// Return default fallback to avoid errors
+				return {
+					center: {x: oCoords[0].getX(), y: oCoords[0].getY()},
+					apex: {x: oCoords[1].getX(), y: oCoords[1].getY()}
+				};
+			}
+			// Find optimal segment by traveling 44px along the line path
+			var sDirection = sPosition === "multipleSource" ? "forward" : "backward";
+			var fDistance = bCanFitTwoArrows ? MULTIPLE_ARROW_DISTANCE : Math.min(MULTIPLE_ARROW_DISTANCE, fTotalLineLength * 0.3);
+			var oSegmentInfo = this._findOptimalArrowSegment(sDirection, fDistance);
+
+			return {
+				center: oSegmentInfo.center,
+				apex: oSegmentInfo.apex,
+				segmentRatio: oSegmentInfo.ratio,
+				isMultipleDirected: true
+			};
+		}
+
 		if (this.getBends().length === 0) {
 			iHolyIndex = 0;
 		} else if (sPosition === ArrowPosition.Start) {
@@ -529,8 +816,14 @@ sap.ui.define([
 
 		var fnCalcArrowPoint = function (oArrowVertex) {
 			var fFixedPosition = FIXED_ARROW_POSITION;
-			// First calculate where the center of the arrow is
-			if (sPosition === ArrowPosition.Middle) {
+			// Handle multiple directed arrows with precise positioning along segments
+			if (sPosition === "multipleSource" || sPosition === "multipleTarget") {
+				// Use the exact position calculated to be precisely 44px away
+				oArrowCenter = oFragVector.exactPosition || {
+					x: oFragVector.center.x + (oFragVector.apex.x - oFragVector.center.x) * (oFragVector.segmentRatio || 0.5),
+					y: oFragVector.center.y + (oFragVector.apex.y - oFragVector.center.y) * (oFragVector.segmentRatio || 0.5)
+				};
+			} else if (sPosition === ArrowPosition.Middle) { // First calculate where the center of the arrow is
 				oArrowCenter = {
 					x: (oFragVector.apex.x - oFragVector.center.x) * RELATIVE_ARROW_POSITION + oFragVector.center.x,
 					y: (oFragVector.apex.y - oFragVector.center.y) * RELATIVE_ARROW_POSITION + oFragVector.center.y
@@ -584,19 +877,43 @@ sap.ui.define([
 	/**
 	 * @private
 	 */
-	Line.prototype._getAccessibilityLabel = function () {
-		var sFromNodeTitle = this.getFromNode().getTitle();
-		var sFromNodeText = sFromNodeTitle ? sFromNodeTitle : this.getFromNode().getAltText();
+	Line.prototype._getAccessibilityLabel = function (oGraph) {
+		const aSentenceParts = [];
+		const sConnectionType = this.getConnectionType();
+		const sConnectionTypeText = oGraph.getConnectionTypeMapping()[sConnectionType];
+		const sFromNodeTitle = this.getFromNode().getTitle();
+		const sFromNodeText = sFromNodeTitle ? sFromNodeTitle : this.getFromNode().getAltText();
+		const sToNodeTitle = this.getToNode().getTitle();
+		const sToNodeText = sToNodeTitle ? sToNodeTitle : this.getToNode().getAltText();
+		let sConnectionText = oResourceBundle.getText('NETWORK_GRAPH_LINE_ACCESSIBILITY_CONNECTION_FROM_TO', [sFromNodeText, sToNodeText]);
+		if (sConnectionTypeText) {
+			sConnectionText = `${sConnectionTypeText} ${sConnectionText.charAt(0).toLowerCase()}${sConnectionText.slice(1)}`;
+		}
+		aSentenceParts.push(sConnectionText);
 
-		var sToNodeTitle = this.getToNode().getTitle();
-		var sToNodeText = sToNodeTitle ? sToNodeTitle : this.getToNode().getAltText();
-		var sLineState = this.getSelected() ? oResourceBundle.getText("NETWORK_GRAPH_SELECTED_NODE") : "";
-		var sAccLabel = oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_LINE_LABEL", [sFromNodeText, sToNodeText]) + " " + this.getTitle();
-		sAccLabel = sAccLabel.trim();
-		if(sLineState) {
-			sAccLabel += " " + sLineState;
+		const sStatusText = this._getStatusText(oGraph._oStatuses);
+
+		if (sStatusText) {
+			aSentenceParts.push(
+				`${oResourceBundle.getText('NETWORK_GRAPH_LINE_ACCESSIBILITY_STATUS')} ${sStatusText}`
+			);
+		}
+
+		if (this.getSelected()) {
+			aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_SELECTED_NODE'));
 		}
-		return sAccLabel + "." + oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_TOGGLE_STATE");
+
+		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_ACCESSIBILITY_TOGGLE_STATE'));
+
+		const iIncomingConnectors = this.getFromNode().getChildLines().length;
+		if (iIncomingConnectors > 1) {
+			aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_ARROW_KEYS', [sFromNodeText]));
+		}
+
+		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_TAB_TO_TARGET', [sToNodeText]));
+		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_SHIFT_TAB_TO_SOURCE', [sFromNodeText]));
+
+		return aSentenceParts.join('. ');
 	};
 
 	/* =========================================================== */
@@ -794,10 +1111,39 @@ sap.ui.define([
 		$line.on("mouseout", function (oEvent) {
 			this._mouseOut();
 		}.bind(this));
+
+		// Setup events for text box
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			var $textBox = oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]');
+
+			$textBox.on("click", function (oEvent) {
+				this._click({
+					ctrlKey: oEvent.ctrlKey,
+					clientX: oEvent.clientX,
+					clientY: oEvent.clientY
+				});
+			}.bind(this));
+
+			$textBox.on("mouseover", function (oEvent) {
+				this._mouseOver();
+			}.bind(this));
+
+			$textBox.on("mouseout", function (oEvent) {
+				this._mouseOut();
+			}.bind(this));
+		}
 	};
 
 	Line.prototype._mouseOut = function () {
 		this.$().removeClass(this.HIGHLIGHT_CLASS);
+		// Remove highlight class from text box using data-line-id attribute
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]').removeClass(this.HIGHLIGHT_CLASS);
+		}
 		if (!this.getSelected()) {
 			this._setStatusColors("");
 		}
@@ -809,6 +1155,12 @@ sap.ui.define([
 		if (!this.getSelected() && bExecuteDefault) {
 			this._setStatusColors("Hover");
 			this.$().addClass(this.HIGHLIGHT_CLASS);
+			// Add highlight class to text box using data-line-id attribute
+			var oParent = this.getParent();
+			if (oParent) {
+				var sLineId = this._getLineId();
+				oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]').addClass(this.HIGHLIGHT_CLASS);
+			}
 		}
 	};
 
@@ -910,10 +1262,37 @@ sap.ui.define([
 
 		oParent._aShadedNodes = [];
 
-        var sFromNodeTitle = oFrom.getTitle();
+		var sFromNodeTitle = oFrom.getTitle();
 		var sFromNodeText = sFromNodeTitle ? sFromNodeTitle : oFrom.getAltText();
 
-		var sTitle = "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipText\">" + sFromNodeText + "</span>";
+		// Add connection type information (always shown in tooltip)
+		var sConnectionTypeText = "";
+		var sTitle = "";
+
+		if (this.getParent()._isNoopLayout() &&
+			this.getArrowPosition() === ArrowPosition.Both) {
+
+			var sConnectionType = this.getConnectionType();
+			var oMapping = this.getParent().getConnectionTypeMapping();
+
+			if (sConnectionType === ConnectionType.LeftToRight) {
+				sConnectionTypeText = oMapping.LeftToRight || ConnectionType.LeftToRight;
+			} else if (sConnectionType === ConnectionType.RightToLeft) {
+				sConnectionTypeText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+			} else if (sConnectionType === ConnectionType.LeftToLeft) {
+				sConnectionTypeText = oMapping.LeftToLeft || ConnectionType.LeftToLeft;
+			} else if (sConnectionType === ConnectionType.RightToRight) {
+				sConnectionTypeText = oMapping.RightToRight || ConnectionType.RightToRight;
+			} else {
+				sConnectionTypeText = oMapping.RightToLeft || ConnectionType.RightToLeft;
+			}
+
+			if (sConnectionTypeText) {
+				sTitle += "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipText\">" + sConnectionTypeText + "</span><br/>";
+			}
+		}
+
+		sTitle +=  "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipText\">" + sFromNodeText + "</span>";
 
 		if (this._isBothArrow()) {
 			sTitle += "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipArrow sapSuiteUiCommonsNetworkGraphLineTooltipDualArrow\"></span>"
@@ -926,7 +1305,7 @@ sap.ui.define([
 			sTitle += "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipArrow\"></span>" + "</br>";
 		}
 
-        var sToNodeTitle = oTo.getTitle();
+		var sToNodeTitle = oTo.getTitle();
 		var sToNodeText = sToNodeTitle ? sToNodeTitle : oTo.getAltText();
 
 		sTitle += "<span class=\"sapSuiteUiCommonsNetworkGraphLineTooltipText\">" + sToNodeText + "</span>";
@@ -1095,6 +1474,18 @@ sap.ui.define([
 		if (bFocus) {
 			this._renderFocusWrapper();
 		}
+
+		// Apply focus class to text box for blue border
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			var $textBox = oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]');
+			if (bFocus) {
+				$textBox.addClass(this.FOCUS_CLASS);
+			} else {
+				$textBox.removeClass(this.FOCUS_CLASS);
+			}
+		}
 	};
 
 	Line.prototype._isEndPosition = function () {
@@ -1111,9 +1502,29 @@ sap.ui.define([
 		if (bCollapse) {
 			this.$().hide();
 			this._bIsHidden = true;
+			// Also hide the line text label if it exists
+			this._hideShowLineText(true);
 		} else if (!this.getToNode()._bIsHidden && !this.getFromNode()._bIsHidden) {
 			this.$().show();
 			this._bIsHidden = false;
+			// Also show the line text label if it exists
+			this._hideShowLineText(false);
+		}
+	};
+
+	/**
+	 * Hides or shows the line text label element
+	 * @param {boolean} bHide True to hide, false to show
+	 * @private
+	 */
+	Line.prototype._hideShowLineText = function (bHide) {
+		// Use the same ID pattern that was set during _renderLineText
+		// The text box ID is: this.getId() + "-textbox-middle"
+		var sTextBoxId = this.getId() + "-textbox-middle";
+		var oTextBox = document.getElementById(sTextBoxId);
+
+		if (oTextBox) {
+			oTextBox.style.display = bHide ? "none" : "";
 		}
 	};
 
@@ -1223,10 +1634,10 @@ sap.ui.define([
 		var LINE_TITLE_LENGTH = 25;
 		var sTitle = this.getTitle() ? (this.getTitle() + " ") : "";
 
-        var sFromNodeTitle = this.getFromNode().getTitle();
+		var sFromNodeTitle = this.getFromNode().getTitle();
 		var sFromNodeText = sFromNodeTitle ? sFromNodeTitle : this.getFromNode().getAltText();
 
-        var sToNodeTitle = this.getToNode().getTitle();
+		var sToNodeTitle = this.getToNode().getTitle();
 		var sToNodeText = sToNodeTitle ? sToNodeTitle : this.getToNode().getAltText();
 
 		return sTitle + "(" + Utils.trimText(sFromNodeText, LINE_TITLE_LENGTH) + " -> "
@@ -1261,5 +1672,299 @@ sap.ui.define([
 		return false;
 	};
 
+	/**
+	 * Calculates the total length of the line by summing up all the segment distances.
+	 * @returns {number} Total line length in pixels
+	 * @private
+	 */
+	Line.prototype._calculateTotalLineLength = function () {
+		var oCoords = this.getCoordinates();
+		var fTotalLength = 0;
+
+		if (!oCoords || oCoords.length < 2) {
+			return 0;
+		}
+
+		// Sum the distance of each line segment
+		for (var i = 0; i < oCoords.length - 1; i++) {
+			var fSegmentLength = Math.sqrt(
+				Math.pow(oCoords[i + 1].getX() - oCoords[i].getX(), 2) +
+				Math.pow(oCoords[i + 1].getY() - oCoords[i].getY(), 2)
+			);
+			fTotalLength += fSegmentLength;
+		}
+
+		return fTotalLength;
+	};
+
+	/**
+	 * Determines if a line is long enough to accommodate two arrows at 44px from each anchor
+	 * @param {number} fLineLength - Total length of the line
+	 * @returns {boolean} True if line can fit two arrows with proper spacing
+	 * @private
+	 */
+	Line.prototype._canLineFitTwoArrows = function (fLineLength) {
+		// Minimum line length calculation:
+		// - 44px from source anchor
+		// - 44px from target anchor
+		// - 20px minimum spacing between arrows
+		// Total: 108px minimum
+		var fMinLineLength = (MULTIPLE_ARROW_DISTANCE * 2) + 20;
+
+		// Add some buffer for curved/bent lines where the actual path might be longer
+		// but the arrow positions could still overlap
+		var fSafeLineLength = fMinLineLength + 10; // 118px total
+
+		return fLineLength >= fSafeLineLength;
+	};
+
+	Line.prototype._shouldRenderSourceArrow = function () {
+		if (!this._hasMultipleDirectedArrows()) {
+			return false;
+		}
+
+		var oSourceNode = this.getFromNode();
+		if (!oSourceNode) {
+			return true; // Fallback: show arrow if source node not found
+		}
+
+		var aOutgoingLines = oSourceNode.getChildLines();
+
+		// If source node has only one outgoing line, show the arrow
+		if (!aOutgoingLines || aOutgoingLines.length <= 1) {
+			return true;
+		}
+
+		// Filter valid outgoing lines first
+		var aValidOutgoingLines = aOutgoingLines.filter(function(oLine) {
+			return oLine && oLine.getVisible() && !oLine._isIgnored();
+		});
+
+		if (aValidOutgoingLines.length <= 1) {
+			return true;
+		}
+
+		// Group outgoing lines by their direction/side from the source node
+		var oLinesByDirection = this._groupLinesByDirection(aValidOutgoingLines, oSourceNode, "outgoing");
+
+		// Get the direction of this line
+		var sThisLineDirection = this._getLineDirection(this, oSourceNode, "outgoing");
+
+		// Get lines going in the same direction as this line
+		var aLinesInSameDirection = oLinesByDirection[sThisLineDirection] || [];
+
+		if (aLinesInSameDirection.length <= 1) {
+			return true;
+		}
+
+		// Sort lines by their ID to ensure consistent ordering
+		aLinesInSameDirection.sort(function(a, b) {
+			return a._getLineId().localeCompare(b._getLineId());
+		});
+
+		// Show arrow only on the first line in the sorted list for this direction
+		return aLinesInSameDirection[0] === this;
+	};
+
+	/**
+	 * Checks if multiple directed arrows feature is enabled at the graph level
+	 * @returns {boolean} True if the feature is enabled
+	 * @private
+	 */
+	Line.prototype._hasMultipleDirectedArrows = function () {
+		var oParent = this.getParent();
+		return oParent && oParent._enableMultipleDirectedArrows === true;
+	};
+
+	/**
+	 * Groups lines by their direction relative to a node
+	 * @param {array} aLines - Array of lines to group
+	 * @param {object} oNode - The reference node
+	 * @param {string} sType - "outgoing" or "incoming"
+	 * @returns {object} Object with direction as key and array of lines as value
+	 * @private
+	 */
+	Line.prototype._groupLinesByDirection = function (aLines, oNode, sType) {
+		var oGroupedLines = {
+			"right": [],
+			"left": [],
+			"up": [],
+			"down": []
+		};
+
+		aLines.forEach(function(oLine) {
+			var sDirection = this._getLineDirection(oLine, oNode, sType);
+			if (oGroupedLines[sDirection]) {
+				oGroupedLines[sDirection].push(oLine);
+			}
+		}.bind(this));
+
+		return oGroupedLines;
+	};
+
+	/**
+	 * Determines the direction of a line relative to a node based on connection anchors
+	 * @param {object} oLine - The line object
+	 * @param {object} oNode - The reference node
+	 * @param {string} sType - "outgoing" or "incoming"
+	 * @returns {string} Direction: "right", "left", "up", or "down"
+	 * @private
+	 */
+	Line.prototype._getLineDirection = function (oLine, oNode, sType) {
+		// Validate inputs
+		if (!oLine || !oNode) {
+			return "right"; // Default fallback
+		}
+
+		var oOtherNode = sType === "outgoing" ? oLine.getToNode() : oLine.getFromNode();
+		if (!oOtherNode) {
+			return "right"; // Default fallback
+		}
+
+		// Use the actual line coordinates (source/target anchors) instead of node centers
+		var oSourceCoords = oLine.getSource();
+		var oTargetCoords = oLine.getTarget();
+		var oNodeCenter = oNode.getCenterPosition();
+
+		// Validate coordinates
+		if (!oSourceCoords || !oTargetCoords || !oNodeCenter ||
+			typeof oSourceCoords.getX !== 'function' || typeof oSourceCoords.getY !== 'function' ||
+			typeof oTargetCoords.getX !== 'function' || typeof oTargetCoords.getY !== 'function' ||
+			typeof oNodeCenter.x !== 'number' || typeof oNodeCenter.y !== 'number') {
+			return "right"; // Default fallback
+		}
+
+		// Get the anchor point coordinates
+		var fSourceX = oSourceCoords.getX();
+		var fSourceY = oSourceCoords.getY();
+		var fTargetX = oTargetCoords.getX();
+		var fTargetY = oTargetCoords.getY();
+
+		// Determine which anchor point belongs to our reference node
+		var fAnchorX, fAnchorY;
+		if (sType === "outgoing") {
+			// For outgoing lines, use the source anchor (where line starts from our node)
+			fAnchorX = fSourceX;
+			fAnchorY = fSourceY;
+		} else {
+			// For incoming lines, use the target anchor (where line ends at our node)
+			fAnchorX = fTargetX;
+			fAnchorY = fTargetY;
+		}
+
+		// Calculate the direction based on anchor position relative to node center
+		var fDeltaX = fAnchorX - oNodeCenter.x;
+		var fDeltaY = fAnchorY - oNodeCenter.y;
+
+		// Use threshold to handle edge cases
+		var fThreshold = 5.0; // 5px threshold for anchor-based detection
+		var fAbsDeltaX = Math.abs(fDeltaX);
+		var fAbsDeltaY = Math.abs(fDeltaY);
+
+		// If anchor is very close to center, fall back to target direction
+		if (fAbsDeltaX < fThreshold && fAbsDeltaY < fThreshold) {
+			// Use direction to other node as fallback
+			var oOtherCenter = oOtherNode.getCenterPosition();
+			if (oOtherCenter) {
+				fDeltaX = oOtherCenter.x - oNodeCenter.x;
+				fDeltaY = oOtherCenter.y - oNodeCenter.y;
+				fAbsDeltaX = Math.abs(fDeltaX);
+				fAbsDeltaY = Math.abs(fDeltaY);
+			} else {
+				return "right"; // Final fallback
+			}
+		}
+
+		// Determine direction based on larger delta
+		if (fAbsDeltaX > fAbsDeltaY + fThreshold) {
+			return fDeltaX > 0 ? "right" : "left";
+		} else if (fAbsDeltaY > fAbsDeltaX + fThreshold) {
+			return fDeltaY > 0 ? "down" : "up";
+		} else {
+			// When deltas are nearly equal, prefer horizontal direction for consistency
+			return fDeltaX >= 0 ? "right" : "left";
+		}
+	};
+
+	/**
+	 * Finds the optimal segment for placing arrows on bent lines by traveling along the path
+	 * @param {string} sDirection - "forward" from source or "backward" from target
+	 * @param {number} fDistance - Distance to travel along the line (e.g., 44px)
+	 * @returns {object} Segment information with exact position 44px away from anchor
+	 * @private
+	 */
+	Line.prototype._findOptimalArrowSegment = function (sDirection, fDistance) {
+		var oCoords = this.getCoordinates(),
+			iLastIndex = oCoords.length - 1,
+			fTotalDistance = 0,
+			fSegmentDistance,
+			iSegmentIndex,
+			fRemainingDistance,
+			i;
+
+		if (sDirection === "forward") {
+			// Travel from source towards target
+			for (i = 0; i < iLastIndex; i++) {
+				fSegmentDistance = Math.sqrt(
+					Math.pow(oCoords[i + 1].getX() - oCoords[i].getX(), 2) +
+					Math.pow(oCoords[i + 1].getY() - oCoords[i].getY(), 2)
+				);
+
+				if (fTotalDistance + fSegmentDistance >= fDistance) {
+					// Found the segment where 44px distance falls
+					fRemainingDistance = fDistance - fTotalDistance;
+					iSegmentIndex = i;
+					break;
+				}
+				fTotalDistance += fSegmentDistance;
+			}
+		} else {
+			// Travel from target towards source
+			for (i = iLastIndex; i > 0; i--) {
+				fSegmentDistance = Math.sqrt(
+					Math.pow(oCoords[i].getX() - oCoords[i - 1].getX(), 2) +
+					Math.pow(oCoords[i].getY() - oCoords[i - 1].getY(), 2)
+				);
+
+				if (fTotalDistance + fSegmentDistance >= fDistance) {
+					// Found the segment where 44px distance falls
+					fRemainingDistance = fDistance - fTotalDistance;
+					iSegmentIndex = i - 1; // Use the segment index format (i to i+1)
+					break;
+				}
+				fTotalDistance += fSegmentDistance;
+			}
+		}
+
+		// Fallback to first/last segment if distance is too large
+		if (typeof iSegmentIndex === "undefined") {
+			iSegmentIndex = sDirection === "forward" ? 0 : Math.max(0, iLastIndex - 1);
+			fRemainingDistance = sDirection === "forward" ? fDistance : fDistance;
+		}
+
+		// Calculate exact position along the segment
+		var fSegmentLength = Math.sqrt(
+			Math.pow(oCoords[iSegmentIndex + 1].getX() - oCoords[iSegmentIndex].getX(), 2) +
+			Math.pow(oCoords[iSegmentIndex + 1].getY() - oCoords[iSegmentIndex].getY(), 2)
+		);
+
+		var fRatio = fSegmentLength > 0 ? (fRemainingDistance / fSegmentLength) : 0;
+		if (sDirection === "backward") {
+			fRatio = 1 - fRatio; // Reverse the ratio for backward direction
+		}
+
+		// Calculate the exact coordinates that are 44px away from the anchor
+		var fExactX = oCoords[iSegmentIndex].getX() + (oCoords[iSegmentIndex + 1].getX() - oCoords[iSegmentIndex].getX()) * fRatio;
+		var fExactY = oCoords[iSegmentIndex].getY() + (oCoords[iSegmentIndex + 1].getY() - oCoords[iSegmentIndex].getY()) * fRatio;
+
+		return {
+			segmentIndex: iSegmentIndex,
+			ratio: fRatio,
+			center: {x: oCoords[iSegmentIndex].getX(), y: oCoords[iSegmentIndex].getY()},
+			apex: {x: oCoords[iSegmentIndex + 1].getX(), y: oCoords[iSegmentIndex + 1].getY()},
+			exactPosition: {x: fExactX, y: fExactY}
+		};
+	};
+
 	return Line;
 });