From 2596e76b677fa695b287bb7de602f65723542189 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Tue, 6 Sep 2022 12:35:06 +0200
Subject: [PATCH] More cleanup

---
 .../components/Workflow/Editor/Draggable.vue  | 25 +++++++++++--------
 .../components/Workflow/Editor/NodeOutput.vue | 13 ++--------
 .../Workflow/Editor/WorkflowGraph.vue         |  9 -------
 3 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Draggable.vue b/client/src/components/Workflow/Editor/Draggable.vue
index fb36c2d967f..8264a3eb6f4 100644
--- a/client/src/components/Workflow/Editor/Draggable.vue
+++ b/client/src/components/Workflow/Editor/Draggable.vue
@@ -30,12 +30,13 @@ export default {
     },
     data() {
         return {
-            mouseDown: {},
             isPanning: false,
-            nudge: 23,
+            // Maximum distance to move per pan
+            maxDeltaPerPan: 8,
+            // 60hz seems pretty common, should result in smooth panning
+            refreshRate: 1000 / 60,
             panBy: {},
             timeout: null,
-            lastEvent: null,
             programmaticDelta: { x: 0, y: 0 },
         };
     },
@@ -56,17 +57,16 @@ export default {
                 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,
                     };
-                    this.$emit("move", { ...this.lastEvent, data });
+                    this.$emit("move", { event: {}, data });
                     this.programmaticDelta.x -= this.panBy.x;
                     this.programmaticDelta.y -= this.panBy.y;
                 }
                 this.timeout = setTimeout(() => {
                     this.emitPan();
-                }, 50);
+                }, this.refreshRate);
             }
         },
         onDragStart(e) {
@@ -85,11 +85,12 @@ export default {
         move(e) {
             clearTimeout(this.timeout);
             if (this.rootOffset) {
-                const panBy = { x: 0, y: 0 };
+                // Limit pan to maxDeltaPerPan
+                const deltaX = Math.min(Math.abs(e.data.deltaX), this.maxDeltaPerPan);
+                const deltaY = Math.min(Math.abs(e.data.deltaY), this.maxDeltaPerPan);
+                // Check if we're out of bounds
                 let doPan = false;
-                // don't pan faster than 23
-                const deltaX = Math.min(Math.abs(e.data.deltaX), 23);
-                const deltaY = Math.min(Math.abs(e.data.deltaY), 23);
+                const panBy = { x: 0, y: 0 };
                 if (e.event.clientX - this.rootOffset.left < 0) {
                     panBy["x"] = deltaX;
                     doPan = true;
@@ -108,7 +109,6 @@ export default {
                 }
                 this.panBy = panBy;
                 this.isPanning = doPan;
-                this.lastEvent = e;
                 this.emitPan(false);
             }
             // if we have moved the panel programmatically we need to "fix" the delta
@@ -122,5 +122,8 @@ export default {
             e.event.stopPropagation();
         },
     },
+    beforeDestroy() {
+        clearTimeout(this.timeout);
+    },
 };
 </script>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index f6f3ca82968..4f08a797a89 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -83,13 +83,10 @@ export default {
             return Object.freeze({ startX: this.startX, startY: this.startY });
         },
         startX() {
-            const newX = this.initX + this.offsetX;
-            return newX;
+            return this.initX + this.offsetX;
         },
         startY() {
-            const newY = this.initY + this.offsetY;
-            // this.$store.commit("workflowState/setOutputTerminalPosition", this.getNode().id, this.output.name, newY);
-            return newY;
+            return this.initY + this.offsetY;
         },
         endX() {
             return this.startX + this.deltaX;
@@ -153,9 +150,6 @@ export default {
                 position,
             });
         },
-        isDragging() {
-            console.log("is dragging ?", this.isDragging);
-        },
         dragPosition() {
             console.log("dragPosition", this.endX);
             if (this.isDragging) {
@@ -171,15 +165,12 @@ export default {
     },
     beforeDestroy() {
         this.$emit("onRemove", this.output);
-        // this.terminal.destroy();
     },
     methods: {
         onPanBy(panBy) {
-            console.log("panning by", panBy);
             this.$emit("pan-by", panBy);
         },
         onMove(e) {
-            console.log("deltax", e.data.deltaX);
             this.deltaX += e.data.deltaX;
             this.deltaY += e.data.deltaY;
         },
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index f80fbfe136c..406a20850fa 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -1,12 +1,6 @@
-<!--
-TODO: pan when objects are dragged out of viewport
-
-
--->
 <template>
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
         <ZoomControl :zoom-level="zoomLevel" @onZoom="onZoomButton" />
-        <b-button @click="onPan">Pan!</b-button>
         <div class="canvas-viewport" @dragover.prevent @drop.prevent>
             <div id="canvas-container" ref="canvas">
                 <SvgPanZoom
@@ -117,14 +111,12 @@ export default {
     },
     methods: {
         onStopDragging() {
-            console.log("onStop");
             this.draggingConnection = null;
         },
         onDragConnector(vector) {
             this.draggingConnection = vector;
         },
         onZoom(zoomLevel) {
-            console.log("new ZoomLevel");
             // SvgZoomPanel returns array
             this.$store.commit("workflowState/setScale", zoomLevel?.[0]);
         },
@@ -136,7 +128,6 @@ export default {
             this.svgpanzoom = svgpanzoom;
         },
         onPan(pan) {
-            console.log("pan!", pan);
             this.svgpanzoom.panBy(pan);
         },
         onActivate(nodeId) {