@sapui5/sap.suite.ui.commons 1.145.1 → 1.147.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";
 
 	/**
@@ -24,6 +24,8 @@ sap.ui.define([], function () {
 		'BACKGROUND-COLOR': 'backgroundSemanticColor',
 		BORDER: 'borderSemanticColor',
 		'BORDER-COLOR': 'borderSemanticColor',
+		OUTLINE: 'outlineSemanticColor',
+		'OUTLINE-COLOR': 'outlineSemanticColor',
 		TEXT: 'textSemanticColor',
 		FILL: 'fillSemanticColor',
 		STROKE: 'strokeSemanticColor',
@@ -73,15 +75,252 @@ 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);
+	};
+
+	// RTL swap map for connection types: mirrors Left↔Right side labels.
+	Utils.mRTLSwap = {
+		"LeftToLeft": "RightToRight",
+		"LeftToRight": "RightToLeft",
+		"RightToLeft": "LeftToRight",
+		"RightToRight": "LeftToLeft"
+	};
 
 	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/ConnectionPathUtils.js

@@ -21,6 +21,31 @@ sap.ui.define([
      * @since 1.144
      */
     var ConnectionPathUtils = {
+        /**
+         * Gets the effective connection type for path calculation based on RTL mode.
+         * In RTL mode, semantic directions are reversed since nodes are already mirrored.
+         *
+         * @param {string} sConnectionType - The configured connection type
+         * @param {boolean} bIsRTL - Whether RTL mode is enabled
+         * @returns {string} The effective connection type to use for calculations
+         * @private
+         */
+        _getEffectiveConnectionType: function (sConnectionType, bIsRTL) {
+            if (!bIsRTL) {
+                return sConnectionType;
+            }
+
+            // In RTL mode, semantic directions are reversed (nodes are already mirrored)
+            const rtlMapping = {
+                [ConnectionType.RightToLeft]: ConnectionType.LeftToRight,
+                [ConnectionType.LeftToRight]: ConnectionType.RightToLeft,
+                [ConnectionType.LeftToLeft]: ConnectionType.RightToRight,
+                [ConnectionType.RightToRight]: ConnectionType.LeftToLeft
+            };
+
+            return rtlMapping[sConnectionType] || sConnectionType;
+        },
+
         /**
          * Normalizes lines in a network graph by calculating path coordinates
          * between source and target nodes based on connection types.
@@ -40,20 +65,25 @@ sap.ui.define([
             // Enable multiple directed arrows feature when using ConnectionPathUtils
             oGraph._enableMultipleDirectedArrows = true;
 
+            // Detect RTL mode from graph
+            const bIsRTL = oGraph._bIsRtl || false;
+
             // Iterate over all lines in the graph
             oGraph.getLines().forEach((oLine) => {
-                const connectionType = oLine.getConnectionType(); // Get the connection type, if not configured at Line level then the default is Right to Left from source to target.
+                const configuredConnectionType = oLine.getConnectionType(); // Get the connection type, if not configured at Line level then the default is Right to Left from source to target.
+                // In RTL mode, use effective connection type (semantically reversed)
+                const effectiveConnectionType = this._getEffectiveConnectionType(configuredConnectionType, bIsRTL);
                 const oSourceNode = oLine.getFromNode();
                 const oTargetNode = oLine.getToNode();
                 // Get anchor coordinates for source and target nodes, usually the center of the respective sides
-                const oSourceAnchor = this._getNodeAnchorCoordinates(oLine.getFromNode(), connectionType, "source");
-                const oTargetAnchor = this._getNodeAnchorCoordinates(oLine.getToNode(), connectionType, "target");
+                const oSourceAnchor = this._getNodeAnchorCoordinates(oLine.getFromNode(), effectiveConnectionType, "source");
+                const oTargetAnchor = this._getNodeAnchorCoordinates(oLine.getToNode(), effectiveConnectionType, "target");
                 const mParams = {
                     sourceAnchor: oSourceAnchor,
                     targetAnchor: oTargetAnchor,
                     sourceNode: oSourceNode,
                     targetNode: oTargetNode,
-                    sConnectionType: connectionType,
+                    sConnectionType: effectiveConnectionType,
                     gridSize: config.gridSize,
                     minEdgeLength: config.minEdgeLength
                 };