@sapui5/sap.suite.ui.commons 1.144.0 → 1.145.1

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

@@ -24,20 +24,24 @@ sap.ui.define([
 	"sap/base/Log",
 	"./util/DragDropManager",
 	"./util/PortManager",
-	"./util/CreateConnectionPopover"
-], function(jQuery, library, ElementBase, ElementAttribute, IconPool, Device, encodeXML, sanitizeHTML, CheckBox, Text, NodeRenderer, Core, Theming, CoreLib, Utils, Log, DragDropManager, PortManager, CreateConnectionPopover) {
+	"./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: {
@@ -96,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',
@@ -280,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: {
@@ -651,8 +691,9 @@ sap.ui.define([
 			$right = this.$("rightdivbuttons"),
 			$left = this.$("leftdivbuttons"),
 			oGraph = this.getParent(),
-			bShouldShowPortButton = oGraph._supportsNodePorts(),
-			bShowButtonsOnTop = oGraph && oGraph.getEnableDragAndDrop() && oGraph.getNodePorts() !== "None";
+			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) {
@@ -664,28 +705,36 @@ sap.ui.define([
 			var iButtonTop = 0,
 				iButtonRight = 0,
 				iButtonLeft = 0,
-				$defaultWrapper = bShowButtonsOnTop ? $top : $right;
+				$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)
-				}, $defaultWrapper);
+				};
 
-				if (bShowButtonsOnTop) {
-					iButtonTop++;
-				} else {
-					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"),
@@ -693,10 +742,35 @@ sap.ui.define([
 					click: function(evt) {
 						this._detailClick(evt.target);
 					}.bind(this)
-				}, $defaultWrapper);
+				};
+
+				this._appendActionButton(oDetailButtonConfig, $defaultWrapper);
 				if (document.getElementById(this._getDomId("actionDetail"))) {
 					document.getElementById(this._getDomId("actionDetail")).setAttribute("aria-haspopup", "dialog");
 				}
+				// 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 {
@@ -705,7 +779,7 @@ sap.ui.define([
 			}
 
 			if (this.getShowActionLinksButton()) {
-				this._appendActionButton({
+				var oLinksButtonConfig = {
 					icon: "sap-icon://chain-link",
 					enable: this._hasActionLinks(),
 					title: oResourceBundle.getText("NETWORK_GRAPH_NODE_LINKS"),
@@ -713,40 +787,38 @@ sap.ui.define([
 					click: function(evt) {
 						this._linksClick(evt.target);
 					}.bind(this)
-				}, $defaultWrapper);
-				if (document.getElementById(this._getDomId("actionLinks"))) {
-					document.getElementById(this._getDomId("actionLinks")).setAttribute("aria-haspopup", "dialog");
-				}
-				if (bShowButtonsOnTop) {
-					iButtonTop++;
-				} else {
-					iButtonRight++;
-				}
-			}
+				};
 
-			// Add port action button if nodePorts is not "None"
-			if (bShouldShowPortButton) {
-				this._appendActionButton({
-					icon: "sap-icon://sys-add",
-					enable: true,
-					title: "Create Connection",
-					id: this._getDomId("actionPorts"),
-					click: function(evt) {
-						this._showConnectionPopover(evt);
-					}.bind(this)
-				}, $defaultWrapper);
-				if (bShowButtonsOnTop) {
-					iButtonTop++;
+				// 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 {
-					iButtonRight++;
+					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++;
+						}
+					}
 				}
 			}
 
 			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;
+			(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;
@@ -771,35 +843,62 @@ sap.ui.define([
 							$wrapper = $right;
 						}
 					}
+				}
 
-					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);
-						}
-					}, $wrapper);
+				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);
+					}
+				};
 
-					// Increment the correct counter
-					if (sPosition === ActionButtonPosition.Right) {
-						iButtonRight++;
-					} else if (sPosition === ActionButtonPosition.Left) {
-						iButtonLeft++;
-					} else {
-						iButtonTop++;
+				// 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++;
+						}
 					}
-				})(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;
 		}
 
@@ -1935,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) {
@@ -3941,8 +4040,7 @@ sap.ui.define([
 	 * @private
 	 */
 	Node.prototype._hasPortActionButton = function() {
-		var oGraph = this.getParent();
-		return oGraph && oGraph.getNodePorts() !== "None" && oGraph._supportsNodePorts();
+		return this._showCreateConnectionButton();
 	};
 
 	/**
@@ -3951,7 +4049,7 @@ sap.ui.define([
 	 */
 	Node.prototype._togglePortsOnNode = function() {
 		// Check if the layout algorithm supports node ports
-		if (this.getParent()?._supportsNodePorts()) {
+		if (this._supportsNodePortsForNode()) {
 			// Ports are only available for supported layout algorithms
 			this._addPortsToNode(true);
 		}
@@ -3965,8 +4063,9 @@ sap.ui.define([
 	Node.prototype._addPortsToNode = function (bTriggerNode) {
 		var oGraph = this.getParent();
 
-		// Check if ports are enabled for this graph
-		if (!oGraph || oGraph.getNodePorts() === "None") {
+		// Check if ports are enabled for this node
+		if (!oGraph || this._getNodePorts() === "None") {
+			PortManager.removeAllPorts();
 			return;
 		}
 
@@ -3984,6 +4083,59 @@ sap.ui.define([
 		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
@@ -4009,5 +4161,56 @@ sap.ui.define([
 		});
 	};
 
+	/**
+	 * 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;
 });