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

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

@@ -252,6 +252,7 @@ sap.ui.define([
 				/**
 				 * Enables the drag and drop of nodes. This property is ignored if the layout property is not set to noop.
 				 * If set to <code>true</code>, nodes can be dragged and dropped within the graph.
+				 * 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.
 				 * @public
 				 * @since 1.144
 				 */
@@ -290,10 +291,10 @@ sap.ui.define([
 				 */
 				connectionTypeMapping: {
 					type: "object", group: "Behavior", defaultValue: {
-						"LeftToLeft": "Left to Left",
-						"LeftToRight": "Left to Right",
-						"RightToLeft": "Right to Left",
-						"RightToRight": "Right to Right"
+						"LeftToLeft": "Start to Start",
+						"LeftToRight": "Start to Finish",
+						"RightToLeft": "Finish to Start",
+						"RightToRight": "Finish to Finish"
 					}
 				}
 			},
@@ -417,6 +418,7 @@ sap.ui.define([
 				/**
 				 * This event is fired when a user drops a node in the graph.
 				 * This event is available only when the layout algorithm is set to "NoopLayout" and the <code>enableDragAndDrop</code> property is set to <code>true</code>.
+				 * Note: When a node is dropped near the TOP or LEFT boundary of the graph canvas, its position is automatically adjusted (clamped) to ensure the node and its elements remain fully visible. This provides better visualization by preventing nodes from being positioned at coordinates that would make them invisible or partially hidden.
 				 * @public
 				 * @since 1.144
 				 */
@@ -478,7 +480,14 @@ sap.ui.define([
 						 */
 						item: { type: "sap.suite.ui.commons.networkgraph.ElementBase" }
 					}
-				}
+				},
+				/**
+				 * Fired when the user requests to add a node via INSERT or Ctrl+Alt+N.
+				 * Only available when NoopLayout is used and enableDragAndDrop is <code>true</code>.
+				 * @public
+				 * @since 1.148
+				 */
+				nodeAdded: {}
 			}
 		}
 	});
@@ -577,13 +586,66 @@ sap.ui.define([
 		}
 		// Initialize PortManager with this graph instance
 		PortManager.setGraphInstance(this);
+		Core.ready(this._handleCoreInitialized.bind(this));
+
+	};
+
+	/**
+	 * Handler for the core's init event. Attaches listener for localization changes.
+	 * @private
+	 */
+	Graph.prototype._handleCoreInitialized = function () {
+		Localization.attachChange(this._handleLocalizationChanged.bind(this));
+	};
+
+	/**
+	 * Handler for localization changes. Sets a pending flag when RTL mode changes so that
+	 * node dimensions are re-measured after RTL CSS files finish loading.
+	 * UI5 automatically re-renders all UIAreas on RTL change; the flag prevents premature
+	 * layout calculation in onAfterRendering before CSS dimensions are stable.
+	 * @private
+	 */
+	Graph.prototype._handleLocalizationChanged = function () {
+		const bNewRtl = Localization.getRTL();
+		if (this._bIsRtl !== bNewRtl) {
+			this._bIsRtl = bNewRtl;
+			this._bRtlMeasurementPending = true;
+
+			const fnOnApplied = function () {
+				Theming.detachApplied(fnOnApplied);
+				if (this._bRtlMeasurementPending) {
+					this._bRtlMeasurementPending = false;
+					this._measureAndLayout();
+				}
+			}.bind(this);
+			Theming.attachApplied(fnOnApplied);
+		}
+	};
 
