From 3aed928be2248f4a43ff043851b9ce2c9255d8c2 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Tue, 6 Sep 2022 12:08:57 +0200
Subject: [PATCH] Fix programmatic pan when dragging connector

---
 .../components/Workflow/Editor/Draggable.vue  | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Draggable.vue b/client/src/components/Workflow/Editor/Draggable.vue
index 1e760b06842..436a52ab092 100644
--- a/client/src/components/Workflow/Editor/Draggable.vue
+++ b/client/src/components/Workflow/Editor/Draggable.vue
@@ -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;