WIP node dragging without jQuery

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

@@ -75,7 +75,8 @@
                     @onCreate="onInsertTool"
                     @onChange="onChange"
                     @onDisconnect="onDisconnect"
-                    @onRemove="onRemove">
+                    @onRemove="onRemove"
+                    @onUpdateStep="onUpdateStep">
                 </workflow-graph>
             </div>
             <SidePanel id="right" side="right">
@@ -360,6 +361,10 @@ export default {
         hide_modal();
     },
     methods: {
+        onUpdateStep(stepId, step) {
+            console.log("updating step");
+            this.steps[stepId] = step;
+        },
         onDisconnect(nodeId, inputName) {
             delete this.steps[nodeId].input_connections[inputName];
         },

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

@@ -1,5 +1,16 @@
 <template>
-    <div @click="makeActive()" :id="idString" :name="name" :node-label="label" :class="classes" :style="style">
+    <div
+        @click="makeActive()"
+        :id="idString"
+        :name="name"
+        :node-label="label"
+        :class="classes"
+        :style="style"
+        draggable="true"
+        @mousedown="onMouseDown"
+        @dragstart="makeActive"
+        @drag="onDrag"
+        @dragend="onDragEnd">
         <div class="node-header unselectable clearfix">
             <b-button
                 v-b-tooltip.hover
@@ -90,7 +101,6 @@ import Recommendations from "components/Workflow/Editor/Recommendations";
 import NodeInput from "./NodeInput";
 import NodeOutput from "./NodeOutput";
 import { ActiveOutputs } from "./modules/outputs";
-import { attachDragging } from "./modules/dragging";
 Vue.use(BootstrapVue);
 
 const OFFSET_RANGE = 100;
@@ -157,6 +167,7 @@ export default {
             showLoading: true,
             highlight: false,
             scrolledTo: false,
+            mouseDown: {},
         };
     },
     computed: {
@@ -234,31 +245,6 @@ export default {
         this.activeOutputs = new ActiveOutputs();
         this.element = this.$el;
         this.content_id = this.contentId;
-
-        // Attach node dragging events
-        attachDragging(this.$el, {
-            dragstart: () => {
-                this.$emit("onActivate", this.id);
-            },
-            dragend: () => {
-                this.$emit("onChange");
-                this.canvasManager.drawOverview();
-            },
-            drag: (e, d) => {
-                const o = document.getElementById("canvas-container");
-                const el = this.$el;
-                const rect = o.getBoundingClientRect();
-                const left = (d.offsetX - rect.left) / this.canvasManager.canvasZoom;
-                const top = (d.offsetY - rect.top) / this.canvasManager.canvasZoom;
-                el.style.left = `${left}px`;
-                el.style.top = `${top}px`;
-                this.onRedraw();
-            },
-            dragclickonly: () => {
-                this.$emit("onActivate", this.id);
-            },
-        });
-
         // initialize node data
         this.$emit("onAdd", this);
         if (this.step.config_form) {
@@ -269,6 +255,22 @@ export default {
     },
 
     methods: {
+        onMouseDown(e) {
+            this.mouseDown = { offsetX: e.offsetX, offsetY: e.offsetY };
+            console.log("mouseDownOffset", this.mouseDown);
+        },
+        onDrag(e) {
+            const left = this.step.position.left + (e.offsetX - this.mouseDown.offsetX) / this.canvasManager.canvasZoom;
+            const top = this.step.position.top + (e.offsetY - this.mouseDown.offsetY) / this.canvasManager.canvasZoom;
+            const newStep = { ...this.step, position: { left, top } };
+            console.log({ left, top, e });
+            this.$emit("onUpdateStep", newStep.id, newStep);
+        },
+        onDragEnd(e) {
+            // this.$emit("onChange");
+            // this.canvasManager.drawOverview();
+            console.log("end");
+        },
         onChange() {
             this.$emit("onChange");
         },

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

@@ -183,4 +183,4 @@ export default {
         },
     },
 };
-</script>
+</script>

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

@@ -12,7 +12,7 @@
             @click="resetWheel">
             Zoom Controls
         </b-button>
-        <div id="canvas-viewport">
+        <div id="canvas-viewport" @dragover.prevent @drop.prevent>
             <div id="canvas-container" ref="canvas">
                 <WorkflowNode
                     v-for="(step, key) in steps"

client/src/components/Workflow/Editor/modules/dragging.js

@@ -3,13 +3,6 @@ import Terminals from "./terminals";
 import Connector from "./connector";
 import { ariaSelectOutputNode } from "./aria";
 
-export function attachDragging(el, callbacks) {
-    const $el = $(el);
-    Object.entries(callbacks).forEach(([k, v]) => {
-        $el.bind(k, v);
-    });
-}
-
 export class InputDragging {
     constructor(app, canvasManager, options = {}) {
         this.app = app;
@@ -18,10 +11,10 @@ export class InputDragging {
         this.terminal = options.terminal;
         this.el.terminal = this.terminal;
         this.$el = $(this.el);
-        this.$el.on("dropinit", (e, d) => this.onDropInit(e, d));
-        this.$el.on("dropstart", (e, d) => this.onDropStart(e, d));
-        this.$el.on("dropend", (e, d) => this.onDropEnd(e, d));
-        this.$el.on("drop", (e, d) => this.onDrop(e, d));
+        // this.$el.on("dropinit", (e, d) => this.onDropInit(e, d));
+        // this.$el.on("dropstart", (e, d) => this.onDropStart(e, d));
+        // this.$el.on("dropend", (e, d) => this.onDropEnd(e, d));
+        // this.$el.on("drop", (e, d) => this.onDrop(e, d));
     }
     onDropInit(e, d = {}) {
         var terminal = this.terminal;
@@ -84,18 +77,18 @@ export class OutputDragging {
             `connect output ${this.terminal.name} to input. Press space to see a list of available inputs`
         );
         this.$el.attr("tabindex", "0");
-        this.$el.attr("aria-grabbed", "false");
-        this.$el.on("drag", (e, d) => this.onDrag(e, d));
-        this.$el.on("dragstart", (e, d) => this.onDragStart(e, d));
-        this.$el.on("dragend", (e, d) => this.onDragEnd(e, d));
-        this.$el.on("keydown", (e) =>
-            ariaSelectOutputNode({
-                e: e,
-                manager: app,
-                outputTerminal: options.terminal,
-                outputEl: this.el,
-            })
-        );
+        // this.$el.attr("aria-grabbed", "false");
+        // this.$el.on("drag", (e, d) => this.onDrag(e, d));
+        // this.$el.on("dragstart", (e, d) => this.onDragStart(e, d));
+        // this.$el.on("dragend", (e, d) => this.onDragEnd(e, d));
+        // this.$el.on("keydown", (e) =>
+        //     ariaSelectOutputNode({
+        //         e: e,
+        //         manager: app,
+        //         outputTerminal: options.terminal,
+        //         outputEl: this.el,
+        //     })
+        // );
     }
     onDrag(e, d = {}) {
         var onmove = () => {