opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-21 13:50:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Do dragging without revue-draggable

Browse Source
This commit is contained in:
mvdbeek
2023-01-09 17:15:46 +01:00
parent cd18ae9ef3
commit e78a66c629
5 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package.json
+1
View File
@@ -38,6 +38,7 @@
"@popperjs/core": "^2.11.5",
"@sentry/browser": "^6.17.4",
"@vueuse/core": "^9.6.0",
"@vueuse/gesture": "^2.0.0-beta.1",
"assert": "^2.0.0",
"axios": "^0.25.0",
"babel-runtime": "^6.26.0",
client/src/components/Workflow/Editor/Draggable.vue
+49 -26
View File
@@ -1,32 +1,63 @@
<template>
<draggable
:draggable-options="draggableOptions"
@start="onDragStart"
@move="move"
:stop="onStopDragging"
:start="stopPropagation"
:drag="stopPropagation"
v-on="$listeners">
<div ref="draggable">
<slot></slot>
</draggable>
</div>
</template>
<script>
import { Draggable } from "@braks/revue-draggable";
import { reactive, ref } from "vue";
import { useElementBounding } from "@vueuse/core";
import { useDraggable } from "@vueuse/core";
export default {
components: {
Draggable,
setup(props, { emit }) {
const draggable = ref();
let lastPosition = null;
const deltaPosition = { x: 0, y: 0 };
const startPosition = reactive(useElementBounding(draggable));
const onStart = (position, event) => {
emit("mousedown", event);
};
const onMove = (position, event) => {
deltaPosition.x = (position.x - (lastPosition?.x || startPosition.x)) / props.scale;
deltaPosition.y = (position.y - (lastPosition?.y || startPosition.y)) / props.scale;
console.log("delta xy", deltaPosition.x, deltaPosition.y);
lastPosition = { ...position };
emit("move", deltaPosition);
};
const onEnd = (position, event) => {
// lastPosition = null;
emit("mouseup");
};
const { x, y, isDragging, position } = useDraggable(draggable, {
preventDefault: true,
onStart: onStart,
onMove: onMove,
onEnd: onEnd,
});
return {
draggable,
x,
y,
isDragging,
position,
deltaPosition,
};
},
props: {
rootOffset: {
type: Object,
required: false,
},
applyScale: {
type: Boolean,
scale: {
type: Number,
required: false,
default: true,
default: 1,
},
},
data() {
@@ -41,17 +72,9 @@ export default {
programmaticDelta: { x: 0, y: 0 },
};
},
computed: {
scale() {
if (this.applyScale) {
return this.$store.getters["workflowState/getScale"]();
}
return 1;
},
draggableOptions() {
return {
mouseDown: this.stopPropagation,
};
watch: {
position(newVal) {
console.log(newVal.x, newVal.y);
},
},
methods: {
client/src/components/Workflow/Editor/Node.vue
+8 -5
View File
@@ -1,6 +1,7 @@
<template>
<draggable-wrapper
ref="el"
:scale="scale"
@updatePosition="onUpdatePosition"
@mouseup="makeActive"
@move="onMove"
@@ -161,6 +162,9 @@ export default {
type: Object,
required: true,
},
scale: {
type: Number,
},
},
data() {
return {
@@ -262,12 +266,11 @@ export default {
},
},
methods: {
onMove(e) {
const { deltaX, deltaY } = e.data;
this.offset = { x: this.offset.x + deltaX, y: this.offset.y + deltaY };
onMove(deltaPosition) {
this.offset = { x: this.offset.x + deltaPosition.x, y: this.offset.y + deltaPosition.y };
this.onUpdatePosition({
top: this.step.position.top + deltaY,
left: this.step.position.left + deltaX,
top: this.step.position.top + deltaPosition.y,
left: this.step.position.left + deltaPosition.x,
});
},
onStopDragging() {
client/src/components/Workflow/Editor/WorkflowGraph.vue
+1
View File
@@ -40,6 +40,7 @@
:get-manager="getManager"
:activeNodeId="activeNodeId"
:root-offset="position"
:scale="zoomLevel"
@pan-by="onPan"
@stopDragging="onStopDragging"
@onDragConnector="onDragConnector"
client/yarn.lock
+38 -18
View File
@@ -1012,13 +1012,6 @@
resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@braks/revue-draggable@file:../revue-draggable/braks-revue-draggable-no-transform.tgz":
version "0.4.2"
resolved "file:../revue-draggable/braks-revue-draggable-no-transform.tgz#05b4d3ac6126e8cb540c435f42d20154d9caf042"
dependencies:
"@vueuse/core" "^7.0.1"
vue-demi latest
"@cerner/duplicate-package-checker-webpack-plugin@^2.3.0":
version "2.3.0"
resolved "https://registry.npmjs.org/@cerner/duplicate-package-checker-webpack-plugin/-/duplicate-package-checker-webpack-plugin-2.3.0.tgz"
@@ -1942,6 +1935,11 @@
dependencies:
"@types/jest" "*"
"@types/web-bluetooth@^0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
integrity sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==
"@types/ws@^8.5.1":
version "8.5.3"
resolved "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz"
@@ -2014,18 +2012,35 @@
source-map "0.5.6"
tsconfig "^7.0.0"
"@vueuse/core@^7.0.1":
version "7.7.1"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.7.1.tgz#fc284f4103de73c7fb79bc06579d8066790db511"
integrity sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==
"@vueuse/core@^9.2.0":
version "9.2.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.2.0.tgz#58e3588b9bc5a69010aa9104b00056ee9ebff738"
integrity sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==
dependencies:
"@vueuse/shared" "7.7.1"
"@types/web-bluetooth" "^0.0.15"
"@vueuse/metadata" "9.2.0"
"@vueuse/shared" "9.2.0"
vue-demi "*"
"@vueuse/shared@7.7.1":
version "7.7.1"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-7.7.1.tgz#77e312de7275380efce86b0079bd7938791a076b"
integrity sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==
"@vueuse/gesture@^2.0.0-beta.1":
version "2.0.0-beta.1"
resolved "https://registry.yarnpkg.com/@vueuse/gesture/-/gesture-2.0.0-beta.1.tgz#e4c555bab652e4e13d612e3970eb21184a27a0b8"
integrity sha512-HTLibLy3bh6TjRnDAbMAvHSsEmrkRituMj2x+mHwmp1EnM8A8CDRTfNJEr8d/hIairnPPp5Va2KWYVmyP/zvkA==
dependencies:
chokidar "^3.5.2"
consola "^2.15.3"
upath "^2.0.1"
vue-demi "*"
"@vueuse/metadata@9.2.0":
version "9.2.0"
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.2.0.tgz#6bf7c9c44b9f5ece405837226a0e04a997994458"
integrity sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==
"@vueuse/shared@9.2.0":
version "9.2.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.2.0.tgz#7831051b2c1d01c3413c749468ee53a86024510e"
integrity sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==
dependencies:
vue-demi "*"
@@ -3377,7 +3392,7 @@ connect@^3.7.0:
parseurl "~1.3.3"
utils-merge "1.0.1"
consola@^2.15.0:
consola@^2.15.0, consola@^2.15.3:
version "2.15.3"
resolved "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz"
integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
@@ -9860,6 +9875,11 @@ unset-value@^1.0.0:
has-value "^0.3.1"
isobject "^3.0.0"
upath@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
update-browserslist-db@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz"
@@ -10019,7 +10039,7 @@ void-elements@^2.0.0:
resolved "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz"
integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
vue-demi@*, vue-demi@latest:
vue-demi@*:
version "0.13.11"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==