Skip to content

Commit

Permalink
UI/UX empty File Picker (#2648)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Nov 23, 2021
1 parent 01106aa commit 0b3eb3a
Show file tree
Hide file tree
Showing 9 changed files with 498 additions and 103 deletions.
8 changes: 4 additions & 4 deletions services/web/client/source/class/osparc/component/editor/ClusterEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,9 @@ qx.Class.define("osparc.component.editor.ClusterEditor", {
control = new qx.ui.form.TextField().set({
font: "text-14",
backgroundColor: "background-main",
placeholder: this.tr("Username"),
height: 35
placeholder: this.tr("Username")
});
control.getContentElement().setAttribute("autocomplete", "off");
this.bind("simpleAuthenticationUsername", control, "value");
control.bind("value", this, "simpleAuthenticationUsername");
control.setRequired(true);
Expand All @@ -135,9 +135,9 @@ qx.Class.define("osparc.component.editor.ClusterEditor", {
control = new qx.ui.form.PasswordField().set({
font: "text-14",
backgroundColor: "background-main",
placeholder: this.tr("Password"),
height: 35
placeholder: this.tr("Password")
});
control.getContentElement().setAttribute("autocomplete", "off");
this.bind("simpleAuthenticationPassword", control, "value");
control.bind("value", this, "simpleAuthenticationPassword");
control.setRequired(true);
Expand Down
2 changes: 1 addition & 1 deletion services/web/client/source/class/osparc/component/workbench/SvgWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ qx.Class.define("osparc.component.workbench.SvgWidget", {
return osparc.wrapper.Svg.drawCurve(this.__canvas, controls, dashed);
},

drawDashedRect: function(width, height, x, y) {
drawDashedRect: function(width, height, x = 0, y = 0) {
return osparc.wrapper.Svg.drawDashedRect(this.__canvas, width, height, x, y);
}
}
Expand Down
171 changes: 100 additions & 71 deletions services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,10 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
__pointerPos: null,
__selectedItemId: null,
__startHint: null,
__dropHint: null,
__dropMe: null,
__panning: null,
__draggingFile: null,
__isDraggingFile: null,
__isDraggingLink: null,

__applyStudy: function(study) {
study.getWorkbench().addListener("reloadModel", () => {
Expand Down Expand Up @@ -828,11 +829,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
};
},

__pointerEventToWorkbenchPos: function(e) {
const {
x,
y
} = this.__pointerEventToScreenPos(e);
__screenToToWorkbenchPos: function(x, y) {
const scaledPos = this.__scaleCoordinates(x, y);
const scrollX = this._workbenchLayoutScroll.getScrollX();
const scrollY = this._workbenchLayoutScroll.getScrollY();
Expand All @@ -843,6 +840,14 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
};
},

__pointerEventToWorkbenchPos: function(e) {
const {
x,
y
} = this.__pointerEventToScreenPos(e);
return this.__screenToToWorkbenchPos(x, y);
},

__updateTempEdge: function(e) {
let nodeUI = null;
if (this.__tempEdgeNodeId !== null) {
Expand Down Expand Up @@ -1175,16 +1180,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
contextMenu.addButtons(buttons);
contextMenu.setPos(e.getDocumentLeft() - contextMenu.w2, e.getDocumentTop() - contextMenu.h2);
contextMenu.show();
/*
const tapListener = ev => {
if (osparc.utils.Utils.isMouseOnElement(contextMenu, ev)) {
return;
}
contextMenu.hide();
document.removeEventListener("mousedown", tapListener);
};
document.addEventListener("mousedown", tapListener);
*/
},

__mouseDown: function(e) {
Expand All @@ -1210,17 +1205,19 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
this.set({
cursor: "move"
});
} else if (this.__draggingFile) {
this.__dragging(e, true);
} else if (this.__isDraggingLink) {
this.__draggingLink(e, true);
}
},

__mouseUp: function() {
__mouseUp: function(e) {
if (this.__panning) {
this.__panning = false;
this.set({
cursor: "auto"
});
} else if (this.__isDraggingLink) {
this.__dropLink(e);
}
},

Expand Down Expand Up @@ -1440,25 +1437,22 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
].forEach(signalName => {
domEl.addEventListener(signalName, e => {
const dragging = signalName !== "dragleave";
this.__dragging(e, dragging);
this.__draggingFile(e, dragging);
}, this);
});
domEl.addEventListener("drop", this.__drop.bind(this), false);
domEl.addEventListener("drop", this.__dropFile.bind(this), false);

this.setDroppable(true);
[
"dragover", // on target (pointer over)
"dragleave" // on target (pointer out)
].forEach(signalName => {
this.addListener(signalName, e => {
const dragging = signalName !== "dragleave";
if (dragging === false) {
this.__draggingFile = dragging;
}
this.__dragging(e, dragging);
}, this);
});
this.addListener("drop", this.__drop.bind(this), false);
const stopDragging = e => {
this.__isDraggingLink = null;
this.__updateWidgets(false);
};
const startDragging = e => {
this.addListenerOnce("dragleave", stopDragging, this);
this.addListenerOnce("dragover", startDragging, this);
this.__draggingLink(e, true);
};
this.addListenerOnce("dragover", startDragging, this);

this.addListener("mousewheel", this.__mouseWheel, this);
this.addListener("mousedown", this.__mouseDown, this);
Expand All @@ -1484,25 +1478,38 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
this.__workbenchLayout.addListener("resize", () => this.__updateHint(), this);
},

__allowDrag: function(e) {
__allowDragFile: function(e) {
let allow = false;
if (this.__draggingFile) {
if (this.__isDraggingFile) {
// item still being dragged
allow = true;
} else if ("supportsType" in e) {
// item drag from osparc's file tree
allow = e.supportsType("osparc-file-link");
this.__draggingFile = allow;
} else {
// item drag from the outside world
allow = e.target instanceof SVGElement;
this.__draggingFile = allow;
this.__isDraggingFile = allow;
}
return allow;
},

__allowDragLink: function(e) {
let allow = false;
if (this.__isDraggingLink) {
// item still being dragged
allow = true;
} else if ("supportsType" in e) {
// item drag from osparc's file tree
allow = e.supportsType("osparc-file-link");
if (allow) {
// store "osparc-file-link" data in variable,
// because the mousemove event doesn't contain that information
this.__isDraggingLink = e.getData("osparc-file-link");
}
}
return allow;
},

__dragging: function(e, dragging) {
if (this.__allowDrag(e)) {
__draggingFile: function(e, dragging) {
if (this.__allowDragFile(e)) {
e.preventDefault();
e.stopPropagation();
} else {
Expand All @@ -1512,45 +1519,61 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
if (!this.isPropertyInitialized("study") || this.getStudy().isReadOnly()) {
return;
}
let posX = 0;
let posY = 0;
if ("offsetX" in e && "offsetY" in e) {
posX = e.offsetX + 2;
posY = e.offsetY + 2;

const posX = e.offsetX + 2;
const posY = e.offsetY + 2;
this.__updateWidgets(dragging, posX, posY);
},

__draggingLink: function(e, dragging) {
if (this.__allowDragLink(e)) {
e.preventDefault();
e.stopPropagation();
} else {
const pos = this.__pointerEventToWorkbenchPos(e);
posX = pos.x;
posY = pos.y;
dragging = false;
}

if (this.__dropHint === null) {
const dropHint = this.__dropHint = new qx.ui.basic.Label(this.tr("Drop me")).set({
if (!this.isPropertyInitialized("study") || this.getStudy().isReadOnly()) {
return;
}

const pos = this.__pointerEventToWorkbenchPos(e);
this.__updateWidgets(dragging, pos.x, pos.y);
},

__updateWidgets: function(dragging, posX, posY) {
const boxWidth = 120;
const boxHeight = 60;
if (this.__dropMe === null) {
const dropHint = this.__dropMe = new qx.ui.basic.Label(this.tr("Drop me")).set({
font: "workbench-start-hint",
textColor: "workbench-start-hint"
});
dropHint.exclude();
this.__workbenchLayout.add(dropHint);
const nodeWidth = osparc.component.workbench.NodeUI.NODE_WIDTH;
const nodeHeight = osparc.component.workbench.NodeUI.NODE_HEIGHT;
dropHint.rect = this.__svgLayer.drawDashedRect(nodeWidth, nodeHeight, posX, posY);
dropHint.rect = this.__svgLayer.drawDashedRect(boxWidth, boxHeight);
}
const dropMe = this.__dropMe;
if (dragging) {
this.__dropHint.show();
this.__dropHint.setLayoutProperties({
left: posX,
top: posY
dropMe.show();
const dropMeBounds = dropMe.getBounds() || dropMe.getSizeHint();
dropMe.setLayoutProperties({
left: posX - parseInt(dropMeBounds.width/2) - parseInt(boxWidth/2),
top: posY - parseInt(dropMeBounds.height/2)- parseInt(boxHeight/2)
});
osparc.component.workbench.SvgWidget.updateRect(this.__dropHint.rect, posX, posY);
if ("rect" in dropMe) {
osparc.component.workbench.SvgWidget.updateRect(dropMe.rect, posX - boxWidth, posY - boxHeight);
}
} else {
this.__removeDropHint();
}
},

__drop: function(e) {
this.__dragging(e, false);
__dropFile: function(e) {
this.__draggingFile(e, false);

if ("dataTransfer" in e) {
this.__draggingFile = false;
this.__isDraggingFile = false;
const files = e.dataTransfer.files;
if (files.length === 1) {
const pos = {
Expand All @@ -1568,16 +1591,22 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
} else {
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("Only one file is accepted"), "ERROR");
}
} else if ("supportsType" in e && e.supportsType("osparc-file-link")) {
this.__draggingFile = false;
const data = e.getData("osparc-file-link")["dragData"];
}
},

__dropLink: function(e) {
this.__draggingLink(e, false);

if (this.__isDraggingLink && "dragData" in this.__isDraggingLink) {
const data = this.__isDraggingLink["dragData"];
const pos = this.__pointerEventToWorkbenchPos(e, false);
const service = qx.data.marshal.Json.createModel(osparc.utils.Services.getFilePicker());
const nodeUI = this.__addNode(service, pos);
const node = nodeUI.getNode();
const filePicker = new osparc.file.FilePicker(node);
filePicker.buildLayout();
osparc.file.FilePicker.setOutputValueFromStore(node, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());
this.__isDraggingLink = null;
}
},

Expand All @@ -1601,9 +1630,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
},

__removeDropHint: function() {
this.__dropHint.setVisibility("excluded");
osparc.component.workbench.SvgWidget.removeRect(this.__dropHint.rect);
this.__dropHint = null;
this.__dropMe.setVisibility("excluded");
osparc.component.workbench.SvgWidget.removeRect(this.__dropMe.rect);
this.__dropMe = null;
}
}
});
14 changes: 8 additions & 6 deletions services/web/client/source/class/osparc/data/model/Study.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ qx.Class.define("osparc.data.model.Study", {
},

updateStudy: function(params, run = false) {
return new Promise(resolve => {
return new Promise((resolve, reject) => {
osparc.data.Resources.fetch("studies", "put", {
url: {
"studyId": this.getUuid(),
Expand All @@ -413,11 +413,13 @@ qx.Class.define("osparc.data.model.Study", {
...this.serialize(),
...params
}
}).then(data => {
this.__updateModel(data);
qx.event.message.Bus.getInstance().dispatchByName("updateStudy", data);
resolve(data);
});
})
.then(data => {
this.__updateModel(data);
qx.event.message.Bus.getInstance().dispatchByName("updateStudy", data);
resolve(data);
})
.catch(err => reject(err));
});
},

Expand Down
Loading

0 comments on commit 0b3eb3a

Please sign in to comment.