Implemented drag to click handling into tool and state

editor/js/editor.js

@@ -3,7 +3,7 @@ import * as Graph from "./graph";
 import { loadGraphJson } from "../../datasets/datasets";
 import ForceGraph from "force-graph";
 import * as Interactions from "./interactions";
-import { DRAG_THRESHOLD_2D, setSpace, SPACE } from "../../config";
+import { setSpace, SPACE } from "../../config";
 
 export var state = undefined;
 export var graph = undefined;
@@ -57,7 +57,7 @@ function load() {
         .linkColor((link) => state.linkColor(link))
         .nodeColor((node) => state.nodeColor(node))
         .onNodeClick((node) => state.onNodeClick(node))
-        .onNodeDragEnd((node, translate) => onNodeDragEnd(node, translate))
+        .onNodeDragEnd((node, translate) => state.onNodeDragEnd(node, translate))
         .autoPauseRedraw(false) // keep redrawing after engine has stopped
         .linkWidth((link) => state.linkWidth(link))
         .linkDirectionalParticles(state.linkDirectionalParticles())
@@ -81,12 +81,3 @@ function load() {
         graphObj.graphData(data);
     });
 }
-
-function onNodeDragEnd(node, translate) {
-    if (
-        Math.sqrt(Math.pow(translate.x, 2) + Math.pow(translate.y, 2)) <
-        DRAG_THRESHOLD_2D
-    ) {
-        state.onNodeClick(node);
-    }
-}

editor/js/state.js

@@ -10,6 +10,7 @@ import SaveTool from "./tools/savetool";
 import { graph } from "./editor";
 import Toolbar from "./toolbar";
 import * as Graph from "./graph";
+import { DRAG_THRESHOLD_2D } from "../../config";
 
 export const TOOLS = {
     undo: new UndoTool("undo"),
@@ -86,6 +87,18 @@ export class State extends Tool {
         this.tool.onNodeClick(node);
     }
 
+    onNodeDragEnd(node, translate) {
+        // Handle as click event, if drag distance under a certain threshold
+        var distanceDragged = Math.sqrt(Math.pow(translate.x, 2) + Math.pow(translate.y, 2));
+        if (distanceDragged < DRAG_THRESHOLD_2D) {
+            this.onNodeClick(node);
+            return;
+            
+        } else {
+            this.tool.onNodeDragEnd(node, translate);
+        }
+    }
+
     onLinkClick(link) {
         this.tool.onLinkClick(link);
     }

editor/js/tools/tool.js

@@ -64,6 +64,12 @@ export default class Tool {
         }
     }
 
+    onNodeDragEnd(node, translate) {
+        if (this.warnings) {
+            console.warn('Method "onNodeDragEnd" not implemented.');
+        }
+    }
+
     onLinkClick(link) {
         if (this.warnings) {
             console.warn('Method "onLinkClick" not implemented.');