opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix programmatic pan when dragging connector

Browse Source
This commit is contained in:
mvdbeek
2023-01-09 17:15:44 +01:00
parent 354504dfe0
commit 3aed928be2
1 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Workflow/Editor/Draggable.vue
+20 -16
View File
@@ -1,4 +1,3 @@
<!-- TODO: implement pan when dragged object leaves viewport -->
<template>
<draggable
:draggable-options="draggableOptions"
@@ -37,6 +36,7 @@ export default {
panBy: {},
timeout: null,
lastEvent: null,
programmaticDelta: { x: 0, y: 0 },
};
},
computed: {
@@ -53,19 +53,21 @@ export default {
emitPan(doMove = true) {
if (this.isPanning) {
this.$emit("pan-by", this.panBy);
// we need to move in the opposite direction of the pan
const data = {
...this.lastEvent.data,
deltaX: (this.panBy.x / this.scale) * -1,
deltaY: (this.panBy.y / this.scale) * -1,
};
console.log("move data", data);
if (doMove) {
// we need to move in the opposite direction of the pan
const data = {
...this.lastEvent.data,
deltaX: (this.panBy.x / this.scale) * -1,
deltaY: (this.panBy.y / this.scale) * -1,
};
console.log("move data", data);
this.$emit("move", { ...this.lastEvent, data });
this.programmaticDelta.x -= this.panBy.x;
this.programmaticDelta.y -= this.panBy.y;
}
this.timeout = setTimeout(() => {
this.emitPan();
}, 500);
}, 50);
}
},
onDragStart(e) {
@@ -87,28 +89,30 @@ export default {
const panBy = { x: 0, y: 0 };
let doPan = false;
if (e.event.clientX - this.rootOffset.left < 0) {
// panBy["x"] = Math.min(this.nudge, this.rootOffset.left - e.event.clientX);
panBy["x"] = this.rootOffset.left - e.event.clientX;
panBy["x"] = e.data.deltaX * -1;
doPan = true;
}
if (e.event.clientY - this.rootOffset.top < 0) {
// panBy["y"] = Math.min(this.nudge, this.rootOffset.top - e.event.clientY);
panBy["y"] = this.rootOffset.top - e.event.clientY;
panBy["y"] = e.data.deltaY * -1;
doPan = true;
}
if (this.rootOffset.right - e.event.clientX < 0) {
// panBy["x"] = Math.max(-this.nudge, this.rootOffset.right - e.event.clientX);
panBy["x"] = e.data.deltaX * -1;
doPan = true;
}
if (this.rootOffset.bottom - e.event.clientY < 0) {
// panBy["y"] = Math.max(-this.nudge, this.rootOffset.bottom - e.event.clientY);
panBy["y"] = e.data.deltaY * -1;
doPan = true;
}
this.panBy = panBy;
this.isPanning = doPan;
this.lastEvent = e;
this.emitPan();
this.emitPan(false);
}
// if we have moved the panel programmatically we need to "fix" the delta
e.data.deltaX -= this.programmaticDelta.x;
e.data.deltaY -= this.programmaticDelta.y;
this.programmaticDelta = { x: 0, y: 0 };
// supposedly draggable can apply the scale if passed in the draggable-option prop,
// but it doesn't, so we do it manually here.
e.data.deltaX /= this.scale;