@sapui5/sap.suite.ui.commons 1.143.0 → 1.145.0

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

@@ -26,9 +26,11 @@ sap.ui.define([
 			var sLayeredClass = oNetworkGraph._isLayered() ? "sapSuiteUiCommonsNetworkGraphLayered" : "sapSuiteUiCommonsNetworkGraphNotLayered",
 			bSwimLaneClass = oNetworkGraph._isSwimLane() ? "sapSuiteUiCommonsNetworkGraphSwimLane" : "";
 
-			oRM.openStart("div",oNetworkGraph);
+			oRM.openStart("div", oNetworkGraph);
 			oRM.class("sapSuiteUiCommonsNetworkGraph");
-			oRM.class(bSwimLaneClass);
+			if (bSwimLaneClass) {
+				oRM.class(bSwimLaneClass);
+			}
 			oRM.class(sLayeredClass);
 			oRM.attr("tabindex", "0");
 			this._appendHeightAndWidth(oNetworkGraph, oRM);
@@ -65,6 +67,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");
@@ -164,16 +174,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/Group.js

@@ -201,6 +201,10 @@ sap.ui.define([
 			oRm.openStart("div").class("sapSuiteUiCommonsNetworkTopGroupDelimiter").openEnd().close("div");
 		}
 
+		var sTopGroupClass = "sapSuiteUiCommonsNetworkTopGroup";
+		if (!bIsLeft) {
+			sTopGroupClass += " sapSuiteUiCommonsNetworkTopGroupRight";
+		}
 		this._renderHtmlElement("div", {
 			top: 0,
 			left: iX + "%",
@@ -209,9 +213,8 @@ sap.ui.define([
 		}, {
 			id: sId,
 			"data-sap-ui": sId,
-			"class": "sapSuiteUiCommonsNetworkTopGroup " + (!bIsLeft ? "sapSuiteUiCommonsNetworkTopGroupRight" : "")
+			"class": sTopGroupClass
 		}, oRm);
-
 		oRm.openStart("div").class("sapSuiteUiCommonsNetworkTopGroupHeader").openEnd();
 		if (sIcon) {
 			this._renderHtmlIcon(sIcon, null, null, null, null, oRm);
@@ -257,13 +260,17 @@ sap.ui.define([
 				height: iHeight + "px"
 			}, statusStyle, true);
 
+			var sClasses = this._getGroupClass();
+			if (statusClass) {
+				sClasses += " " + statusClass;
+			}
+
 			this._renderHtmlElement("div", {}, {
 				id: sId,
 				"data-sap-ui": sId,
-				"class": this._getGroupClass() + " " + statusClass,
+				"class": sClasses,
 				"style": sStyle
 			}, mOptions.renderManager);
-
 			this._renderHeader(mOptions);
 			mOptions.renderManager.close("div");
 		}
@@ -275,10 +282,11 @@ sap.ui.define([
 
 		let applyClasses = (classesInString = "", oRM) => {
 			(classesInString.split(" ") || []).forEach((sClass) => {
-				oRM.class(sClass);
+				if (sClass) {
+					oRM.class(sClass);
+				}
 			})
-		}
-
+		};
 		if (this.getStatus() && this.getStatus() !== ElementStatus.Standard) {
 			var { style: sContentStyle, class: sContentClass } = this._getStatusStyle({
 				"color": ElementBase.ColorType.Content
@@ -342,15 +350,19 @@ sap.ui.define([
 		}
 
 		if (sTitle) {
-			mOptions.renderManager.openStart("div").class((sContentClass || '')).class("sapSuiteUiCommonsNetworkGroupHeaderTitle").attr("title", sTitle);
+			mOptions.renderManager.openStart("div");
+			if (sContentClass) {
+				mOptions.renderManager.class(sContentClass);
+			}
+			mOptions.renderManager.class("sapSuiteUiCommonsNetworkGroupHeaderTitle").attr("title", sTitle);
 			//Add text-Orientation based on Language
 			var sCurrentLanguage = Localization.getLanguage();
 			var aOrientationLanguage = ["ja", "zh-TW", "zh-CN", "ko"]; // Orientation Languages
 			if (this._isVerticalSwimLane()
-					&& (aOrientationLanguage.indexOf(sCurrentLanguage) > -1)) {
-							sContentStyleVal = (sContentStyleVal || "").length > 0
-													? sContentStyleVal.concat(";text-orientation:sideways")
-													: sContentStyleVal.concat("text-orientation:sideways");
+				&& (aOrientationLanguage.indexOf(sCurrentLanguage) > -1)) {
+				sContentStyleVal = (sContentStyleVal || "").length > 0
+					? sContentStyleVal.concat(";text-orientation:sideways")
+					: sContentStyleVal.concat("text-orientation:sideways");
 			}
 			this.applyStyles(mOptions.renderManager, this.getStyleObject(sContentStyleVal));
 			mOptions.renderManager.openEnd();
@@ -387,12 +399,10 @@ sap.ui.define([
 			(this.getCollapsed() ? "sapSuiteUiCommonsNetworkGroupCollapsed" : "sapSuiteUiCommonsNetworkGroupExpanded") +
 			(this._bIsSwimLane ? " sapSuiteUiCommonsNetworkGroupSwimLane" : " sapSuiteUiCommonsNetworkGroupClassic") +
 			(this._isVerticalSwimLane() ? " sapSuiteUiCommonsNetworkGroupVerticalSwimLane" : "") +
-			(this._isTopBottom() ? " sapSuiteUiCommonsNetworkGroupTopBottom " : "");
+			(this._isTopBottom() ? " sapSuiteUiCommonsNetworkGroupTopBottom " : "") +
+			(this._isBottomTop() ? " sapSuiteUiCommonsNetworkGroupBottomTop " : "") +
+			(this._isRightLeft() ? " sapSuiteUiCommonsNetworkGraphRightLeft " : "");
 
-		// Add RightLeft orientation class if swimlane and parent is RightLeft
-		if (this._bIsSwimLane && this.getParent() && this.getParent().isA("sap.suite.ui.commons.networkgraph.Graph") && this.getParent().getOrientation() === Orientation.RightLeft) {
-			sClass += " sapSuiteUiCommonsNetworkGraphRightLeft";
-		}
 		return sClass;
 	};
 
@@ -719,12 +729,22 @@ sap.ui.define([
 		return oParent && oParent._isTopBottom();
 	};
 
+	Group.prototype._isBottomTop = function () {
+		var oParent = this.getParent();
+		return oParent && oParent._isBottomTop();
+	};
+
+	Group.prototype._isRightLeft = function () {
+		var oParent = this.getParent();
+		return oParent && oParent._isRightLeft();
+	};
+
 	Group.prototype._isVerticalSwimLane = function () {
 		if (this._bIsSwimLane) {
-			var bTopBottom = this._isTopBottom();
+			var bVertical = this._isTopBottom() || this._isBottomTop();
 
-			return (bTopBottom && !this.getCollapsed())
-				|| (!bTopBottom && this.getCollapsed());
+			return (bVertical && !this.getCollapsed())
+				|| (!bVertical && this.getCollapsed());
 		}
 
 		return false;
@@ -831,7 +851,9 @@ sap.ui.define([
 			this.setProperty("collapsed", bCollapsed, true);
 
 			// when collapsing the group, deselect all child nodes to prevent inconsistency
-			if (bCollapsed) {
+			// Only process nodes if data is fully loaded (not during initial binding)
+			var oParentGraph = this.getParent();
+			if (bCollapsed && oParentGraph && !oParentGraph._bRequiresDataProcessing) {
 				this.getNodes().forEach(function (oNode) {
 					if (oNode.getSelected()) {
 						oNode.setSelected(false);
@@ -846,7 +868,6 @@ sap.ui.define([
 					}
 				});
 			}
-
 			this.aChildGroups.forEach(function (oChildGroup) {
 				fnProcessCollapsedGroup(oChildGroup);
 			});

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

@@ -14,8 +14,9 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/ui/dom/containsOrEquals",
 	"sap/base/Log",
-	"sap/ui/core/Lib"
-], function (jQuery, BaseObject, Group, Node, Line, KeyCodes, containsOrEquals, Log, CoreLib) {
+	"sap/ui/core/Lib",
+	"sap/ui/core/Element"
+], function (jQuery, BaseObject, Group, Node, Line, KeyCodes, containsOrEquals, Log, CoreLib, Element) {
 	"use strict";
 
 	var mDirections = {
@@ -186,13 +187,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) {
@@ -269,6 +272,12 @@ sap.ui.define([
 			this._onCtrlPlus(oEvent);
 		} else if (oEvent.ctrlKey && (oEvent.keyCode === KeyCodes.SLASH || oEvent.keyCode === KeyCodes.NUMPAD_MINUS)) {
 			this._onCtrlMinus(oEvent);
+		} else if(oEvent.ctrlKey && oEvent.altKey && oEvent.keyCode === KeyCodes.P) {
+			var oAssociatedControl = this._oGraph.getAssociatedControl();
+			if (oAssociatedControl) {
+				oAssociatedControl.focus();
+				oItem._setFocus(false);
+			}
 		}
 	};
 
@@ -324,6 +333,45 @@ 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);
+		}
+	};
+
 	KeyboardNavigator.prototype._handleTab = function (oEvent, sDirection) {
 		var oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
 		this._oWrapperDom.setAttribute("aria-live","assertive");