Node and Connector dragging work

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

@@ -258,8 +258,12 @@ export default {
 
     methods: {
         onMove(e) {
-            const { x, y } = e.data;
-            this.offset = { x, y };
+            const { deltaX, deltaY } = e.data;
+            this.offset = { x: this.offset.x + deltaX, y: this.offset.y + deltaY };
+            this.onUpdatePosition({
+                top: this.step.position.top + deltaY,
+                left: this.step.position.left + deltaX,
+            });
         },
         onStop() {
             console.log("onStop called");

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

@@ -14,26 +14,15 @@
             :class="terminalClass"
             :output-name="output.name"
             @start="isDragging = true"
-            @stop="isDragging = false"
+            @stop="onStopDragging"
             @move="onMove"
             v-on="$listeners">
-            <!-- Let's put a draggable connector here. How do we manage disconnects? How do we get start/end coordinates ? -->
-            <!--
-                <workflow-connector
-                    v-for="connection in connections"
-                    :start-x="startX"
-                    :end-x="endX"
-                    :start-y="startY"
-                    :end-y="endY"></workflow-connector>
-                    -->
-            <span><div class="icon" ref="terminal"></div></span>
+            <div class="icon" ref="terminal"></div>
         </draggable-wrapper>
     </div>
 </template>
 
 <script>
-import Terminals from "./modules/terminals";
-import { OutputDragging } from "./modules/dragging";
 import DraggableWrapper from "./Draggable";
 import WorkflowConnector from "./Connector";
 
@@ -153,7 +142,9 @@ export default {
             console.log("is dragging ?", this.isDragging);
         },
         dragPosition() {
-            this.$emit("onDragConnector", this.dragPosition);
+            if (this.isDragging) {
+                this.$emit("onDragConnector", this.dragPosition);
+            }
         },
         label() {
             // See discussion at: https://github.com/vuejs/vue/issues/8030
@@ -168,8 +159,13 @@ export default {
     },
     methods: {
         onMove(e) {
-            this.deltaX = e.data.x;
-            this.deltaY = e.data.y;
+            this.deltaX += e.data.deltaX;
+            this.deltaY += e.data.deltaY;
+        },
+        onStopDragging() {
+            this.isDragging = false;
+            this.deltaX = 0;
+            this.deltaY = 0;
         },
         inputDragStart(e) {
             console.log("inputDragStart", e);

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

@@ -10,7 +10,6 @@
             @mousedown="handleDown">
             <div id="canvas-container" ref="canvas">
                 <svg width="100%" height="100%">
-                    <connector :startX="0" :endX="100" :startY="0" :endY="100"></connector>
                     <connector
                         v-if="draggingConnection"
                         :startX="draggingConnection.startX"
@@ -54,7 +53,6 @@
     </div>
 </template>
 <script>
-import WorkflowCanvas from "./modules/canvas";
 import ZoomControl from "./ZoomControl";
 import WorkflowNode from "./Node";
 import WorkflowConnection from "./WorkflowConnection";