From c77e7860c96ec28c1744ceba5aa97c09548aa37e Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Thu, 8 Sep 2022 15:57:13 +0200
Subject: [PATCH] Make positions reactive

---
 .../components/Workflow/Editor/NodeInput.vue  | 31 ++++++++++++-------
 .../components/Workflow/Editor/NodeOutput.vue | 26 ++++++++++------
 .../Workflow/Editor/WorkflowGraph.vue         | 29 ++++++-----------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 8f353d9261a..5e60a0e962b 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="form-row dataRow input-data-row" @mouseover="mouseOver" @mouseleave="mouseLeave">
         <div :id="id" :input-name="input.name" :class="terminalClass" @drop="onDrop">
-            <div ref="terminal" class="icon" />
+            <div ref="el" class="icon" />
         </div>
         <div v-if="showRemove" class="delete-terminal" @click="onRemove" />
         {{ label }}
@@ -9,7 +9,15 @@
 </template>
 
 <script>
+import { reactive, ref } from "vue";
+import { useElementBounding } from "@vueuse/core";
+
 export default {
+    setup() {
+        const el = ref(null);
+        const position = reactive(useElementBounding(el));
+        return { el, position };
+    },
     props: {
         input: {
             type: Object,
@@ -44,20 +52,22 @@ export default {
         return {
             showRemove: false,
             isMultiple: false,
-            initX: 0,
-            initY: 0,
             nodeId: null,
         };
     },
     created() {
         this.nodeId = this.getNode().id;
     },
-    mounted() {
-        const rect = this.$refs.terminal.getBoundingClientRect();
-        this.initX = rect.left + rect.width / 2 - this.rootOffset.left;
-        this.initY = rect.top + rect.height / 2 - this.rootOffset.top;
-    },
     computed: {
+        terminalPosition() {
+            return Object.freeze({ endX: this.startX, endY: this.startY });
+        },
+        initX() {
+            return this.position.left + this.position.width / 2 - this.rootOffset.left;
+        },
+        initY() {
+            return this.position.top + this.position.height / 2 - this.rootOffset.top;
+        },
         id() {
             const node = this.getNode();
             return `node-${node.id}-input-${this.input.name}`;
@@ -78,16 +88,13 @@ export default {
         startY() {
             return this.initY + this.offsetY;
         },
-        position() {
-            return Object.freeze({ endX: this.startX, endY: this.startY });
-        },
     },
     beforeDestroy() {
         this.$emit("onRemove", this.input);
         this.onRemove();
     },
     watch: {
-        position(position) {
+        terminalPosition(position) {
             console.log({
                 stepId: this.nodeId,
                 inputName: this.input.name,
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 4f08a797a89..c682042276a 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -10,6 +10,7 @@
         </div>
         {{ label }}
         <draggable-wrapper
+            ref="el"
             :id="id"
             :class="terminalClass"
             :output-name="output.name"
@@ -26,8 +27,15 @@
 <script>
 import DraggableWrapper from "./Draggable";
 import WorkflowConnector from "./Connector";
+import { reactive, ref } from "vue";
+import { useElementBounding } from "@vueuse/core";
 
 export default {
+    setup() {
+        const el = ref(null);
+        const position = reactive(useElementBounding(el));
+        return { el, position };
+    },
     components: {
         DraggableWrapper,
         WorkflowConnector,
@@ -66,22 +74,20 @@ export default {
         return {
             isMultiple: false,
             isDragging: false,
-            initX: 0,
-            initY: 0,
             deltaX: 0,
             deltaY: 0,
         };
     },
-    mounted() {
-        const rect = this.$refs.terminal.getBoundingClientRect();
-        this.initX = rect.left + rect.width / 2 - this.rootOffset.left;
-        this.initY = rect.top + rect.height / 2 - this.rootOffset.top;
-        this.position;
-    },
     computed: {
-        position() {
+        terminalPosition() {
             return Object.freeze({ startX: this.startX, startY: this.startY });
         },
+        initX() {
+            return this.position.left + this.position.width / 2 - this.rootOffset.left;
+        },
+        initY() {
+            return this.position.top + this.position.height / 2 - this.rootOffset.top;
+        },
         startX() {
             return this.initX + this.offsetX;
         },
@@ -142,7 +148,7 @@ export default {
         },
     },
     watch: {
-        position(position) {
+        terminalPosition(position) {
             console.log("updating position", position);
             this.$store.commit("workflowState/setOutputTerminalPosition", {
                 stepId: this.getNode().id,
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 3618bb605b7..c6f9bb6ee38 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -2,7 +2,7 @@
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
         <ZoomControl :zoom-level="zoomLevel" @onZoom="onZoomButton" />
         <div class="canvas-viewport" @dragover.prevent @drop.prevent>
-            <div id="canvas-container" ref="canvas">
+            <div id="canvas-container" ref="el">
                 <Draggable style="width: 100%; height: 100%" @move="onPanContainer" :apply-scale="false">
                     <SvgPanZoom
                         style="width: 100%; height: 100%"
@@ -38,7 +38,7 @@
                             :datatypes-mapper="datatypesMapper"
                             :get-manager="getManager"
                             :activeNodeId="activeNodeId"
-                            :root-offset="rootOffset"
+                            :root-offset="position"
                             @pan-by="onPan"
                             @stopDragging="onStopDragging"
                             @onDragConnector="onDragConnector"
@@ -66,8 +66,15 @@ import RawConnector from "./Connector";
 import TerminalConnector from "./TerminalConnector";
 import Draggable from "./Draggable.vue";
 import SvgPanZoom from "vue-svg-pan-zoom";
+import { reactive, ref } from "vue";
+import { useElementBounding } from "@vueuse/core";
 
 export default {
+    setup() {
+        const el = ref(null);
+        const position = reactive(useElementBounding(el));
+        return { el, position };
+    },
     components: {
         Draggable,
         RawConnector,
@@ -79,7 +86,6 @@ export default {
     data() {
         return {
             isWheeled: false,
-            rootOffset: { left: 0, top: 0 },
             draggingConnection: null,
             svgpanzoom: null,
             transform: null,
@@ -99,23 +105,6 @@ export default {
             default: null,
         },
     },
-    mounted() {
-        // canvas overview management
-        const rootRect = this.$refs.canvas.getBoundingClientRect();
-        this.rootOffset = {
-            top: rootRect.top,
-            left: rootRect.left,
-            width: rootRect.width,
-            height: rootRect.height,
-            bottom: rootRect.bottom,
-            right: rootRect.right,
-        };
-        console.log(`root offset: ${this.rootOffset}`);
-
-        // this.canvasManager = new WorkflowCanvas(this.getManager(), this.$refs.canvas);
-        // this.canvasManager.drawOverview();
-        // this.canvasManager.scrollToNodes();
-    },
     methods: {
         onUpdatedCTM(CTM) {
             this.transform = CTM;