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

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

@@ -7,16 +7,36 @@
 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;
+	const DRAG_DETECTION_THRESHOLD = 10;
 
 	/**
 	 * Utility class for calculating node positions based on dependency relationships.
 	 * This utility arranges nodes based on their dependency relationships using topological sorting,
 	 * cycle detection, and layer-based positioning.
 	 *
+	 * Why a node may be positioned incorrectly after recalculation:
+	 * After each run, node positions are cached with a flag indicating whether the user moved
+	 * them (<code>bIsUserPositioned</code>). On the next call, nodes flagged as user-positioned
+	 * are preserved as-is, and the algorithm-placed nodes are recalculated. A node appears in the
+	 * wrong place if it is unexpectedly treated as user-positioned, most commonly because
+	 * <code>clearCache: true</code> was passed. It wipes the cache, but leaves the coordinates intact.
+	 * So every node with non-zero coordinates is immediately re-classified as user-positioned
+	 * and freezes, rather than being recalculated.
+	 *
+	 * Drag and drop recalculation - correct pattern:
+	 * Call <code>resetNode(oNode)</code> for each dragged node, then call
+	 * <code>calculatePositions</code> without <code>clearCache</code> (default <code>false</code>).
+	 * <code>resetNode</code> evicts the node from the cache and zeros its coordinates, so only
+	 * that node is repositioned; all the other nodes remain stable.
+	 *
+	 * Sentinel value:
+	 * Coordinates <code>(0, 0)</code> mean "unpositioned". To place a node at the canvas origin,
+	 * use <code>(0.1, 0.1)</code> or <code>(1, 1)</code> instead.
+	 *
 	 * @namespace sap.suite.ui.commons.networkgraph.util.DependencyLayoutHelper
 	 * @public
 	 * @since 1.144
@@ -28,16 +48,41 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 */
 		_lastCalculated: new WeakMap(),
 
