Use draggable-wrapper for output terminal

client/src/components/Workflow/Editor/Draggable.vue

@@ -1,5 +1,11 @@
 <template>
-    <div draggable="true" @drag="onDrag" @dragend="onDragEnd" @mousedown="onMouseDown" @click="$emit('click')">
+    <div
+        ref="drag"
+        draggable="true"
+        @drag.stop="onDrag"
+        @dragend.stop="onDragEnd"
+        @mousedown.stop="onMouseDown"
+        @click="$emit('click')">
         <slot></slot>
     </div>
 </template>
@@ -8,14 +14,8 @@
 export default {
     props: {
         position: {
-            top: {
-                type: Number,
-                default: 0,
-            },
-            left: {
-                type: Number,
-                default: 0,
-            },
+            type: Object,
+            required: false,
         },
         zoom: {
             type: Number,
@@ -26,15 +26,29 @@ export default {
     data() {
         return {
             mouseDown: {},
+            _localPosition: {},
         };
     },
+    computed: {
+        localPosition() {
+            if (this.position) {
+                return this.position;
+            } else {
+                return this._localPosition;
+            }
+        },
+    },
     methods: {
         onMouseDown(e) {
             this.mouseDown = { offsetX: e.offsetX, offsetY: e.offsetY };
+            if (!this.position) {
+                const { top, left } = this.$refs.drag.getBoundingClientRect();
+                this._localPosition = { top: top + window.scrollY, left: left + window.scrollX };
+            }
         },
         onDrag(e) {
-            const left = this.position.left + (e.offsetX - this.mouseDown.offsetX) / this.zoom;
-            const top = this.position.top + (e.offsetY - this.mouseDown.offsetY) / this.zoom;
+            const left = this.localPosition.left + (e.offsetX - this.mouseDown.offsetX) / this.zoom;
+            const top = this.localPosition.top + (e.offsetY - this.mouseDown.offsetY) / this.zoom;
             this.$emit("updatePosition", { left, top });
         },
         onDragEnd(e) {

client/src/components/Workflow/Editor/NodeOutput.vue

@@ -9,7 +9,7 @@
             <i :class="['mark-terminal', activeClass]" />
         </div>
         {{ label }}
-        <draggable-wrapper :id="id" :output-name="output.name" :class="terminalClass">
+        <draggable-wrapper :id="id" :output-name="output.name" :class="terminalClass" :zoom="canvasManager.zoomLevel">
             <div class="icon" />
         </draggable-wrapper>
     </div>