Skip to content

Commit 74f158c

Browse files
odeimaizodeimaiz
authored
Context to the Wheel (#2995)
1 parent b040abf commit 74f158c

File tree

11 files changed

+162
-82
lines changed

11 files changed

+162
-82
lines changed

‎services/web/client/source/class/osparc/component/widget/NodeTreeItem.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
202202
label: this.tr("Rename"),
203203
icon: "@FontAwesome5Solid/i-cursor/10"
204204
});
205+
control.getChildControl("shortcut").setValue("F2");
205206
control.addListener("execute", () => this.fireDataEvent("renameNode", this.getId()));
206207
const optionsMenu = this.getChildControl("options-menu-button");
207208
optionsMenu.getMenu().add(control);
@@ -212,13 +213,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
212213
icon: "@FontAwesome5Solid/bookmark/10",
213214
visibility: "excluded"
214215
});
215-
control.addListener("execute", () => {
216-
if (this.getNode().getMarker()) {
217-
this.getNode().removeMarker();
218-
} else {
219-
this.getNode().addMarker();
220-
}
221-
});
216+
control.addListener("execute", () => this.getNode().toggleMarker());
222217
const optionsMenu = this.getChildControl("options-menu-button");
223218
optionsMenu.getMenu().add(control);
224219
break;
@@ -228,6 +223,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
228223
label: this.tr("Information..."),
229224
icon: "@FontAwesome5Solid/info/10"
230225
});
226+
control.getChildControl("shortcut").setValue("I");
231227
control.addListener("execute", () => this.fireDataEvent("infoNode", this.getId()));
232228
const optionsMenu = this.getChildControl("options-menu-button");
233229
optionsMenu.getMenu().add(control);
@@ -238,6 +234,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
238234
label: this.tr("Delete"),
239235
icon: "@FontAwesome5Solid/trash/10"
240236
});
237+
control.getChildControl("shortcut").setValue("Del");
241238
control.addListener("execute", () => this.fireDataEvent("deleteNode", this.getId()));
242239
const optionsMenu = this.getChildControl("options-menu-button");
243240
optionsMenu.getMenu().add(control);

‎services/web/client/source/class/osparc/component/workbench/BaseNodeUI.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
145145
label: this.tr("Rename"),
146146
icon: "@FontAwesome5Solid/i-cursor/10"
147147
});
148+
renameBtn.getChildControl("shortcut").setValue("F2");
148149
renameBtn.addListener("execute", () => this.fireDataEvent("renameNode", this.getNodeId()));
149150
optionsMenu.add(renameBtn);
150151

@@ -158,13 +159,15 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
158159
label: this.tr("Information..."),
159160
icon: "@FontAwesome5Solid/info/10"
160161
});
162+
infoBtn.getChildControl("shortcut").setValue("I");
161163
infoBtn.addListener("execute", () => this.fireDataEvent("infoNode", this.getNodeId()));
162164
optionsMenu.add(infoBtn);
163165

164166
const deleteBtn = new qx.ui.menu.Button().set({
165167
label: this.tr("Delete"),
166168
icon: "@FontAwesome5Solid/trash/10"
167169
});
170+
deleteBtn.getChildControl("shortcut").setValue("Del");
168171
deleteBtn.addListener("execute", () => this.fireDataEvent("removeNode", this.getNodeId()));
169172
optionsMenu.add(deleteBtn);
170173

‎services/web/client/source/class/osparc/component/workbench/NodeUI.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -231,13 +231,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
231231
this.getNode().bind("marker", this._markerBtn, "label", {
232232
converter: val => val ? this.tr("Remove Marker") : this.tr("Add Marker")
233233
});
234-
this._markerBtn.addListener("execute", () => {
235-
if (this.getNode().getMarker()) {
236-
this.getNode().removeMarker();
237-
} else {
238-
this.getNode().addMarker();
239-
}
240-
});
234+
this._markerBtn.addListener("execute", () => this.getNode().toggleMarker());
241235

