@sapui5/sap.suite.ui.commons 1.136.12 → 1.136.13

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

@@ -364,12 +364,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);
@@ -400,7 +416,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();
@@ -421,7 +437,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);
 		};
 

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

@@ -65,6 +65,14 @@ sap.ui.define([
 			}
 			oRM.openEnd();
 
+			if (oNetworkGraph.getLoading()) {
+				this._renderLoading(oRM, oNetworkGraph);
+				oRM.close("div");
+				oRM.close("div");
+				oRM.close("div");
+				return;
+			}
+
 			if (oNetworkGraph.getNoData()) {
 				this._renderNoData(oRM, oNetworkGraph);
 				oRM.close("div");
@@ -165,16 +173,19 @@ sap.ui.define([
 			oRM.class("sapSuiteUiCommonsNetworkGraphNoDataWrapper");
 			oRM.attr("tabindex", "0");
 			oRM.openEnd();
-			oNetworkGraph._renderHtmlIcon("sap-icon://document", "sapSuiteUiCommonsNetworkGraphNoDataIcon", null, null, null, oRM);
-
-			var sText = oNetworkGraph.getNoDataText(),
-				sTextInline = sText ? sText : oResourceBundle.getText("NETWORK_GRAPH_NO_DATA");
-
+			oRM.renderControl(oNetworkGraph._getIllustratedMessage());
+			oRM.close("div");
+		},
+		_renderLoading: function (oRM, oNetworkGraph) {
 			oRM.openStart("div");
-			oRM.class("sapSuiteUiCommonsNetworkGraphNoDataLabel");
+			oRM.class("sapSuiteUiCommonsNetworkGraphLoadingWrapper");
+			oRM.attr("tabindex", "0");
 			oRM.openEnd();
-			oRM.text(sTextInline);
-			oRM.close("div");
+
+			// Render the busy indicator
+			var oBusyIndicator = oNetworkGraph._getBusyIndicator();
+			oRM.renderControl(oBusyIndicator);
+
 			oRM.close("div");
 		}
 	};

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

@@ -18,6 +18,8 @@ sap.ui.define([
 ], function (jQuery, BaseObject, Group, Node, Line, KeyCodes, containsOrEquals, Log, CoreLib) {
 	"use strict";
 
+	const oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
+
 	var mDirections = {
 		LEFT: "left",
 		RIGHT: "right",
@@ -73,6 +75,13 @@ sap.ui.define([
 			this._oFocusPosition = null;
 			this._oWrapperDom = null;
 			this.isFromFullscreen = null;
+			this._oAltNode = null;
+			this._oAltConnectors = null;
+			this._oAltAnnouncement = null;
+			this._oAssociatedControl = null;
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+			this._bCtrlAltDown = false;
 		}
 	});
 
@@ -123,6 +132,14 @@ sap.ui.define([
 				this._iColumns = aRow.length;
 			}
 		}, this);
+
+		const oControl = this._oGraph.getAssociatedControl();
+		if (oControl !== this._oAssociatedControl) {
+			this._updateAssociatedDelegate(oControl);
+		}
+		this._oAltNode = null;
+		this._oAltConnectors = null;
+		this._oAltAnnouncement = null;
 	};
 
 	KeyboardNavigator.prototype.setWrapperDom = function (oDom) {
@@ -186,13 +203,15 @@ sap.ui.define([
 	};
 
 	KeyboardNavigator.prototype.onkeyup = function(oEvent) {
-			if (oEvent.keyCode === KeyCodes.SPACE){
-				this._handleEnter();
-				if (this._oGraph.getFocusDomRef() === document.activeElement) {
+		if (oEvent.keyCode === KeyCodes.SPACE){
+			this._handleEnter();
+			if (this._oGraph.getFocusDomRef() === document.activeElement) {
 				oEvent.stopPropagation();
 				oEvent.preventDefault();
-			  }
 			}
+		} else if (oEvent.keyCode === KeyCodes.DELETE || oEvent.keyCode === KeyCodes.BACKSPACE) {
+			this._handleDelete(oEvent);
+		}
 	};
 
 	KeyboardNavigator.prototype.onsapenter = function (oEvent) {
@@ -226,6 +245,12 @@ sap.ui.define([
 	KeyboardNavigator.prototype.onkeydown = function (oEvent) {
 		var oItem, oBtn,
 			oFocus = this.getFocus();
+
+		// On Windows, Ctrl+Alt = AltGr — browsers strip ctrlKey/altKey from the character keydown.
+		if (oEvent.keyCode === KeyCodes.ALT && oEvent.ctrlKey) {
+			this._bCtrlAltDown = true;
+		}
+
 		if (!oFocus) {
 			return;
 		}
@@ -253,11 +278,7 @@ sap.ui.define([
 			}
 			oEvent.stopPropagation();
 		} else if (oEvent.keyCode === KeyCodes.F6) {
-			if (oItem && oBtn) {
-				oFocus.button = null;
-				this._oGraph.setFocus(oFocus);
-			}
-			this._handleArrow(oEvent, oEvent.shiftKey ? mDirections.LEFT : mDirections.RIGHT);
+			this._handleF6(oEvent);
 		} else if (oEvent.keyCode === KeyCodes.F7 && !oEvent.shiftKey) {
 			if (oItem && oBtn) {
 				oFocus.button = null;
@@ -269,6 +290,24 @@ sap.ui.define([
 			this._onCtrlPlus(oEvent);
 		} else if (oEvent.ctrlKey && (oEvent.keyCode === KeyCodes.SLASH || oEvent.keyCode === KeyCodes.NUMPAD_MINUS)) {
 			this._onCtrlMinus(oEvent);
+		} else if (this._bCtrlAltDown && oEvent.keyCode === KeyCodes.P) {
+			this._bCtrlAltDown = false;
+			const oAssociatedControl = this._oGraph.getAssociatedControl();
+			if (oAssociatedControl) {
+				oAssociatedControl.focus();
+				oItem._setFocus(false);
+			}
+			oEvent.preventDefault();
+			oEvent.stopPropagation();
+		} else if (oEvent.altKey && !oEvent.ctrlKey && !oEvent.shiftKey && oItem instanceof Node) {
+			if (oEvent.keyCode === KeyCodes.PLUS || oEvent.keyCode === KeyCodes.NUMPAD_PLUS) {
+				this._handleAltAnnounce(oEvent, oItem);
+			} else {
+				const iDigitIndex = this._getAltDigitIndex(oEvent.keyCode);
+				if (iDigitIndex >= 0) {
+					this._handleAltConnectorNavigation(oEvent, oItem, iDigitIndex);
+				}
+			}
 		}
 	};
 
@@ -276,6 +315,59 @@ sap.ui.define([
 	/* Private methods */
 	/* =========================================================== */
 
+	KeyboardNavigator.prototype._getAltDigitIndex = function (iKeyCode) {
+		if (iKeyCode >= KeyCodes.DIGIT_1 && iKeyCode <= KeyCodes.DIGIT_9) {
+			return iKeyCode - KeyCodes.DIGIT_1;
+		}
+		if (iKeyCode >= KeyCodes.NUMPAD_1 && iKeyCode <= KeyCodes.NUMPAD_9) {
+			return iKeyCode - KeyCodes.NUMPAD_1;
+		}
+		return -1;
+	};
+
+	/**
+	 * Handles F6 / Shift+F6 — skip to next/previous visible group regardless of what is focused.
+	 * @private
+	 */
+	KeyboardNavigator.prototype._handleF6 = function (oEvent) {
+		const bBackward = oEvent.shiftKey,
+			oFocus = this.getFocus(),
+			oItem = oFocus ? oFocus.item : null,
+			bIsRtl = this._oGraph._bIsRtl,
+			aGroups = this._oGraph.getGroups().filter(function (oGroup) {
+				return !oGroup.isHidden() && oGroup.getVisible();
+			}).sort(function (oA, oB) {
+				// Top-to-bottom, then by reading direction (RTL: descending x, LTR: ascending x)
+				const iDeltaY = oA.getY() - oB.getY();
+				if (iDeltaY !== 0) { return iDeltaY; }
+				const iDeltaX = oA.getX() - oB.getX();
+				return bIsRtl ? -iDeltaX : iDeltaX;
+			});
+
+		if (aGroups.length === 0) {
+			return;
+		}
+
+		let iCurrentIndex = -1;
+		if (oItem instanceof Group) {
+			iCurrentIndex = aGroups.indexOf(oItem);
+		} else if (oItem instanceof Node && oItem._oGroup) {
+			iCurrentIndex = aGroups.indexOf(oItem._oGroup);
+		}
+
+		const iTargetIndex = bBackward
+			? (iCurrentIndex > 0 ? iCurrentIndex - 1 : aGroups.length - 1)
+			: (iCurrentIndex < aGroups.length - 1 ? iCurrentIndex + 1 : 0);
+
+		// Ensure setFocus lands on the group header, not the menu button
+		if (this._oGraph._oFocus) {
+			this._oGraph._oFocus.groupInFocused = false;
+		}
+		this._oGraph.setFocus({ item: aGroups[iTargetIndex], button: null });
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._handleEnter = function () {
 		var oItem, oBtn,
 			oFocus = this.getFocus();
@@ -324,9 +416,71 @@ sap.ui.define([
 		}
 	};
 
+	KeyboardNavigator.prototype._handleDelete = function (oEvent) {
+		// Only handle delete when DnD is enabled
+		if (!this._oGraph._isDnDEnabled()) {
+			return;
+		}
+
+		var oFocus = this.getFocus();
+		if (!oFocus) {
+			return;
+		}
+
+		var oItem = oFocus.item;
+
+		// Only allow delete for Node and Line, not Group
+		if (oItem instanceof Node || oItem instanceof Line) {
+			oItem.setSelected(false);
+
+			// Clear focus before delete to prevent stale reference issues
+			if (this._oGraph._oFocus && this._oGraph._oFocus.item === oItem) {
+				this._oGraph._oFocus = null;
+			}
+
+			// Fire the itemDeleted event on the graph
+			var bExecuteDefault = this._oGraph.fireEvent("itemDeleted", {
+				item: oItem
+			}, true);
+
+			if (bExecuteDefault) {
+				oEvent.stopPropagation();
+				oEvent.preventDefault();
+			}
+
+			// Restore focus after a small timeout (to let any rerender settle)
+			setTimeout(function () {
+				this._oGraph.setFocus(oFocus)
+			}.bind(this), 0);
+		}
+	};
+
+	/**
+	 * Fires the nodeAdded event and shifts focus to the newly added node after re-render.
+	 * Only active when DnD is enabled.
+	 * @private
+	 */
+	KeyboardNavigator.prototype._handleAddNode = function (oEvent) {
+		if (!this._oGraph._isDnDEnabled()) {
+			return;
+		}
+		this._oGraph.fireEvent("nodeAdded", {}, false);
+		const fnFocus = () => {
+			this._oGraph.detachGraphReady(fnFocus);
+			const aNodes = this._oGraph.getNodes();
+			if (aNodes.length) {
+				this._oGraph.setFocus({ item: aNodes.at(-1), button: null });
+			}
+		};
+		this._oGraph.attachGraphReady(fnFocus);
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._handleTab = function (oEvent, sDirection) {
-		var oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
-		this._oWrapperDom.setAttribute("aria-live","assertive");
+		const oFocus = this.getFocus(),
+			bBackward = sDirection === mDirections.LEFT;
+		this._oWrapperDom.setAttribute("aria-live", "assertive");
 		this._oGraph._setAriaLabelForWrapper(oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_LABEL"));
 		if (this._ignoreEvent(oEvent)) {
 			this._oWrapperDom.setAttribute("aria-live","off");
@@ -348,7 +502,118 @@ sap.ui.define([
 			return;
 		}
 
-		this._moveItemFocus(oEvent, sDirection);
+		if (oFocus?.item instanceof Node) {
+			const bMoved = this._navigateFromNode(oFocus.item, bBackward);
+			if (!bMoved && bBackward) {
+				const oGroup = oFocus.item._oGroup;
+				if (oGroup) {
+					this._oGraph.setFocus({ item: oGroup, button: Group.BUTTONS.COLLAPSE });
+					oEvent.preventDefault();
+					oEvent.stopPropagation();
+				} else {
+					this._moveItemFocus(oEvent, mDirections.LEFT);
+				}
+				return;
+			}
+		} else if (oFocus?.item instanceof Line) {
+			this._navigateFromConnector(oFocus.item, bBackward);
+		} else {
+			this._moveItemFocus(oEvent, sDirection);
+			return;
+		}
+
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
+	/**
+	 * Navigate from a node to its first connector.
+	 * @returns {boolean} True if focus moved to a connector, false otherwise
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateFromNode = function (oNode, bBackward) {
+		const aLines = bBackward ? oNode.getParentLines() : oNode.getChildLines();
+		const aVisibleLines = this._getVisibleLines(aLines, bBackward);
+
+		if (aVisibleLines.length > 0) {
+			this._oGraph.setFocus({
+				item: aVisibleLines[0],
+				button: null
+			});
+			return true;
+		}
+		return false;
+	};
+
+	/**
+	 * Navigate from a connector to its connected node
+	 * @param {Line} oLine - The connector to navigate from
+	 * @param {boolean} bBackward - True for source node, false for target node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateFromConnector = function (oLine, bBackward) {
+		const oNode = bBackward ? oLine.getFromNode() : oLine.getToNode();
+
+		if (oNode && !oNode.isHidden()) {
+			this._oGraph.setFocus({
+				item: oNode,
+				button: null
+			});
+		}
+	};
+
+	/**
+	 * Returns visible lines sorted top-to-bottom.
+	 * @param {Array} aLines - Array of lines to filter and sort
+	 * @param {boolean} bSortBySource - If true, sort by source node Y position; otherwise by target node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._getVisibleLines = function (aLines, bSortBySource) {
+		if (!aLines || aLines.length === 0) {
+			return [];
+		}
+
+		const aVisibleLines = aLines.filter(function (oLine) {
+			return !oLine.isHidden() && !oLine._isIgnored() && oLine.getVisible();
+		});
+
+		const fnGetSortY = (oLine) => {
+			const oNode = bSortBySource ? oLine.getFromNode() : oLine.getToNode();
+			if (oNode && !oNode.isHidden()) {
+				return oNode.getY();
+			}
+			const aCoords = oLine.getCoordinates();
+			return (aCoords && aCoords.length > 0) ? aCoords[0].getY() : 0;
+		};
+		return aVisibleLines.sort((oLine1, oLine2) => fnGetSortY(oLine1) - fnGetSortY(oLine2));
+	};
+
+	KeyboardNavigator.prototype._handleAltAnnounce = function (oEvent, oNode) {
+		if (this._oAltNode !== oNode) {
+			this._oAltNode = oNode;
+			this._oAltConnectors = oNode._getAltNavigationConnectors();
+			const { aIncomingConnectors, aOutgoingConnectors, aConnectors } = this._oAltConnectors;
+			this._oAltAnnouncement = (aIncomingConnectors.length >= 2 || aOutgoingConnectors.length >= 2)
+				? oNode._getAltConnectorsAnnouncement(aConnectors)
+				: null;
+		}
+		if (!this._oAltAnnouncement) { return; }
+		this._oGraph._setAccessibilityTitle(this._oAltAnnouncement);
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
+	KeyboardNavigator.prototype._handleAltConnectorNavigation = function (oEvent, oNode, iIndex) {
+		if (this._oAltNode !== oNode || !this._oAltConnectors) {
+			this._oAltNode = oNode;
+			this._oAltConnectors = oNode._getAltNavigationConnectors();
+		}
+		const { aConnectors } = this._oAltConnectors;
+		if (iIndex < aConnectors.length) {
+			this._oGraph.setFocus({ item: aConnectors[iIndex].line, button: null });
+			oEvent.preventDefault();
+			oEvent.stopPropagation();
+		}
 	};
 
 	KeyboardNavigator.prototype._handleTabOverLinesWithButtons = function (oEvent, sDirection) {
@@ -576,9 +841,60 @@ sap.ui.define([
 			return;
 		}
 
+		const oFocus = this.getFocus();
+		const oItem = oFocus.item;
+		if (oItem instanceof Line) {
+			if (sDirection === mDirections.UP || sDirection === mDirections.DOWN) {
+				this._navigateBetweenConnectors(oEvent, sDirection);
+				return;
+			}
+		}
+
+		// For all other cases, use default behavior
 		this._moveItemFocus(oEvent, sDirection, true);
 	};
 
+	/**
+	 * Navigate between multiple connectors from the same source node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateBetweenConnectors = function (oEvent, sDirection) {
+		const oFocus = this.getFocus(),
+			oLine = oFocus.item;
+
+		if (!(oLine instanceof Line)) {
+			return;
+		}
+
+		// ↑/↓ navigates among the outgoing connectors of this line's source node,
+		// giving a consistent vertical ordering regardless of which connector is focused.
+		const oSourceNode = oLine.getFromNode();
+		if (!oSourceNode) {
+			return;
+		}
+
+		const aVisibleLines = this._getVisibleLines(oSourceNode.getChildLines());
+		if (aVisibleLines.length <= 1) {
+			return;
+		}
+
+		const iCurrentIndex = aVisibleLines.indexOf(oLine);
+		if (iCurrentIndex === -1) {
+			return;
+		}
+
+		const iTargetIndex = sDirection === mDirections.DOWN ? iCurrentIndex + 1 : iCurrentIndex - 1;
+		if (iTargetIndex >= 0 && iTargetIndex < aVisibleLines.length) {
+			this._oGraph.setFocus({
+				item: aVisibleLines[iTargetIndex],
+				button: null
+			});
+		}
+
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._moveItemFocus = function (oEvent, sDirection, bStopOnLast) {
 		var oFocus,
 			bBackTab = (sDirection === mDirections.LEFT && oEvent.key === "Tab"),
@@ -767,6 +1083,45 @@ sap.ui.define([
 		oEvent.stopPropagation();
 	};
 
+	KeyboardNavigator.prototype._updateAssociatedDelegate = function (oControl) {
+		if (this._oAssociatedContainer) {
+			this._oAssociatedContainer.removeEventDelegate(this._oAssociatedDelegate);
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+		}
+		const oContainer = oControl && oControl.getParent();
+		if (oContainer) {
+			this._oAssociatedDelegate = {
+				onkeydown: (oEvent) => {
+					if (oEvent.keyCode === KeyCodes.ALT && oEvent.ctrlKey) {
+						this._bCtrlAltDown = true;
+					}
+
+					if (oEvent.shiftKey && oEvent.keyCode === KeyCodes.F10) {
+						this._oGraph._restoreFocusToGraph();
+						oEvent.preventDefault();
+						oEvent.stopPropagation();
+					} else if (oEvent.keyCode === KeyCodes.INSERT || (this._bCtrlAltDown && oEvent.keyCode === KeyCodes.N)) {
+						this._bCtrlAltDown = false;
+						this._handleAddNode(oEvent);
+					}
+				}
+			};
+			this._oAssociatedContainer = oContainer;
+			oContainer.addEventDelegate(this._oAssociatedDelegate);
+		}
+		this._oAssociatedControl = oControl;
+	};
+
+	KeyboardNavigator.prototype.destroy = function () {
+		if (this._oAssociatedContainer) {
+			this._oAssociatedContainer.removeEventDelegate(this._oAssociatedDelegate);
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+		}
+		BaseObject.prototype.destroy.apply(this, arguments);
+	};
+
 	KeyboardNavigator.prototype._ignoreEvent = function (oEvent) {
 		return !containsOrEquals(this._oWrapperDom, oEvent.target);
 	};