Skip to content

Commit 4bc1e78

Browse files
odeimaizodeimaiz
authored
Neuroman service (ITISFoundation#317)
* Neuroman service has "node-output-list-icon-api-v0.0.1" as default input, which is "node-output-list-api-v0.0.1" with a field for an icon path * Widgets created to support "node-output-list-icon-api-v0.0.1" (NodeOutputListItem and NodeOutputListItemIcon) * Converter added for "fromAPIListToVirtualListModel" * Showing "Loading OSparc..." website while service is started, then points to the proper url * Drag&Drop mechanism for Form improved * Some clean up
1 parent 63e662c commit 4bc1e78

File tree

18 files changed

+349
-261
lines changed

18 files changed

+349
-261
lines changed

‎services/web/client/source/class/qxapp/component/form/renderer/PropForm.js

+50-20
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
2121
*
2222
* @param vizWidget {Widget} visualization widget to embedd
2323
*/
24-
construct: function(form) {
24+
construct: function(form, nodeModel) {
25+
if (nodeModel) {
26+
this.setNodeModel(nodeModel);
27+
}
28+
2529
this.base(arguments, form);
2630
let fl = this._getLayout();
2731
// have plenty of space for input, not for the labels
@@ -32,11 +36,15 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
3236
},
3337

3438
events: {
35-
"PortDragOver": "qx.event.type.Data",
36-
"PortDrop": "qx.event.type.Data",
3739
"RemoveLink" : "qx.event.type.Data"
3840
},
3941

42+
properties: {
43+
nodeModel: {
44+
check: "qxapp.data.model.NodeModel"
45+
}
46+
},
47+
4048
members: {
4149
addItems: function(items, names, title, itemOptions, headerOptions) {
4250
// add the header
@@ -74,10 +82,8 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
7482
item: items[i]
7583
});
7684
}
77-
label.setDroppable(true);
78-
item.setDroppable(true);
79-
this.__createUIPortConnections(label, item.key);
80-
this.__createUIPortConnections(item, item.key);
85+
this.__createDropMechanism(label, item.key);
86+
this.__createDropMechanism(item, item.key);
8187
}
8288
},
8389

@@ -139,20 +145,44 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
139145
}
140146
},
141147

142-
__createUIPortConnections: function(uiElement, portId) {
143-
[
144-
["dragover", "PortDragOver"],
145-
["drop", "PortDrop"]
146-
].forEach(eventPair => {
147-
uiElement.addListener(eventPair[0], e => {
148-
const eData = {
149-
event: e,
150-
// nodeId: nodeId,
151-
portId: portId
152-
};
153-
this.fireDataEvent(eventPair[1], eData);
148+
__arePortsCompatible: function(node1, port1, node2, port2) {
149+
return qxapp.data.Store.getInstance().arePortsCompatible(node1, port1, node2, port2);
150+
},
151+
152+
__createDropMechanism: function(uiElement, portId) {
153+
if (this.isPropertyInitialized("nodeModel")) {
154+
uiElement.setDroppable(true);
155+
uiElement.nodeId = this.getNodeModel().getNodeId();
156+
uiElement.portId = portId;
157+
158+
uiElement.addListener("dragover", e => {
159+
let compatible = false;
160+
if (e.supportsType("osparc-port-link")) {
161+
const from = e.getRelatedTarget();
162+
let dragNodeId = from.nodeId;
163+
let dragPortId = from.portId;
164+
const to = e.getCurrentTarget();
165+
let dropNodeId = to.nodeId;
166+
let dropPortId = to.portId;
167+
compatible = this.__arePortsCompatible(dragNodeId, dragPortId, dropNodeId, dropPortId);
168+
}
169+
if (!compatible) {
170+
e.preventDefault();
171+
}
154172
}, this);
155-
}, this);
173+
174+
uiElement.addListener("drop", e => {
175+
if (e.supportsType("osparc-port-link")) {
176+
const from = e.getRelatedTarget();
177+
let dragNodeId = from.nodeId;
178+
let dragPortId = from.portId;
179+
const to = e.getCurrentTarget();
180+
// let dropNodeId = to.nodeId;
181+
let dropPortId = to.portId;
182+
this.getNodeModel().addPortLink(dropPortId, dragNodeId, dragPortId);
183+
}
184+
}, this);
185+
}
156186
}
157187
}
158188
});

‎services/web/client/source/class/qxapp/component/widget/NodePorts.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,6 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
5050
}
5151
},
5252