242236
const marker = this.getChildControl("marker");
243237
const updateMarker = () => {

‎services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js

Lines changed: 119 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,25 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
370370
return bounds;
371371
},
372372

373+
__cursorOnNodeUI: function(pos) {
374+
if (this.__nodesUI.length === 0) {
375+
return null;
376+
}
377+
let onNodeUI = null;
378+
this.__nodesUI.forEach(nodeUI => {
379+
const nBounds = nodeUI.getBounds();
380+
console.log();
381+
if (onNodeUI === null &&
382+
pos.x > nBounds.left &&
383+
pos.x < nBounds.left + nBounds.width &&
384+
pos.y > nBounds.top &&
385+
pos.y < nBounds.top + nBounds.height) {
386+
onNodeUI = nodeUI;
387+
}
388+
});
389+
return onNodeUI;
390+
},
391+
373392
_addNodeUIToWorkbench: function(nodeUI, position) {
374393
if (position === undefined || !("x" in position) || isNaN(position["x"]) || position["x"] < 0) {
375394
position = {
@@ -1280,32 +1299,97 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
12801299
},
12811300

12821301
__doOpenContextMenu: function(e) {
1302+
const wbPos = this.__pointerEventToWorkbenchPos(e);
1303+
const nodeUI = this.__cursorOnNodeUI(wbPos);
1304+
const actions = {
1305+
addService: {
1306+
"text": "\uf067", // plus
1307+
"action": () => this.__openServiceCatalog(e)
1308+
},
1309+
zoomIn: {
1310+
"text": "\uf00e", // search-plus
1311+
"action": () => {
1312+
this.__pointerPos = this.__pointerEventToWorkbenchPos(e);
1313+
this.zoom(true);
1314+
}
1315+
},
1316+
zoomReset: {
1317+
"text": "\uf002", // search
1318+
"action": () => this.setScale(1)
1319+
},
1320+
zoomOut: {
1321+
"text": "\uf010", // search-minus
1322+
"action": () => {
1323+
this.__pointerPos = this.__pointerEventToWorkbenchPos(e);
1324+
this.zoom(false);
1325+
}
1326+
},
1327+
drawText: {
1328+
"text": "\uf040", // pencil
1329+
"action": () => this.startAnnotationsText()
1330+
},
1331+
drawRect: {
1332+
"text": "\uf044", // brush with rect
1333+
"action": () => this.startAnnotationsRect()
1334+
},
1335+
removeNode: {
1336+
"text": "\uf014", // trash
1337+
"action": () => nodeUI.fireDataEvent("removeNode", nodeUI.getNodeId())
1338+
},
1339+
addRemoveMarker: {
1340+
"text": "\uf097", // marker
1341+
"action": () => nodeUI.getNode().toggleMarker()
1342+
},
1343+
addServiceInput: {
1344+
"text": "\uf090", // in
1345+
"action": () => {
1346+
const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), true);
1347+
const srvCat = this.openServiceCatalog({
1348+
x: 50,
1349+
y: 50
1350+
}, freePos);
1351+
srvCat.setContext(null, nodeUI.getNodeId());
1352+
}
1353+
},
1354+
addServiceOutput: {
1355+
"text": "\uf08b", // out
1356+
"action": () => {
1357+
const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), false);
1358+
const srvCat = this.openServiceCatalog({
1359+
x: 50,
1360+
y: 50
1361+
}, freePos);
1362+
srvCat.setContext(nodeUI.getNodeId(), null);
1363+
}
1364+
},
1365+
noAction: {
1366+
"text": "\uf05e", // verboten
1367+
"action": () => {}
1368+
}
1369+
};
1370+
let buttons = null;
1371+
if (nodeUI) {
1372+
const node = nodeUI.getNode();
1373+
buttons = [
1374+
actions.addRemoveMarker,
1375+
node.hasOutputs() ? actions.addServiceOutput : actions.noAction,
1376+
actions.removeNode,
1377+
node.hasInputs() ? actions.addServiceInput : actions.noAction
1378+
];
1379+
} else {
1380+
buttons = [
1381+
actions.addService,
1382+
actions.drawText,
1383+
actions.drawRect
1384+
];
1385+
}
1386+
this.__buttonsToContextMenu(e, buttons);
1387+
},
1388+
1389+
__buttonsToContextMenu: function(e, buttons) {
12831390
if (this.__contextMenu) {
12841391
this.__contextMenu.hide();
12851392
}
1286-
const buttons = [{
1287-
"text": "\uf067", // plus
1288-
"action": () => {
1289-
this.__openServiceCatalog(e);
1290-
}
1291-
}, {
1292-
"text": "\uf00e", // search-plus
1293-
"action": () => {
1294-
this.__pointerPos = this.__pointerEventToWorkbenchPos(e);
1295-
this.zoom(true);
1296-
}
1297-
}, {
1298-
"text": "\uf002", // search
1299-
"action": () => {
1300-
this.setScale(1);
1301-
}
1302-
}, {
1303-
"text": "\uf010", // search-minus
1304-
"action": () => {
1305-
this.__pointerPos = this.__pointerEventToWorkbenchPos(e);
1306-
this.zoom(false);
1307-
}
1308-
}];
13091393
let rotation = 3 * Math.PI / 2;
13101394
rotation -= (2/buttons.length) * (Math.PI / 2);
13111395
const radialMenuWrapper = osparc.wrapper.RadialMenu.getInstance();
@@ -1370,12 +1454,13 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
13701454
this.__annotationInitPos = null;
13711455
}
13721456
if (this.__annotatingRect || this.__annotatingText) {
1373-
this.__consolidateAnnotation(this.__rectAnnotationRepr, this.__annotatingRect ? "rect" : "text");
1374-
osparc.wrapper.Svg.removeItem(this.__rectAnnotationRepr);
1375-
this.__rectAnnotationRepr = null;
1376-
this.__annotatingRect = false;
1377-
this.__annotatingText = false;
1378-
this.__toolHint.setValue(null);
1457+
if (this.__consolidateAnnotation(this.__rectAnnotationRepr, this.__annotatingRect ? "rect" : "text")) {
1458+
osparc.wrapper.Svg.removeItem(this.__rectAnnotationRepr);
1459+
this.__rectAnnotationRepr = null;
1460+
this.__annotatingRect = false;
1461+
this.__annotatingText = false;
1462+
this.__toolHint.setValue(null);
1463+
}
13791464
}
13801465

