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

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

@@ -22,20 +22,26 @@ sap.ui.define([
 	"sap/ui/core/Lib",
 	"./Utils",
 	"sap/base/Log",
-	"./util/DragDropManager"
-], function(jQuery, library, ElementBase, ElementAttribute, IconPool, Device, encodeXML, sanitizeHTML, CheckBox, Text, NodeRenderer, Core, Theming, CoreLib, Utils, Log, DragDropManager) {
+	"./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,
-		ACTION_BUTTONS_OFFSET = -34;
+		ACTION_BUTTONS_OFFSET = -34,
+		MAX_VISIBLE_BUTTONS_ON_TOP = 3;
 
 	var Size = {
 		Circle: {
@@ -94,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',
@@ -278,6 +299,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.145
+				 */
+				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.145
+				 */
+				showCreateConnectionButton: {
+					type: "boolean", group: "Behavior", defaultValue: true
 				}
 			},
 			aggregations: {
@@ -469,6 +511,11 @@ 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() {
@@ -477,9 +524,10 @@ sap.ui.define([
 			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;
 
 	};
 
@@ -544,32 +592,53 @@ sap.ui.define([
 		}
 		if (SemanticColorType.hasOwnProperty(sColor)) {
 			var sColorClass = Utils.SEMANTIC_CLASS_NAME.TEXT + sColor;
+			var sDivClass = "sapSuiteUiCommonsNetworkGraphDivNodeText";
+			if (sClass) {
+				sDivClass += " " + sClass;
+			}
+			if (iSize === 1) {
+				sDivClass += " sapSuiteUiCommonsNetworkGraphDivTextBreakAll";
+			}
+			sDivClass += " " + sColorClass;
 			this._renderHtmlElement("div", {
 				"-webkit-line-clamp": iSize === 0 ? "" : iSize
 			}, {
-				"class": "sapSuiteUiCommonsNetworkGraphDivNodeText " + (sClass || "") + ((iSize === 1) ? " sapSuiteUiCommonsNetworkGraphDivTextBreakAll " : " ") + sColorClass
+				"class": sDivClass
 			}, oRm);
 			fnRenderTitleWithBackground();
 		} else if (!sColor) {
 			// in case of title.
+			var sDivClass2 = "sapSuiteUiCommonsNetworkGraphDivNodeText";
+			if (sClass) {
+				sDivClass2 += " " + sClass;
+			}
+			if (iSize === 1) {
+				sDivClass2 += " sapSuiteUiCommonsNetworkGraphDivTextBreakAll";
+			}
 			this._renderHtmlElement("div", {
 				"-webkit-line-clamp": iSize === 0 ? "" : iSize,
 				"color": sColor
 			}, {
-				"class": "sapSuiteUiCommonsNetworkGraphDivNodeText " + (sClass || "") + ((iSize === 1) ? " sapSuiteUiCommonsNetworkGraphDivTextBreakAll " : "")
+				"class": sDivClass2
 			}, oRm);
 			fnRenderTitleWithBackground();
 		} else {
 			/** @deprecated As of 1.120 */
 			{
+				var sDivClass3 = "sapSuiteUiCommonsNetworkGraphDivNodeText";
+				if (sClass) {
+					sDivClass3 += " " + sClass;
+				}
+				if (iSize === 1) {
+					sDivClass3 += " sapSuiteUiCommonsNetworkGraphDivTextBreakAll";
+				}
 				this._renderHtmlElement("div", {
 					"-webkit-line-clamp": iSize === 0 ? "" : iSize,
 					"color": sColor
 				}, {
-					"class": "sapSuiteUiCommonsNetworkGraphDivNodeText " + (sClass || "") + ((iSize === 1) ? " sapSuiteUiCommonsNetworkGraphDivTextBreakAll " : "")
+					"class": sDivClass3
 				}, oRm);
 				fnRenderTitleWithBackground();
-				
 			}
 		}
 	};
@@ -618,32 +687,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"),
@@ -651,15 +742,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"),
@@ -667,44 +787,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
-							});
-							// 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);
+				// 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;
 		}
 
@@ -1132,9 +1326,13 @@ sap.ui.define([
 			var {style: sStatusStyle, class: sStatusClass} = this._getStatusStyle({
 				fill: ElementBase.ColorType.Content
 			});
+			var sIconClass = "sapSuiteUiCommonsNetworkGraphIcon sapSuiteUiCommonsNetworkCircleNodeIcon sapSuiteUiCommonsNetworkStatusText";
+			if (sStatusClass) {
+				sIconClass += " " + sStatusClass;
+			}
 			oIconArgs = {
 				attributes: {
-					"class": "sapSuiteUiCommonsNetworkGraphIcon sapSuiteUiCommonsNetworkCircleNodeIcon sapSuiteUiCommonsNetworkStatusText " + sStatusClass,
+					"class": sIconClass,
 					style: (this.getIconSize() ? ("font-size:" + this.getIconSize() + "px;") : "") +
 					sStatusStyle,
 					x: fX + this._iWidth / 2,
@@ -1230,27 +1428,33 @@ sap.ui.define([
 		var { style: sInnerBoxStyle, class: sInnerBoxClass } = this._getStatusStyle({
 			stroke: ElementBase.ColorType.Border
 		});
+		var sInnerCircleClass = "sapSuiteUiCommonsNetworkInnerCircle";
+		if (sInnerBoxClass) {
+			sInnerCircleClass += " " + sInnerBoxClass;
+		}
 		var oInnerBoxArgs = {
 			id: this.getId() + "-innerBox",
 			cx: fX + this._iWidth / 2,
 			cy: fY + iCircleSize / 2,
 			style: sInnerBoxStyle,
 			r: iCircleSize / 2,
-			"class": "sapSuiteUiCommonsNetworkInnerCircle " + sInnerBoxClass
+			"class": sInnerCircleClass
 		};
 		var { style: sFocusCircleStyle, class: sFocusCircleClass } = this._getStatusStyle({
 			stroke: ElementBase.ColorType.Focus
 		});
+		var sFocusClass = "sapSuiteUiCommonsNetworkCircleFocus";
+		if (sFocusCircleClass) {
+			sFocusClass += " " + sFocusCircleClass;
+		}
 		var oFocusCircleArgs = {
 			id: this.getId() + "-focusCircle",
 			cx: fX + this._iWidth / 2,
 			cy: fY + iCircleSize / 2,
 			style: sFocusCircleStyle,
 			r: iCircleSize / 2 + FOCUS_OFFSET,
-			"class": "sapSuiteUiCommonsNetworkCircleFocus " + sFocusCircleClass
-		};
-
-		if (!oRm) {
+			"class": sFocusClass
+		}; if (!oRm) {
 			var sHtml = "";
 			sHtml += this._renderControl("circle", oInnerBoxArgs);
 			sHtml += this._renderControl("circle", oFocusCircleArgs);
@@ -1299,10 +1503,14 @@ sap.ui.define([
 			var { style: sIconStyle, class: sIconClass } = this._getStatusStyle({
 				fill: ElementBase.ColorType.Content
 			});
+			var sTitleIconClass = "sapSuiteUiCommonsNetworkGraphIcon sapSuiteUiCommonsNetworkNodeTitleIcon sapSuiteUiCommonsNetworkStatusText";
+			if (sIconClass) {
+				sTitleIconClass += " " + sIconClass;
+			}
 			oIconArgs = {
 				attributes: {
 					style: sIconStyle,
-					"class": "sapSuiteUiCommonsNetworkGraphIcon sapSuiteUiCommonsNetworkNodeTitleIcon sapSuiteUiCommonsNetworkStatusText " + sIconClass,
+					"class": sTitleIconClass,
 					x: bIsRtl ? fX + this._iWidth - Size.Title.ICON_X_OFFSET : fX + Size.Title.ICON_X_OFFSET,
 					y: fY + TITLE_SIZE_Y
 				},
@@ -1324,8 +1532,12 @@ sap.ui.define([
 					var { style: sTitleStyle, class: sTitleClass } = this._getStatusStyle({
 						fill: ElementBase.ColorType.Content
 					});
+					var sTitleTextClass = "sapSuiteUiCommonsNetworkNodeTitle sapSuiteUiCommonsNetworkNodeText sapSuiteUiCommonsNetworkStatusText";
+					if (sTitleClass) {
+						sTitleTextClass += " " + sTitleClass;
+					}
 					oTitleArgs = {
-						"class": "sapSuiteUiCommonsNetworkNodeTitle sapSuiteUiCommonsNetworkNodeText sapSuiteUiCommonsNetworkStatusText " + sTitleClass,
+						"class": sTitleTextClass,
 						style: sTitleStyle,
 						x: bIsRtl ? fX + this._iWidth - sTitleLeft : fX + sTitleLeft,
 						y: fY + TITLE_SIZE_Y,
@@ -1431,12 +1643,16 @@ sap.ui.define([
 		var { style: sInnerBoxStyle, class: sInnerBoxClass } = this._getStatusStyle({
 			stroke: ElementBase.ColorType.Border
 		});
+		var sInnerRectClass = "sapSuiteUiCommonsNetworkInnerRect";
+		if (sInnerBoxClass) {
+			sInnerRectClass += " " + sInnerBoxClass;
+		}
 		var oInnerBoxArgs = {
 			id: this.getId() + "-innerBox",
 			x: fX,
 			y: fY,
 			style: sInnerBoxStyle,
-			"class": "sapSuiteUiCommonsNetworkInnerRect " + sInnerBoxClass,
+			"class": sInnerRectClass,
 			rx: RADIUS,
 			ry: RADIUS,
 			width: this._iWidth,
@@ -1446,12 +1662,16 @@ sap.ui.define([
 		var { style: sInnerStatusBoxStyle, class: sInnerStatusBoxClass } = this._getStatusStyle({
 			fill: ElementBase.ColorType.Background
 		});
+		var sStatusBoxClass = "sapSuiteUiCommonsNetworkNodeBoxStatus";
+		if (sInnerStatusBoxClass) {
+			sStatusBoxClass += " " + sInnerStatusBoxClass;
+		}
 		var oInnerStatusBoxArgs = {
 			id: this.getId() + "-innerStatusBox",
 			x: fX,
 			y: fY,
 			style: sInnerStatusBoxStyle,
-			"class": "sapSuiteUiCommonsNetworkNodeBoxStatus " + sInnerStatusBoxClass,
+			"class": sStatusBoxClass,
 			topRight: RADIUS,
 			topLeft: RADIUS,
 			bottomRight: bRoundedBottom ? RADIUS : 0,
@@ -1463,11 +1683,15 @@ sap.ui.define([
 		var { style: sFocusCircleStyle, class: sFocusCircleClass } = this._getStatusStyle({
 			stroke: ElementBase.ColorType.Focus
 		});
+		var sBoxFocusClass = "sapSuiteUiCommonsNetworkBoxFocus";
+		if (sFocusCircleClass) {
+			sBoxFocusClass += " " + sFocusCircleClass;
+		}
 		var oFocusCircleArgs = {
 			id: this.getId() + "-focusCircle",
 			x: fX - FOCUS_OFFSET,
 			y: fY - FOCUS_OFFSET,
-			"class": "sapSuiteUiCommonsNetworkBoxFocus " + sFocusCircleClass,
+			"class": sBoxFocusClass,
 			style: sFocusCircleStyle,
 			rx: 5,
 			ry: 5,
@@ -1679,7 +1903,7 @@ sap.ui.define([
 				sLabelWrapper += this._renderText({
 					attributes: {
 					style: sAttributeStyleOrClass.includes("fill") ? sAttributeStyleOrClass : "",
-					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkStatusText " + sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass,
+					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkStatusText " + (sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass),
 					x: iLabelStart,
 					id: oItem.getId() + "-label",
 					y: iY
@@ -1690,7 +1914,7 @@ sap.ui.define([
 			sValueWrapper += this._renderText({
 				attributes: {
 					style: sAttributeStyleOrClass_.includes("fill") ? sAttributeStyleOrClass_ : "",
-					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkGraphAttributeValue sapSuiteUiCommonsNetworkStatusText " + sAttributeStyleOrClass_.includes("fill") ? "" : sAttributeStyleOrClass_,
+					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkGraphAttributeValue sapSuiteUiCommonsNetworkStatusText " + (sAttributeStyleOrClass_.includes("fill") ? "" : sAttributeStyleOrClass_),
 					x: iValueStart,
 					y: iY,
 					id: oItem.getId() + "-value"
@@ -1726,13 +1950,13 @@ sap.ui.define([
 			id: this.getId() + "-attrLabel"
 		}, false, oRm);
 
-		this.getVisibleAttributes().forEach(function(oItem, i) {
+			this.getVisibleAttributes().forEach(function(oItem, i) {
 			var iY = fStart + Size.Attributes.LINE * (i + 1);
 			let sAttributeStyleOrClass = this._getAttributeColorString(oItem, ElementAttribute.Type.Label, ElementBase.ColorType.Content);
 			this._renderText({
 				attributes: {
 					style: sAttributeStyleOrClass.includes("fill") ? sAttributeStyleOrClass : "",
-					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkStatusText " + sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass,
+					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkStatusText " + (sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass),
 					x: iLabelStart,
 					id: oItem.getId() + "-label",
 					y: iY
@@ -1750,13 +1974,13 @@ sap.ui.define([
 			id: this.getId() + "-attrValue"
 		}, false,oRm);
 
-		this.getVisibleAttributes().forEach(function(oItem, i) {
+			this.getVisibleAttributes().forEach(function(oItem, i) {
 			var iY = fStart + Size.Attributes.LINE * (i + 1);
 			let sAttributeStyleOrClass = this._getAttributeColorString(oItem, ElementAttribute.Type.Value, ElementBase.ColorType.Content);
 			this._renderText({
 				attributes: {
 					style: sAttributeStyleOrClass.includes("fill") ? sAttributeStyleOrClass : "",
-					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkGraphAttributeValue sapSuiteUiCommonsNetworkStatusText " + sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass,
+					"class": "sapSuiteUiCommonsNetworkGraphAttribute sapSuiteUiCommonsNetworkGraphAttributeValue sapSuiteUiCommonsNetworkStatusText " + (sAttributeStyleOrClass.includes("fill") ? "" : sAttributeStyleOrClass),
 					x: iValueStart,
 					y: iY,
 					id: oItem.getId() + "-value"
@@ -1810,21 +2034,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) {
@@ -1989,6 +2213,7 @@ sap.ui.define([
 		$wrapper.on("click", function(oEvent) {
 				if (oEvent.which === 1) {
 					this._onClick(oEvent.ctrlKey);
+					this._togglePortsOnNode();
 				}
 			oEvent.preventDefault();
 		}.bind(this));
@@ -2460,31 +2685,76 @@ 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;
+	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()) {
-			sLabel += " " + oResourceBundle.getText("NETWORK_GRAPH_NODE_DESCRIPTION") + " " + this.getDescription();
+			aSentenceParts.push(
+				`${oResourceBundle.getText(
+					"NETWORK_GRAPH_NODE_DESCRIPTION"
+				)} ${this.getDescription()}`
+			);
 		}
-		if (this._isBox(oParent)) {
-			this.getVisibleAttributes().forEach(function(oAttribute) {
-				sLabel += " " + oAttribute.getLabel() + " " + oAttribute.getValue();
+
+		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"));
+		}
+
+		return `${sLabel}. ${aSentenceParts.join(". ")}.`;
 	};
 
 	Node.prototype._setStatusColors = function(sType) {
@@ -2863,13 +3133,15 @@ 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");
 		if (fBorderWidth) {
@@ -3762,5 +4034,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;
 });