+	Graph.prototype._measureAndLayout = function () {
+		var aNodes = this.getNodes();
+		aNodes.forEach(function (oNode) {
+			if (this._isUseNodeHtml()) {
+				oNode._setupDivDimensions();
+			} else {
+				oNode.calculateSizes();
+				oNode._setupWidthAndHeight();
+			}
+		}.bind(this));
+		this._bTriggerLayoutCalculation = true;
+		this._preprocessData();
 	};
 
 	Graph.prototype.onBeforeRendering = function () {
 		// indicates RTL
 		this._bIsRtl = Localization.getRTL();
 
+		// Check if the currently focused item has been destroyed and clear it
+		if (this._oFocus && this._oFocus.item && (this._oFocus.item.bIsDestroyed || this._oFocus.item.isDestroyed?.())) {
+			Log.info("NetworkGraph: Focused item was destroyed before rendering, clearing focus");
+			this._oFocus = null;
+		}
+
 		this.setBusy(false);
 		this.setBusyIndicatorDelay(0);
 
@@ -631,7 +693,6 @@ sap.ui.define([
 			this.$().addClass("sapSuiteUiCommonsNetworkGraphFullScreen");
 		}
 
-
 		if (aNodes.length === 0 || this._bIsInvalid || this.getNoData()) {
 			if (this._bIsInvalid) {
 				oRm.openStart("span");
@@ -693,29 +754,18 @@ sap.ui.define([
 					oRm.flush(this._$innerscroller[0], true, this._$innerscroller.children().length);
 				}
 
-				// make sure everything is rendered
-				aNodes.forEach(function (oNode) {
-					if (this._isUseNodeHtml()) {
-						// call after rendering before layouter starts - can be handy when user custom renders
-						oNode._setupDivDimensions();
-					} else {
-						oNode.calculateSizes();
-						oNode._setupWidthAndHeight();
-					}
-				}.bind(this));
-
-				this._preprocessData();
-				Theming.detachApplied(fnProcess);
+				if (!this._bRtlMeasurementPending) {
+					this._measureAndLayout();
+				}
 			}.bind(this);
 
-			// In case theme is applied fnProcess will be called immediately,
-			// else it will be called once theme is applied.
-			Theming.attachApplied(fnProcess);
+			fnProcess();
 		}
 		this.oInvisibleMessage = InvisibleMessage.getInstance();
 		oRm.destroy();
 
 	};
+
 	Graph.prototype.exit = function () {
 		// if (this.oHashChanger) {
 		// 	this.oHashChanger.destroy();
@@ -1023,6 +1073,21 @@ sap.ui.define([
 		this._oZoomLevelInvisibleText.setText(oResourceBundle.getText("NETWORK_GRAPH_ZOOM_LEVEL") + ": " + this._getZoomText());
 	};
 
+	/**
+	 * Restores keyboard focus to the last focused item in the graph, or falls back to the graph wrapper.
+	 * @private
+	 */
+	Graph.prototype._restoreFocusToGraph = function () {
+		if (this._oFocus) {
+			const oFocusToRestore = this._oFocus;
+			// Force setFocus to re-apply even if the item hasn't changed.
+			this._oFocus = null;
+			this.setFocus(oFocusToRestore);
+		} else {
+			this.getFocusDomRef().focus();
+		}
+	};
+
 	/**
 	 * Gets the associated control linked to this graph instance using the 'associatedControl' association.
 	 * This can be any UI5 control that is related to the graph.
@@ -1084,7 +1149,14 @@ sap.ui.define([
 		oTooltip.attachEvent("afterClose", function () {
 			var oFocus = this.getFocus();
 
-			if (oFocus) {
+			if (oFocus && oFocus.item) {
+				// Check if the focused item is destroyed before trying to restore focus
+				if (oFocus.item.bIsDestroyed || oFocus.item.isDestroyed?.()) {
+					Log.info("NetworkGraph: Cannot restore focus on destroyed control after tooltip close");
+					this._oFocus = null;
+					return;
+				}
+
 				this.setFocus(oFocus);
 
 				if (oFocus.button == "menu") {
@@ -1159,12 +1231,12 @@ sap.ui.define([
 	Graph.prototype.setEnableDragAndDrop = function (bEnabled) {
 		this.setProperty("enableDragAndDrop", bEnabled, true);
 
-		// Update zoom button states
+		// Update zoom button visibility
 		if (this._zoomIn && this._zoomOut && this._zoomToFitButton) {
-			var bZoomEnabled = !this._isDnDEnabled();
-			this._zoomIn.setEnabled(bZoomEnabled);
-			this._zoomOut.setEnabled(bZoomEnabled);
-			this._zoomToFitButton.setEnabled(bZoomEnabled);
+			var bZoomVisible = !this._isDnDEnabled();
+			this._zoomIn.setVisible(bZoomVisible);
+			this._zoomOut.setVisible(bZoomVisible);
+			this._zoomToFitButton.setVisible(bZoomVisible);
 		}
 
 		// remove the node ports when drag and drop is disabled
@@ -1190,6 +1262,13 @@ sap.ui.define([
 	 * @private
 	 */
 	Graph.prototype.setFocus = function (oFocus, bIsClickOrEnter) {
+		// Check if the focused item has been destroyed and clear it
+		if (oFocus && oFocus.item && (oFocus.item.bIsDestroyed || oFocus.item.isDestroyed?.())) {
+			Log.info("NetworkGraph: Cannot set focus on destroyed control, clearing focus");
+			this._oFocus = null;
+			return;
+		}
+
 		// Identity redundant
 		if (!oFocus && !this._oFocus ||
 			oFocus && this._oFocus && oFocus.item === this._oFocus.item && oFocus.button === this._oFocus.button  && oFocus.groupInFocused === this._oFocus.groupInFocused) {
@@ -1404,12 +1483,25 @@ sap.ui.define([
 
 		// While Expand/Collapse, focus will still remain to the button
 		if (this._oFocus && this._oFocus.button === Group.BUTTONS.COLLAPSE) {
-			this._oFocus.item._setCollapseButtonFocus(true);
+			// Check if the focused item still exists and is not destroyed
+			if (this._oFocus.item && !this._oFocus.item.bIsDestroyed && !this._oFocus.item.isDestroyed?.()) {
+				this._oFocus.item._setCollapseButtonFocus(true);
+			} else {
+				Log.info("NetworkGraph: Focused item was destroyed, clearing focus");
+				this._oFocus = null;
+			}
 		}
 		this._bIsLayedOut = true;
 		this._setupEvents();
 		this._setupKeyboardNavigation();
-		this.setFocus(this.getFocus());
+		// Only restore focus if the focused item still exists and is not destroyed
+		var oCurrentFocus = this.getFocus();
+		if (oCurrentFocus && oCurrentFocus.item && (oCurrentFocus.item.bIsDestroyed || oCurrentFocus.item.isDestroyed?.())) {
+			Log.info("NetworkGraph: Cannot restore focus on destroyed control, clearing focus");
+			this._oFocus = null;
+		} else {
+			this.setFocus(oCurrentFocus);
+		}
 
 		// when there is background image, busy is set false after image is loaded (own event)
 		// in case image was already loaded continue as usual
@@ -2225,12 +2317,6 @@ sap.ui.define([
 				}
 			});
 			this._toolbar.addContent(this._zoomOut);
-
-		// Disable zoom buttons if drag and drop is enabled
-		if (this._isDnDEnabled()) {
-			this._zoomIn.setEnabled(false);
-			this._zoomOut.setEnabled(false);
-		}
 	}
 
 		// fit to viewport
@@ -2243,9 +2329,11 @@ sap.ui.define([
 		});
 		this._toolbar.addContent(this._zoomToFitButton);
 
-		// Disable zoom to fit button if drag and drop is enabled
+		// Hide zoom buttons if drag and drop is enabled
 		if (this._isDnDEnabled()) {
-			this._zoomToFitButton.setEnabled(false);
+			this._zoomIn.setVisible(false);
+			this._zoomOut.setVisible(false);
+			this._zoomToFitButton.setVisible(false);
 		}
 
 		// toggle full screen
@@ -2878,7 +2966,13 @@ sap.ui.define([
 			fHeight = oItem._iHeight;
 		}
 
-		this.$scroller.get(0).scrollLeft = ((fX + (fWidth ? fWidth : 0) / 2) * this._fZoomLevel) - (this.$scroller.width() / 2);
+		const fScrollLeft = ((fX + (fWidth ? fWidth : 0) / 2) * this._fZoomLevel) - (this.$scroller.width() / 2);
+
+		if (this._bIsRtl) {
+			this.$scroller.get(0).scrollLeft = -fScrollLeft;
+		} else {
+			this.$scroller.get(0).scrollLeft = fScrollLeft;
+		}
 		this.$scroller.get(0).scrollTop = ((fY + (fHeight ? fHeight : 0) / 2) * this._fZoomLevel) - (this.$scroller.height() / 2);
 	};
 
@@ -2899,6 +2993,14 @@ sap.ui.define([
 			iRight = iLeft + this.$scroller.width() / this._fZoomLevel,
 			iBottom = iTop + this.$scroller.height() / this._fZoomLevel;
 
+		if (this._bIsRtl) {
+			const iGraphWidth = this.$svg.width() / this._fZoomLevel;
+			const iViewportWidth = this.$scroller.width() / this._fZoomLevel;
+			const iScrollPosAbs = Math.abs(iLeft);
+			iLeft = iGraphWidth - iScrollPosAbs - iViewportWidth;
+			iRight = iLeft + iViewportWidth;
+		}
+
 		if (!oItem._isOnScreen(iLeft, iRight, iTop, iBottom)) {
 			if (oItem instanceof Node) {
 				iCenterX = oItem.getX() + oItem._iWidth / 2;
@@ -2913,7 +3015,14 @@ sap.ui.define([
 			}
 
 			if (iCenterX < iLeft || iCenterX > iRight) {
-				oScroller.scrollLeft = iCenterX * this._fZoomLevel - this.$scroller.width() / 2;
+				let iTargetScrollLeft = iCenterX * this._fZoomLevel - this.$scroller.width() / 2;
+
+				if (this._bIsRtl) {
+					const iScrollRange = oScroller.scrollWidth - oScroller.clientWidth;
+					iTargetScrollLeft = -(iScrollRange - iTargetScrollLeft);
+				}
+
+				oScroller.scrollLeft = iTargetScrollLeft;
 			}
 			if (iCenterY < iTop || iCenterY > iBottom) {
 				oScroller.scrollTop = iCenterY * this._fZoomLevel - this.$scroller.height() / 2;

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

@@ -367,12 +367,28 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Returns the horizontal scroll position in graph coordinates, accounting for RTL.
+	 */
+	GraphMap.prototype._getScrollLeftForMap = function (oGraph) {
+		const fScrollLeft = oGraph.$scroller[0].scrollLeft;
+
+		if (oGraph._bIsRtl) {
+			const iGraphWidth = oGraph.$svg.width() / oGraph._fZoomLevel;
+			const iViewportWidth = oGraph.$scroller.width() / oGraph._fZoomLevel;
+			const iScrollPosAbs = Math.abs(fScrollLeft) / oGraph._fZoomLevel;
+			return iGraphWidth - iScrollPosAbs - iViewportWidth;
+		}
+
+		return fScrollLeft / oGraph._fZoomLevel;
+	};
+
 	GraphMap.prototype._resize = function () {
 		var oGraph = this.getGraph(),
 			$scroller = oGraph.$scroller,
 			$mapNavigator = this.$("mapNavigator");
 
-		$mapNavigator.attr("x", Math.max(NAVIGATORLINESIZE / 2, $scroller[0].scrollLeft / oGraph._fZoomLevel));
+		$mapNavigator.attr("x", Math.max(NAVIGATORLINESIZE / 2, this._getScrollLeftForMap(oGraph)));
 		$mapNavigator.attr("y", Math.max(NAVIGATORLINESIZE / 2, $scroller[0].scrollTop / oGraph._fZoomLevel));
 
 		$mapNavigator.attr("width", $scroller.width() / oGraph._fZoomLevel);
@@ -403,7 +419,7 @@ sap.ui.define([
 			$mapNavigator = this.$("mapNavigator");
 
 		if (oGraph && $scroller[0]) {
-			$mapNavigator.attr("x", Math.max(NAVIGATORLINESIZE / 2, $scroller[0].scrollLeft / oGraph._fZoomLevel));
+			$mapNavigator.attr("x", Math.max(NAVIGATORLINESIZE / 2, this._getScrollLeftForMap(oGraph)));
 			$mapNavigator.attr("y", Math.max(NAVIGATORLINESIZE / 2, $scroller[0].scrollTop / oGraph._fZoomLevel));
 
 			this._correctMapNavigator();
@@ -424,7 +440,13 @@ sap.ui.define([
 				fRealStartX = $border.offset().left,
 				fRealStartY = $border.offset().top;
 
-			oScroller.scrollLeft = (oScrollData.pageX - fRealStartX) * iRatio - ($scroller.width() / 2);
+			const fTargetScrollLeft = (oScrollData.pageX - fRealStartX) * iRatio - ($scroller.width() / 2);
+			if (oGraph._bIsRtl) {
+				const iScrollRange = oScroller.scrollWidth - oScroller.clientWidth;
+				oScroller.scrollLeft = -(iScrollRange - fTargetScrollLeft);
+			} else {
+				oScroller.scrollLeft = fTargetScrollLeft;
+			}
 			oScroller.scrollTop = (oScrollData.pageY - fRealStartY) * iRatio - ($scroller.height() / 2);
 		};