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

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

@@ -7,7 +7,8 @@
 sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (library, Log) {
 	"use strict";
 
-	const ConnectionType = library.networkgraph.ConnectionType;
+	const oConnectionType = library.networkgraph.ConnectionType,
+		oComponentArrangement = library.networkgraph.ComponentArrangement;
 	const DEFAULT_HORIZONTAL_SPACING = 240;
 	const DEFAULT_VERTICAL_SPACING = 100;
 
@@ -21,15 +22,24 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 	 * @since 1.144
 	 */
 	const DependencyLayoutHelper = {
+		/**
+		 * WeakMap to store last calculated positions and origin flag for automatic drag detection.
+	 	 * Structure: {x: number, y: number, bIsUserPositioned: boolean}
+		 */
+		_lastCalculated: new WeakMap(),
+
 		/**
 		 * 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) {
@@ -41,17 +51,26 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				{
 					horizontalSpacing: DEFAULT_HORIZONTAL_SPACING,
 					verticalSpacing: DEFAULT_VERTICAL_SPACING,
+					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);
 				const aComponents = this._identifyComponents(oGraph);
-				this._processComponents(aComponents);
+				this._processComponents(aComponents, config);
 				this._calculateCoordinates(oGraph, config);
 				this._adjustHorizontalSpacingForNodeWidths(oGraph, config);
 				this._adjustVerticalSpacingForNodeHeights(oGraph, config);
+				this._storeFinalPositions(oGraph);
 			} catch (e) {
 				Log.error("DependencyLayoutHelper error: " + e.message, e);
 				throw new Error("DependencyLayoutHelper error: " + e.message);
@@ -64,8 +83,8 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		},
 
 		/**
-		 * Builds the internal dependency graph structure for layout calculation.
-		 * Initializes layout data for each node and categorizes connections by type.
+		 * Builds the dependency graph structure by analyzing node relationships.
+		 * Initializes layout data for each node and categorizes connections.
 		 *
 		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
 		 * @private
@@ -79,9 +98,9 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				mNodeMap.set(oNode.getKey(), oNode);
 				const fX = oNode.getX();
 				const fY = oNode.getY();
-				// Constraint: Nodes with coordinates (0,0) are treated as unpositioned and will be 
-				// auto-positioned based on dependency relationships. For origin positioning, use (0.1, 0.1) or (1, 1).
-				const bHasCoordinates = fX !== undefined && fY !== undefined && (fX !== 0 || fY !== 0);
+				const oLastPos = this._lastCalculated.get(oNode);
+				// Only preserve coordinates if they were original or user-dragged
+				const bShouldPreserve = oLastPos?.bIsUserPositioned;
 
 				oNode._layoutData = {
 					layer: -1,
@@ -91,9 +110,10 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 					parallelNodes: [],
 					backwardEdges: [],
 					backwardEdgeLines: [],
-					hasCoordinates: bHasCoordinates,
+					isBackwardSource: false,
+					bShouldPreserve,
 					userX: fX,
-					userY: fY,
+					userY: fY
 				};
 			});
 
@@ -118,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);
@@ -164,12 +184,9 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 						oNode._layoutData.isBackwardSource = true;
 						oNode._layoutData.backwardEdges.push(oTargetNode);
 
-						const oFromMap = this._lineMap.get(sKey);
-						if (oFromMap) {
-							const oLine = oFromMap.get(sTargetKey);
-							if (oLine) {
-								oNode._layoutData.backwardEdgeLines.push(oLine);
-							}
+						const oLine = this._lineMap.get(sKey)?.get(sTargetKey);
+						if (oLine) {
+							oNode._layoutData.backwardEdgeLines.push(oLine);
 						}
 
 						const idx = oTargetNode._layoutData.incoming.indexOf(oNode);
@@ -251,9 +268,10 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Processes all components: separates isolated nodes and arranges connected components.
 		 *
 		 * @param {Array<sap.suite.ui.commons.networkgraph.Node[]>} aComponents - Array of components (groups of connected nodes)
+		 * @param {object} config - Configuration object
 		 * @private
 		 */
-		_processComponents: function (aComponents) {
+		_processComponents: function (aComponents, { componentArrangement }) {
 			const aIsolatedNodes = [];
 			const aConnectedComponents = [];
 
@@ -261,7 +279,8 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				const bIsIsolated =
 					aComponentNodes.length === 1 &&
 					aComponentNodes[0]._layoutData.incoming.length === 0 &&
-					aComponentNodes[0]._layoutData.outgoing.length === 0;
+					aComponentNodes[0]._layoutData.outgoing.length === 0 &&
+					!aComponentNodes[0]._layoutData.bShouldPreserve;
 
 				if (bIsIsolated) {
 					aIsolatedNodes.push(aComponentNodes[0]);
@@ -269,7 +288,7 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 					aConnectedComponents.push(aComponentNodes);
 				}
 			});
-
+			const bSideBySide = componentArrangement !== oComponentArrangement.Vertical;
 			let iMaxVerticalPosition = 0;
 			let iMaxLayerAcrossAll = 0;
 
@@ -278,35 +297,56 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				this._adjustParallelLayersForComponent(aComponentNodes);
 				this._assignVerticalPositionsForComponent(aComponentNodes);
 
-				aComponentNodes.forEach((oNode) => {
-					oNode._layoutData.position += iMaxVerticalPosition;
-					oNode._layoutData.componentOffset = 0;
-				});
+				if (bSideBySide) {
+					aComponentNodes.forEach((oNode) => {
+						oNode._layoutData.layer += iMaxLayerAcrossAll;
+						oNode._layoutData.componentOffset = 0;
+					});
 
-				let iComponentMaxPosition = -1;
-				aComponentNodes.forEach((n) => {
-					if (n._layoutData.position > iComponentMaxPosition) {
-						iComponentMaxPosition = n._layoutData.position;
-					}
-				});
-				iMaxVerticalPosition = iComponentMaxPosition + 1;
+					let iComponentMaxLayer = -1;
+					aComponentNodes.forEach((n) => {
+						if (n._layoutData.layer > iComponentMaxLayer) {
+							iComponentMaxLayer = n._layoutData.layer;
+						}
+					});
+					iMaxLayerAcrossAll = iComponentMaxLayer + 1;
+				} else {
+					aComponentNodes.forEach((oNode) => {
+						oNode._layoutData.position += iMaxVerticalPosition;
+						oNode._layoutData.componentOffset = 0;
+					});
 
-				let iComponentMaxLayer = -1;
-				aComponentNodes.forEach((n) => {
-					if (n._layoutData.layer > iComponentMaxLayer) {
-						iComponentMaxLayer = n._layoutData.layer;
-					}
-				});
-				iMaxLayerAcrossAll = Math.max(iMaxLayerAcrossAll, iComponentMaxLayer);
+					let iComponentMaxPosition = -1;
+					aComponentNodes.forEach((n) => {
+						if (n._layoutData.position > iComponentMaxPosition) {
+							iComponentMaxPosition = n._layoutData.position;
+						}
+					});
+					iMaxVerticalPosition = iComponentMaxPosition + 1;
+
+					let iComponentMaxLayer = -1;
+					aComponentNodes.forEach((n) => {
+						if (n._layoutData.layer > iComponentMaxLayer) {
+							iComponentMaxLayer = n._layoutData.layer;
+						}
+					});
+					iMaxLayerAcrossAll = Math.max(iMaxLayerAcrossAll, iComponentMaxLayer);
+				}
 			});
 
 			if (aIsolatedNodes.length > 0) {
 				const iRightSideOffset = iMaxLayerAcrossAll + 1;
 
 				aIsolatedNodes.forEach((oNode, idx) => {
-					oNode._layoutData.layer = idx % 2;
-					oNode._layoutData.position = Math.floor(idx / 2);
-					oNode._layoutData.componentOffset = iRightSideOffset;
+					if (bSideBySide) {
+						oNode._layoutData.layer = Math.floor(idx / 2);
+						oNode._layoutData.position = idx % 2;
+						oNode._layoutData.componentOffset = iMaxLayerAcrossAll;
+					} else {
+						oNode._layoutData.layer = idx % 2;
+						oNode._layoutData.position = Math.floor(idx / 2);
+						oNode._layoutData.componentOffset = iRightSideOffset;
+					}
 				});
 			}
 		},