+		/**
+		 * Evicts one or more nodes from the position cache and zeros their coordinates so the next
+		 * <code>calculatePositions</code> call repositions them while all other nodes remain stable.
+		 * To understand the use for drag and drop recalculation, see the class-level JSDoc for the full pattern.
+		 *
+		 * @param {sap.suite.ui.commons.networkgraph.Node|sap.suite.ui.commons.networkgraph.Node[]} vNode - A single node or an array of nodes to reset
+		 * @public
+		 */
+		resetNode: function (vNode) {
+			const aNodes = Array.isArray(vNode) ? vNode : [vNode];
+			aNodes.forEach((oNode) => {
+				if (!oNode || !oNode.setX || !oNode.setY) {
+					return;
+				}
+				this._lastCalculated.delete(oNode);
+				oNode.setX(0);
+				oNode.setY(0);
+			});
+		},
+
 		/**
 		 * 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] - Wipes the position cache; node coordinates are not modified.
+		 *   <code>_detectUserChanges</code> then re-classifies every non-zero node as user-positioned and freezes it.
+		 *   Use only to discard all layout history (e.g. switching <code>componentArrangement</code>).
+		 *   For drag and drop recalculation, use <code>resetNode()</code> with the default <code>clearCache: false</code>.
 		 * @public
 		 */
 		calculatePositions: function (oGraph, mConfig) {
@@ -49,19 +94,29 @@ 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._detectUserChanges(oGraph, config.horizontalSpacing);
 				this._buildDependencyGraph(oGraph);
 				const aComponents = this._identifyComponents(oGraph);
 				this._processComponents(aComponents, config);
 				this._calculateCoordinates(oGraph, config);
 				this._adjustHorizontalSpacingForNodeWidths(oGraph, config);
 				this._adjustVerticalSpacingForNodeHeights(oGraph, config);
-				this._storeFinalPositions(oGraph);
+				if (oGraph._bIsRtl) {
+					this._horizontalMirror(oGraph, config.horizontalSpacing);
+				}
+				this._storeFinalPositions(oGraph, config.horizontalSpacing);
 			} catch (e) {
 				Log.error("DependencyLayoutHelper error: " + e.message, e);
 				throw new Error("DependencyLayoutHelper error: " + e.message);
@@ -87,11 +142,6 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 
 			aNodes.forEach((oNode) => {
 				mNodeMap.set(oNode.getKey(), oNode);
-				const fX = oNode.getX();
-				const fY = oNode.getY();
-				const oLastPos = this._lastCalculated.get(oNode);
-				// Only preserve coordinates if they were original or user-dragged
-				const bShouldPreserve = oLastPos?.bIsUserPositioned;
 
 				oNode._layoutData = {
 					layer: -1,
@@ -101,10 +151,7 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 					parallelNodes: [],
 					backwardEdges: [],
 					backwardEdgeLines: [],
-					isBackwardSource: false,
-					bShouldPreserve,
-					userX: fX,
-					userY: fY
+					isBackwardSource: false
 				};
 			});
 
@@ -129,13 +176,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);
@@ -270,8 +317,7 @@ 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.bShouldPreserve;
+					aComponentNodes[0]._layoutData.outgoing.length === 0;
 
 				if (bIsIsolated) {
 					aIsolatedNodes.push(aComponentNodes[0]);
@@ -279,7 +325,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;
 
@@ -326,18 +372,17 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			});
 
 			if (aIsolatedNodes.length > 0) {
-				const iRightSideOffset = iMaxLayerAcrossAll + 1;
-
-				aIsolatedNodes.forEach((oNode, idx) => {
-					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;
+				const iRightSideOffset = bSideBySide ? iMaxLayerAcrossAll : iMaxLayerAcrossAll + 1;
+				let iIsolatedIdx = 0;
+				aIsolatedNodes.forEach((oNode) => {
+					if (this._lastCalculated.get(oNode)?.bIsUserPositioned) {
+						return;
 					}
+					const idx = iIsolatedIdx++;
+
+					oNode._layoutData.layer = Math.floor(idx / 2);
+					oNode._layoutData.position = idx % 2;
+					oNode._layoutData.componentOffset = iRightSideOffset;
 				});
 			}
 		},
@@ -702,10 +747,10 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			});
 
 			aNodes.forEach((oNode) => {
-				if (oNode._layoutData.bShouldPreserve) {
-					const { userX, userY } = oNode._layoutData;
-					oNode.setX(userX);
-					oNode.setY(userY);
+				const oLastPos = this._lastCalculated.get(oNode);
+				if (oLastPos?.bIsUserPositioned) {
+					oNode.setX(oLastPos.x);
+					oNode.setY(oLastPos.y);
 				}
 			});
 		},
@@ -722,16 +767,16 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			let iMaxLayer = -1;
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.bShouldPreserve) {
-					const iLayer =
-						oNode._layoutData.layer + (oNode._layoutData.componentOffset || 0);
-					iMaxLayer = Math.max(iMaxLayer, iLayer);
-
-					if (oNode._iWidth) {
-						const iWidth = oNode._iWidth;
-						if (!mLayerWidths[iLayer] || mLayerWidths[iLayer] < iWidth) {
-							mLayerWidths[iLayer] = iWidth;
-						}
+				const iLayer =
+					oNode._layoutData.layer + (oNode._layoutData.componentOffset || 0);
+				// Skip nodes with unassigned layout
+				if (iLayer < 0) return;
+				iMaxLayer = Math.max(iMaxLayer, iLayer);
+
+				if (oNode._iWidth) {
+					const iWidth = oNode._iWidth;
+					if (!mLayerWidths[iLayer] || mLayerWidths[iLayer] < iWidth) {
+						mLayerWidths[iLayer] = iWidth;
 					}
 				}
 			});
