@sapui5/sap.suite.ui.commons 1.143.0 → 1.145.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/sap/suite/ui/commons/.library +1 -1
- package/src/sap/suite/ui/commons/AriaProperties.js +1 -1
- package/src/sap/suite/ui/commons/CalculationBuilder.js +26 -14
- package/src/sap/suite/ui/commons/CalculationBuilderExpression.js +2 -2
- package/src/sap/suite/ui/commons/CalculationBuilderFunction.js +1 -1
- package/src/sap/suite/ui/commons/CalculationBuilderGroup.js +1 -1
- package/src/sap/suite/ui/commons/CalculationBuilderInput.js +5 -5
- package/src/sap/suite/ui/commons/CalculationBuilderItem.js +1 -1
- package/src/sap/suite/ui/commons/CalculationBuilderValidationResult.js +1 -1
- package/src/sap/suite/ui/commons/CalculationBuilderVariable.js +1 -1
- package/src/sap/suite/ui/commons/CloudFilePicker.js +1 -3
- package/src/sap/suite/ui/commons/MicroProcessFlow.js +77 -73
- package/src/sap/suite/ui/commons/MicroProcessFlowItem.js +3 -3
- package/src/sap/suite/ui/commons/Timeline.js +9 -0
- package/src/sap/suite/ui/commons/TimelineNavigator.js +37 -5
- package/src/sap/suite/ui/commons/TimelineRenderer.js +3 -3
- package/src/sap/suite/ui/commons/collaboration/BaseHelperService.js +0 -1
- package/src/sap/suite/ui/commons/collaboration/CollaborationHelper.js +0 -3
- package/src/sap/suite/ui/commons/collaboration/CollaborationManagerService.js +0 -1
- package/src/sap/suite/ui/commons/collaboration/ContactHelper.js +7 -0
- package/src/sap/suite/ui/commons/collaboration/ContactPopover.fragment.xml +4 -1
- package/src/sap/suite/ui/commons/collaboration/MinimalContactPopover.fragment.xml +2 -1
- package/src/sap/suite/ui/commons/collaboration/TeamsHelperService.js +0 -6
- package/src/sap/suite/ui/commons/collaboration/channels/MessageChannel.js +0 -2
- package/src/sap/suite/ui/commons/collaboration/flpplugins/msplugin/Component-preload.js +1 -1
- package/src/sap/suite/ui/commons/collaboration/flpplugins/msplugin/Component.js +1 -2
- package/src/sap/suite/ui/commons/flexibility/changeHandler/PropertyChangeMapper.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/CropCustomShapeHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/CropEllipseHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/CropRectangleHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/CustomSizeItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/FilterHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/FlipHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/HistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/ImageEditor.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/ImageEditorContainer.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/ImageEditorResponsiveContainer.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/ResizeHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/imageeditor/RotateHistoryItem.js +1 -1
- package/src/sap/suite/ui/commons/library.js +100 -3
- package/src/sap/suite/ui/commons/messagebundle.properties +76 -10
- package/src/sap/suite/ui/commons/messagebundle_ar.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_bg.properties +62 -16
- package/src/sap/suite/ui/commons/messagebundle_ca.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_cnr.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_cs.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_cy.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_da.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_de.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_el.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_en.properties +50 -7
- package/src/sap/suite/ui/commons/messagebundle_en_GB.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_en_US_saprigi.properties +54 -6
- package/src/sap/suite/ui/commons/messagebundle_es.properties +53 -7
- package/src/sap/suite/ui/commons/messagebundle_es_MX.properties +54 -8
- package/src/sap/suite/ui/commons/messagebundle_et.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_fi.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_fr.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_fr_CA.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_hi.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_hr.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_hu.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_id.properties +60 -14
- package/src/sap/suite/ui/commons/messagebundle_it.properties +53 -7
- package/src/sap/suite/ui/commons/messagebundle_iw.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_ja.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_kk.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_ko.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_lt.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_lv.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_mk.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_ms.properties +59 -13
- package/src/sap/suite/ui/commons/messagebundle_nl.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_no.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_pl.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_pt.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_pt_PT.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_ro.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_ru.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_sh.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_sk.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_sl.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_sr.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_sv.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_th.properties +52 -6
- package/src/sap/suite/ui/commons/messagebundle_tr.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_uk.properties +53 -7
- package/src/sap/suite/ui/commons/messagebundle_vi.properties +55 -9
- package/src/sap/suite/ui/commons/messagebundle_zh_CN.properties +51 -5
- package/src/sap/suite/ui/commons/messagebundle_zh_TW.properties +53 -7
- package/src/sap/suite/ui/commons/networkgraph/ElementBase.js +19 -1
- package/src/sap/suite/ui/commons/networkgraph/Graph.js +371 -29
- package/src/sap/suite/ui/commons/networkgraph/GraphRenderer.js +23 -10
- package/src/sap/suite/ui/commons/networkgraph/Group.js +43 -22
- package/src/sap/suite/ui/commons/networkgraph/KeyboardNavigator.js +54 -6
- package/src/sap/suite/ui/commons/networkgraph/Line.js +736 -31
- package/src/sap/suite/ui/commons/networkgraph/Node.js +546 -96
- package/src/sap/suite/ui/commons/networkgraph/Tooltip.js +5 -0
- package/src/sap/suite/ui/commons/networkgraph/layout/NoopLayout.js +28 -5
- package/src/sap/suite/ui/commons/networkgraph/util/ConnectionPathUtils.js +1144 -0
- package/src/sap/suite/ui/commons/networkgraph/util/CreateConnectionPopover.js +374 -0
- package/src/sap/suite/ui/commons/networkgraph/util/DependencyLayoutHelper.js +870 -0
- package/src/sap/suite/ui/commons/networkgraph/util/DragDropManager.js +563 -41
- package/src/sap/suite/ui/commons/networkgraph/util/PortManager.js +573 -0
- package/src/sap/suite/ui/commons/statusindicator/Circle.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/CustomShape.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/DiscreteThreshold.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/FillingOption.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/LibraryShape.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/Path.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/PropertyThreshold.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/Rectangle.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/Shape.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/ShapeGroup.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/SimpleShape.js +1 -1
- package/src/sap/suite/ui/commons/statusindicator/StatusIndicator.js +1 -1
- package/src/sap/suite/ui/commons/taccount/TAccount.js +1 -1
- package/src/sap/suite/ui/commons/taccount/TAccountGroup.js +1 -1
- package/src/sap/suite/ui/commons/taccount/TAccountItem.js +1 -1
- package/src/sap/suite/ui/commons/taccount/TAccountItemProperty.js +1 -1
- package/src/sap/suite/ui/commons/taccount/TAccountPanel.js +1 -1
- package/src/sap/suite/ui/commons/themes/base/NetworkGraph.less +13 -13
- package/src/sap/suite/ui/commons/themes/base/NetworkGroup.less +34 -2
- package/src/sap/suite/ui/commons/themes/base/NetworkLine.less +58 -13
- package/src/sap/suite/ui/commons/themes/base/NetworkNode.less +206 -1
|
@@ -0,0 +1,573 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
*
|
|
3
|
+
SAP UI development toolkit for HTML5 (SAPUI5)
|
|
4
|
+
(c) Copyright 2009-2015 SAP SE. All rights reserved
|
|
5
|
+
|
|
6
|
+
*/
|
|
7
|
+
sap.ui.define([
|
|
8
|
+
"sap/ui/thirdparty/jquery",
|
|
9
|
+
"sap/suite/ui/commons/library"
|
|
10
|
+
], function (jQuery, Library) {
|
|
11
|
+
"use strict";
|
|
12
|
+
/**
|
|
13
|
+
* PortManager class for managing network graph ports.
|
|
14
|
+
* Implements singleton pattern to ensure only one instance exists.
|
|
15
|
+
*/
|
|
16
|
+
class PortManager {
|
|
17
|
+
constructor() {
|
|
18
|
+
/**
|
|
19
|
+
* Set of node keys that currently have trigger ports.
|
|
20
|
+
* Used to track which nodes are acting as trigger nodes for port connections.
|
|
21
|
+
* @type {Set<string>}
|
|
22
|
+
* @private
|
|
23
|
+
*/
|
|
24
|
+
this._triggerPortNodeKeys = new Set();
|
|
25
|
+
/**
|
|
26
|
+
* Reference to the current graph instance.
|
|
27
|
+
* Used for accessing graph properties and nodes for port operations.
|
|
28
|
+
* @type {sap.suite.ui.commons.networkgraph.Graph|null}
|
|
29
|
+
* @private
|
|
30
|
+
*/
|
|
31
|
+
this._graphInstance = null;
|
|
32
|
+
/**
|
|
33
|
+
* Key of the node that currently has trigger ports active.
|
|
34
|
+
* Used for port restoration after graph rerendering and toggle behavior.
|
|
35
|
+
* @type {string|null}
|
|
36
|
+
* @private
|
|
37
|
+
*/
|
|
38
|
+
this._currentTriggerNodeKey = null;
|
|
39
|
+
/**
|
|
40
|
+
* Flag indicating whether port restoration mechanism has been set up.
|
|
41
|
+
* Prevents duplicate event listeners for graph ready events.
|
|
42
|
+
* @type {boolean}
|
|
43
|
+
* @private
|
|
44
|
+
*/
|
|
45
|
+
this._restorationSetup = false;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Reference to the ConnectionType enum for efficient access
|
|
50
|
+
* @type {Object}
|
|
51
|
+
* @private
|
|
52
|
+
*/
|
|
53
|
+
static _oConnectionType = Library.networkgraph.ConnectionType;
|
|
54
|
+
|
|
55
|
+
getGraphInstance() {
|
|
56
|
+
return this._graphInstance;
|
|
57
|
+
}
|
|
58
|
+
setGraphInstance(oGraph) {
|
|
59
|
+
this._graphInstance = oGraph;
|
|
60
|
+
// Set up automatic port restoration after rerendering
|
|
61
|
+
if (oGraph) {
|
|
62
|
+
this.setupPortRestoration();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Adds ports to the given node instance based on the graph's nodePorts property.
|
|
67
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
68
|
+
* @param {boolean} bTriggerNode - Whether the node is a trigger node.
|
|
69
|
+
*/
|
|
70
|
+
addPortsToNode(oNode, bTriggerNode) {
|
|
71
|
+
var sNodePorts = oNode._getNodePorts();
|
|
72
|
+
// Remove existing ports first
|
|
73
|
+
this.removePortsFromNode(oNode);
|
|
74
|
+
if (sNodePorts === "None") {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
var $node = oNode.$();
|
|
78
|
+
// Add ports based on the nodePorts setting
|
|
79
|
+
switch (sNodePorts) {
|
|
80
|
+
case "All":
|
|
81
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "left", bTriggerNode: bTriggerNode });
|
|
82
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "right", bTriggerNode: bTriggerNode });
|
|
83
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "top", bTriggerNode: bTriggerNode });
|
|
84
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "bottom", bTriggerNode: bTriggerNode });
|
|
85
|
+
break;
|
|
86
|
+
case "LeftRight":
|
|
87
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "left", bTriggerNode: bTriggerNode });
|
|
88
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "right", bTriggerNode: bTriggerNode });
|
|
89
|
+
break;
|
|
90
|
+
case "TopBottom":
|
|
91
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "top", bTriggerNode: bTriggerNode });
|
|
92
|
+
this._addPortToSide({ $node: $node, oNode: oNode, sSide: "bottom", bTriggerNode: bTriggerNode });
|
|
93
|
+
break;
|
|
94
|
+
default:
|
|
95
|
+
// No ports to add
|
|
96
|
+
break;
|
|
97
|
+
}
|
|
98
|
+
if (bTriggerNode) {
|
|
99
|
+
this._triggerPortNodeKeys.add(oNode.getKey());
|
|
100
|
+
this._currentTriggerNodeKey = oNode.getKey();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Adds a port to a specific side of the node.
|
|
105
|
+
* @param {Object} oConfig - Configuration object for port creation.
|
|
106
|
+
* @param {jQuery} oConfig.$node - The node DOM element.
|
|
107
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oConfig.oNode - The node instance.
|
|
108
|
+
* @param {string} oConfig.sSide - The side to add the port to ("left", "right", "top", "bottom").
|
|
109
|
+
* @param {boolean} oConfig.bTriggerNode - Whether this is a trigger node.
|
|
110
|
+
*/
|
|
111
|
+
_addPortToSide(oConfig) {
|
|
112
|
+
var $node = oConfig.$node;
|
|
113
|
+
var oNode = oConfig.oNode;
|
|
114
|
+
var sSide = oConfig.sSide;
|
|
115
|
+
var bTriggerNode = oConfig.bTriggerNode;
|
|
116
|
+
var sPortType = bTriggerNode ? "trigger" : "inlet";
|
|
117
|
+
var sCapitalizedSide = sSide.charAt(0).toUpperCase() + sSide.slice(1);
|
|
118
|
+
// Build the CSS classes based on port type and position
|
|
119
|
+
var aClasses = ["sapSuiteUiCommonsNetworkNodePort"];
|
|
120
|
+
// Add port type specific class
|
|
121
|
+
aClasses.push("sapSuiteUiCommonsNetworkNode" + (bTriggerNode ? "TriggerPort" : "InletPort"));
|
|
122
|
+
// Add position-specific class (matching the CSS class names)
|
|
123
|
+
aClasses.push("sapSuiteUi" + sCapitalizedSide + (bTriggerNode ? "TriggerPort" : "InletPort"));
|
|
124
|
+
var sPortClass = aClasses.join(" ");
|
|
125
|
+
var $port = this._createPort({
|
|
126
|
+
className: sPortClass,
|
|
127
|
+
isAccessible: bTriggerNode, // Only trigger ports are accessible
|
|
128
|
+
ariaLabel: bTriggerNode ? ("Connection port on " + sSide + " side of " + (oNode.getTitle() || "node")) : null,
|
|
129
|
+
attributes: {
|
|
130
|
+
"data-node-key": oNode.getKey(),
|
|
131
|
+
"data-port-type": sPortType,
|
|
132
|
+
"data-port-side": sSide
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
$node.append($port);
|
|
136
|
+
if (bTriggerNode) {
|
|
137
|
+
this._setupPortEvents($port, oNode);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Removes all ports from the given node instance.
|
|
142
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
143
|
+
*/
|
|
144
|
+
removePortsFromNode(oNode) {
|
|
145
|
+
oNode.$().find(".sapSuiteUiCommonsNetworkNodePort").remove();
|
|
146
|
+
this._triggerPortNodeKeys.delete(oNode.getKey());
|
|
147
|
+
if (this._currentTriggerNodeKey === oNode.getKey()) {
|
|
148
|
+
this._currentTriggerNodeKey = null;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Removes all ports from all nodes and clears tracking.
|
|
153
|
+
*/
|
|
154
|
+
removeAllPorts() {
|
|
155
|
+
this._removeAlltriggerPorts();
|
|
156
|
+
this.removeInletPortsFromOtherNodes();
|
|
157
|
+
this.clearTriggerNodeTracking();
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Gets the current trigger node key.
|
|
161
|
+
* @returns {string|null} The key of the current trigger node or null if none.
|
|
162
|
+
*/
|
|
163
|
+
getCurrentTriggerNodeKey() {
|
|
164
|
+
return this._currentTriggerNodeKey;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Restores trigger ports to the previously active trigger node after rerendering.
|
|
168
|
+
* This should be called after graph rerendering to maintain port state.
|
|
169
|
+
*/
|
|
170
|
+
restoreTriggerPorts() {
|
|
171
|
+
if (this._currentTriggerNodeKey && this._graphInstance) {
|
|
172
|
+
var oTriggerNode = this._graphInstance.getNodeByKey(this._currentTriggerNodeKey);
|
|
173
|
+
if (oTriggerNode) {
|
|
174
|
+
// Small delay to ensure DOM is ready after rerendering
|
|
175
|
+
setTimeout(function () {
|
|
176
|
+
this.addPortsToNode(oTriggerNode, true);
|
|
177
|
+
}.bind(this));
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Sets up automatic restoration of trigger ports after graph rerendering.
|
|
183
|
+
* This method should be called once to set up the restoration mechanism.
|
|
184
|
+
*/
|
|
185
|
+
setupPortRestoration() {
|
|
186
|
+
if (!this._graphInstance || this._restorationSetup) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
// Listen for graph ready event to restore ports after rerendering
|
|
190
|
+
this._graphInstance.attachGraphReady(function () {
|
|
191
|
+
this.restoreTriggerPorts();
|
|
192
|
+
}.bind(this));
|
|
193
|
+
// Mark as setup to prevent duplicate handlers
|
|
194
|
+
this._restorationSetup = true;
|
|
195
|
+
}
|
|
196
|
+
/**
|
|
197
|
+
* Adds inlet ports to all nodes in the graph except the node with trigger ports.
|
|
198
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
199
|
+
*/
|
|
200
|
+
addInletPortsToOtherNodes(oNode) {
|
|
201
|
+
var oGraph = oNode.getParent();
|
|
202
|
+
var sNodePorts = oNode._getNodePorts();
|
|
203
|
+
// Don't add inlet ports if nodePorts is "None"
|
|
204
|
+
if (sNodePorts === "None") {
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
oGraph.getNodes().forEach(function (oOtherNode) {
|
|
208
|
+
const sKey = oOtherNode.getKey();
|
|
209
|
+
var $otherNode = oOtherNode.$();
|
|
210
|
+
// Skip the trigger node (node that was clicked to trigger port addition)
|
|
211
|
+
if (sKey === this._currentTriggerNodeKey) {
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
// Skip if inlet ports already exist
|
|
215
|
+
if ($otherNode.find(".sapSuiteUiCommonsNetworkNodeInletPort").length > 0) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
// Add inlet ports based on the nodePorts setting
|
|
219
|
+
switch (sNodePorts) {
|
|
220
|
+
case "All":
|
|
221
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "left", sKey: sKey });
|
|
222
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "right", sKey: sKey });
|
|
223
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "top", sKey: sKey });
|
|
224
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "bottom", sKey: sKey });
|
|
225
|
+
break;
|
|
226
|
+
case "LeftRight":
|
|
227
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "left", sKey: sKey });
|
|
228
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "right", sKey: sKey });
|
|
229
|
+
break;
|
|
230
|
+
case "TopBottom":
|
|
231
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "top", sKey: sKey });
|
|
232
|
+
this._addInletPortToSide({ $node: $otherNode, sSide: "bottom", sKey: sKey });
|
|
233
|
+
break;
|
|
234
|
+
default:
|
|
235
|
+
// No inlet ports to add
|
|
236
|
+
break;
|
|
237
|
+
}
|
|
238
|
+
}.bind(this));
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Adds an inlet port to a specific side of the node.
|
|
242
|
+
* @param {Object} oConfig - Configuration object for inlet port creation.
|
|
243
|
+
* @param {jQuery} oConfig.$node - The node DOM element.
|
|
244
|
+
* @param {string} oConfig.sSide - The side to add the port to ("left", "right", "top", "bottom").
|
|
245
|
+
* @param {string} oConfig.sKey - The node key.
|
|
246
|
+
*/
|
|
247
|
+
_addInletPortToSide(oConfig) {
|
|
248
|
+
var $node = oConfig.$node;
|
|
249
|
+
var sSide = oConfig.sSide;
|
|
250
|
+
var sKey = oConfig.sKey;
|
|
251
|
+
var sCapitalizedSide = sSide.charAt(0).toUpperCase() + sSide.slice(1);
|
|
252
|
+
// Build the CSS classes for inlet port
|
|
253
|
+
var aClasses = ["sapSuiteUiCommonsNetworkNodePort"];
|
|
254
|
+
aClasses.push("sapSuiteUiCommonsNetworkNodeInletPort");
|
|
255
|
+
aClasses.push("sapSuiteUi" + sCapitalizedSide + "InletPort");
|
|
256
|
+
var sPortClass = aClasses.join(" ");
|
|
257
|
+
var $port = this._createPort({
|
|
258
|
+
className: sPortClass,
|
|
259
|
+
attributes: {
|
|
260
|
+
"data-node-key": sKey,
|
|
261
|
+
"data-port-type": "inlet",
|
|
262
|
+
"data-port-side": sSide
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
$node.append($port);
|
|
266
|
+
}
|
|
267
|
+
/**
|
|
268
|
+
* Removes all inlet ports from the graph.
|
|
269
|
+
*/
|
|
270
|
+
removeInletPortsFromOtherNodes() {
|
|
271
|
+
jQuery(".sapSuiteUiCommonsNetworkNodeInletPort").remove();
|
|
272
|
+
}
|
|
273
|
+
/**
|
|
274
|
+
* Removes trigger ports from the given node instance.
|
|
275
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
276
|
+
*/
|
|
277
|
+
removeTriggerPortsFromNode(oNode) {
|
|
278
|
+
oNode.$().find(".sapSuiteUiCommonsNetworkNodeLeftTriggerPort, .sapSuiteUiCommonsNetworkNodeRightTriggerPort").remove();
|
|
279
|
+
this._triggerPortNodeKeys.delete(oNode.getKey());
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* Creates a port element.
|
|
283
|
+
* @param {Object} options - Configuration options for the port.
|
|
284
|
+
* @returns {jQuery} - The created port element.
|
|
285
|
+
*/
|
|
286
|
+
_createPort(options) {
|
|
287
|
+
// Prepare accessibility attributes for trigger ports
|
|
288
|
+
var mAttributes = options?.attributes || {};
|
|
289
|
+
if (options.isAccessible) {
|
|
290
|
+
mAttributes.tabindex = "0";
|
|
291
|
+
mAttributes.role = "button";
|
|
292
|
+
mAttributes["aria-label"] = options.ariaLabel || ("Port on " + options.position + " side");
|
|
293
|
+
mAttributes["aria-describedby"] = options.ariaDescribedBy || null;
|
|
294
|
+
}
|
|
295
|
+
return jQuery("<div></div>", {
|
|
296
|
+
"class": options.className,
|
|
297
|
+
...mAttributes
|
|
298
|
+
});
|
|
299
|
+
}
|
|
300
|
+
/**
|
|
301
|
+
* Sets up events for the given port.
|
|
302
|
+
* @param {jQuery} $port - The port element.
|
|
303
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
304
|
+
*/
|
|
305
|
+
_setupPortEvents($port, oNode) {
|
|
306
|
+
$port.on("mousedown", this._onPortMouseDown.bind(this, $port, oNode));
|
|
307
|
+
$port.on("keydown", this._onPortKeyDown.bind(this, $port, oNode));
|
|
308
|
+
$port.on("focus", this._onPortFocus.bind(this, $port, oNode));
|
|
309
|
+
$port.on("blur", this._onPortBlur.bind(this, $port, oNode));
|
|
310
|
+
}
|
|
311
|
+
/**
|
|
312
|
+
* Handles keydown events on ports for accessibility navigation.
|
|
313
|
+
* @param {jQuery} $port - The port element.
|
|
314
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
315
|
+
* @param {Event} oEvent - The keydown event.
|
|
316
|
+
*/
|
|
317
|
+
_onPortKeyDown($port, oNode, oEvent) {
|
|
318
|
+
var iKeyCode = oEvent.keyCode || oEvent.which;
|
|
319
|
+
// Shift+Tab key - Return focus to node (standard backward navigation)
|
|
320
|
+
if (iKeyCode === 9 && oEvent.shiftKey) { // Tab key with Shift
|
|
321
|
+
oEvent.preventDefault();
|
|
322
|
+
oEvent.stopPropagation();
|
|
323
|
+
this._returnFocusToNode(oNode);
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
326
|
+
// Enter key - Log port click
|
|
327
|
+
if (iKeyCode === 13) { // KeyCodes.ENTER
|
|
328
|
+
oEvent.preventDefault();
|
|
329
|
+
oEvent.stopPropagation();
|
|
330
|
+
// Get port information
|
|
331
|
+
var sSide = $port.attr("data-port-side");
|
|
332
|
+
var sNodeKey = $port.attr("data-node-key");
|
|
333
|
+
var sPortType = $port.attr("data-port-type");
|
|
334
|
+
// Use the Graph's accessibility system to announce port details
|
|
335
|
+
var oGraph = oNode.getParent();
|
|
336
|
+
if (oGraph && oGraph._setAccessibilityTitle) {
|
|
337
|
+
var sNodeLabel = oNode._getAccessibilityLabel(oGraph);
|
|
338
|
+
var sPortInfo = sNodeLabel + " " + sPortType + " port on " + sSide + " side. Node key: " + sNodeKey + ".";
|
|
339
|
+
oGraph._setAccessibilityTitle(sPortInfo);
|
|
340
|
+
}
|
|
341
|
+
return;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* Handles focus events on ports.
|
|
346
|
+
* @param {jQuery} $port - The port element.
|
|
347
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
348
|
+
* @param {Event} oEvent - The focus event.
|
|
349
|
+
*/
|
|
350
|
+
_onPortFocus($port, oNode, oEvent) {
|
|
351
|
+
// Add visual focus indicator using SAP standard focus class
|
|
352
|
+
$port.addClass("sapMFocused");
|
|
353
|
+
// Use the Graph's accessibility system instead of our own announcements
|
|
354
|
+
var oGraph = oNode.getParent();
|
|
355
|
+
if (oGraph && oGraph._setAccessibilityTitle) {
|
|
356
|
+
var sNodeLabel = oNode._getAccessibilityLabel(oGraph);
|
|
357
|
+
var sSide = $port.attr("data-port-side");
|
|
358
|
+
var sPortLabel = sNodeLabel + " " + sSide + " port focused. Press Enter for details, Space for connection, Shift+Tab to return to node.";
|
|
359
|
+
oGraph._setAccessibilityTitle(sPortLabel);
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
/**
|
|
363
|
+
* Handles blur events on ports.
|
|
364
|
+
* @param {jQuery} $port - The port element.
|
|
365
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
366
|
+
* @param {Event} oEvent - The blur event.
|
|
367
|
+
*/
|
|
368
|
+
_onPortBlur($port, oNode, oEvent) {
|
|
369
|
+
// Remove visual focus indicator
|
|
370
|
+
$port.removeClass("sapMFocused");
|
|
371
|
+
}
|
|
372
|
+
/**
|
|
373
|
+
* Returns focus to the node from a port.
|
|
374
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
375
|
+
*/
|
|
376
|
+
_returnFocusToNode(oNode) {
|
|
377
|
+
// First, remove focus from any currently focused port
|
|
378
|
+
var $currentPort = jQuery(document.activeElement);
|
|
379
|
+
if ($currentPort.hasClass("sapSuiteUiCommonsNetworkNodePort")) {
|
|
380
|
+
$currentPort.blur();
|
|
381
|
+
$currentPort.removeClass("sapMFocused");
|
|
382
|
+
}
|
|
383
|
+
// Restore the Graph's focus state to the node (like Tab key behavior)
|
|
384
|
+
var oGraph = oNode.getParent();
|
|
385
|
+
if (oGraph) {
|
|
386
|
+
oGraph.setFocus({
|
|
387
|
+
item: oNode,
|
|
388
|
+
button: null
|
|
389
|
+
});
|
|
390
|
+
// Use the Graph's accessibility system to announce the return
|
|
391
|
+
if (oGraph._setAccessibilityTitle) {
|
|
392
|
+
var sNodeLabel = oNode._getAccessibilityLabel(oGraph);
|
|
393
|
+
var sReturnLabel = sNodeLabel + " Use Shift+Arrow keys to navigate to ports.";
|
|
394
|
+
oGraph._setAccessibilityTitle(sReturnLabel);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
// Focus the node wrapper or node itself
|
|
398
|
+
var $focusTarget = oNode.$("wrapper");
|
|
399
|
+
if (!$focusTarget || $focusTarget.length === 0) {
|
|
400
|
+
$focusTarget = oNode.$();
|
|
401
|
+
}
|
|
402
|
+
if ($focusTarget && $focusTarget.length > 0) {
|
|
403
|
+
$focusTarget.focus();
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
/**
|
|
407
|
+
* Handles the mousedown event for a port.
|
|
408
|
+
* @param {jQuery} $port - The port element.
|
|
409
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
410
|
+
* @param {Event} e - The event object.
|
|
411
|
+
*/
|
|
412
|
+
_onPortMouseDown($port, oNode, e) {
|
|
413
|
+
e.stopPropagation();
|
|
414
|
+
e.preventDefault();
|
|
415
|
+
// Create ghost port using CSS classes
|
|
416
|
+
var $ghostPort = jQuery("<div></div>", {
|
|
417
|
+
"class": "sapSuiteUiCommonsNetworkNodeGhostArrow",
|
|
418
|
+
"style": "position: absolute; width: 13px; height: 19px;"
|
|
419
|
+
});
|
|
420
|
+
jQuery("body").append($ghostPort);
|
|
421
|
+
// Create ghost line using CSS classes
|
|
422
|
+
var $ghostLine = jQuery("<div></div>", {
|
|
423
|
+
"class": "sapSuiteUiCommonsNetworkNodeGhostLine"
|
|
424
|
+
});
|
|
425
|
+
jQuery("body").append($ghostLine);
|
|
426
|
+
var startRect = $port[0].getBoundingClientRect();
|
|
427
|
+
var startX = startRect.left + startRect.width / 2;
|
|
428
|
+
var startY = startRect.top + startRect.height / 2;
|
|
429
|
+
$ghostPort.css({ left: startX + "px", top: startY + "px" });
|
|
430
|
+
// Bind mousemove and mouseup events
|
|
431
|
+
var onMouseMove = this._onPortMouseMove.bind(this, $ghostPort, $ghostLine, startX, startY, oNode);
|
|
432
|
+
var onMouseUp = this._onPortMouseUp.bind(this, $ghostPort, $ghostLine, $port, oNode);
|
|
433
|
+
jQuery(document).on("mousemove", onMouseMove);
|
|
434
|
+
jQuery(document).on("mouseup", onMouseUp);
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Handles the mousemove event for a port.
|
|
438
|
+
* @param {jQuery} $ghostPort - The ghost port element.
|
|
439
|
+
* @param {jQuery} $ghostLine - The ghost line element.
|
|
440
|
+
* @param {number} startX - The starting X coordinate.
|
|
441
|
+
* @param {number} startY - The starting Y coordinate.
|
|
442
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
443
|
+
* @param {Event} moveEvent - The event object.
|
|
444
|
+
*/
|
|
445
|
+
_onPortMouseMove($ghostPort, $ghostLine, startX, startY, oNode, moveEvent) {
|
|
446
|
+
// Center the ghost port on the cursor by offsetting by half its dimensions
|
|
447
|
+
var ghostPortWidth = 10; // Default port width
|
|
448
|
+
var ghostPortHeight = 10; // Default port height
|
|
449
|
+
$ghostPort.css({
|
|
450
|
+
left: (moveEvent.clientX - ghostPortWidth / 2) + "px",
|
|
451
|
+
top: (moveEvent.clientY - ghostPortHeight / 2) + "px"
|
|
452
|
+
});
|
|
453
|
+
var length = Math.sqrt(Math.pow(moveEvent.clientX - startX, 2) + Math.pow(moveEvent.clientY - startY, 2));
|
|
454
|
+
var angle = Math.atan2(moveEvent.clientY - startY, moveEvent.clientX - startX) * 180 / Math.PI;
|
|
455
|
+
$ghostLine.css({
|
|
456
|
+
width: length + "px",
|
|
457
|
+
left: startX + "px",
|
|
458
|
+
top: startY + "px",
|
|
459
|
+
transform: `rotate(${angle}deg)`,
|
|
460
|
+
transformOrigin: "0 0"
|
|
461
|
+
});
|
|
462
|
+
// Add inlet ports to other nodes
|
|
463
|
+
this.addInletPortsToOtherNodes(oNode);
|
|
464
|
+
}
|
|
465
|
+
/**
|
|
466
|
+
* Handles the mouseup event for a port.
|
|
467
|
+
* @param {jQuery} $ghostPort - The ghost port element.
|
|
468
|
+
* @param {jQuery} $ghostLine - The ghost line element.
|
|
469
|
+
* @param {jQuery} $port - The port element.
|
|
470
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
471
|
+
* @param {Event} mouseUpEvent - The event object.
|
|
472
|
+
*/
|
|
473
|
+
_onPortMouseUp($ghostPort, $ghostLine, $port, oNode, mouseUpEvent) {
|
|
474
|
+
jQuery(document).off("mousemove");
|
|
475
|
+
jQuery(document).off("mouseup");
|
|
476
|
+
$ghostPort.remove();
|
|
477
|
+
$ghostLine.remove();
|
|
478
|
+
const target = mouseUpEvent?.target?.closest('.sapSuiteUiCommonsNetworkNodeInletPort');
|
|
479
|
+
if (target) {
|
|
480
|
+
// get the source node and target node
|
|
481
|
+
const sourceNode = oNode;
|
|
482
|
+
const targetNode = sourceNode?.getParent()?.getNodeByKey(target.dataset.nodeKey);
|
|
483
|
+
// Get the source and target port sides
|
|
484
|
+
const sourcePortSide = $port.data("portSide");
|
|
485
|
+
const targetPortSide = target.dataset.portSide;
|
|
486
|
+
// Check if the target node is valid
|
|
487
|
+
if (targetNode) {
|
|
488
|
+
const mParameters = {
|
|
489
|
+
from: sourceNode.getKey(),
|
|
490
|
+
to: targetNode.getKey(),
|
|
491
|
+
connectionType: this._getConnectionType(sourcePortSide, targetPortSide),
|
|
492
|
+
fromNode: sourceNode,
|
|
493
|
+
toNode: targetNode
|
|
494
|
+
};
|
|
495
|
+
// Fire the connectionCreated event
|
|
496
|
+
sourceNode.getParent().fireConnectionCreated(mParameters);
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
// Remove inlet ports from other nodes
|
|
500
|
+
this.removeInletPortsFromOtherNodes();
|
|
501
|
+
}
|
|
502
|
+
/**
|
|
503
|
+
* Navigates to a port based on direction when Space + Arrow is pressed on a node.
|
|
504
|
+
* @param {sap.suite.ui.commons.networkgraph.Node} oNode - The node instance.
|
|
505
|
+
* @param {string} sDirection - The direction (left, right, up, down).
|
|
506
|
+
* @returns {boolean} True if navigation was successful, false otherwise.
|
|
507
|
+
*/
|
|
508
|
+
navigateToPortFromNode(oNode, sDirection) {
|
|
509
|
+
// Check if this node has trigger ports
|
|
510
|
+
if (this._currentTriggerNodeKey !== oNode.getKey()) {
|
|
511
|
+
return false;
|
|
512
|
+
}
|
|
513
|
+
// Map direction to port side
|
|
514
|
+
var sPortSide;
|
|
515
|
+
switch (sDirection) {
|
|
516
|
+
case "left":
|
|
517
|
+
sPortSide = "left";
|
|
518
|
+
break;
|
|
519
|
+
case "right":
|
|
520
|
+
sPortSide = "right";
|
|
521
|
+
break;
|
|
522
|
+
case "up":
|
|
523
|
+
sPortSide = "top";
|
|
524
|
+
break;
|
|
525
|
+
case "down":
|
|
526
|
+
sPortSide = "bottom";
|
|
527
|
+
break;
|
|
528
|
+
default:
|
|
529
|
+
return false;
|
|
530
|
+
}
|
|
531
|
+
// Find the port element
|
|
532
|
+
var $port = oNode.$().find('.sapSuiteUiCommonsNetworkNodeTriggerPort[data-port-side="' + sPortSide + '"]');
|
|
533
|
+
if ($port.length === 0) {
|
|
534
|
+
return false;
|
|
535
|
+
}
|
|
536
|
+
// Focus the port (Graph focus already cleared by KeyboardNavigator)
|
|
537
|
+
$port.focus();
|
|
538
|
+
return true;
|
|
539
|
+
}
|
|
540
|
+
/**
|
|
541
|
+
* Clears the current trigger node tracking.
|
|
542
|
+
* This can be called when ports should no longer be restored.
|
|
543
|
+
*/
|
|
544
|
+
clearTriggerNodeTracking() {
|
|
545
|
+
this._currentTriggerNodeKey = null;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
_getConnectionType(sSourcePortSide, sTargetPortSide) {
|
|
549
|
+
if (sSourcePortSide === "left" && sTargetPortSide === "right") {
|
|
550
|
+
return PortManager._oConnectionType.LeftToRight;
|
|
551
|
+
} else if (sSourcePortSide === "right" && sTargetPortSide === "left") {
|
|
552
|
+
return PortManager._oConnectionType.RightToLeft;
|
|
553
|
+
} else if (sSourcePortSide === "left" && sTargetPortSide === "left") {
|
|
554
|
+
return PortManager._oConnectionType.LeftToLeft;
|
|
555
|
+
} else if (sSourcePortSide === "right" && sTargetPortSide === "right") {
|
|
556
|
+
return PortManager._oConnectionType.RightToRight;
|
|
557
|
+
}
|
|
558
|
+
return PortManager._oConnectionType.RightToLeft; // Default case
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
_removeAlltriggerPorts() {
|
|
562
|
+
jQuery(".sapSuiteUiCommonsNetworkNodePort").remove();
|
|
563
|
+
this._triggerPortNodeKeys.clear();
|
|
564
|
+
this.clearTriggerNodeTracking();
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
// Singleton instance
|
|
568
|
+
let portManagerInstance = null;
|
|
569
|
+
if (!portManagerInstance) {
|
|
570
|
+
portManagerInstance = new PortManager();
|
|
571
|
+
}
|
|
572
|
+
return portManagerInstance;
|
|
573
|
+
});
|