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

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

@@ -20,19 +20,28 @@ sap.ui.define([
 	"sap/ui/core/Core",
 	"sap/ui/core/Theming",
 	"sap/ui/core/Lib",
-	"./Utils"
-], function(jQuery, library, ElementBase, ElementAttribute, IconPool, Device, encodeXML, sanitizeHTML, CheckBox, Text, NodeRenderer, Core, Theming, CoreLib, Utils) {
+	"./Utils",
+	"sap/base/Log",
+	"./util/DragDropManager",
+	"./util/PortManager",
+	"./util/CreateConnectionPopover",
+	"sap/m/Menu",
+	"sap/m/MenuItem"
+], function(jQuery, library, ElementBase, ElementAttribute, IconPool, Device, encodeXML, sanitizeHTML, CheckBox, Text, NodeRenderer, Core, Theming, CoreLib, Utils, Log, DragDropManager, PortManager, CreateConnectionPopover, Menu, MenuItem) {
 	"use strict";
 
 	var Shape = library.networkgraph.NodeShape,
 		ActionButtonPosition = library.networkgraph.ActionButtonPosition,
 		HeaderCheckboxState = library.networkgraph.HeaderCheckboxState,
-		SemanticColorType = library.SemanticColorType;
+		SemanticColorType = library.SemanticColorType,
+		NodePorts = library.networkgraph.NodePorts;
 
 	var HEADER_SIZE = 32,
 		TITLE_OFFSET = 5,
 		MIN_WIDTH = 160,
-		MAX_ACTION_BUTTONS = 4;
+		MAX_ACTION_BUTTONS = 4,
+		ACTION_BUTTONS_OFFSET = -34,
+		MAX_VISIBLE_BUTTONS_ON_TOP = 3;
 
 	var Size = {
 		Circle: {
@@ -91,6 +100,21 @@ sap.ui.define([
 
 	var oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
 
+	// Register BusinessSuiteInAppSymbols font for custom icons
+	// IconPool.registerFont({
+	// 	fontFamily: "BusinessSuiteInAppSymbols",
+	// 	collectionName: "BusinessSuiteInAppSymbols",
+	// 	fontURI: sap.ui.require.toUrl("sap/ushell/themes/base/fonts/")
+	// });
+
+	// register TNT icon font
+	IconPool.registerFont({
+		collectionName: "tnt",
+		fontFamily: "SAP-icons-TNT",
+		fontURI: sap.ui.require.toUrl("sap/tnt/themes/base/fonts"),
+		lazy: false
+	});
+
 	var Status = library.networkgraph.ElementStatus;
 	var oStatusIconMap = {
 		[Status.Success]: 'sap-icon://sys-enter-2',
@@ -116,6 +140,7 @@ sap.ui.define([
 	var Node = ElementBase.extend("sap.suite.ui.commons.networkgraph.Node", {
 		metadata: {
 			library: "sap.suite.ui.commons",
+			dnd : { draggable: true, droppable: false },
 			properties: {
 				/**
 				 * Defines if the Header checkbox should be displayed and whether it should be selected or not. By default, the checkbox is hidden. Available only for box nodes.
@@ -271,6 +296,27 @@ sap.ui.define([
 				 */
 				nodeTitleBackground: {
 					type: "boolean", group: "Appearance", defaultValue: false
+				},
+				/**
+				 * Determines the port configuration for this node. When set, it overrides the graph-level nodePorts setting.
+				 * If not set (defaults to None), the graph-level setting is used.
+				 * Ports are available only when the layout algorithm is set to "NoopLayout", and when the drag and drop is enabled.
+				 * @public
+				 * @since 1.136.19
+				 */
+				nodePorts: {
+					type: "sap.suite.ui.commons.networkgraph.NodePorts", group: "Behavior"
+				},
+				/**
+				 * Determines whether the 'Create Connection' action button is displayed on this node.
+				 * When set, it overrides the graph-level showCreateConnectionButton setting.
+				 * If set to default (true), the graph-level setting is used.
+				 * The button is used to create connections between nodes as an accessible alternative to node ports.
+				 * @public
+				 * @since 1.136.19
+				 */
+				showCreateConnectionButton: {
+					type: "boolean", group: "Behavior", defaultValue: true
 				}
 			},
 			aggregations: {
@@ -338,6 +384,13 @@ sap.ui.define([
 			}
 		},
 		onAfterRendering: function() {
+			if (this.getDragDropConfig().length === 0) {
+				try {
+					DragDropManager.injectDnD(this);
+				} catch (error) {
+					Log.error("Node DnD: ", error);
+				}
+			}
 			this._afterRenderingBase();
 		}
 	});
@@ -453,15 +506,25 @@ sap.ui.define([
 		}
 	};
 
+	Node.prototype.exit = function () {
+		DragDropManager.removeDnD(this);
+		// Cleanup connection popover utility
+		if (this._oConnectionPopoverUtil) {
+			this._oConnectionPopoverUtil.destroy();
+			this._oConnectionPopoverUtil = null;
+		}
+	};
+
 	Node.prototype._isInteractiveNode = function() {
 		var bIsShowExpandButton = this.getShowExpandButton() && this._hasVisibleChildren(),
 			bIsShowDetailButton = this.getShowDetailButton() && (this._hasDetailData() || this.getTitle()),
 			bIsShowActionLinksButton = this.getShowActionLinksButton() && this._hasActionLinks(),
 			aActionButtons = this.getActionButtons(),
 			bIsActionButton = aActionButtons && aActionButtons.length > 0,
-			bIsPress = this.mEventRegistry.press;
+			bIsPress = this.mEventRegistry.press,
+			bIsPortButton = this._hasPortActionButton();
 
-		return bIsShowExpandButton || bIsShowDetailButton || bIsShowActionLinksButton || bIsActionButton || bIsPress;
+		return bIsShowExpandButton || bIsShowDetailButton || bIsShowActionLinksButton || bIsActionButton || bIsPress || bIsPortButton;
 
 	};
 
@@ -600,32 +663,54 @@ sap.ui.define([
 
 	Node.prototype._showDivActionButtons = function(bShow) {
 		var that = this,
+			$top = this.$("topdivbuttons"),
 			$right = this.$("rightdivbuttons"),
-			$left = this.$("leftdivbuttons");
+			$left = this.$("leftdivbuttons"),
+			oGraph = this.getParent(),
+			bShouldShowPortButton = this._showCreateConnectionButton() && oGraph?.getEnableDragAndDrop(),
+			oLayoutAlgorithm = oGraph.getLayoutAlgorithm(),
+			bShowButtonsOnTop = oGraph._isNoopLayout() && oLayoutAlgorithm.getEnableOptimizedLineAlgorithm();
 
+		// Force re-render if buttons haven't been rendered yet
 		if (bShow && !this._bActionButtonsRendered) {
+
+			$top.html("");
 			$right.html("");
 			$left.html("");
 
-			var iButtonRight = 0,
-				iButtonLeft = 0;
+			var iButtonTop = 0,
+				iButtonRight = 0,
+				iButtonLeft = 0,
+				$defaultWrapper = bShowButtonsOnTop ? $top : $right,
+				aOverflowButtons = [];
+
+			// When buttons are on top, only count enabled buttons for overflow calculation
+			// Disabled buttons are hidden with display:none so shouldn't count toward limit
 
 			if (this.getShowExpandButton()) {
-				this._appendActionButton({
+				var oExpandButtonConfig = {
 					"class": "sapSuiteUiCommonsNetworkNodeActionCollapseIcon",
 					icon: this._getExpandIcon(true),
 					enable: this._hasVisibleChildren(),
 					title: this._getExpandStateTitle(),
 					id: this._getDomId("actionCollapse"),
 					click: this._expandClick.bind(this)
-				}, $right);
+				};
 
-				iButtonRight++;
+				this._appendActionButton(oExpandButtonConfig, $defaultWrapper);
+				// Only increment counter if button is enabled (disabled buttons are hidden)
+				if (oExpandButtonConfig.enable) {
+					if (bShowButtonsOnTop) {
+						iButtonTop++;
+					} else {
+						iButtonRight++;
+					}
+				}
 			}
 
 			if (this.getShowDetailButton()) {
                 var sNodeTitle = this.getTitle();
-				this._appendActionButton({
+				var oDetailButtonConfig = {
 					icon: "sap-icon://menu2",
 					enable: this._hasDetailData() || (sNodeTitle ? sNodeTitle : this.getAltText()),
 					id: this._getDomId("actionDetail"),
@@ -633,15 +718,44 @@ sap.ui.define([
 					click: function(evt) {
 						this._detailClick(evt.target);
 					}.bind(this)
-				}, $right);
+				};
+
+				this._appendActionButton(oDetailButtonConfig, $defaultWrapper);
 				if (document.getElementById(this._getDomId("actionDetail"))) {
 					document.getElementById(this._getDomId("actionDetail")).setAttribute("aria-haspopup", "dialog");
 				}
-				iButtonRight++;
+				// Only increment counter if button is enabled (disabled buttons are hidden)
+				if (oDetailButtonConfig.enable) {
+					if (bShowButtonsOnTop) {
+						iButtonTop++;
+					} else {
+						iButtonRight++;
+					}
+				}
+			}
+
+			// Add port action button if nodePorts is not "None"
+			if (bShouldShowPortButton) {
+				var oPortButtonConfig = {
+					icon: "sap-icon://tnt/item-flow",
+					enable: true,
+					title: oResourceBundle.getText("NETWORK_GRAPH_CREATE_CONNECTION"),
+					id: this._getDomId("actionPorts"),
+					click: function(evt) {
+						this._showConnectionPopover(evt);
+					}.bind(this)
+				};
+
+				this._appendActionButton(oPortButtonConfig, $defaultWrapper);
+				if (bShowButtonsOnTop) {
+					iButtonTop++;
+				} else {
+					iButtonRight++;
+				}
 			}
 
 			if (this.getShowActionLinksButton()) {
-				this._appendActionButton({
+				var oLinksButtonConfig = {
 					icon: "sap-icon://chain-link",
 					enable: this._hasActionLinks(),
 					title: oResourceBundle.getText("NETWORK_GRAPH_NODE_LINKS"),
@@ -649,38 +763,118 @@ sap.ui.define([
 					click: function(evt) {
 						this._linksClick(evt.target);
 					}.bind(this)
-				}, $right);
-				if (document.getElementById(this._getDomId("actionLinks"))) {
-					document.getElementById(this._getDomId("actionLinks")).setAttribute("aria-haspopup", "dialog");
+				};
+
+				// Overflow logic: button goes to overflow if we've already placed 3 enabled buttons
+				if (bShowButtonsOnTop && iButtonTop >= MAX_VISIBLE_BUTTONS_ON_TOP && oLinksButtonConfig.enable) {
+					aOverflowButtons.push(oLinksButtonConfig);
+				} else {
+					this._appendActionButton(oLinksButtonConfig, $defaultWrapper);
+					if (document.getElementById(this._getDomId("actionLinks"))) {
+						document.getElementById(this._getDomId("actionLinks")).setAttribute("aria-haspopup", "dialog");
+					}
+					// Only increment counter if button is enabled (disabled buttons are hidden)
+					if (oLinksButtonConfig.enable) {
+						if (bShowButtonsOnTop) {
+							iButtonTop++;
+						} else {
+							iButtonRight++;
+						}
+					}
 				}
-				iButtonRight++;
 			}
 
-			for (var i = 0; (iButtonRight + iButtonLeft) < (MAX_ACTION_BUTTONS * 2) && i < this.getActionButtons().length; i++) {
-				(function(oButton) {  // eslint-disable-line
-					var sPosition = oButton.getPosition(),
-						iIndex = sPosition === ActionButtonPosition.Right ? iButtonRight : iButtonLeft;
+			for (var i = 0; (iButtonTop + iButtonRight + iButtonLeft) < (MAX_ACTION_BUTTONS * 3) && i < this.getActionButtons().length; i++) {
+			(function(oButton) {  // eslint-disable-line
+				var sPosition = oButton.getPosition();
+				var iIndex, $wrapper;
+
+				// When buttons are shown on top, custom action buttons always go to top position
+				if (bShowButtonsOnTop) {
+					sPosition = "Top";
+					iIndex = iButtonTop;
+					$wrapper = $top;
+				} else {
+					if (sPosition === ActionButtonPosition.Right) {
+						iIndex = iButtonRight;
+						$wrapper = $right;
+					} else if (sPosition === ActionButtonPosition.Left) {
+						iIndex = iButtonLeft;
+						$wrapper = $left;
+					} else {
+						iIndex = iButtonTop;
+						$wrapper = $top;
+					}
 
 					// switch lanes if there is more then 4 items on the line
 					if (iIndex >= MAX_ACTION_BUTTONS) {
-						sPosition = sPosition === ActionButtonPosition.Left ? ActionButtonPosition.Right : ActionButtonPosition.Left;
+						if (sPosition === ActionButtonPosition.Right) {
+							sPosition = ActionButtonPosition.Left;
+							$wrapper = $left;
+						} else if (sPosition === ActionButtonPosition.Left) {
+							sPosition = "Top"; // Custom position for top
+							$wrapper = $top;
+						} else {
+							sPosition = ActionButtonPosition.Right;
+							$wrapper = $right;
+						}
 					}
+				}
 
-					var $wrapper = sPosition === ActionButtonPosition.Right ? $right : $left;
+				var oButtonConfig = {
+					icon: oButton.getIcon(),
+					enable: oButton.getEnabled(),
+					title: oButton.getTitle(),
+					id: oButton.getId(),
+					click: function(evt) {
+						oButton.firePress({
+							buttonElement: evt.target
+						});
+						// Restore focus after a small timeout (to let any rerender settle)
+						setTimeout(function () {
+							if (oButton && oButton.getDomRef()) {
+								that.getParent().setFocus({item:oButton.getParent(), button: oButton.getDomRef()});
+							}
+						}, 0);
+					}
+				};
 
-					that._appendActionButton({
-						icon: oButton.getIcon(),
-						enable: oButton.getEnabled(),
-						title: oButton.getTitle(),
-						id: oButton.getId(),
-						click: function(evt) {
-							oButton.firePress({
-								buttonElement: evt.target
-							});
+				// Apply overflow logic only when buttons are shown on top
+				// Custom buttons go to overflow if we've already placed 3 enabled buttons
+				if (bShowButtonsOnTop && iButtonTop >= MAX_VISIBLE_BUTTONS_ON_TOP && oButtonConfig.enable) {
+					aOverflowButtons.push(oButtonConfig);
+				} else {
+					that._appendActionButton(oButtonConfig, $wrapper);
+					// Only increment counter if button is enabled (disabled buttons are hidden)
+					if (oButtonConfig.enable) {
+						// Increment the correct counter
+						if (bShowButtonsOnTop) {
+							iButtonTop++;
+						} else if (sPosition === ActionButtonPosition.Right) {
+							iButtonRight++;
+						} else if (sPosition === ActionButtonPosition.Left) {
+							iButtonLeft++;
+						} else {
+							iButtonTop++;
 						}
-					}, $wrapper);
-				})(this.getActionButtons()[i]);
+					}
+				}
+			})(this.getActionButtons()[i], i);
+		}
+
+		// Add overflow button if there are overflow items
+		 if (bShowButtonsOnTop && aOverflowButtons.length > 0) {
+				this._appendActionButton({
+					icon: "sap-icon://overflow",
+					enable: true,
+					title: "More Actions",
+					id: this._getDomId("actionOverflow"),
+					click: function(evt) {
+						this._showOverflowPopover(evt.target, aOverflowButtons);
+					}.bind(this)
+				}, $top);
 			}
+
 			this._bActionButtonsRendered = true;
 		}
 
@@ -715,6 +909,7 @@ sap.ui.define([
 				id: sId,
 				"data-sap-ui": sId,
 				"class": sNodeClass,
+				"draggable": !!(this.getParent()._isDnDEnabled())
 			};
 
 		if (sNodeClass.includes("sapSuiteUiCommonsNetworkBox") && this.getTooltip_AsString()) {
@@ -729,7 +924,8 @@ sap.ui.define([
 			// this may put nodes to the edge of the parent which makes calculation of div maxWidth impossible
 			top: !this._bMainRender && this.getY() ? (this.getY() + "px") : "",
 			left: !this._bMainRender && this.getX() ? (this.getX() + "px") : "",
-			"min-width": MIN_WIDTH + "px"
+			"min-width": MIN_WIDTH + "px",
+			"outline-offset": parseFloat(this._getStatusValue(ElementBase.ColorType.BorderWidth)) + .7 + "px"
 		}, oAttributes, mOptions.renderManager);
 
 		this.renderContent(mOptions);
@@ -780,11 +976,11 @@ sap.ui.define([
 				"border-color": ElementBase.ColorType.Background
 			}, false);
 
-			let {style: sBorderColor, class: sBorderClass} = this._getStatusStyle({
-				"border-color": ElementBase.ColorType.Border,
+			let { style: sBorderColor, class: sBorderClass } = this._getStatusStyle({
+				"outline-color": ElementBase.ColorType.Border,
 				"background-color": this.getSelected() ? ElementBase.ColorType.SelectedBackground : "",
-				"border-width": ElementBase.ColorType.BorderWidth,
-				"border-style": ElementBase.ColorType.BorderStyle
+				"outline-width": ElementBase.ColorType.BorderWidth,
+				"outline-style": ElementBase.ColorType.BorderStyle
 			}, false);
 
 			mOptions.renderManager.openStart("div", sId + "-wrapperwithbuttons");
@@ -828,10 +1024,10 @@ sap.ui.define([
 		} else {
 			var oWidth = this._getCorrectWidth();
 			let {style: sBStyle, class: sBClass} = this._getStatusStyle({
-				"border-color": ElementBase.ColorType.Border,
+				"outline-color": ElementBase.ColorType.Border,
 				"background-color": this.getSelected() ? ElementBase.ColorType.SelectedBackground : "",
-				"border-width": ElementBase.ColorType.BorderWidth,
-				"border-style": ElementBase.ColorType.BorderStyle
+				"outline-width": ElementBase.ColorType.BorderWidth,
+				"outline-style": ElementBase.ColorType.BorderStyle
 			});
 			var sMainStyle = this._convertToStyle({
 				width: oWidth.width,
@@ -1784,21 +1980,21 @@ sap.ui.define([
 
 	//Recursive Traversal ensures all shared parents of collapsed descendants have their action buttons re-rendered correctly.
 	Node.prototype._invalidateSharedParents = function(oNode, oOrigin = oNode, oVisited = new Set()) {
-	if (oVisited.has(oNode)) {
-		return;
-	}
-	oVisited.add(oNode);
-
-	oNode.getParentNodes().forEach(parent => {
-		if (parent !== oOrigin) {
-			parent._bActionButtonsRendered = false;
+		if (oVisited.has(oNode)) {
+			return;
 		}
-	});
+		oVisited.add(oNode);
 
-	oNode.getChildNodes().forEach(oChild => {
-		this._invalidateSharedParents(oChild, oOrigin, oVisited);
-	});
-}
+		oNode.getParentNodes().forEach(parent => {
+			if (parent !== oOrigin) {
+				parent._bActionButtonsRendered = false;
+			}
+		});
+
+		oNode.getChildNodes().forEach(oChild => {
+			this._invalidateSharedParents(oChild, oOrigin, oVisited);
+		});
+	}
 
 	Node.prototype._setTextHeight = function($el, iMaxLines) {
 		if ($el[0] && iMaxLines > 0) {
@@ -1963,6 +2159,7 @@ sap.ui.define([
 		$wrapper.on("click", function(oEvent) {
 				if (oEvent.which === 1) {
 					this._onClick(oEvent.ctrlKey);
+					this._togglePortsOnNode();
 				}
 			oEvent.preventDefault();
 		}.bind(this));
@@ -2434,28 +2631,138 @@ sap.ui.define([
 		}
 	};
 
-	Node.prototype._getAccessibilityLabel = function(oGraph) {
-		var oParent = oGraph ? oGraph : this.getParent();
-        var sNodeTitle = this.getTitle();
-		var sNodeTitleText = sNodeTitle ? sNodeTitle : this.getAltText();
-		var sLabel = oResourceBundle.getText("NETWORK_GRAPH_NODE") + " " + sNodeTitleText;
-		if (this._isBox(oParent)) {
-			this.getVisibleAttributes().forEach(function(oAttribute) {
-				sLabel += " " + oAttribute.getLabel() + " " + oAttribute.getValue();
+	Node.prototype._getAccessibilityLabel = function (oGraph) {
+		const oParent = oGraph || this.getParent();
+		const sNodeTitle = this.getTitle();
+		const sNodeTitleText = sNodeTitle || this.getAltText();
+		let sLabel = `${oResourceBundle.getText(
+			"NETWORK_GRAPH_NODE"
+		)} ${sNodeTitleText}`;
+		const aSentenceParts = [];
+
+		if (this.getDescription()) {
+			aSentenceParts.push(
+				`${oResourceBundle.getText(
+					"NETWORK_GRAPH_NODE_DESCRIPTION"
+				)} ${this.getDescription()}`
+			);
+		}
+
+		if (this._isBox(oParent) && this.getVisibleAttributes().length > 0) {
+			const aAttributeParts = [
+				oResourceBundle.getText("NETWORK_GRAPH_NODE_ATTRIBUTES"),
+			];
+			this.getVisibleAttributes().forEach((oAttribute) => {
+				aAttributeParts.push(
+					`${oAttribute.getLabel()} ${oAttribute.getValue()}`
+				);
 			});
+			aSentenceParts.push(aAttributeParts.join(" "));
 		}
-		if (this.getStatus() && this.getStatus() != ""){
-			var statusID = this.getStatus();
-			if (oParent._oStatuses[statusID]) {
-				sLabel += " " + oResourceBundle.getText("PF_ARIA_STATUS") + " " + oParent._oStatuses[statusID].getTitle();
-			} else {
-				sLabel += " " + oResourceBundle.getText("PF_ARIA_STATUS") + " " + this.getStatus();
-			}
+
+		const sStatusText = this._getStatusText(oParent._oStatuses);
+
+		if (sStatusText) {
+			aSentenceParts.push(
+				`${oResourceBundle.getText(
+					"NETWORK_GRAPH_NODE_ACCESSIBILITY_STATUS"
+				)} ${sStatusText}`
+			);
 		}
+
 		if (this.getSelected()) {
-			sLabel += " " + oResourceBundle.getText("NETWORK_GRAPH_SELECTED_NODE");
+			aSentenceParts.push(
+				oResourceBundle.getText("NETWORK_GRAPH_SELECTED_NODE")
+			);
 		}
-		return sLabel + "." + oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_TOGGLE_STATE");
+
+		aSentenceParts.push(
+			oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_TOGGLE_STATE")
+		);
+
+		const iIncomingConnectors = this.getParentLines().length;
+		const sIncomingTextKey = iIncomingConnectors === 1
+			? "NETWORK_GRAPH_INCOMING_CONNECTOR_SINGULAR"
+			: "NETWORK_GRAPH_INCOMING_CONNECTORS_PLURAL";
+		aSentenceParts.push(oResourceBundle.getText(sIncomingTextKey, [iIncomingConnectors]));
+
+		const iOutgoingConnectors = this.getChildLines().length;
+		const sOutgoingTextKey = iOutgoingConnectors === 1
+			? "NETWORK_GRAPH_OUTGOING_CONNECTOR_SINGULAR"
+			: "NETWORK_GRAPH_OUTGOING_CONNECTORS_PLURAL";
+		aSentenceParts.push(oResourceBundle.getText(sOutgoingTextKey, [iOutgoingConnectors]));
+
+		if (iOutgoingConnectors > 0) {
+			aSentenceParts.push(oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_TAB_TO_OUTGOING"));
+		}
+
+		if (iIncomingConnectors > 0) {
+			aSentenceParts.push(oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_SHIFT_TAB_TO_INCOMING"));
+		}
+
+		const { aIncomingConnectors, aOutgoingConnectors } = this._getAltNavigationConnectors();
+		if (aIncomingConnectors.length >= 2 || aOutgoingConnectors.length >= 2) {
+			aSentenceParts.push(oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_ALT_CONNECTORS"));
+		}
+
+		return `${sLabel}. ${aSentenceParts.join(". ")}.`;
+	};
+
+	Node.prototype._getAltNavigationConnectors = function () {
+		const iThisX = this.getX();
+		const fnDir = (oNode) => oNode?.getX() < iThisX ? "left" : "right";
+		const fnActive = (oLine) => oLine.getVisible() && !oLine.isHidden() && !oLine._isIgnored();
+
+		// Incoming: all valid lines, sorted top-to-bottom by source node Y, then by node key for stability
+		const aIncomingConnectors = this.getParentLines()
+			.filter((oLine) => fnActive(oLine) && oLine.getFromNode())
+			.sort((a, b) => {
+				const iY = a.getFromNode().getY() - b.getFromNode().getY();
+				return iY !== 0 ? iY : a.getFromNode().getKey().localeCompare(b.getFromNode().getKey());
+			})
+			.map((oLine) => ({ line: oLine, type: "incoming", direction: fnDir(oLine.getFromNode()) }));
+
+		// Outgoing: all valid lines, sorted top-to-bottom by target node Y, then by node key for stability
+		const aOutgoingConnectors = this.getChildLines()
+			.filter((oLine) => fnActive(oLine) && oLine.getToNode())
+			.sort((a, b) => {
+				const iY = a.getToNode().getY() - b.getToNode().getY();
+				return iY !== 0 ? iY : a.getToNode().getKey().localeCompare(b.getToNode().getKey());
+			})
+			.map((oLine) => ({ line: oLine, type: "outgoing", direction: fnDir(oLine.getToNode()) }));
+
+		const aConnectors = ["left", "right"].flatMap((sDir) => [
+			...aIncomingConnectors.filter((o) => o.direction === sDir),
+			...aOutgoingConnectors.filter((o) => o.direction === sDir)
+		]);
+
+		return { aIncomingConnectors, aOutgoingConnectors, aConnectors };
+	};
+
+	Node.prototype._getAltConnectorsAnnouncement = function (aConnectors) {
+		const oGraph = this.getParent();
+		const oMapping = oGraph.getConnectionTypeMapping();
+		const bRTL = oGraph._bIsRtl;
+		return aConnectors.map((oConnector, i) => {
+			const oLine = oConnector.line;
+			const sConnectionType = oLine.getConnectionType();
+			const sResolvedType = bRTL ? (Utils.mRTLSwap[sConnectionType] || sConnectionType) : sConnectionType;
+			const sConnectionTypeText = oMapping[sResolvedType] || sResolvedType;
+			const sFromNodeTitle = oLine.getFromNode().getTitle() || oLine.getFromNode().getAltText();
+			const sToNodeTitle = oLine.getToNode().getTitle() || oLine.getToNode().getAltText();
+			// Determine the physical port side from connection type (Left key = left port, Right key = right port)
+			const sSide = oConnector.type === "outgoing"
+				? (sResolvedType.startsWith("Left") ? "left" : "right")
+				: (sResolvedType.endsWith("Left") ? "left" : "right");
+			return oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_ALT_CONNECTOR_ANNOUNCE", [
+				oConnector.type,
+				sSide,
+				sConnectionTypeText,
+				sFromNodeTitle,
+				sToNodeTitle,
+				i + 1
+			]);
+		}).join(". ");
 	};
 
 	Node.prototype._setStatusColors = function(sType) {
@@ -2519,10 +2826,10 @@ sap.ui.define([
 					$titleText = this.$().find(".sapSuiteUiCommonsNetworkGraphDivNodeTitleText");
 
 				if(SemanticColorType.hasOwnProperty(sBackgroundColor)){
-					$wrapper.addClass(Utils.SEMANTIC_CLASS_NAME.BORDER + sBackgroundColor);
+					$wrapper.addClass(Utils.SEMANTIC_CLASS_NAME.OUTLINE + sBackgroundColor);
 				} else {
 					/** @deprecated As of 1.120 */
-					$wrapper.css("border-color", sBorderColor);
+					$wrapper.css("outline-color", sBorderColor);
 				}
 
 				let sFocusColor = this._getColor(ElementBase.ColorType[sType + "Focus"])
@@ -2834,12 +3141,21 @@ sap.ui.define([
 	 */
 	Node.prototype.renderHtmlActionButtons = function(mOptions) {
 		mOptions = mOptions || {};
-		var sRightId = this._getElementId(mOptions.idSufix) + "-rightdivbuttons",
+		var sTopId = this._getElementId(mOptions.idSufix) + "-topdivbuttons",
+			sRightId = this._getElementId(mOptions.idSufix) + "-rightdivbuttons",
 			sLeftId = this._getElementId(mOptions.idSufix) + "-leftdivbuttons",
+			bIsRtl = this.getParent()._bIsRtl,
+			fBorderWidth = parseFloat(this._getStatusValue(ElementBase.ColorType.BorderWidth)) || 0,
+			sOffsetPosition = (ACTION_BUTTONS_OFFSET - fBorderWidth) + "px",
 			oRm = mOptions.renderManager;
 
+		oRm.openStart("div").attr("id", sTopId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsTop").openEnd().close("div");
 		oRm.openStart("div").attr("id", sLeftId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsLeft").openEnd().close("div");
-		oRm.openStart("div").attr("id", sRightId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsRight").openEnd().close("div");
+		oRm.openStart("div").attr("id", sRightId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsRight");
+		if (fBorderWidth) {
+			oRm.style(bIsRtl ? "left" : "right", sOffsetPosition);
+		}
+		oRm.openEnd().close("div");
 	};
 
 	/**
@@ -3726,5 +4042,183 @@ sap.ui.define([
 		return this;
 	};
 
+	/**
+	 * Checks if the port action button should be shown.
+	 * @returns {boolean} True if the port action button should be displayed
+	 * @private
+	 */
+	Node.prototype._hasPortActionButton = function() {
+		return this._showCreateConnectionButton();
+	};
+
+	/**
+	 * Toggles ports on the node when the port action button is clicked.
+	 * @private
+	 */
+	Node.prototype._togglePortsOnNode = function() {
+		// Check if the layout algorithm supports node ports
+		if (this._supportsNodePortsForNode()) {
+			// Ports are only available for supported layout algorithms
+			this._addPortsToNode(true);
+		}
+	};
+
+	/**
+	 * Adds ports to the node or removes them if they are already present.
+	 * @param {boolean} bTriggerNode Indicates whether this node is the trigger node for ports.
+	 * @private
+	 */
+	Node.prototype._addPortsToNode = function (bTriggerNode) {
+		var oGraph = this.getParent();
+
+		// Check if ports are enabled for this node
+		if (!oGraph || this._getNodePorts() === "None") {
+			PortManager.removeAllPorts();
+			return;
+		}
+
+		var sCurrentNodeKey = this.getKey();
+		var sCurrentTriggerNodeKey = PortManager.getCurrentTriggerNodeKey();
+
+		// Scenario 1: Clicking on the same node that already has trigger ports -> remove ports
+		if (sCurrentTriggerNodeKey === sCurrentNodeKey) {
+			PortManager.removeAllPorts();
+			return;
+		}
+
+		// Scenario 2: Clicking on a different node (or no current trigger node) -> remove all ports and add to this node
+		PortManager.removeAllPorts();
+		PortManager.addPortsToNode(this, true);
+	};
+
+	/**
+	 * Uses node-level setting if explicitly set, otherwise it reverts to the graph-level setting.
+	 * If the node-level property is set to any value (including None), it takes precedence over the graph-level setting.
+	 * @returns {string} The effective nodePorts value
+	 * @private
+	 */
+	Node.prototype._getNodePorts = function() {
+		// Check if the property was explicitly set on the node (stored in mProperties)
+		var mProperties = this.mProperties;
+		if (mProperties && mProperties.hasOwnProperty("nodePorts")) {
+			var sNodePorts = this.getNodePorts();
+			// Validate that the value is one of the valid NodePorts enum values
+			var bIsValidValue = Object.values(NodePorts).indexOf(sNodePorts) !== -1;
+			if (bIsValidValue) {
+				// Use node-level setting if it's a valid enum value
+				return sNodePorts;
+			}
+		}
+		// Otherwise, fall back to graph-level setting
+		var oGraph = this.getParent();
+		return oGraph ? oGraph.getNodePorts() : NodePorts.None;
+	};
+
+	/**
+	 * Gets the effective showCreateConnectionButton setting for this node.
+	 * Uses node-level setting if explicitly set, otherwise falls back to graph-level setting.
+	 * @returns {boolean} The effective showCreateConnectionButton value
+	 * @private
+	 */
+	Node.prototype._showCreateConnectionButton = function() {
+		// Check if the property was explicitly set on the node (stored in mProperties)
+		var mProperties = this.mProperties;
+		if (mProperties && mProperties.hasOwnProperty("showCreateConnectionButton")) {
+			return this.getShowCreateConnectionButton();
+		}
+		// Otherwise, fall back to graph-level setting
+		var oGraph = this.getParent();
+		return oGraph ? oGraph.getShowCreateConnectionButton() : true;
+	};
+
+	/**
+	 * Checks if node ports are supported for this node based on node-level or graph-level settings.
+	 * @returns {boolean} True if node ports are supported
+	 * @private
+	 */
+	Node.prototype._supportsNodePortsForNode = function() {
+		var oGraph = this.getParent();
+		if (!oGraph) {
+			return false;
+		}
+		return this._getNodePorts() !== "None" && oGraph.getEnableDragAndDrop();
+	};
+
+	/**
+	 * Shows the connection popover instead of toggling ports.
+	 * @param {Event} oEvent - The click event from the action button
+	 * @private
+	 */
+	Node.prototype._showConnectionPopover = function(oEvent) {
+		// Create connection popover utility if it doesn't exist
+		if (!this._oConnectionPopoverUtil) {
+			this._oConnectionPopoverUtil = new CreateConnectionPopover();
+		}
+
+		// Show the connection popover
+		this._oConnectionPopoverUtil.show({
+			sourceNode: this,
+			event: oEvent,
+			onConnectionCreate: function(oConnectionData) {
+				var oGraph = this.getParent();
+				if (oGraph) {
+					// Fire the connectionCreated event
+					oGraph.fireConnectionCreated(oConnectionData);
+				}
+			}.bind(this)
+		});
+	};
+
+	/**
+	 * Shows the overflow menu with additional action buttons.
+	 * @param {sap.ui.core.Control} oControl The control to open the menu next to
+	 * @param {Array} aOverflowButtons Array of button configurations to display in the overflow
+	 * @private
+	 */
+	Node.prototype._showOverflowPopover = function(oControl, aOverflowButtons) {
+		var that = this;
+
+		// Filter out disabled buttons (same behavior as _appendActionButton which hides disabled buttons)
+		var aEnabledButtons = aOverflowButtons.filter(function(oButtonConfig) {
+			return oButtonConfig.enable !== false;
+		});
+
+		// If no enabled buttons, don't show the menu
+		if (aEnabledButtons.length === 0) {
+			return;
+		}
+
+		// Create menu items for each enabled overflow item
+		var aMenuItems = aEnabledButtons.map(function(oButtonConfig) {
+			return new MenuItem({
+				id: oButtonConfig.id ? oButtonConfig.id + "-overflow" : undefined,
+				text: oButtonConfig.title,
+				icon: oButtonConfig.icon,
+				customData: [new sap.ui.core.CustomData({
+					key: "buttonConfig",
+					value: oButtonConfig
+				})]
+			});
+		});
+
+		// Create the menu
+		var oMenu = new Menu({
+			items: aMenuItems,
+			itemSelected: function(oEvent) {
+				var oItem = oEvent.getParameter("item");
+				var oButtonConfig = oItem.data("buttonConfig");
+				if (oButtonConfig && oButtonConfig.click) {
+					// Call the click handler with the overflow button as the target (not the menu item)
+					oButtonConfig.click({ target: oControl });
+				}
+			},
+			closed: function() {
+				oMenu.destroy();
+			}
+		});
+
+		oMenu.openBy(oControl);
+	};
+
 	return Node;
 });