@sapui5/sap.suite.ui.commons 1.144.0 → 1.146.0

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

@@ -47,7 +47,8 @@ sap.ui.define([
 	'sap/ui/core/InvisibleText',
 	"./GraphRenderer",
 	"./util/DragDropManager",
-	"./util/PortManager"
+	"./util/PortManager",
+	"sap/ui/core/IconPool"
 ], function (
 	library,
 	jQuery,
@@ -90,7 +91,8 @@ sap.ui.define([
 	InvisibleText,
 	GraphRenderer,
 	DragDropManager,
-	PortManager
+	PortManager,
+	IconPool
 ) {
 	"use strict";
 
@@ -250,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
 				 */
@@ -413,7 +416,9 @@ sap.ui.define([
 					}
 				},
 				/**
-				 * This event is fired when a user drops a node in the graph. This event is available only for the noop layout.
+				 * 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
 				 */
@@ -461,6 +466,20 @@ sap.ui.define([
 						 **/
 						toNode: { type: "sap.suite.ui.commons.networkgraph.Node" }
 					}
+				},
+				/**
+				 * This event is fired when a user presses the delete key on a focused node or line.
+				 * 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>.
+				 * @public
+				 * @since 1.145
+				 */
+				itemDeleted: {
+					parameters: {
+						/**
+						 * The item (node or line) that is to be deleted.
+						 */
+						item: { type: "sap.suite.ui.commons.networkgraph.ElementBase" }
+					}
 				}
 			}
 		}
@@ -1142,11 +1161,17 @@ sap.ui.define([
 	Graph.prototype.setEnableDragAndDrop = function (bEnabled) {
 		this.setProperty("enableDragAndDrop", bEnabled, true);
 
-		// Update zoom button states
-		if (this._zoomIn && this._zoomOut) {
-			var bZoomEnabled = !this._isDnDEnabled();
-			this._zoomIn.setEnabled(bZoomEnabled);
-			this._zoomOut.setEnabled(bZoomEnabled);
+		// Update zoom button visibility
+		if (this._zoomIn && this._zoomOut && this._zoomToFitButton) {
+			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
+		if (!bEnabled) {
+			PortManager.removeAllPorts();
 		}
 
 		return this;
@@ -1176,12 +1201,12 @@ sap.ui.define([
 									this._oFocus.item.isA("sap.suite.ui.commons.networkgraph.Node")))) {
 				this._updateAccessibility(oFocus);
 			}
-				this._updateAccessibility(oFocus);
-				return;
+			this._updateAccessibility(oFocus);
+			return;
 		}
 
 		this.defocus();
-		if (this.getFocusDomRef()) {
+		if (this.getFocusDomRef() && !(oFocus && oFocus.button && oFocus.button.id && oFocus.button.id.indexOf("actionOverflow") !== -1)) {
 			this.getFocusDomRef().focus();
 		}
 
@@ -2202,22 +2227,24 @@ 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
-		this._toolbar.addContent(new OverflowToolbarButton({
+		this._zoomToFitButton = new OverflowToolbarButton({
 			type: ButtonType.Transparent,
 			icon: "sap-icon://popup-window",
 			tooltip: oResourceBundle.getText("NETWORK_GRAPH_ZOOMTOFIT"),
 			text: oResourceBundle.getText("NETWORK_GRAPH_ZOOMTOFIT"),
 			press: this._fitToScreen.bind(this)
-		}));
+		});
+		this._toolbar.addContent(this._zoomToFitButton);
+
+		// Hide zoom buttons if drag and drop is enabled
+		if (this._isDnDEnabled()) {
+			this._zoomIn.setVisible(false);
+			this._zoomOut.setVisible(false);
+			this._zoomToFitButton.setVisible(false);
+		}
 
 		// toggle full screen
 		this._oFullScreenButton = new OverflowToolbarButton({
@@ -2622,7 +2649,7 @@ sap.ui.define([
 		this._tooltip.instantClose();
 
 		// Remove all ports when deselecting
-		if (this.getNodePorts() !== "None") {
+		if (PortManager._currentTriggerNodeKey !== null) {
 			PortManager.removeAllPorts();
 		}
 	};
@@ -3309,7 +3336,7 @@ sap.ui.define([
 	 * @private
 	 */
 	Graph.prototype._supportsNodePorts = function () {
-		return this.getNodePorts() !== "None" && this._isDnDEnabled() && this.getShowCreateConnectionButton();
+		return this.getNodePorts() !== "None" && this._isDnDEnabled();
 	};
 
 	return Graph;

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

@@ -187,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) {
@@ -331,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");

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

@@ -191,16 +191,19 @@ sap.ui.define([
 				}
 			}
 		},
-		renderer: function (oRM, oControl) {
-			// NOTE: this render is considered to be called only for single item invalidation
-			// whole graph has different render path
-			var sHtml = oControl._render({
-				renderManager: oRM
-			});
-			this.oRm = oRM;
+		renderer: {
+			apiVersion: 2,
+			render (oRM, oControl) {
+				// NOTE: this render is considered to be called only for single item invalidation
+				// whole graph has different render path
+				var sHtml = oControl._render({
+					renderManager: oRM
+				});
+				this.oRm = oRM;
 
-			if (sHtml) {
-				oRM.unsafeHtml(sHtml);
+				if (sHtml) {
+					oRM.unsafeHtml(sHtml);
+				}
 			}
 		},
 		onAfterRendering: function () {
@@ -905,6 +908,11 @@ sap.ui.define([
 
 		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_ACCESSIBILITY_TOGGLE_STATE'));
 
+		const iIncomingConnectors = this.getFromNode().getChildLines().length;
+		if (iIncomingConnectors > 1) {
+			aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_ARROW_KEYS', [sFromNodeText]));
+		}
+
 		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_TAB_TO_TARGET', [sToNodeText]));
 		aSentenceParts.push(oResourceBundle.getText('NETWORK_GRAPH_LINE_NAVIGATION_SHIFT_TAB_TO_SOURCE', [sFromNodeText]));
 
@@ -1106,10 +1114,39 @@ sap.ui.define([
 		$line.on("mouseout", function (oEvent) {
 			this._mouseOut();
 		}.bind(this));
+
+		// Setup events for text box
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			var $textBox = oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]');
+
+			$textBox.on("click", function (oEvent) {
+				this._click({
+					ctrlKey: oEvent.ctrlKey,
+					clientX: oEvent.clientX,
+					clientY: oEvent.clientY
+				});
+			}.bind(this));
+
+			$textBox.on("mouseover", function (oEvent) {
+				this._mouseOver();
+			}.bind(this));
+
+			$textBox.on("mouseout", function (oEvent) {
+				this._mouseOut();
+			}.bind(this));
+		}
 	};
 
 	Line.prototype._mouseOut = function () {
 		this.$().removeClass(this.HIGHLIGHT_CLASS);
+		// Remove highlight class from text box using data-line-id attribute
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]').removeClass(this.HIGHLIGHT_CLASS);
+		}
 		if (!this.getSelected()) {
 			this._setStatusColors("");
 		}
@@ -1121,6 +1158,12 @@ sap.ui.define([
 		if (!this.getSelected() && bExecuteDefault) {
 			this._setStatusColors("Hover");
 			this.$().addClass(this.HIGHLIGHT_CLASS);
+			// Add highlight class to text box using data-line-id attribute
+			var oParent = this.getParent();
+			if (oParent) {
+				var sLineId = this._getLineId();
+				oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]').addClass(this.HIGHLIGHT_CLASS);
+			}
 		}
 	};
 
@@ -1141,7 +1184,7 @@ sap.ui.define([
 			}
 		} else {
 			/** @deprecated As of 1.120 */
-			{	
+			{
 				$arrow.css("fill", sBackgroundColor);
 				$arrow.css("stroke", sBorderColor);
 				this.$("path").css("stroke", sBorderColor);
@@ -1434,6 +1477,18 @@ sap.ui.define([
 		if (bFocus) {
 			this._renderFocusWrapper();
 		}
+
+		// Apply focus class to text box for blue border
+		var oParent = this.getParent();
+		if (oParent) {
+			var sLineId = this._getLineId();
+			var $textBox = oParent.$("line-texts").find('[data-line-id="' + sLineId + '"]');
+			if (bFocus) {
+				$textBox.addClass(this.FOCUS_CLASS);
+			} else {
+				$textBox.removeClass(this.FOCUS_CLASS);
+			}
+		}
 	};
 
 	Line.prototype._isEndPosition = function () {
@@ -1850,6 +1905,9 @@ sap.ui.define([
 			fRemainingDistance,
 			i;
 
+		// Threshold to detect if arrow is too close to a vertex/bend (10px)
+		var fVertexThreshold = 10;
+
 		if (sDirection === "forward") {
 			// Travel from source towards target
 			for (i = 0; i < iLastIndex; i++) {
@@ -1901,7 +1959,95 @@ sap.ui.define([
 			fRatio = 1 - fRatio; // Reverse the ratio for backward direction
 		}
 
-		// Calculate the exact coordinates that are 44px away from the anchor
+		// Check if arrow position is too close to a vertex (bend point)
+		var fDistanceToStart = fRatio * fSegmentLength;
+		var fDistanceToEnd = (1 - fRatio) * fSegmentLength;
+		var fAdjustedSegmentLength;
+
+		// Strategy: When arrow is too close to a bend, prefer moving AWAY from the anchor
+		// to avoid overlap with node/port. This means:
+		// - For "forward" direction (from source): prefer moving to next segment (away from source)
+		// - For "backward" direction (from target): prefer moving to previous segment (away from target)
+
+		if (sDirection === "forward") {
+			// Arrow traveling from source: prefer moving forward (away from source) when near bend
+			if (fDistanceToEnd < fVertexThreshold && iSegmentIndex + 1 < iLastIndex) {
+				// Too close to end of segment - move to next segment (preferred)
+				fAdjustedSegmentLength = Math.sqrt(
+					Math.pow(oCoords[iSegmentIndex + 2].getX() - oCoords[iSegmentIndex + 1].getX(), 2) +
+					Math.pow(oCoords[iSegmentIndex + 2].getY() - oCoords[iSegmentIndex + 1].getY(), 2)
+				);
+
+				if (fAdjustedSegmentLength > fVertexThreshold) {
+					// Move arrow to start of next segment plus threshold
+					iSegmentIndex = iSegmentIndex + 1;
+					fRatio = fVertexThreshold / fAdjustedSegmentLength;
+					fSegmentLength = fAdjustedSegmentLength;
+				} else {
+					// Next segment too short, stay on current segment away from vertex
+					fRatio = Math.max(0, (fSegmentLength - fVertexThreshold) / fSegmentLength);
+				}
+			} else if (fDistanceToStart < fVertexThreshold) {
+				// Too close to start of segment - only move back if critically close to source anchor
+				// This is less preferred as it moves closer to the source node/port
+				if (fDistanceToStart < 5 && iSegmentIndex > 0) {
+					// Only if extremely close (< 5px) and previous segment exists
+					fAdjustedSegmentLength = Math.sqrt(
+						Math.pow(oCoords[iSegmentIndex].getX() - oCoords[iSegmentIndex - 1].getX(), 2) +
+						Math.pow(oCoords[iSegmentIndex].getY() - oCoords[iSegmentIndex - 1].getY(), 2)
+					);
+
+					if (fAdjustedSegmentLength > fVertexThreshold) {
+						iSegmentIndex = iSegmentIndex - 1;
+						fRatio = (fAdjustedSegmentLength - fVertexThreshold) / fAdjustedSegmentLength;
+						fSegmentLength = fAdjustedSegmentLength;
+					}
+				} else {
+					// Stay on current segment, move away from start vertex
+					fRatio = Math.min(1, fVertexThreshold / fSegmentLength);
+				}
+			}
+		} else if (sDirection === "backward") {
+			// Arrow traveling from target: prefer moving backward (away from target) when near bend
+			if (fDistanceToStart < fVertexThreshold && iSegmentIndex > 0) {
+				// Too close to start of segment - move to previous segment (preferred)
+				fAdjustedSegmentLength = Math.sqrt(
+					Math.pow(oCoords[iSegmentIndex].getX() - oCoords[iSegmentIndex - 1].getX(), 2) +
+					Math.pow(oCoords[iSegmentIndex].getY() - oCoords[iSegmentIndex - 1].getY(), 2)
+				);
+
+				if (fAdjustedSegmentLength > fVertexThreshold) {
+					// Move arrow to end of previous segment minus threshold
+					iSegmentIndex = iSegmentIndex - 1;
+					fRatio = (fAdjustedSegmentLength - fVertexThreshold) / fAdjustedSegmentLength;
+					fSegmentLength = fAdjustedSegmentLength;
+				} else {
+					// Previous segment too short, stay on current segment away from vertex
+					fRatio = Math.min(1, fVertexThreshold / fSegmentLength);
+				}
+			} else if (fDistanceToEnd < fVertexThreshold) {
+				// Too close to end of segment - only move forward if critically close to target anchor
+				// This is less preferred as it moves closer to the target node/port
+				if (fDistanceToEnd < 5 && iSegmentIndex + 1 < iLastIndex) {
+					// Only if extremely close (< 5px) and next segment exists
+					fAdjustedSegmentLength = Math.sqrt(
+						Math.pow(oCoords[iSegmentIndex + 2].getX() - oCoords[iSegmentIndex + 1].getX(), 2) +
+						Math.pow(oCoords[iSegmentIndex + 2].getY() - oCoords[iSegmentIndex + 1].getY(), 2)
+					);
+
+					if (fAdjustedSegmentLength > fVertexThreshold) {
+						iSegmentIndex = iSegmentIndex + 1;
+						fRatio = fVertexThreshold / fAdjustedSegmentLength;
+						fSegmentLength = fAdjustedSegmentLength;
+					}
+				} else {
+					// Stay on current segment, move away from end vertex
+					fRatio = Math.max(0, (fSegmentLength - fVertexThreshold) / fSegmentLength);
+				}
+			}
+		}
+
+		// Calculate the exact coordinates with adjusted position
 		var fExactX = oCoords[iSegmentIndex].getX() + (oCoords[iSegmentIndex + 1].getX() - oCoords[iSegmentIndex].getX()) * fRatio;
 		var fExactY = oCoords[iSegmentIndex].getY() + (oCoords[iSegmentIndex + 1].getY() - oCoords[iSegmentIndex].getY()) * fRatio;