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

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

@@ -31,7 +31,10 @@ sap.ui.define([
 	"sap/ui/performance/Measurement",
 	"sap/base/security/encodeXML",
 	"sap/m/ToggleButton",
+	"sap/m/BusyIndicator",
 	"sap/m/library",
+	"sap/m/IllustratedMessage",
+	"sap/m/IllustratedMessageType",
 	"sap/suite/ui/commons/util/FullScreenUtil",
 	"sap/ui/core/InvisibleMessage",
 	"sap/ui/core/library",
@@ -42,7 +45,10 @@ sap.ui.define([
 	"sap/ui/core/RenderManager",
 	"sap/ui/core/Theming",
 	'sap/ui/core/InvisibleText',
-	"./GraphRenderer"
+	"./GraphRenderer",
+	"./util/DragDropManager",
+	"./util/PortManager",
+	"sap/ui/core/IconPool"
 ], function (
 	library,
 	jQuery,
@@ -69,7 +75,10 @@ sap.ui.define([
 	Measurement,
 	encodeXML,
 	ToggleButton,
+	BusyIndicator,
 	MobileLibrary,
+	IllustratedMessage,
+	IllustratedMessageType,
 	FullScreenUtil,
 	InvisibleMessage,
 	coreLibrary,
@@ -80,7 +89,10 @@ sap.ui.define([
 	RenderManager,
 	Theming,
 	InvisibleText,
-	GraphRenderer
+	GraphRenderer,
+	DragDropManager,
+	PortManager,
+	IconPool
 ) {
 	"use strict";
 
@@ -89,7 +101,8 @@ sap.ui.define([
 		Orientation = library.networkgraph.Orientation,
 		LayoutRenderType = library.networkgraph.LayoutRenderType,
 		RenderType = library.networkgraph.RenderType,
-		SemanticColorType = library.SemanticColorType;
+		SemanticColorType = library.SemanticColorType,
+		NodePorts = library.networkgraph.NodePorts;
 
 	var AGG_NODES = "nodes",
 		AGG_LINES = "lines",
@@ -136,6 +149,7 @@ sap.ui.define([
 	var Graph = SvgBase.extend("sap.suite.ui.commons.networkgraph.Graph", {
 		metadata: {
 			library: "sap.suite.ui.commons",
+			dnd: { draggable: false, droppable: true },
 			properties: {
 				/**
 				 * The height of the graph. If this property is set to 'auto', the network graph will be resized to fit the height of its content, regardless of the height of the parent control.
@@ -205,15 +219,88 @@ sap.ui.define([
 				noDataText: {
 					type: "string", group: "Behavior", defaultValue: ""
 				},
+				/**
+				 * Set this property to <code>true</code> to display a loading indicator while the data loads.
+				 * @public
+				 * @since 1.136.19
+				 */
+				loading: {
+					type: "boolean", group: "Behavior", defaultValue: false
+				},
+				/**
+				 * Text that is displayed when the loading is set. <br> This property takes effect only when the <code>loading</code> property is set to <code>true</code>.
+				 * @public
+				 * @since 1.136.19
+				 */
+				loadingText: {
+					type: "string", group: "Behavior", defaultValue: ""
+				},
 				/**
 				 * Adds delay in wheel scrolling to make zooming smooth.
 				 * Only works when enableWheelZoom is set to true or 'ctrl' key is pressed while wheel scrolling.
 				 * Add delay in milliseconds.
 				 *
-				 * @private since 1.125
+				 * @private
 				 */
 				_smoothWheelZoom: {
 					type: "int", group: "Behavior", defaultValue: 125, visibility: "hidden"
+				},
+				/**
+				 * Enables the drag and drop of nodes. This property is ignored if the layout property is not set to noop.
+				 * If set to <code>true</code>, nodes can be dragged and dropped within the graph.
+				 * @public
+				 * @since 1.136.19
+				 */
+				enableDragAndDrop: {
+					type: "boolean", group: "Behavior", defaultValue: false
+				},
+				/**
+				 * Specifies the ports that are to be displayed on nodes. Ports are used for creating connections between nodes.
+				 * Ports are available only when the layout algorithm is set to "NoopLayout", and when the drag and drop is enabled. Otherwise, this property is ignored.
+				 * @public
+				 * @since 1.136.19
+				 */
+				nodePorts: {
+					type: "sap.suite.ui.commons.networkgraph.NodePorts", group: "Behavior", defaultValue: NodePorts.None
+				},
+				/**
+				 * This action button is used to create connections between nodes as an accessible alternative to node ports.
+				 * The button is displayed on each node when the layout algorithm is set to "NoopLayout" and drag and drop is enabled.
+				 * shows the 'Create Connection' action button on node.
+				 * If set to <code>false</code>, the button remains hidden.
+				 * Hide this button when you want to implement your own way of creating connections between nodes as an accessible alternative to node ports.
+				 * @public
+				 * @since 1.136.19
+				 */
+				showCreateConnectionButton: {
+					type: "boolean", group: "Behavior", defaultValue: true
+				},
+				/**
+				 * Mapping of connection types to their display text keys or custom text values.
+				 * This allows customization of how connection types are displayed in the connection creation popover.
+				 * The mapping should be an object where keys are connection type values (LeftToLeft, LeftToRight, RightToLeft, RightToRight)
+				 * and values are custom text that follows the correct format (e.g., "Start to End", "Source to Target").
+				 * If the format is invalid or not provided, default values are used
+				 * @public
+				 * @since 1.136.19
+				 */
+				connectionTypeMapping: {
+					type: "object", group: "Behavior", defaultValue: {
+						"LeftToLeft": "Start to Start",
+						"LeftToRight": "Start to Finish",
+						"RightToLeft": "Finish to Start",
+						"RightToRight": "Finish to Finish"
+					}
+				},
+				/**
+				 * Custom labels for element types displayed in the SearchField suggestions and Legend section headers.
+				 * Supported keys: nodeLabel, nodeLabelPlural, lineLabel, lineLabelPlural, groupLabel, groupLabelPlural.
+				 * Reverts to the default values for keys that are not set.
+				 * @public
+				 * @since 1.149
+				 */
+				labels: {
+					type: "object", group: "Appearance", defaultValue: {}
 				}
 			},
 			aggregations: {
@@ -264,7 +351,12 @@ sap.ui.define([
 				/**
 				 * Controls or IDs that label this control. This association is used by screen reader software.
 				 */
-				ariaLabelledBy: { type: "sap.ui.core.Control", multiple: true, singularName: "ariaLabelledBy" }
+				ariaLabelledBy: { type: "sap.ui.core.Control", multiple: true, singularName: "ariaLabelledBy" },
+				/**
+				 * Control or ID of an auxiliary control associated with this graph.
+				 * @since 1.136.19
+				 */
+				associatedControl: { type: "sap.ui.core.Control", multiple: false, singularName: "associatedControl" }
 			},
 			events: {
 				/**
@@ -327,7 +419,79 @@ sap.ui.define([
 						term: { type: "string" },
 						key: { type: "string" }
 					}
-				}
+				},
+				/**
+				 * This event is fired when a user drops a node in the graph.
+				 * This event is available only when the layout algorithm is set to "NoopLayout" and the <code>enableDragAndDrop</code> property is set to <code>true</code>.
+				 * @public
+				 * @since 1.136.19
+				 */
+				nodeDropped: {
+					parameters: {
+						/**
+						 * The node that was moved.
+						 */
+						node: { type: "sap.suite.ui.commons.networkgraph.Node" },
+						/**
+						 * The new x coordinate of the node.
+						 */
+						newX: { type: "float" },
+						/**
+						 * The new y coordinate of the node.
+						 */
+						newY: { type: "float" }
+					}
+				},
+				/**
+				 * This event is fired when a new connection is created between two nodes by using node ports.
+				 * @public
+				 * @since 1.136.19
+				 */
+				connectionCreated: {
+					parameters: {
+						/**
+						 * The key of the source node.
+						 **/
+						from: { type: "string" },
+						/**
+						 * The key of the target node.
+						 **/
+						to: { type: "string" },
+						/**
+						 * The connection type defining how the line connects the source and target nodes.
+						 */
+						connectionType: {type: "sap.suite.ui.commons.networkgraph.ConnectionType"},
+						/**
+						 * The source node control instance.
+						 **/
+						fromNode: { type: "sap.suite.ui.commons.networkgraph.Node" },
+						/**
+						 * The target node control instance.
+						 **/
+						toNode: { type: "sap.suite.ui.commons.networkgraph.Node" }
+					}
+				},
+				/**
+				 * This event is fired when a user presses the delete key on a focused node or line.
+				 * This event is available only when the layout algorithm is set to "NoopLayout" and the <code>enableDragAndDrop</code> property is set to <code>true</code>.
+				 * @public
+				 * @since 1.136.19
+				 */
+				itemDeleted: {
+					parameters: {
+						/**
+						 * The item (node or line) that is to be deleted.
+						 */
+						item: { type: "sap.suite.ui.commons.networkgraph.ElementBase" }
+					}
+				},
+				/**
+				 * Fired when the user requests to add a node via INSERT or Ctrl+Alt+N.
+				 * Only available when NoopLayout is used and enableDragAndDrop is <code>true</code>.
+				 * @public
+				 * @since 1.136.19
+				 */
+				nodeAdded: {}
 			}
 		}
 	});
@@ -388,6 +552,9 @@ sap.ui.define([
 		// RTL mode - it's reset in 'onBeforeRendering' in case it changed runtime
 		this._bIsRtl = Localization.getRTL();
 
+		// Private variable for multiple directed arrows feature
+		this._enableMultipleDirectedArrows = false;
+
 		// element with focus
 		this._oFocus = null;
 
@@ -406,8 +573,71 @@ sap.ui.define([
 		// flag to check if the events has been added to the graph
 		this._bEventsAdded = false;
 
+		// illustrated message instance for empty state
+		this._oIllustratedMessage = null;
+
 		this._createToolbar();
 
+		/**
+		 * Attach drag and drop events
+		 */
+		if (this.getDragDropConfig().length === 0) {
+			try {
+				DragDropManager.injectDnD(this);
+			} catch (error) {
+				Log.warning("Graph injectDnD issue: ", error);
+			}
+		}
+		// Initialize PortManager with this graph instance
+		PortManager.setGraphInstance(this);
+		Core.ready(this._handleCoreInitialized.bind(this));
+
+	};
+
+	/**
+	 * Handler for the core's init event. Attaches listener for localization changes.
+	 * @private
+	 */
+	Graph.prototype._handleCoreInitialized = function () {
+		Localization.attachChange(this._handleLocalizationChanged.bind(this));
+	};
+
+	/**
+	 * Handler for localization changes. Sets a pending flag when RTL mode changes so that
+	 * node dimensions are re-measured after RTL CSS files finish loading.
+	 * UI5 automatically re-renders all UIAreas on RTL change; the flag prevents premature
+	 * layout calculation in onAfterRendering before CSS dimensions are stable.
+	 * @private
+	 */
+	Graph.prototype._handleLocalizationChanged = function () {
+		const bNewRtl = Localization.getRTL();
+		if (this._bIsRtl !== bNewRtl) {
+			this._bIsRtl = bNewRtl;
+			this._bRtlMeasurementPending = true;
+
+			const fnOnApplied = function () {
+				Theming.detachApplied(fnOnApplied);
+				if (this._bRtlMeasurementPending) {
+					this._bRtlMeasurementPending = false;
+					this._measureAndLayout();
+				}
+			}.bind(this);
+			Theming.attachApplied(fnOnApplied);
+		}
+	};
+
+	Graph.prototype._measureAndLayout = function () {
+		var aNodes = this.getNodes();
+		aNodes.forEach(function (oNode) {
+			if (this._isUseNodeHtml()) {
+				oNode._setupDivDimensions();
+			} else {
+				oNode.calculateSizes();
+				oNode._setupWidthAndHeight();
+			}
+		}.bind(this));
+		this._bTriggerLayoutCalculation = true;
+		this._preprocessData();
 	};
 
 	Graph.prototype.onBeforeRendering = function () {
@@ -467,7 +697,6 @@ sap.ui.define([
 			this.$().addClass("sapSuiteUiCommonsNetworkGraphFullScreen");
 		}
 
-
 		if (aNodes.length === 0 || this._bIsInvalid || this.getNoData()) {
 			if (this._bIsInvalid) {
 				oRm.openStart("span");
@@ -529,29 +758,18 @@ sap.ui.define([
 					oRm.flush(this._$innerscroller[0], true, this._$innerscroller.children().length);
 				}
 
-				// make sure everything is rendered
-				aNodes.forEach(function (oNode) {
-					if (this._isUseNodeHtml()) {
-						// call after rendering before layouter starts - can be handy when user custom renders
-						oNode._setupDivDimensions();
-					} else {
-						oNode.calculateSizes();
-						oNode._setupWidthAndHeight();
-					}
-				}.bind(this));
-
-				this._preprocessData();
-				Theming.detachApplied(fnProcess);
+				if (!this._bRtlMeasurementPending) {
+					this._measureAndLayout();
+				}
 			}.bind(this);
 
-			// In case theme is applied fnProcess will be called immediately,
-			// else it will be called once theme is applied.
-			Theming.attachApplied(fnProcess);
+			fnProcess();
 		}
 		this.oInvisibleMessage = InvisibleMessage.getInstance();
 		oRm.destroy();
 
 	};
+
 	Graph.prototype.exit = function () {
 		// if (this.oHashChanger) {
 		// 	this.oHashChanger.destroy();
@@ -559,6 +777,20 @@ sap.ui.define([
 		if (this._oFullScreenUtil) {
 			this._oFullScreenUtil.cleanUpFullScreen(this);
 		}
+
+		// Clean up busy indicator
+		if (this._oBusyIndicator) {
+			this._oBusyIndicator.destroy();
+			this._oBusyIndicator = null;
+		}
+
+		// Clean up illustrated message
+		if (this._oIllustratedMessage) {
+			this._oIllustratedMessage.destroy();
+			this._oIllustratedMessage = null;
+		}
+
+		DragDropManager.removeDnD(this);
 	};
 	/* =========================================================== */
 	/* Pseudo events and event triggers */
@@ -589,6 +821,7 @@ sap.ui.define([
 	/**
 	 * Returns <code>true</code> if the graph is in full screen mode.
 	 * @public
+	 * @returns {boolean} Returns whether the graph is in full screen mode.
 	 */
 	Graph.prototype.isFullScreen = function () {
 		return this._bIsFullScreen;
@@ -723,6 +956,33 @@ sap.ui.define([
 		return this._mNodes[sKey];
 	};
 
+	/**
+	 * Re-rendering a node and all connected lines to update the positions of both the node and the lines.
+	 * Note: This method should be used only when the layout algorithm is set to NoopLayout and enableDragAndDrop is set to true.
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Node|string} vNode Node instance or node key
+	 * @param {number} iX New X coordinate
+	 * @param {number} iY New Y coordinate
+	 * @returns {sap.suite.ui.commons.networkgraph.Graph} Reference to this for method chaining
+	 * @public
+	 * @since 1.136.19
+	 */
+	Graph.prototype.updateNodePosition = function (vNode, iX, iY) {
+		if (!this._isDnDEnabled()) {
+			return this;
+		}
+
+		var oNode = typeof vNode === "string" ? this.getNodeByKey(vNode) : vNode;
+
+		if (!oNode) {
+			Log.warning("Node not found", "updateNodePosition", "sap.suite.ui.commons.networkgraph.Graph");
+			return this;
+		}
+
+		this.invalidate();
+		return this;
+	};
+
 	/**
 	 * Sets a custom label for the legend.
 	 * @param {object} mArguments Parameters for this method
@@ -759,6 +1019,13 @@ sap.ui.define([
 		this._createLegend();
 	};
 
+	Graph.prototype.setLabels = function (oValue) {
+		this.setProperty("labels", oValue, true);
+		this._createSearchSuggestItems();
+		this._createLegend();
+		return this;
+	};
+
 
 	/**
 	 * Zooms in or out of the graph.
@@ -797,7 +1064,7 @@ sap.ui.define([
 	/**
 	 * Returns current zoom level.
 	 *
-	 * @return {number}
+	 * @return {number} Current zoom level
 	 * @public
 	 */
 	Graph.prototype.getCurrentZoomLevel = function () {
@@ -817,6 +1084,31 @@ sap.ui.define([
 		this._oZoomLevelInvisibleText.setText(oResourceBundle.getText("NETWORK_GRAPH_ZOOM_LEVEL") + ": " + this._getZoomText());
 	};
 
+	/**
+	 * Restores keyboard focus to the last focused item in the graph, or falls back to the graph wrapper.
+	 * @private
+	 */
+	Graph.prototype._restoreFocusToGraph = function () {
+		if (this._oFocus) {
+			const oFocusToRestore = this._oFocus;
+			// Force setFocus to re-apply even if the item hasn't changed.
+			this._oFocus = null;
+			this.setFocus(oFocusToRestore);
+		} else {
+			this.getFocusDomRef().focus();
+		}
+	};
+
+	/**
+	 * Gets the associated control linked to this graph instance using the 'associatedControl' association.
+	 * This can be any UI5 control that is related to the graph.
+	 * @returns {sap.ui.core.Control|null} The associated control instance or null if not set.
+	 * @public
+	 */
+	Graph.prototype.getAssociatedControl = function () {
+		var sId = this.getAssociation("associatedControl");
+		return sId ? Element.getElementById(sId) : null;
+	};
 
 	/* =========================================================== */
 	/* Private methods */
@@ -843,6 +1135,24 @@ sap.ui.define([
 		};
 	};
 
+	/**
+	 * Returns a busy indicator instance for loading states.
+	 * @returns {sap.m.BusyIndicator} BusyIndicator instance
+	 * @private
+	 */
+	Graph.prototype._getBusyIndicator = function () {
+		var sText = this.getLoadingText() || oResourceBundle.getText("NETWORK_GRAPH_OPENING_CANVAS");
+
+		if (!this._oBusyIndicator) {
+			this._oBusyIndicator = new BusyIndicator({ text: sText });
+			this.addDependent(this._oBusyIndicator);
+		} else {
+			this._oBusyIndicator.setText(sText);
+		}
+
+		return this._oBusyIndicator;
+	};
+
 	Graph.prototype._createTooltip = function () {
 		var oTooltip = new Tooltip(this.getId() + "-tooltip");
 		this.addDependent(oTooltip);
@@ -858,6 +1168,7 @@ sap.ui.define([
 					return;
 				}
 
+				this._oFocus = null;
 				this.setFocus(oFocus);
 
 				if (oFocus.button == "menu") {
@@ -871,12 +1182,91 @@ sap.ui.define([
 	};
 
 	/**
+	 * Gets or creates an IllustratedMessage instance for displaying empty state.
+	 * This method reuses the same instance to avoid memory leaks.
+	 * The illustrated message content depends on whether drag-and-drop is enabled:
+	 * - When drag-and-drop is enabled: Shows "AddDimensions" illustration with plan-building message
+	 * - When drag-and-drop is disabled: Shows "NoChartData" illustration with custom or default no-data text
+	 *
+	 * @returns {sap.m.IllustratedMessage} The illustrated message instance for empty state
 	 * @private
 	 */
+	Graph.prototype._getIllustratedMessage = function () {
+		// Helper function to get configuration based on current state
+		var fnConfigureIllustratedMessage = function () {
+			var sText = this.getNoDataText(),
+				sTextInline = sText || oResourceBundle.getText("NETWORK_GRAPH_NO_DATA");
+
+			if (this._isDnDEnabled()) {
+				return {
+					illustrationType: IllustratedMessageType.AddDimensions,
+					title: oResourceBundle.getText("NETWORK_GRAPH_DND_EMPTY_TITLE"),
+					description: oResourceBundle.getText("NETWORK_GRAPH_DND_EMPTY_DESCRIPTION"),
+					enableDefaultTitleAndDescription: false
+				};
+			} else {
+				return {
+					illustrationType: IllustratedMessageType.NoChartData,
+					title: sTextInline,
+					enableDefaultTitleAndDescription: false
+				};
+			}
+		}.bind(this);
+
+		if (!this._oIllustratedMessage) {
+			var oConfig = fnConfigureIllustratedMessage();
+			this._oIllustratedMessage = new IllustratedMessage(oConfig);
+			this.addDependent(this._oIllustratedMessage);
+		} else {
+			var oConfig = fnConfigureIllustratedMessage();
+			this._oIllustratedMessage.setIllustrationType(oConfig.illustrationType);
+			this._oIllustratedMessage.setTitle(oConfig.title);
+			this._oIllustratedMessage.setDescription(oConfig.description);
+		}
+
+		return this._oIllustratedMessage;
+	};
+
+	/**
+	 * @private
+	 * Defocuses the currently focused element.
+	 */
 	Graph.prototype.defocus = function () {
 		this.$().find("." + this.FOCUS_CLASS).removeClass(this.FOCUS_CLASS);
 	};
 
+	/**
+	 * Sets whether drag and drop is enabled.
+	 * @param {boolean} bEnabled Whether drag and drop should be enabled
+	 * @private
+	 */
+	Graph.prototype.setEnableDragAndDrop = function (bEnabled) {
+		this.setProperty("enableDragAndDrop", bEnabled, true);
+
+		// Update zoom button visibility
+		if (this._zoomIn && this._zoomOut && this._zoomToFitButton) {
+			var bZoomVisible = !this._isDnDEnabled();
+			this._zoomIn.setVisible(bZoomVisible);
+			this._zoomOut.setVisible(bZoomVisible);
+			this._zoomToFitButton.setVisible(bZoomVisible);
+		}
+
+		// remove the node ports when drag and drop is disabled
+		if (!bEnabled) {
+			PortManager.removeAllPorts();
+		}
+
+		return this;
+	};
+
+	/**
+	 * @private
+	 * @returns {boolean} Returns whether drag and drop is enabled.
+	 */
+	Graph.prototype.getEnableDragAndDrop = function () {
+		return this.getProperty("enableDragAndDrop");
+	};
+
 	/**
 	 * Sets focus of the graph. Since one element at max can be focused at one time, handling of this belongs to the graph itself.
 	 * @param {object} oFocus Element (and optionally button) to focus
@@ -900,12 +1290,12 @@ sap.ui.define([
 									this._oFocus.item.isA("sap.suite.ui.commons.networkgraph.Node")))) {
 				this._updateAccessibility(oFocus);
 			}
-				this._updateAccessibility(oFocus);
-				return;
+			this._updateAccessibility(oFocus);
+			return;
 		}
 
 		this.defocus();
-		if (this.getFocusDomRef()) {
+		if (this.getFocusDomRef() && !(oFocus && oFocus.button && oFocus.button.id && oFocus.button.id.indexOf("actionOverflow") !== -1)) {
 			this.getFocusDomRef().focus();
 		}
 
@@ -945,7 +1335,7 @@ sap.ui.define([
 			this._setAccessibilityTitle(oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_CONTENT"));
 		}.bind(this),
 			fnBuildTitleForButton = function (sLabel) {
-				var sTitleLabel = sLabel + " " + oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_ACTION_BUTTON") ;
+				var sTitleLabel = sLabel + " " + oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_ACTION_BUTTON");
 				if (sLabel === "Expand/Collapse") {
 					if (oFocus.item.getCollapsed()) {
 						sTitleLabel = sTitleLabel + " " + oResourceBundle.getText("NETWORK_GRAPH_COLLAPSED");
@@ -1049,6 +1439,14 @@ sap.ui.define([
 		return this.getNodes().concat(this.getGroups());
 	};
 
+	Graph.prototype._isNoopLayout = function () {
+		return this._getLayoutAlgorithm().isA("sap.suite.ui.commons.networkgraph.layout.NoopLayout");
+	};
+
+	Graph.prototype._isDnDEnabled = function() {
+		return this._isNoopLayout() && this.getEnableDragAndDrop();
+	};
+
 	Graph.prototype._render = function () {
 		this._beforeRender();
 
@@ -1077,8 +1475,9 @@ sap.ui.define([
 			this.$background.width(iSvgWidth * this._fZoomLevel);
 			this.$background.height(iSvgHeight * this._fZoomLevel);
 
+			var sScale = "";
 			if (this._isUseNodeHtml()) {
-				var sScale = "scale(" + this._fZoomLevel + ")";
+				sScale = "scale(" + this._fZoomLevel + ")";
 				this.$("divnodes").css("transform", sScale);
 			}
 
@@ -1125,6 +1524,10 @@ sap.ui.define([
 
 		if (!this._isSwimLane() && !this._isTwoColumnsLayout()) {
 			this.$("innerscroller").addClass(" sapSuiteUiCommonsNetworkGraphInnerScrollerCenter ");
+			if (this._isDnDEnabled()) {
+				// If NoopLayout is used, users must set certain styles to ensure precise coordinates setting.
+				this.$("innerscroller").addClass("sapSuiteUiCommonsNetworkGraphInnerScrollerNoMargin");
+			}
 		}
 	};
 
@@ -1348,6 +1751,8 @@ sap.ui.define([
 		oRm.openStart("g", this.getId() + "-svgbody");
 		oRm.openEnd();
 		fnRenderItems("lines", aLines, "sapSuiteUiCommonsNetworkLines");
+		// Render line texts after all lines are rendered to handle overlaps
+		this._renderAllLineTexts(aLines, oRm);
 		if (!this._isUseNodeHtml()) {
 			fnRenderItems("nodes", aNodes, "sapSuiteUiCommonsNetworkNodes");
 		}
@@ -1372,6 +1777,45 @@ sap.ui.define([
 
 	};
 
+	/**
+	 * Renders text labels for all lines in a dedicated SVG group container.
+	 *
+	 * This method creates a batch rendering context for line labels, enabling
+	 * potential overlap handling and positioning optimizations. Labels are only
+	 * rendered for lines that meet all of the following conditions:
+	 * - The line has a labelName property value set
+	 * - The graph is using NoopLayout
+	 * - The line's arrowPosition is set to "Both"
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Line[]} aLines Array of line objects to render text labels for
+	 * @param {sap.ui.core.RenderManager} oRm The RenderManager instance used for SVG rendering
+	 * @private
+	 */
+	Graph.prototype._renderAllLineTexts = function (aLines, oRm) {
+		// Early return if line labels are disabled or NoopLayout is not active
+		if (!this._isNoopLayout()) {
+			return;
+		}
+
+		// Create a dedicated SVG group container for all line text labels
+		// This enables batch processing and potential overlap handling
+		oRm.openStart("g");
+		oRm.attr("id", this.getId() + "-line-texts");
+		oRm.class("sapSuiteUiCommonsNetworkLineTexts");
+		oRm.openEnd();
+
+		// Iterate through all lines and render their text labels within the group
+		// Only process lines that are valid, not ignored by layout, and visible
+		aLines.forEach(function (oLine) {
+			if (oLine && !oLine._isIgnored() && oLine.getVisible()) {
+				oLine._renderLineText(oRm);
+			}
+		});
+
+		// Close the SVG group container
+		oRm.close("g");
+	};
+
 	Graph.prototype._isProperKey = function (sKey) {
 		return sKey || (sKey === "0");
 	};
@@ -1452,7 +1896,11 @@ sap.ui.define([
 					}
 				}
 
-				this._isUseNodeHtml() ? oNode._resetDimensions() : oNode._setupWidthAndHeight();
+				if (this._isUseNodeHtml()) {
+					oNode._resetDimensions();
+				} else {
+					oNode._setupWidthAndHeight();
+				}
 				oNode._clearChildren();
 				oNode._rendered = false;
 
@@ -1881,16 +2329,24 @@ sap.ui.define([
 				}
 			});
 			this._toolbar.addContent(this._zoomOut);
-		}
+	}
 
 		// fit to viewport
-		this._toolbar.addContent(new OverflowToolbarButton({
+		this._zoomToFitButton = new OverflowToolbarButton({
 			type: ButtonType.Transparent,
 			icon: "sap-icon://popup-window",
 			tooltip: oResourceBundle.getText("NETWORK_GRAPH_ZOOMTOFIT"),
 			text: oResourceBundle.getText("NETWORK_GRAPH_ZOOMTOFIT"),
 			press: this._fitToScreen.bind(this)
-		}));
+		});
+		this._toolbar.addContent(this._zoomToFitButton);
+
+		// Hide zoom buttons if drag and drop is enabled
+		if (this._isDnDEnabled()) {
+			this._zoomIn.setVisible(false);
+			this._zoomOut.setVisible(false);
+			this._zoomToFitButton.setVisible(false);
+		}
 
 		// toggle full screen
 		this._oFullScreenButton = new OverflowToolbarButton({
@@ -2172,7 +2628,9 @@ sap.ui.define([
 
 			$wrapper.on("mouseleave", this._endDragging.bind(this));
 			$wrapper.on("mouseup", this._mouseUp.bind(this));
-			if (this.getEnableZoom()) {
+			if (this.getEnableZoom() && !this._isDnDEnabled()) {
+				// Disabling zooming capability in edit mode.
+				// TODO: consider scaling when dragging and dropping nodes and update ghost image dimenstion and coordinates prediction, to allow zooming.
 				$wrapper.on("wheel", function (oEvent) {
 					if (this._wheel({
 						x: oEvent.originalEvent.clientX,
@@ -2230,6 +2688,7 @@ sap.ui.define([
 			this._oZoomLevelInvisibleText.setText(oResourceBundle.getText("NETWORK_GRAPH_ZOOM_LEVEL") + ": " + this._getZoomText());
 			return true;
 		}
+		return false;
 	};
 
 	Graph.prototype._endDragging = function () {
@@ -2262,6 +2721,11 @@ sap.ui.define([
 		this._oPanning.dragging = true;
 
 		this._tooltip.instantClose();
+
+		// Remove all ports when deselecting
+		if (PortManager._currentTriggerNodeKey !== null) {
+			PortManager.removeAllPorts();
+		}
 	};
 
 	Graph.prototype._mouseUp = function () {
@@ -2410,6 +2874,11 @@ sap.ui.define([
 		// indicates current count of suggestion items when they are rendered
 		this._oSuggestionItemsModel.setSizeLimit(SUGGESTION_ITEMS_LIMIT);
 
+		const oLabels = this.getLabels() || {};
+		const sNodeLabel = oLabels.nodeLabel || oResourceBundle.getText("NETWORK_GRAPH_NODE");
+		const sLineLabel = oLabels.lineLabel || oResourceBundle.getText("NETWORK_GRAPH_LINE");
+		const sGroupLabel = oLabels.groupLabel || oResourceBundle.getText("NETWORK_GRAPH_GROUP");
+
 		aNodes.forEach(function (oNode) {
 			var sTitle = Utils.trimText(oNode.getTitle(), TITLE_LENGTH);
 			oData.items.push({
@@ -2417,7 +2886,7 @@ sap.ui.define([
 				type: SUGGESTIONS.Node,
 				icon: oNode.getIcon(),
 				key: oNode.getKey(),
-				description: "(" + oResourceBundle.getText("NETWORK_GRAPH_NODE") + ")"
+				description: "(" + sNodeLabel + ")"
 			});
 		});
 
@@ -2430,7 +2899,7 @@ sap.ui.define([
 					text: oLine._createSuggestionHelpText(),
 					type: SUGGESTIONS.Line,
 					key: oLine._getLineId(),
-					description: "(" + oResourceBundle.getText("NETWORK_GRAPH_LINE") + ")"
+					description: "(" + sLineLabel + ")"
 				});
 			}
 		});
@@ -2442,7 +2911,7 @@ sap.ui.define([
 					text: sTitle ? sTitle : oGroup.getKey(),
 					key: oGroup.getKey(),
 					type: SUGGESTIONS.Group,
-					description: "(" + oResourceBundle.getText("NETWORK_GRAPH_GROUP") + ")"
+					description: "(" + sGroupLabel + ")"
 				});
 			}
 		});
@@ -2486,7 +2955,13 @@ sap.ui.define([
 			fHeight = oItem._iHeight;
 		}
 
-		this.$scroller.get(0).scrollLeft = ((fX + (fWidth ? fWidth : 0) / 2) * this._fZoomLevel) - (this.$scroller.width() / 2);
+		const fScrollLeft = ((fX + (fWidth ? fWidth : 0) / 2) * this._fZoomLevel) - (this.$scroller.width() / 2);
+
+		if (this._bIsRtl) {
+			this.$scroller.get(0).scrollLeft = -fScrollLeft;
+		} else {
+			this.$scroller.get(0).scrollLeft = fScrollLeft;
+		}
 		this.$scroller.get(0).scrollTop = ((fY + (fHeight ? fHeight : 0) / 2) * this._fZoomLevel) - (this.$scroller.height() / 2);
 	};
 
@@ -2507,6 +2982,14 @@ sap.ui.define([
 			iRight = iLeft + this.$scroller.width() / this._fZoomLevel,
 			iBottom = iTop + this.$scroller.height() / this._fZoomLevel;
 
+		if (this._bIsRtl) {
+			const iGraphWidth = this.$svg.width() / this._fZoomLevel;
+			const iViewportWidth = this.$scroller.width() / this._fZoomLevel;
+			const iScrollPosAbs = Math.abs(iLeft);
+			iLeft = iGraphWidth - iScrollPosAbs - iViewportWidth;
+			iRight = iLeft + iViewportWidth;
+		}
+
 		if (!oItem._isOnScreen(iLeft, iRight, iTop, iBottom)) {
 			if (oItem instanceof Node) {
 				iCenterX = oItem.getX() + oItem._iWidth / 2;
@@ -2521,7 +3004,14 @@ sap.ui.define([
 			}
 
 			if (iCenterX < iLeft || iCenterX > iRight) {
-				oScroller.scrollLeft = iCenterX * this._fZoomLevel - this.$scroller.width() / 2;
+				let iTargetScrollLeft = iCenterX * this._fZoomLevel - this.$scroller.width() / 2;
+
+				if (this._bIsRtl) {
+					const iScrollRange = oScroller.scrollWidth - oScroller.clientWidth;
+					iTargetScrollLeft = -(iScrollRange - iTargetScrollLeft);
+				}
+
+				oScroller.scrollLeft = iTargetScrollLeft;
 			}
 			if (iCenterY < iTop || iCenterY > iBottom) {
 				oScroller.scrollTop = iCenterY * this._fZoomLevel - this.$scroller.height() / 2;
@@ -2586,7 +3076,7 @@ sap.ui.define([
 			if (fnHasStatus(oCollection)) {
 				oRm.openStart("div").class(sClass).openEnd();
 				oRm.openStart("label").class("sapSuiteUiCommonsNetworkGraphLegendTitle").openEnd();
-				oRm.text(oResourceBundle.getText(sTitle));
+				oRm.text(sTitle);
 				oRm.close("label");
 				oRm.close("div");
 				// get the status labels for sorting (some statuses can have custom labels)
@@ -2621,12 +3111,13 @@ sap.ui.define([
 			return;
 		}
 
+		const oLabels = this.getLabels() || {};
 		fnProcessElements(this.getNodes(), oNodeStatuses, "sapSuiteUiCommonsNetworkGraphLegendTitleNode",
-			"NETWORK_GRAPH_NODES", StatusType.Node);
+			oLabels.nodeLabelPlural || oResourceBundle.getText("NETWORK_GRAPH_NODES"), StatusType.Node);
 		fnProcessElements(this.getLines(), oLineStatuses, "sapSuiteUiCommonsNetworkGraphLegendTitleLine",
-			"NETWORK_GRAPH_LINES", StatusType.Line);
+			oLabels.lineLabelPlural || oResourceBundle.getText("NETWORK_GRAPH_LINES"), StatusType.Line);
 		fnProcessElements(this.getGroups(), oGroupStatuses, "sapSuiteUiCommonsNetworkGraphLegendTitleLine",
-			"NETWORK_GRAPH_GROUPS", StatusType.Group);
+			oLabels.groupLabelPlural || oResourceBundle.getText("NETWORK_GRAPH_GROUPS"), StatusType.Group);
 		oRm.flush($legend[0]);
 		oRm.destroy();
 		// $legend.html(sHtml);
@@ -2786,8 +3277,15 @@ sap.ui.define([
 	};
 
 	Graph.prototype._isTopBottom = function () {
-		return this.getOrientation() === Orientation.TopBottom ||
-			this.getOrientation() === Orientation.BottomTop;
+		return this.getOrientation() === Orientation.TopBottom
+	};
+
+	Graph.prototype._isBottomTop = function () {
+		return this.getOrientation() === Orientation.BottomTop;
+	};
+
+	Graph.prototype._isRightLeft = function () {
+		return this.getOrientation() === Orientation.RightLeft;
 	};
 
 	/* =========================================================== */
@@ -2929,5 +3427,16 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Checks if the current layout algorithm supports node ports functionality.
+	 * For now, only NoopLayout algorithms support node ports.
+	 *
+	 * @returns {boolean} True if the layout supports node ports, false otherwise
+	 * @private
+	 */
+	Graph.prototype._supportsNodePorts = function () {
+		return this.getNodePorts() !== "None" && this._isDnDEnabled();
+	};
+
 	return Graph;
 });