From cd18ae9ef3357bebd45ddf5b835486748bf2c66f Mon Sep 17 00:00:00 2001 From: mvdbeek Date: Thu, 15 Sep 2022 14:20:26 +0200 Subject: [PATCH] WIP: switch to vue-pinch-zoom --- client/package.json | 2 + .../components/Workflow/Editor/Connector.vue | 4 - .../src/components/Workflow/Editor/Index.vue | 6 - .../src/components/Workflow/Editor/Node.vue | 9 +- .../components/Workflow/Editor/NodeInput.vue | 14 +- .../components/Workflow/Editor/NodeOutput.vue | 19 +-- .../Workflow/Editor/WorkflowGraph.vue | 156 ++++++++++-------- .../Workflow/Editor/ZoomControl.vue | 29 ++++ .../Workflow/Editor/modules/connector.js | 2 - .../Workflow/Editor/modules/model.js | 2 - .../Workflow/Editor/modules/terminals.js | 1 - client/yarn.lock | 5 + 12 files changed, 129 insertions(+), 120 deletions(-) diff --git a/client/package.json b/client/package.json index 1a8eb0bb83c..6958f7155a8 100644 --- a/client/package.json +++ b/client/package.json @@ -23,6 +23,8 @@ }, "dependencies": { "@fontsource/atkinson-hyperlegible": "^4.5.10", + "@braks/revue-draggable": "file:/Users/mvandenb/src/galaxy/revue-draggable/braks-revue-draggable-no-transform.tgz", + "@coddicat/vue-pinch-scroll-zoom": "^3.3.4", "@fortawesome/fontawesome-free": "^5.15.4", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-brands-svg-icons": "^5.15.4", diff --git a/client/src/components/Workflow/Editor/Connector.vue b/client/src/components/Workflow/Editor/Connector.vue index 7e7a4e5c65a..e313706ea63 100644 --- a/client/src/components/Workflow/Editor/Connector.vue +++ b/client/src/components/Workflow/Editor/Connector.vue @@ -23,10 +23,6 @@ export default { lineShift: 30, }; }, - beforeDestroy() { - console.log("Destroying connector"); - // this.terminal.destroy(); - }, computed: { offsetStart() { return 0; diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue index 1c779431713..f4cd7a103ec 100644 --- a/client/src/components/Workflow/Editor/Index.vue +++ b/client/src/components/Workflow/Editor/Index.vue @@ -343,7 +343,6 @@ export default { } }, steps(newSteps, oldSteps) { - console.log("steps watch triggered"); this.hasChanges = true; this.nodeIndex = Math.max(...Object.keys(newSteps).map((k) => parseInt(k))) + 1; }, @@ -363,11 +362,9 @@ export default { }, methods: { onUpdateStep(stepId, step) { - console.log("updating step"); this.steps[stepId] = step; }, onUpdateStepPosition(stepId, position) { - console.log("updating step position"); this.steps[stepId].position = position; }, onDisconnect(nodeId, inputName) { @@ -634,7 +631,6 @@ export default { this.isCanvas = true; return; } - console.log(this.nodeIndex); Vue.set(this.steps, this.nodeIndex++, { name: name, content_id: contentId, @@ -683,14 +679,12 @@ export default { }, onActiveNode(nodeId) { this.activeNode = this.nodes[nodeId]; - console.log("active node"); this.$refs["right-panel"].scrollTop = 0; }, getManager() { return this; }, getNode() { - console.log("getting node"); return this.activeNode; }, onInsertedStateMessages(insertedStateMessages) { diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue index b74480003f4..299af736bc8 100644 --- a/client/src/components/Workflow/Editor/Node.vue +++ b/client/src/components/Workflow/Editor/Node.vue @@ -2,8 +2,8 @@
- -
-
- - - - - - - - - -
- - -
- -
+ +
+ + + + + + + + +
@@ -64,11 +63,11 @@ import ZoomControl from "./ZoomControl"; import WorkflowNode from "./Node"; import RawConnector from "./Connector"; import TerminalConnector from "./TerminalConnector"; -import Draggable from "./Draggable.vue"; import Minimap from "./Minimap.vue"; import SvgPanZoom from "vue-svg-pan-zoom"; import { reactive, ref } from "vue"; import { useElementBounding } from "@vueuse/core"; +import PinchScrollZoom, { PinchScrollZoomEmitData } from "@coddicat/vue-pinch-scroll-zoom"; export default { setup() { @@ -77,13 +76,13 @@ export default { return { el, position }; }, components: { - Draggable, RawConnector, SvgPanZoom, TerminalConnector, WorkflowNode, Minimap, ZoomControl, + PinchScrollZoom, }, data() { return { @@ -91,6 +90,7 @@ export default { draggingConnection: null, svgpanzoom: null, transform: null, + pan: { x: 0, y: 0 }, }; }, props: { @@ -112,11 +112,42 @@ export default { }, }, methods: { - onWheel(e) { - console.log("wheel event", e); + onPan(pan) { + console.log("onPan", pan); + this.pan = pan; + this.$refs.zoomControl.setData({ + scale: this.scale, + originX: pan.x, + originY: pan.y, + translateX: pan.x, + translateY: pan.y, + }); + }, + onResetAll() { + this.pan = { x: 0, y: 0 }; + this.setScale(1); + this.$refs.zoomControl.setData({ + scale: 1, + originX: 0, + originY: 0, + translateX: 0, + translateY: 0, + }); + }, + onDrag(panData) { + console.log("panData", panData); + this.pan = { x: panData.x, y: panData.y }; + }, + onScale(scaleData) { + console.log("scaleData", scaleData); + this.pan = { + x: scaleData.translateX * scaleData.scale, + y: scaleData.translateY * scaleData.scale, + }; + console.log(this.pan); + this.setScale(scaleData.scale); }, onMoveTo(moveTo) { - console.log("moving to", moveTo); this.svgpanzoom.pan(moveTo); }, onUpdatedCTM(CTM) { @@ -142,14 +173,10 @@ export default { registerSvgPanZoom(svgpanzoom) { this.svgpanzoom = svgpanzoom; }, - onPan(pan) { - this.svgpanzoom.panBy(pan); - }, onPanContainer(e) { this.svgpanzoom.panBy({ x: e.data.deltaX, y: e.data.deltaY }); }, onActivate(nodeId) { - console.log("onNodeId", nodeId); if (this.activeNodeId != nodeId) { this.$store.commit("workflowState/setActiveNode", nodeId); // this.canvasManager.drawOverview(); @@ -163,18 +190,6 @@ export default { }, }, computed: { - style() { - if (this.transform) { - return `transform: matrix(${this.transform.a}, ${this.transform.b}, ${this.transform.c}, ${this.transform.d}, ${this.transform.e}, ${this.transform.f})`; - } - }, - currentPan() { - if (this.transform) { - return { x: this.transform.e, y: this.transform.f }; - } else { - return { x: 0, y: 0 }; - } - }, zoomLevel() { return this.$store.getters["workflowState/getScale"](); }, @@ -182,7 +197,6 @@ export default { return this.$store.getters["workflowState/getActiveNode"](); }, connections() { - console.log("connection fired"); const connections = []; Object.entries(this.steps).forEach(([stepId, step]) => { Object.entries(step.input_connections).forEach(([input_name, outputArray]) => { diff --git a/client/src/components/Workflow/Editor/ZoomControl.vue b/client/src/components/Workflow/Editor/ZoomControl.vue index 7bb9e0d833e..9e47ed1e360 100644 --- a/client/src/components/Workflow/Editor/ZoomControl.vue +++ b/client/src/components/Workflow/Editor/ZoomControl.vue @@ -29,6 +29,28 @@ size="sm" aria-label="Zoom In" @click="onZoomIn" /> + + + @@ -44,6 +66,9 @@ export default { type: Number, default: 1, }, + pan: { + type: Object, + }, }, data() { return { @@ -54,6 +79,7 @@ export default { zoomDefault: 1, }; }, + computed: { isMin() { return Math.round(this.zoomLevel * 100) == Math.round(this.zoomLevels[0] * 100); @@ -91,6 +117,9 @@ export default { onZoomReset() { this.$emit("onZoom", this.zoomDefault); }, + onResetAll() { + this.$emit("reset-all"); + }, }, }; diff --git a/client/src/components/Workflow/Editor/modules/connector.js b/client/src/components/Workflow/Editor/modules/connector.js index 73d0bcbddf1..e15e81d3c27 100644 --- a/client/src/components/Workflow/Editor/modules/connector.js +++ b/client/src/components/Workflow/Editor/modules/connector.js @@ -109,7 +109,6 @@ class Connector { // Resize the svg const svg = d3.select(this.canvas).select("svg"); svg.attr("class", "ribbon"); - console.log(svg); svg.style("width", `${canvas_width}px`); svg.style("height", `${canvas_height}px`); @@ -174,7 +173,6 @@ class Connector { { x: end_x - cp_shift, y: end_y + offset_end }, { x: end_x, y: end_y + offset_end }, ]; - console.log("lineData", lineData); const lineFunction = d3.svg .line() .x(function (d) { diff --git a/client/src/components/Workflow/Editor/modules/model.js b/client/src/components/Workflow/Editor/modules/model.js index f1e6709ac8e..9d2dbecaf80 100644 --- a/client/src/components/Workflow/Editor/modules/model.js +++ b/client/src/components/Workflow/Editor/modules/model.js @@ -18,12 +18,10 @@ export async function fromSimple(workflow, data, appendData = false) { step.uuid = null; } }); - console.log("setting workflow steps"); workflow.steps = data.steps; } export function toSimple(workflow) { - console.log("to Simple"); const steps = {}; _rectifyOutputs(workflow); Object.values(workflow.nodes).forEach((node) => { diff --git a/client/src/components/Workflow/Editor/modules/terminals.js b/client/src/components/Workflow/Editor/modules/terminals.js index 4d4be3dc46f..0d0a3401a14 100644 --- a/client/src/components/Workflow/Editor/modules/terminals.js +++ b/client/src/components/Workflow/Editor/modules/terminals.js @@ -126,7 +126,6 @@ class Terminal extends EventEmitter { this.emit("change"); } redraw() { - console.log("redraw"); this.connectors.forEach((c) => { c.redraw(); }); diff --git a/client/yarn.lock b/client/yarn.lock index d442c0030fe..1e908b82f58 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1112,6 +1112,11 @@ "@citation-js/name" "^0.4.2" wikidata-sdk "^8.0.0" +"@coddicat/vue-pinch-scroll-zoom@^3.3.4": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@coddicat/vue-pinch-scroll-zoom/-/vue-pinch-scroll-zoom-3.3.4.tgz#48f5a2a4ac09c950799e6c2ecf62bde6c6f500c1" + integrity sha512-qGBK7TKg5Ii39u/2JnbfoBfQVaQfuVY865KR+X1vWbtaa8LWfwS+q4HgBHlV7JV1729a9zp3c9XDKIJoBVnAmA== + "@colors/colors@1.5.0": version "1.5.0" resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz"