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

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

@@ -5,7 +5,7 @@
 	
  */
 
-sap.ui.define([], function () {
+sap.ui.define(["sap/base/Log"], function (Log) {
 	"use strict";
 
 	/**
@@ -73,15 +73,244 @@ sap.ui.define([], function () {
 	 * @returns {function} throttled function.
 	 */
 	Utils.throttle = (mainFunction, delay) => {
-        return (...args) => {
-            if (timeFlag === null) {
-                mainFunction(...args);
-                timeFlag = setTimeout(() => {
-                    timeFlag = null;
-                }, delay);
-            }
-        };
-    };
+		return (...args) => {
+			if (timeFlag === null) {
+				mainFunction(...args);
+				timeFlag = setTimeout(() => {
+					timeFlag = null;
+				}, delay);
+			}
+		};
+	};
+
+	/**
+	 * Helper function to convert CSS outline to border for drag image elements.
+	 * This is needed because some browsers don't capture outline in drag images.
+	 *
+	 * @param {HTMLElement} oElement - The DOM element to apply border to
+	 * @param {CSSStyleDeclaration} oComputedStyle - The computed style of the element
+	 * @param {string} [sBorderProperty="border"] - The CSS border property to set ("border", "borderBottom", etc.)
+	 * @private
+	 */
+	var _applyOutlineAsBorder = function (oElement, oComputedStyle, sBorderProperty) {
+		var sOutlineWidth = oComputedStyle.outlineWidth;
+		if (sOutlineWidth && sOutlineWidth !== "0px") {
+			var sBorderValue = sOutlineWidth + " " + oComputedStyle.outlineStyle + " " + oComputedStyle.outlineColor;
+			oElement.style[sBorderProperty || "border"] = sBorderValue;
+			oElement.style.outline = "none";
+		}
+	};
+
+	/**
+	 * Clones the inner div element and applies basic styles for drag image.
+	 *
+	 * @param {HTMLElement} oInnerDiv - Inner div element to clone
+	 * @returns {HTMLElement} The cloned and styled node
+	 * @private
+	 */
+	var _cloneAndStyleNode = function (oInnerDiv) {
+		var oClonedNode = oInnerDiv.cloneNode(true);
+		var oComputedStyle = window.getComputedStyle(oInnerDiv);
+
+		// Apply computed styles to ensure the clone looks identical
+		oClonedNode.style.width = oComputedStyle.width;
+		oClonedNode.style.height = oComputedStyle.height;
+		oClonedNode.style.position = "absolute";
+		oClonedNode.style.top = "-9999px";
+		oClonedNode.style.left = "-9999px";
+		oClonedNode.style.pointerEvents = "none";
+
+		// Convert outline to border for the drag image
+		_applyOutlineAsBorder(oClonedNode, oComputedStyle);
+
+		// Retain border-radius for rounded corners
+		var sBorderRadius = oComputedStyle.borderRadius;
+		if (sBorderRadius && sBorderRadius !== "0px") {
+			oClonedNode.style.borderRadius = sBorderRadius;
+		}
+
+		// Retain background color
+		var sBackgroundColor = oComputedStyle.backgroundColor;
+		if (sBackgroundColor) {
+			oClonedNode.style.backgroundColor = sBackgroundColor;
+		}
+
+		return oClonedNode;
+	};
+
+	/**
+	 * Processes header element styling in the cloned node.
+	 *
+	 * @param {HTMLElement} oClonedNode - The cloned node to process
+	 * @param {HTMLElement} oInnerDiv - Original inner div element
+	 * @private
+	 */
+	var _processHeaderElement = function (oClonedNode, oInnerDiv) {
+		var oOriginalHeader = oInnerDiv.querySelector(".sapSuiteUiCommonsNetworkGraphDivHeader");
+		if (!oOriginalHeader) {
+			return;
+		}
+
+		var oHeaderComputedStyle = window.getComputedStyle(oOriginalHeader);
+		var oHeaderElement = oClonedNode.querySelector(".sapSuiteUiCommonsNetworkGraphDivHeader");
+
+		if (!oHeaderElement) {
+			return;
+		}
+
+		// Retain header background color
+		if (oHeaderComputedStyle.backgroundColor) {
+			oHeaderElement.style.backgroundColor = oHeaderComputedStyle.backgroundColor;
+		}
+
+		// Convert header outline to border
+		_applyOutlineAsBorder(oHeaderElement, oHeaderComputedStyle, "borderBottom");
+
+		// Process separate header color wrapper if it exists (skip if combined class)
+		if (!oHeaderElement.classList.contains("sapSuiteUiCommonsNetworkGraphDivHeaderColor")) {
+			var oOriginalHeaderColor = oInnerDiv.querySelector(".sapSuiteUiCommonsNetworkGraphDivHeaderColor");
+			if (oOriginalHeaderColor) {
+				var oHeaderColorComputedStyle = window.getComputedStyle(oOriginalHeaderColor);
+				var oHeaderColorElement = oHeaderElement.querySelector(".sapSuiteUiCommonsNetworkGraphDivHeaderColor");
+
+				if (oHeaderColorElement) {
+					// Retain border
+					if (oHeaderColorComputedStyle.border && oHeaderColorComputedStyle.border !== "0px none rgb(0, 0, 0)") {
+						oHeaderColorElement.style.border = oHeaderColorComputedStyle.border;
+					}
+
+					// Retain border-radius
+					if (oHeaderColorComputedStyle.borderRadius && oHeaderColorComputedStyle.borderRadius !== "0px") {
+						oHeaderColorElement.style.borderRadius = oHeaderColorComputedStyle.borderRadius;
+					}
+
+					// Retain background color
+					if (oHeaderColorComputedStyle.backgroundColor) {
+						oHeaderColorElement.style.backgroundColor = oHeaderColorComputedStyle.backgroundColor;
+					}
+
+					// Retain color
+					if (oHeaderColorComputedStyle.color) {
+						oHeaderColorElement.style.color = oHeaderColorComputedStyle.color;
+					}
+				}
+			}
+		}
+	};
+
+	/**
+	 * Creates a custom drag image for the node that includes borders, border-radius, and background colors.
+	 * This is necessary because the default browser drag image doesn't capture CSS outline properties for few browsers e.g. Chrome.
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node being dragged
+	 * @param {Event} oBrowserEvent - The native browser drag event
+	 * @returns {HTMLElement|null} The cloned node attached to DOM, or null if creation failed. Caller is responsible for cleanup.
+	 */
+	Utils.createCustomDragImage = function (oNode, oBrowserEvent) {
+		if (!oNode || !oBrowserEvent || !oBrowserEvent.dataTransfer) {
+			return null;
+		}
+
+		// Get the graph instance to check the ghost image mode
+		var oGraph = oNode.getParent();
+		if (!oGraph) {
+			return null;
+		}
+
+		try {
+			var oDomRef = oNode.getDomRef();
+			if (!oDomRef) {
+				return null;
+			}
+
+			var oInnerDiv = oDomRef.querySelector(".sapSuiteUiCommonsNetworkGraphDivInner");
+			if (!oInnerDiv) {
+				return null;
+			}
+
+			// Clone and apply basic styles
+			var oClonedNode = _cloneAndStyleNode(oInnerDiv);
+
+			// Process header element styling
+			_processHeaderElement(oClonedNode, oInnerDiv);
+
+			// Attach to DOM temporarily
+			document.body.appendChild(oClonedNode);
+
+			// Set drag image with correct offset
+			var oRect = oInnerDiv.getBoundingClientRect();
+			var iOffsetX = oBrowserEvent.clientX - oRect.left;
+			var iOffsetY = oBrowserEvent.clientY - oRect.top;
+			oBrowserEvent.dataTransfer.setDragImage(oClonedNode, iOffsetX, iOffsetY);
+
+			// Return the cloned node for cleanup by caller
+			return oClonedNode;
+		} catch (oError) {
+			Log.warning("Utils: Failed to create custom drag image", oError);
+			return null;
+		}
+	};
+
+	/**
+	 * Retains the scroll position of the graph after DOM operations.
+	 * This method ensures that the viewport remains stable after operations like
+	 * drag-drop, connection creation, or other DOM manipulations.
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The graph control
+	 * @param {number} scrollLeft - The horizontal scroll position to maintain
+	 * @param {number} scrollTop - The vertical scroll position to maintain
+	 */
+	Utils.retainScrollPosition = function (oGraph, scrollLeft, scrollTop) {
+		if (!oGraph || !oGraph.$scroller || !oGraph.$scroller[0]) {
+			return;
+		}
+
+		const scrollerElement = oGraph.$scroller[0];
+
+		// Use requestAnimationFrame for better performance and timing
+		requestAnimationFrame(() => {
+			try {
+				scrollerElement.scrollLeft = scrollLeft;
+				scrollerElement.scrollTop = scrollTop;
+
+				// Fallback verification - ensure the scroll position was actually set
+				if (Math.abs(scrollerElement.scrollLeft - scrollLeft) > 1 ||
+					Math.abs(scrollerElement.scrollTop - scrollTop) > 1) {
+
+					// If the scroll position wasn't set correctly, try again after DOM updates
+					setTimeout(() => {
+						scrollerElement.scrollLeft = scrollLeft;
+						scrollerElement.scrollTop = scrollTop;
+					}, 10);
+				}
+			} catch (error) {
+				Log.error("retainScrollPosition: Error setting scroll position - " + error.message, "sap.suite.ui.commons.networkgraph.Utils");
+			}
+		});
+	};
+
+	/**
+	 * Preserves the scroll position of the graph by scheduling restoration after DOM updates.
+	 * This is a convenience wrapper that handles the setTimeout + restoration logic.
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The graph control
+	 * @param {number} scrollLeft - The horizontal scroll position to restore
+	 * @param {number} scrollTop - The vertical scroll position to restore
+	 * @param {number} [iDelay=0] - Delay in milliseconds before restoring scroll position
+	 * @public
+	 */
+	Utils.preserveScrollPosition = function (oGraph, scrollLeft, scrollTop, iDelay) {
+		if (!oGraph || !oGraph.$scroller || !oGraph.$scroller[0]) {
+			return;
+		}
+
+		const delay = typeof iDelay === "number" ? iDelay : 0;
+
+		// Schedule restoration after DOM updates
+		setTimeout(() => {
+			Utils.retainScrollPosition(oGraph, scrollLeft, scrollTop);
+		}, delay);
+	};
 
 	return Utils;
 }, true);

package/src/sap/suite/ui/commons/networkgraph/layout/NoopLayout.js

@@ -9,11 +9,13 @@ sap.ui.define([
 	"sap/suite/ui/commons/library",
 	"./LayoutAlgorithm",
 	"./LayoutTask",
-	"../util/ConnectionPathUtils"
-], function (library, LayoutAlgorithm, LayoutTask, ConnectionPathUtils) {
+	"../util/ConnectionPathUtils",
+	"../util/DependencyLayoutHelper"
+], function (library, LayoutAlgorithm, LayoutTask, ConnectionPathUtils, DependencyLayoutHelper) {
 	"use strict";
 
-	var LayoutRenderType = library.networkgraph.LayoutRenderType;
+	var oLayoutRenderType = library.networkgraph.LayoutRenderType,
+		oComponentArrangement = library.networkgraph.ComponentArrangement;
 
 	/**
 	 * Constructor for a new NoopLayout.
@@ -37,9 +39,17 @@ sap.ui.define([
 				 * Enables advanced line routing algorithm that creates orthogonal bends along the pathfinding process for line creation.
 				 *
 				 * @public
-				 * @since 1.144
 				 */
-				enableOptimizedLineAlgorithm: { type: "boolean", group: "Behavior", defaultValue: false }
+				enableOptimizedLineAlgorithm: { type: "boolean", group: "Behavior", defaultValue: false },
+
+				/**
+				 * Defines how separate connected components should be arranged in the graph.
+				 * Components can be arranged either horizontally (side-by-side) or vertically (stacked).
+				 *
+				 * @since 1.146
+				 * @public
+				 */
+				componentArrangement: { type: "sap.suite.ui.commons.networkgraph.ComponentArrangement", group: "Behavior", defaultValue: oComponentArrangement.Horizontal }
 			}
 		}
 	});