13811466
if (this.__panning) {
@@ -1809,6 +1894,10 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
18091894
},
18101895

18111896
__consolidateAnnotation: function(annotation, type) {
1897+
if ([null, undefined].includes(annotation)) {
1898+
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("Draw a rectanlge first"), "WARNING");
1899+
return false;
1900+
}
18121901
const serializeData = {
18131902
type,
18141903
attributes: osparc.wrapper.Svg.getRectAttributes(annotation)
@@ -1827,6 +1916,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
18271916
titleEditor.center();
18281917
titleEditor.open();
18291918
}
1919+
return true;
18301920
},
18311921

18321922
__addAnnotation: function(data, id) {

‎services/web/client/source/class/osparc/dashboard/ResourceBrowserBase.js

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
3636

3737
this._showLoadingPage(this.tr("Starting..."));
3838

39-
this.addListener("appear", () => {
40-
this._moreResourcesRequired();
41-
});
39+
this.addListener("appear", () => this._moreResourcesRequired());
4240
},
4341

4442
events: {
@@ -85,17 +83,14 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
8583
_createChildControlImpl: function(id) {
8684
let control;
8785
switch (id) {
88-
case "scroll-container":
89-
control = new qx.ui.container.Scroll();
90-
this._add(control, {
91-
flex: 1
92-
});
93-
control.getChildControl("pane").addListener("scrollY", () => this._moreResourcesRequired(), this);
94-
break;
9586
case "resources-layout": {
96-
const scroll = this.getChildControl("scroll-container");
87+
const scroll = new qx.ui.container.Scroll();
88+
scroll.getChildControl("pane").addListener("scrollY", () => this._moreResourcesRequired(), this);
9789
control = this._createLayout();
9890
scroll.add(control);
91+
this._add(scroll, {
92+
flex: 1
93+
});
9994
break;
10095
}
10196
}
@@ -115,23 +110,15 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
115110
},
116111

117112
_createResourcesLayout: function(resourceType) {
118-
const resourcesLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
119-
120113
const topBar = this.__createTopBar(resourceType);
121-
resourcesLayout.add(topBar);
114+
this._add(topBar);
122115

123116
const secondaryBar = this._secondaryBar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
124-
resourcesLayout.add(secondaryBar);
125-
126-
const resourcesContainer = this._resourcesContainer = this.__createResourcesContainer();
127-
resourcesLayout.add(resourcesContainer);
128-
129-
return resourcesLayout;
130-
},
117+
this._add(secondaryBar);
131118

132-
__createResourcesContainer: function() {
133119
const spacing = osparc.dashboard.GridButtonBase.SPACING;
134-
return new osparc.component.form.ToggleButtonContainer(new qx.ui.layout.Flow(spacing, spacing));
120+
const resourcesContainer = this._resourcesContainer = new osparc.component.form.ToggleButtonContainer(new qx.ui.layout.Flow(spacing, spacing));
121+
this._add(resourcesContainer);
135122
},
136123

137124
__createTopBar: function(resourceType) {

‎services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,15 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
8484
},
8585

8686
_createLayout: function() {
87-
const servicesLayout = this._createResourcesLayout("service");
87+
this._createResourcesLayout("service");
8888

8989
this.__addNewServiceButtons();
9090

9191
osparc.utils.Utils.setIdToWidget(this._resourcesContainer, "servicesList");
9292

9393
this._resourcesContainer.addListener("changeMode", () => this._resetResourcesList());
9494

95-
return servicesLayout;
95+
return this._resourcesContainer;
9696
},
9797

9898
_createStudyFromService: function(key, version) {

‎services/web/client/source/class/osparc/dashboard/StudyBrowser.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
137137
},
138138

139139
_createLayout: function() {
140-
const studiesLayout = this._createResourcesLayout("study");
140+
this._createResourcesLayout("study");
141141

142142
const importStudyButton = this.__createImportButton();
143143
this._secondaryBar.add(importStudyButton);
@@ -211,7 +211,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
211211
});
212212
}, this);
213213