@@ -657,10 +697,10 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * @param {object} config - Configuration with spacing values
 		 * @private
 		 */
-		_calculateCoordinates: function (oGraph, config) {
+		_calculateCoordinates: function (oGraph, { horizontalSpacing, verticalSpacing }) {
 			const aNodes = oGraph.getNodes();
-			const iHSpacing = config.horizontalSpacing;
-			const iVSpacing = config.verticalSpacing;
+			const iHSpacing = horizontalSpacing;
+			const iVSpacing = verticalSpacing;
 
 			aNodes.forEach((oNode) => {
 				const iComponentOffset = oNode._layoutData.componentOffset || 0;
@@ -671,11 +711,10 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			});
 
 			aNodes.forEach((oNode) => {
-				if (oNode._layoutData.hasCoordinates) {
-					const fUserX = oNode._layoutData.userX;
-					const fUserY = oNode._layoutData.userY;
-					oNode.setX(fUserX);
-					oNode.setY(fUserY);
+				if (oNode._layoutData.bShouldPreserve) {
+					const { userX, userY } = oNode._layoutData;
+					oNode.setX(userX);
+					oNode.setY(userY);
 				}
 			});
 		},
@@ -684,18 +723,15 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Adjusts horizontal spacing to accommodate nodes with varying widths.
 		 *
 		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
-		 * @param {object} config - Configuration with spacing values
 		 * @private
 		 */
-		_adjustHorizontalSpacingForNodeWidths: function (oGraph, config) {
+		_adjustHorizontalSpacingForNodeWidths: function (oGraph) {
 			const aNodes = oGraph.getNodes();
-			const iDefaultSpacing = config.horizontalSpacing;
-			const iHGap = iDefaultSpacing;
 			const mLayerWidths = {};
 			let iMaxLayer = -1;
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.hasCoordinates) {
+				if (!oNode._layoutData.bShouldPreserve) {
 					const iLayer =
 						oNode._layoutData.layer + (oNode._layoutData.componentOffset || 0);
 					iMaxLayer = Math.max(iMaxLayer, iLayer);
@@ -716,16 +752,12 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				mLayerOffsets[iLayer] = iCumulativeOffset;
 				const iActualWidth = mLayerWidths[iLayer];
 				if (iActualWidth) {
-					if (iActualWidth > iDefaultSpacing) {
-						iCumulativeOffset += iActualWidth - iDefaultSpacing + iHGap;
-					} else {
-						iCumulativeOffset += iActualWidth;
-					}
+					iCumulativeOffset += iActualWidth;
 				}
 			}
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.hasCoordinates) {
+				if (!oNode._layoutData.bShouldPreserve) {
 					const iLayer =
 						oNode._layoutData.layer + (oNode._layoutData.componentOffset || 0);
 					const iOffset = mLayerOffsets[iLayer] || 0;
@@ -738,18 +770,15 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Adjusts vertical spacing to accommodate nodes with varying heights.
 		 *
 		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
-		 * @param {object} config - Configuration with spacing values
 		 * @private
 		 */
-		_adjustVerticalSpacingForNodeHeights: function (oGraph, config) {
+		_adjustVerticalSpacingForNodeHeights: function (oGraph) {
 			const aNodes = oGraph.getNodes();
-			const iDefaultSpacing = config.verticalSpacing;
-			const iVGap = iDefaultSpacing;
 			const mPositionHeights = {};
 			const mAllPositions = {};
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.hasCoordinates) {
+				if (!oNode._layoutData.bShouldPreserve) {
 					const iPosition = oNode._layoutData.position;
 					mAllPositions[iPosition] = true;
 
@@ -775,22 +804,75 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 				mPositionOffsets[iPosition] = iCumulativeOffset;
 				const iActualHeight = mPositionHeights[iPosition];
 				if (iActualHeight) {
-					if (iActualHeight > iDefaultSpacing) {
-						iCumulativeOffset += iActualHeight - iDefaultSpacing + iVGap;
-					} else {
-						iCumulativeOffset += iActualHeight;
-					}
+					iCumulativeOffset += iActualHeight;
 				}
 			});
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.hasCoordinates) {
+				if (!oNode._layoutData.bShouldPreserve) {
 					const iPosition = oNode._layoutData.position;
 					const iOffset = mPositionOffsets[iPosition] || 0;
 					oNode.setY(oNode.getY() + iOffset);
 				}
 			});
 		},
+
+		/**
+		 * Stores final calculated positions for automatic drag detection on next call.
+		 * Only stores positions for nodes that were calculated (not original/dragged).
+		 *
+		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @private
+		 */
+		_storeFinalPositions: function (oGraph) {
+			const aNodes = oGraph.getNodes();
+
+			aNodes.forEach((oNode) => {
+				if (!oNode._layoutData.bShouldPreserve) {
+					this._lastCalculated.set(oNode, {
+						x: oNode.getX(),
+						y: oNode.getY(),
+						bIsUserPositioned: false
+					});
+				}
+			});
+		},
+
+		/**
+		 * Detects user-made position changes by comparing current positions with last calculated positions.
+		 * Marks nodes with original coordinates and tracks drag operations.
+		 *
+		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @private
+		 */
+		_detectUserChanges: function (oGraph) {
+			const aNodes = oGraph.getNodes();
+
+			aNodes.forEach((oNode) => {
+				const fX = oNode.getX();
+				const fY = oNode.getY();
+				// Constraint: Nodes with coordinates (0,0) or negative values are treated as unpositioned.
+				// For origin positioning, use (0.1, 0.1) or (1, 1).
+				const bHasCoordinates = fX !== undefined && fY !== undefined && (fX !== 0 || fY !== 0);
+				const oLastPos = this._lastCalculated.get(oNode);
+
+				if (!oLastPos && bHasCoordinates) {
+					// First time seeing this node with coordinates - mark as original
+					this._lastCalculated.set(oNode, {
+						x: fX,
+						y: fY,
+						bIsUserPositioned: true
+					});
+				} else if (oLastPos) {
+					// Check if user dragged it
+					if (fX !== oLastPos.x || fY !== oLastPos.y) {
+						oLastPos.x = fX;
+						oLastPos.y = fY;
+						oLastPos.bIsUserPositioned = true;
+					}
+				}
+			});
+		},
 	};
 
 	return DependencyLayoutHelper;

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.
@@ -68,8 +69,7 @@ sap.ui.define([
          * @param {boolean} bTriggerNode - Whether the node is a trigger node.
          */
         addPortsToNode(oNode, bTriggerNode) {
-            var oGraph = oNode.getParent();
-            var sNodePorts = oGraph.getNodePorts();
+            var sNodePorts = oNode._getNodePorts();
             // Remove existing ports first
             this.removePortsFromNode(oNode);
             if (sNodePorts === "None") {
@@ -200,7 +200,7 @@ sap.ui.define([
          */
         addInletPortsToOtherNodes(oNode) {
             var oGraph = oNode.getParent();
-            var sNodePorts = oGraph.getNodePorts();
+            var sNodePorts = oNode._getNodePorts();
             // Don't add inlet ports if nodePorts is "None"
             if (sNodePorts === "None") {
                 return;
@@ -486,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(),
@@ -494,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.144.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.144.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.144.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.144.0
+	 * @version 1.146.0
 	 * @since 1.50
 	 *
 	 * @constructor