From e78a66c629080c03f2b7d59ecaa7770b7a79edb9 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Sun, 25 Sep 2022 16:41:47 +0200
Subject: [PATCH] WIP: Do dragging without revue-draggable

---
 client/package.json                           |  1 +
 .../components/Workflow/Editor/Draggable.vue  | 75 ++++++++++++-------
 .../src/components/Workflow/Editor/Node.vue   | 13 ++--
 .../Workflow/Editor/WorkflowGraph.vue         |  1 +
 client/yarn.lock                              | 56 +++++++++-----
 5 files changed, 97 insertions(+), 49 deletions(-)

diff --git a/client/package.json b/client/package.json
index 6958f7155a8..0bd13d1f51d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -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",
diff --git a/client/src/components/Workflow/Editor/Draggable.vue b/client/src/components/Workflow/Editor/Draggable.vue
index fff1b8df34d..fc0896165ca 100644
--- a/client/src/components/Workflow/Editor/Draggable.vue
+++ b/client/src/components/Workflow/Editor/Draggable.vue
@@ -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: {
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 299af736bc8..29466929df8 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -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() {
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index b25ed9ca433..a414908c4f6 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -40,6 +40,7 @@
                     :get-manager="getManager"
                     :activeNodeId="activeNodeId"
                     :root-offset="position"
+                    :scale="zoomLevel"
                     @pan-by="onPan"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
diff --git a/client/yarn.lock b/client/yarn.lock
index 1e908b82f58..0d8eb10582a 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -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==