214-
return studiesLayout;
214+
return this._resourcesContainer;
215215
},
216216

217217
__createImportButton: function() {
@@ -424,6 +424,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
424424
return;
425425
}
426426
const studyItem = this.__createStudyItem(study);
427+
studyItem.setMultiSelectionMode(this.getMultiSelection());
427428
this._resourcesContainer.add(studyItem);
428429
});
429430
osparc.dashboard.ResourceBrowserBase.sortStudyList(studyList.filter(card => osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card)));

‎services/web/client/source/class/osparc/dashboard/TemplateBrowser.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
4949
},
5050

5151
_createLayout: function() {
52-
const templatesLayout = this._createResourcesLayout("template");
53-
52+
this._createResourcesLayout("template");
5453
osparc.utils.Utils.setIdToWidget(this._resourcesContainer, "templatesList");
5554

5655
const loadingTemplatesBtn = this._createLoadMoreButton("templatesLoading");
@@ -59,7 +58,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
5958
this._resourcesContainer.addListener("changeVisibility", () => this._moreResourcesRequired());
6059
this._resourcesContainer.addListener("changeMode", () => this._resetResourcesList());
6160

62-
return templatesLayout;
61+
return this._resourcesContainer;
6362
},
6463

6564
__startStudy: function(studyId, templateData) {

0 commit comments

Comments
 (0)