@@ -748,7 +793,7 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			}
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.bShouldPreserve) {
+				if (!this._lastCalculated.get(oNode)?.bIsUserPositioned) {
 					const iLayer =
 						oNode._layoutData.layer + (oNode._layoutData.componentOffset || 0);
 					const iOffset = mLayerOffsets[iLayer] || 0;
@@ -769,18 +814,18 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			const mAllPositions = {};
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.bShouldPreserve) {
-					const iPosition = oNode._layoutData.position;
-					mAllPositions[iPosition] = true;
+				const iPosition = oNode._layoutData.position;
+				// Skip nodes with unassigned layout
+				if (iPosition < 0) return;
+				mAllPositions[iPosition] = true;
 
-					if (oNode._iHeight) {
-						const iHeight = oNode._iHeight;
-						if (
-							!mPositionHeights[iPosition] ||
-							mPositionHeights[iPosition] < iHeight
-						) {
-							mPositionHeights[iPosition] = iHeight;
-						}
+				if (oNode._iHeight) {
+					const iHeight = oNode._iHeight;
+					if (
+						!mPositionHeights[iPosition] ||
+						mPositionHeights[iPosition] < iHeight
+					) {
+						mPositionHeights[iPosition] = iHeight;
 					}
 				}
 			});
@@ -800,7 +845,7 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 			});
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.bShouldPreserve) {
+				if (!this._lastCalculated.get(oNode)?.bIsUserPositioned) {
 					const iPosition = oNode._layoutData.position;
 					const iOffset = mPositionOffsets[iPosition] || 0;
 					oNode.setY(oNode.getY() + iOffset);
@@ -813,19 +858,38 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Only stores positions for nodes that were calculated (not original/dragged).
 		 *
 		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @param {number} iHSpacing - Horizontal spacing used as RTL mirror offset
 		 * @private
 		 */
-		_storeFinalPositions: function (oGraph) {
+		_storeFinalPositions: function (oGraph, iHSpacing) {
 			const aNodes = oGraph.getNodes();
+			const bIsRtl = oGraph._bIsRtl || false;
+
+			// Reuse fMaxX from _horizontalMirror to ensure consistent mirror/unmirror
+			let fMaxX = 0;
+			if (bIsRtl) {
+				fMaxX = oGraph._rtlMirrorMaxX || 0;
+			}
 
 			aNodes.forEach((oNode) => {
-				if (!oNode._layoutData.bShouldPreserve) {
-					this._lastCalculated.set(oNode, {
-						x: oNode.getX(),
-						y: oNode.getY(),
-						bIsUserPositioned: false
-					});
+				const fCurrentX = oNode.getX();
+				const fCurrentY = oNode.getY();
+
+				// Always store in LTR space
+				let fLtrX = fCurrentX;
+				if (bIsRtl) {
+					const fNodeWidth = oNode._iWidth || 0;
+					fLtrX = fMaxX - fCurrentX - fNodeWidth + iHSpacing;
 				}
+
+				const bIsUserPositioned = this._lastCalculated.get(oNode)?.bIsUserPositioned ?? false;
+
+				this._lastCalculated.set(oNode, {
+					x: fLtrX,
+					y: fCurrentY,
+					lastRtl: bIsRtl,
+					bIsUserPositioned
+				});
 			});
 		},
 
@@ -834,36 +898,120 @@ sap.ui.define(["sap/suite/ui/commons/library", "sap/base/Log"], function (librar
 		 * Marks nodes with original coordinates and tracks drag operations.
 		 *
 		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @param {number} iHSpacing - Horizontal spacing used as RTL mirror offset
 		 * @private
 		 */
-		_detectUserChanges: function (oGraph) {
+		_detectUserChanges: function (oGraph, iHSpacing) {
 			const aNodes = oGraph.getNodes();
+			const bIsRtl = oGraph._bIsRtl || false;
+
+			// Use stored fMaxX from previous mirror operation if available, otherwise calculate.
+			// We need it both when in RTL mode AND when switching RTL→LTR (to detect pre-switch drags).
+			let fMaxX = oGraph._rtlMirrorMaxX || 0;
+			if (bIsRtl && !fMaxX) {
+				aNodes.forEach((n) => {
+					const fRight = n.getX() + (n._iWidth || 0);
+					if (fRight > fMaxX) fMaxX = fRight;
+				});
+			}
 
 			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 fCurrentX = oNode.getX();
+				const fCurrentY = oNode.getY();
+				// (0,0) is the sentinel for "unpositioned": resetNode() sets coordinates to (0,0)
+				// so the algorithm treats the node as if it were never placed.
+				// To legitimately position a node at the canvas origin, use (0.1, 0.1) or (1, 1).
+				const bHasCoordinates = fCurrentX !== undefined && fCurrentY !== undefined && (fCurrentX !== 0 || fCurrentY !== 0);
 				const oLastPos = this._lastCalculated.get(oNode);
 
-				if (!oLastPos && bHasCoordinates) {
-					// First time seeing this node with coordinates - mark as original
+				// Convert current position to LTR coordinates for comparison
+				let fLtrX = fCurrentX;
+				if (bIsRtl) {
+					const fNodeWidth = oNode._iWidth || 0;
+					fLtrX = fMaxX - fCurrentX - fNodeWidth + iHSpacing;
+				}
+
+				if (oLastPos && !bHasCoordinates) {
+					// Coordinates were cleared (sentinel value 0,0) — evict cache so the algorithm
+					// repositions this node on the next layout pass.
+					this._lastCalculated.delete(oNode);
+				} else if (!oLastPos && bHasCoordinates) {
+					// No cache entry + non-zero coords: node has model-provided position (first call).
+					// Treated as user-positioned → preserved. Use resetNode() to opt a node out.
 					this._lastCalculated.set(oNode, {
-						x: fX,
-						y: fY,
+						x: fLtrX,
+						y: fCurrentY,
+						lastRtl: bIsRtl,
 						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;
+					const bModeChanged = (oLastPos.lastRtl !== bIsRtl);
+
+					if (bModeChanged) {
+						const bPrevRtl = oLastPos.lastRtl;
+						let fLtrXBeforeSwitch;
+
+						if (bPrevRtl) {
+							const fNodeWidth = oNode._iWidth || 0;
+							fLtrXBeforeSwitch = fMaxX - fCurrentX - fNodeWidth + iHSpacing;
+						} else {
+							fLtrXBeforeSwitch = fCurrentX;
+						}
+
+						const fDeltaX = Math.abs(fLtrXBeforeSwitch - oLastPos.x);
+						const fDeltaY = Math.abs(fCurrentY - oLastPos.y);
+
+						if (fDeltaX > DRAG_DETECTION_THRESHOLD || fDeltaY > DRAG_DETECTION_THRESHOLD) {
+							oLastPos.x = fLtrXBeforeSwitch;
+							oLastPos.y = fCurrentY;
+							oLastPos.bIsUserPositioned = true;
+						}
+
+						oLastPos.lastRtl = bIsRtl;
+					} else {
+						const fDeltaX = Math.abs(fLtrX - oLastPos.x);
+						const fDeltaY = Math.abs(fCurrentY - oLastPos.y);
+
+						if (fDeltaX > DRAG_DETECTION_THRESHOLD || fDeltaY > DRAG_DETECTION_THRESHOLD) {
+							oLastPos.x = fLtrX;
+							oLastPos.y = fCurrentY;
+							oLastPos.bIsUserPositioned = true;
+						}
 					}
 				}
 			});
 		},
+
+		/**
+		 * Mirrors all node X positions horizontally for RTL layout.
+		 *
+		 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph - The network graph instance
+		 * @param {number} iHSpacing - Horizontal spacing used as left-side padding offset after mirroring
+		 * @private
+		 */
+		_horizontalMirror: function (oGraph, iHSpacing) {
+			const aNodes = oGraph.getNodes();
+
+			// Find the rightmost edge of all nodes
+			let fMaxX = 0;
+			aNodes.forEach((oNode) => {
+				const fX = oNode.getX();
+				const fWidth = oNode._iWidth || 0;
+				const fRightEdge = fX + fWidth;
+				if (fRightEdge > fMaxX) {
+					fMaxX = fRightEdge;
+				}
+			});
+
+			oGraph._rtlMirrorMaxX = fMaxX;
+
+			aNodes.forEach((oNode) => {
+				const fCurrentX = oNode.getX();
+				const fWidth = oNode._iWidth || 0;
+				const fMirroredX = fMaxX - fCurrentX - fWidth + iHSpacing;
+				oNode.setX(fMirroredX);
+			});
+		}
 	};
 
 	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.
@@ -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