@@ -54,11 +64,14 @@ sap.ui.define([
 	 * @public
 	 */
 	NoopLayout.prototype.getLayoutRenderType = function () {
-		return LayoutRenderType.LayeredWithGroups;
+		return oLayoutRenderType.LayeredWithGroups;
 	};
 
 	/**
 	 * Executes the layout algorithm.
+	 * Automatically calculates initial positions for unpositioned nodes using DependencyLayoutHelper,
+	 * then normalizes line coordinates.
+	 *
 	 * @returns {sap.suite.ui.commons.networkgraph.layout.LayoutTask} Task to get the layout calculated.
 	 * @public
 	 */
@@ -76,6 +89,19 @@ sap.ui.define([
 				return;
 			}
 
+			// Check if positioning should be calculated
+			// Note: DependencyLayoutHelper only repositions nodes without valid coordinates
+			if (this._shouldCalculatePositions(oGraph)) {
+				DependencyLayoutHelper.calculatePositions(oGraph, {
+					componentArrangement: this.getComponentArrangement()
+				});
+
+				// Reset flag after calculation
+				if (oGraph._bTriggerLayoutCalculation) {
+					oGraph._bTriggerLayoutCalculation = false;
+				}
+			}
+
 			if (this.getEnableOptimizedLineAlgorithm()) {
 				// Use the ConnectionPathUtils utility to normalize lines
 				ConnectionPathUtils.normalizeLines(oGraph, {
@@ -86,11 +112,32 @@ sap.ui.define([
 				this._normalizeLines();
 			}
 
-
-
 			fnResolve();
 		}.bind(this));
 	};
 
+	/**
+	 * Determines if initial positions should be calculated.
+	 * Only returns true if there are unpositioned nodes or if explicitly triggered.
+	 *
+	 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The graph instance
+	 * @returns {boolean} True if positions should be calculated
+	 * @private
+	 */
+	NoopLayout.prototype._shouldCalculatePositions = function (oGraph) {
+		// Check if explicit trigger flag is set
+		// Even when triggered, DependencyLayoutHelper only affects unpositioned nodes
+		if (oGraph._bTriggerLayoutCalculation) {
+			return true;
+		}
+
+		// Auto-detect unpositioned nodes (coordinates 0,0 or undefined)
+		return oGraph.getNodes().some(function (oNode) {
+			var fX = oNode.getX();
+			var fY = oNode.getY();
+			return (fX === 0 || fX === undefined) && (fY === 0 || fY === undefined);
+		});
+	};
+
 	return NoopLayout;
 });

package/src/sap/suite/ui/commons/networkgraph/util/DependencyLayoutHelper.js

@@ -7,8 +7,8 @@
 sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (library, Log) {
 	"use strict";
 
-	const ConnectionType = library.networkgraph.ConnectionType,
-		ComponentArrangement = library.networkgraph.ComponentArrangement;
+	const oConnectionType = library.networkgraph.ConnectionType,
+		oComponentArrangement = library.networkgraph.ComponentArrangement;
 	const DEFAULT_HORIZONTAL_SPACING = 240;
 	const DEFAULT_VERTICAL_SPACING = 100;
 
@@ -32,12 +32,14 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Calculates and sets positions for nodes without coordinates based on their dependency relationships.
 		 * Uses topological sorting (Kahn's algorithm) and DFS-based cycle detection to arrange nodes
 		 * in layers from left to right, ensuring no overlaps and minimal line crossings.
+		 * Note: Drag and drop functionality is only available for nodes. Groups cannot be dragged and dropped, even when NoopLayout is used and enableDragAndDrop is set to true.
 		 *
-		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The graph instance
 		 * @param {object} [mConfig] - Configuration object
 		 * @param {number} [mConfig.horizontalSpacing=240] - Horizontal spacing between layers
 		 * @param {number} [mConfig.verticalSpacing=100] - Vertical spacing between nodes
 		 * @param {sap.suite.ui.commons.networkgraph.ComponentArrangement} [mConfig.componentArrangement=Horizontal] - Component arrangement: "Horizontal" or "Vertical"
+		 * @param {boolean} [mConfig.clearCache=false] - Clear the position cache to force recalculation of all nodes
 		 * @public
 		 */
 		calculatePositions: function (oGraph, mConfig) {
@@ -49,10 +51,17 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				{
 					horizontalSpacing: DEFAULT_HORIZONTAL_SPACING,
 					verticalSpacing: DEFAULT_VERTICAL_SPACING,
-					componentArrangement: ComponentArrangement.Horizontal,
+					componentArrangement: oComponentArrangement.Horizontal,
+					clearCache: false
 				},
 				mConfig || {}
 			);
+
+			// Clear cache if requested (e.g., when changing arrangement)
+			if (config.clearCache) {
+				this._lastCalculated = new WeakMap();
+			}
+
 			try {
 				this._detectUserChanges(oGraph);
 				this._buildDependencyGraph(oGraph);
@@ -129,13 +138,13 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 					this._lineMap.get(sFromKey).set(sToKey, oLine);
 
 					switch (sConnectionType) {
-						case ConnectionType.RightToRight:
-						case ConnectionType.LeftToLeft:
+						case oConnectionType.RightToRight:
+						case oConnectionType.LeftToLeft:
 							oFromNode._layoutData.parallelNodes.push(oToNode);
 							oToNode._layoutData.parallelNodes.push(oFromNode);
 							break;
-						case ConnectionType.RightToLeft:
-						case ConnectionType.LeftToRight:
+						case oConnectionType.RightToLeft:
+						case oConnectionType.LeftToRight:
 						default:
 							oFromNode._layoutData.outgoing.push(oToNode);
 							oToNode._layoutData.incoming.push(oFromNode);
@@ -279,7 +288,7 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 					aConnectedComponents.push(aComponentNodes);
 				}
 			});
-			const bSideBySide = componentArrangement !== ComponentArrangement.Vertical;
+			const bSideBySide = componentArrangement !== oComponentArrangement.Vertical;
 			let iMaxVerticalPosition = 0;
 			let iMaxLayerAcrossAll = 0;
 

package/src/sap/suite/ui/commons/networkgraph/util/DragDropManager.js

@@ -7,8 +7,9 @@
 sap.ui.define([
 	"sap/ui/core/dnd/DragInfo",
 	"sap/ui/core/dnd/DropInfo",
-	"sap/base/Log"
-], function (DragInfo, DropInfo, Log) {
+	"sap/base/Log",
+	"sap/suite/ui/commons/networkgraph/Utils"
+], function (DragInfo, DropInfo, Log, Utils) {
 	"use strict";
 
 	// constants
@@ -22,12 +23,32 @@ sap.ui.define([
 		AUTO_SCROLL_SPEED: 10, // Pixels to scroll per frame (16ms)
 	};
 
+	/**
+	 * Minimum position offsets to ensure action buttons remain visible.
+	 * LEFT: 60px accounts for line and port
+	 * TOP: 40px accounts for top action buttons (-2.25rem ≈ 36px) plus margin
+	 */
+	const POSITION_CLAMP_OFFSET = {
+		LEFT: 60,
+		TOP: 40
+	};
+
 	// Instance object: Only one will exist
 	var instance = null;
 	var sDragSessionKey = "networkGraphDragSession";
 	var oUtilityFunctions = {
 		diff: function (a, b) {
 			return Math.abs(a - b);
+		},
+		clampPosition: function (x, y) {
+			/**
+			 * Clamps position coordinates to minimum thresholds.
+			 * Prevents nodes from being positioned where action buttons would be off-screen.
+			 */
+			return {
+				x: Math.max(POSITION_CLAMP_OFFSET.LEFT, x),
+				y: Math.max(POSITION_CLAMP_OFFSET.TOP, y)
+			};
 		}
 	};
 
@@ -276,45 +297,6 @@ sap.ui.define([
 			oControl.isA("sap.suite.ui.commons.networkgraph.Node");
 	}
 
-	/**
-	 * Retains the scroll position of the graph after node drop.
-	 * This method ensures that the viewport remains stable after drag and drop operations.
-	 *
-	 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The graph control
-	 * @param {number} scrollLeft - The horizontal scroll position to maintain
-	 * @param {number} scrollTop - The vertical scroll position to maintain
-	 * @private
-	 */
-	DragDropManager.prototype._retainScrollPosition = function (oGraph, scrollLeft, scrollTop) {
-		if (!oGraph || !oGraph.$scroller || !oGraph.$scroller[0]) {
-			Log.warning("DragDropManager: Invalid graph or scroller element for scroll position retention.");
-			return;
-		}
-
-		const scrollerElement = oGraph.$scroller[0];
-
-		// Use requestAnimationFrame for better performance and timing
-		this._iRequestAnimationFrameId = requestAnimationFrame(() => {
-			try {
-				scrollerElement.scrollLeft = scrollLeft;
-				scrollerElement.scrollTop = scrollTop;
-
-				// Fallback verification - ensure the scroll position was actually set
-				if (Math.abs(scrollerElement.scrollLeft - scrollLeft) > 1 ||
-					Math.abs(scrollerElement.scrollTop - scrollTop) > 1) {
-
-					// If the scroll position wasn't set correctly, try again after DOM updates
-					setTimeout(() => {
-						scrollerElement.scrollLeft = scrollLeft;
-						scrollerElement.scrollTop = scrollTop;
-					}, 10);
-				}
-			} catch (error) {
-				Log.error("DragDropManager: Failed to retain scroll position", error);
-			}
-		});
-	}
-
 	/**
 	 * Handles the drag start event for nodes.
 	 *
@@ -325,6 +307,7 @@ sap.ui.define([
 		let dragSession = oEvent.getParameter("dragSession");
 		let browserEvent = oEvent.getParameter("browserEvent");
 		let oGraph = oEvent.getParameter("target")?.getParent();
+		let oNode = oEvent.getParameter("target");
 		let boundingRectScroller = oGraph?.$scroller?.[0]?.getBoundingClientRect() || { x: 0, y: 0 };
 		let boundingRectInnerScroller = oGraph?._$innerscroller?.[0]?.getBoundingClientRect() || { x: 0, y: 0 };
 
@@ -336,6 +319,9 @@ sap.ui.define([
 		// Stop any existing auto-scroll from previous drag operations
 		this._stopAutoScroll();
 
+		// Create custom drag image that includes the border
+		this._oDragImageNode = Utils.createCustomDragImage(oNode, browserEvent);
+
 		dragSession.setComplexData(sDragSessionKey, {
 			// Mouse cursor position when drag starts (in viewport coordinates)
 			cursorX: browserEvent.clientX,
@@ -369,6 +355,12 @@ sap.ui.define([
 
 		// Stop auto-scrolling when drag ends
 		this._stopAutoScroll();
+
+		// Clean up the drag image node
+		if (this._oDragImageNode && this._oDragImageNode.parentNode) {
+			this._oDragImageNode.parentNode.removeChild(this._oDragImageNode);
+			this._oDragImageNode = null;
+		}
 	};
 
 	/**
@@ -543,6 +535,9 @@ sap.ui.define([
 		let newX = dropData.draggedControl.getX() + deltaX + (deltaSignatureX * deltaInnerScrollerX),
 			newY = dropData.draggedControl.getY() + deltaY + (deltaSignatureY * deltaInnerScrollerY);
 
+		// Clamp position to prevent nodes from going off-screen (especially for action buttons)
+		var oClampedPosition = oUtilityFunctions.clampPosition(newX, newY);
+
 		// Store current scroll position before any DOM changes
 		let currentScrollLeft = oGraph?.$scroller?.[0]?.scrollLeft || 0;
 		let currentScrollTop = oGraph?.$scroller?.[0]?.scrollTop || 0;
@@ -550,14 +545,11 @@ sap.ui.define([
 		oGraph.fireEvent("nodeDropped", {
 			...oEvent.getParameters(),
 			node: dropData.draggedControl,
-			newX: newX,
-			newY: newY
+			newX: oClampedPosition.x,
+			newY: oClampedPosition.y
 		});
-		// Restore the scroll position using the dedicated method
-		// TODO: udpate promise based
-		setTimeout(() => {
-			this._retainScrollPosition(oGraph, currentScrollLeft, currentScrollTop);
-		}, 0);
+		// Preserve scroll position after event
+		Utils.preserveScrollPosition(oGraph, currentScrollLeft, currentScrollTop, 0);
 	};
 
 	/**
@@ -574,12 +566,22 @@ sap.ui.define([
 			x = dropData.clientX - boundingRect.left,
 			y = dropData.clientY - boundingRect.top;
 
+		// Clamp position to prevent nodes from going off-screen (especially for action buttons)
+		var oClampedPosition = oUtilityFunctions.clampPosition(x, y);
+
+		// Store current scroll position before any DOM changes
+		let currentScrollLeft = oGraph?.$scroller?.[0]?.scrollLeft || 0;
+		let currentScrollTop = oGraph?.$scroller?.[0]?.scrollTop || 0;
+
 		oGraph.fireEvent("nodeDropped", {
 			...oEvent.getParameters(),
 			node: dropData.draggedControl,
-			newX: x,
-			newY: y
+			newX: oClampedPosition.x,
+			newY: oClampedPosition.y
 		});
+
+		// Preserve scroll position after event
+		Utils.preserveScrollPosition(oGraph, currentScrollLeft, currentScrollTop, 0);
 	};
 
 	/**

package/src/sap/suite/ui/commons/networkgraph/util/PortManager.js

@@ -6,8 +6,9 @@
 */
 sap.ui.define([
     "sap/ui/thirdparty/jquery",
-    "sap/suite/ui/commons/library"
-], function (jQuery, Library) {
+    "sap/suite/ui/commons/library",
+    "sap/suite/ui/commons/networkgraph/Utils"
+], function (jQuery, Library, Utils) {
     "use strict";
     /**
      * PortManager class for managing network graph ports.
@@ -485,6 +486,11 @@ sap.ui.define([
                 const targetPortSide = target.dataset.portSide;
                 // Check if the target node is valid
                 if (targetNode) {
+                    const oGraph = sourceNode.getParent();
+                    // Capture current scroll position before firing event
+                    const scrollerElement = oGraph.$scroller[0];
+                    const currentScrollLeft = scrollerElement.scrollLeft || 0;
+                    const currentScrollTop = scrollerElement.scrollTop || 0;
                     const mParameters = {
                         from: sourceNode.getKey(),
                         to: targetNode.getKey(),
@@ -493,7 +499,10 @@ sap.ui.define([
                         toNode: targetNode
                     };
                     // Fire the connectionCreated event
-                    sourceNode.getParent().fireConnectionCreated(mParameters);
+                    oGraph.fireConnectionCreated(mParameters);
+
+                    // Preserve scroll position after event
+                    Utils.preserveScrollPosition(oGraph, currentScrollLeft, currentScrollTop, 0);
                 }
             }
             // Remove inlet ports from other nodes

package/src/sap/suite/ui/commons/statusindicator/Circle.js

@@ -30,7 +30,7 @@ sap.ui.define([
 		 * @extends sap.suite.ui.commons.statusindicator.SimpleShape
 		 *
 		 * @author SAP SE
-		 * @version 1.145.0
+		 * @version 1.146.0
 		 * @since 1.50
 		 *
 		 * @constructor

package/src/sap/suite/ui/commons/statusindicator/CustomShape.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.suite.ui.commons.statusindicator.Shape
 	 *
 	 * @author SAP SE
-	 * @version 1.145.0
+	 * @version 1.146.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/DiscreteThreshold.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.145.0
+	 * @version 1.146.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/FillingOption.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.145.0
+	 * @version 1.146.0
 	 * @since 1.50
 	 *
 	 * @constructor