53-
events: {
54-
"PortDragStart": "qx.event.type.Data"
55-
},
56-
5753
members: {
5854
__inputPort: null,
5955
__outputPort: null,
@@ -100,6 +96,11 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
10096
widget = nodeOutputList.getOutputWidget();
10197
break;
10298
}
99+
case "node-output-list-icon-api-v0.0.1": {
100+
let nodeOutputList = new qxapp.component.widget.inputs.NodeOutputListIcon(this.getNodeModel(), port, portKey);
101+
widget = nodeOutputList.getOutputWidget();
102+
break;
103+
}
103104
}
104105
if (widget !== null) {
105106
this._add(widget, {
@@ -109,9 +110,6 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
109110
} else {
110111
let nodeOutputLabel = new qxapp.component.widget.inputs.NodeOutputLabel(this.getNodeModel(), port, portKey);
111112
let widget = nodeOutputLabel.getOutputWidget();
112-
nodeOutputLabel.addListener("PortDragStart", e => {
113-
this.fireDataEvent("PortDragStart", e.getData());
114-
}, this);
115113
this._add(widget);
116114
let label = {
117115
isInput: isInput,

‎services/web/client/source/class/qxapp/component/widget/NodeView.js

+1-59
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ qx.Class.define("qxapp.component.widget.NodeView", {
4949
flex: 1
5050
});
5151

52-
this.__settingsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
52+
this.__settingsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
5353
this.__mapperLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
5454
this.__iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
5555
this.__initButtons();
@@ -116,62 +116,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
116116
buttonsLayout.add(openFolder);
117117
},
118118

119-
__arePortsCompatible: function(node1, port1, node2, port2) {
120-
return qxapp.data.Store.getInstance().arePortsCompatible(node1, port1, node2, port2);
121-
},
122-
123-
__createDragDropMechanism: function(portUI) {
124-
portUI.addListener("PortDragStart", e => {
125-
let data = e.getData();
126-
let event = data.event;
127-
let dragNodeId = data.nodeId;
128-
let dragPortId = data.portId;
129-
130-
// Register supported actions
131-
event.addAction("copy");
132-
133-
// Register supported types
134-
event.addType("osparc-port-link");
135-
let dragData = {
136-
dragNodeId: dragNodeId,
137-
dragPortId: dragPortId
138-
};
139-
event.addData("osparc-port-link", dragData);
140-
}, this);
141-
142-
portUI.addListener("PortDragOver", e => {
143-
let data = e.getData();
144-
let event = data.event;
145-
// let dropNodeId = data.nodeId;
146-
let dropNodeId = this.getNodeModel().getNodeId();
147-
let dropPortId = data.portId;
148-
149-
let compatible = false;
150-
if (event.supportsType("osparc-port-link")) {
151-
const dragNodeId = event.getData("osparc-port-link").dragNodeId;
152-
const dragPortId = event.getData("osparc-port-link").dragPortId;
153-
compatible = this.__arePortsCompatible(dragNodeId, dragPortId, dropNodeId, dropPortId);
154-
}
155-
156-
if (!compatible) {
157-
event.preventDefault();
158-
}
159-
}, this);
160-
161-
portUI.addListener("PortDrop", e => {
162-
let data = e.getData();
163-
let event = data.event;
164-
// let dropNodeId = data.nodeId;
165-
let dropPortId = data.portId;
166-
167-
if (event.supportsType("osparc-port-link")) {
168-
let dragNodeId = event.getData("osparc-port-link").dragNodeId;
169-
let dragPortId = event.getData("osparc-port-link").dragPortId;
170-
this.getNodeModel().addPortLink(dropPortId, dragNodeId, dragPortId);
171-
}
172-
}, this);
173-
},
174-
175119
__createInputPortsUI: function(inputNodeModel, isInputModel = true) {
176120
let nodePorts = null;
177121
if (isInputModel) {
@@ -180,7 +124,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
180124
nodePorts = inputNodeModel.getInputsDefaultWidget();
181125
}
182126
if (nodePorts) {
183-
this.__createDragDropMechanism(nodePorts);
184127
this.__inputNodesLayout.add(nodePorts, {
185128
flex: 1
186129
});
@@ -237,7 +180,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
237180

238181
this.__settingsLayout.add(titleBox);
239182
this.__settingsLayout.add(propsWidget);
240-
this.__createDragDropMechanism(propsWidget);
241183

242184
this.__mainLayout.add(this.__settingsLayout);
243185
} else if (qx.ui.core.Widget.contains(this.__mainLayout, this.__settingsLayout)) {

‎services/web/client/source/class/qxapp/component/widget/WidgetManager.js

-16
This file was deleted.

‎services/web/client/source/class/qxapp/component/widget/inputs/NodeOutputLabel.js

+11-18
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,13 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputLabel", {
88

99
let toolTip = new qx.ui.tooltip.ToolTip(port.description);
1010
let portLabel = this.__portLabel = new qx.ui.basic.Label(port.label).set({
11-
draggable: true,
1211
toolTip: toolTip,
1312
textAlign: "right",
1413
allowGrowX: true,
1514
paddingRight: 20
1615
});
1716

18-
this.__createUIPortConnections(portLabel, portKey);
17+
this.__createDragMechanism(portLabel, portKey);
1918
},
2019

2120
properties: {
@@ -25,25 +24,19 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputLabel", {
2524
}
2625
},
2726

28-
events: {
29-
"PortDragStart": "qx.event.type.Data"
30-
},
31-
3227
members: {
3328
__portLabel: null,
3429

35-
__createUIPortConnections: function(uiPort, portId) {
36-
[
37-
["dragstart", "PortDragStart"]
38-
].forEach(eventPair => {
39-
uiPort.addListener(eventPair[0], e => {
40-
const eData = {
41-
event: e,
42-
nodeId: this.getNodeModel().getNodeId(),
43-
portId: portId
44-
};
45-
this.fireDataEvent(eventPair[1], eData);
46-
}, this);
30+
__createDragMechanism: function(uiPort, portKey) {
31+
uiPort.setDraggable(true);
32+
uiPort.nodeId = this.getNodeModel().getNodeId();
33+
uiPort.portId = portKey;
34+
35+
uiPort.addListener("dragstart", e => {
36+
// Register supported actions
37+
e.addAction("copy");
38+
// Register supported types
39+
e.addType("osparc-port-link");
4740
}, this);
4841
},
4942

‎services/web/client/source/class/qxapp/component/widget/inputs/NodeOutputListIcon.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
qx.Class.define("qxapp.component.widget.inputs.NodeOutputListIcon", {
2+
extend: qx.ui.core.Widget,
3+
4+
construct: function(nodeModel, port, portKey) {
5+
this.base();
6+
7+
this.setNodeModel(nodeModel);
8+
9+
let list = this.__list = new qx.ui.list.List().set({
10+
labelPath: "label",
11+
iconPath: "icon"
12+
});
13+
14+
let that = this;
15+
list.setDelegate({
16+
createItem: () => new qxapp.component.widget.inputs.NodeOutputListItemIcon(),
17+
bindItem: (c, item, id) => {
18+
c.bindDefaultProperties(item, id);
19+
c.bindProperty("key", "model", null, item, id);
20+
c.bindProperty("thumbnail", "icon", null, item, id);
21+
c.bindProperty("label", "label", {
22+
converter: function(data, model, source, target) {
23+
// return "<b>" + data + "</b>";
24+
return data;
25+
}
26+
}, item, id);
27+
},
28+
configureItem: item => {
29+
let icon = item.getChildControl("icon");
30+
icon.set({
31+
scale: true,
32+
width: 246,
33+
height: 144
34+
});
35+
that.__createDragMechanism(item); // eslint-disable-line no-underscore-dangle
36+
}
37+
});
38+
39+
const itemList = qxapp.data.Store.getInstance().getItemList(nodeModel.getNodeId(), portKey);
40+
const listModel = qxapp.data.Converters.fromAPIListToVirtualListModel(itemList);
41+
let model = qx.data.marshal.Json.createModel(listModel, true);
42+
list.setModel(model);
43+
},
44+
45+
properties: {
46+
nodeModel: {
47+
check: "qxapp.data.model.NodeModel",
48+
nullable: false
49+
}
50+
},
51+
52+
members: {
53+
__list: null,
54+
55+
__createDragMechanism: function(item) {
56+
item.setDraggable(true);
57+
item.addListener("dragstart", e => {
58+
// Register supported actions
59+
e.addAction("copy");
60+
61+
// HACK
62+
if (this.getNodeModel().getKey() === "services/demodec/dynamic/itis/s4l/Neuroman") {
63+
// Register supported types
64+
e.addType("osparc-port-link");
65+
item.nodeId = this.getNodeModel().getNodeId();
66+
item.portId = item.getLabel();
67+
} else {
68+
// Register supported types
69+
e.addType("osparc-mapping");
70+
}
71+
}, this);
72+
},
73+
74+
getOutputWidget: function() {
75+
return this.__list;
76+
}
77+
}
78+
});

0 commit comments

Comments
 (0)