Refactoring the drag-Event-Handling

config.js

@@ -18,3 +18,5 @@ export const MODE = ks_global.mode;
 export function setSpace(space) {
     SPACE = space;
 }
+
+export const DRAG_THRESHOLD = 10;

display/graph.js

@@ -9,7 +9,7 @@ import {
     CSS3DRenderer,
     CSS3DSprite,
 } from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import { MODE } from "../config";
+import { MODE, DRAG_THRESHOLD } from "../config";
 
 /**
  * The main ForceGraph. Displays the graph and handles all connected events.
@@ -59,12 +59,7 @@ export default class Graph {
             .nodeAutoColorBy("group")
             .nodeColor((node) => this.getNodeColor(node))
             .linkWidth((link) => this.getLinkWidth(link))
-            .onNodeClick((node) => {
-                this.focusOnNode(node);
-                if (MODE === "default") {
-                    this.infoOverlay.updateInfoOverlay(node);
-                }
-            })
+            .onNodeClick((node) =>  this.onNodeClick(node))
             .onNodeHover((node) => {
                 this.onNodeHover(node);
                 this.updateHighlight();
@@ -196,16 +191,18 @@ export default class Graph {
         this.updateHighlight();
     }
 
+    onNodeClick(node) {
+        this.focusOnNode(node);
+        if (MODE === "default") {
+            this.infoOverlay.updateInfoOverlay(node);
+        }
+    }
+
     onNodeDragEnd(node, translate) {
         // NodeDrag is handled like NodeClick if distance is very short
-        if(Math.sqrt(Math.pow(translate.x, 2)+ Math.pow(translate.y, 2)+ Math.pow(translate.z, 2)) < 10) {
-            this.focusOnNode(node);
-            if (MODE === "default") {
-                this.infoOverlay.updateInfoOverlay(node);
-            }
-            console.log("Hello Inside");
+        if(Math.sqrt(Math.pow(translate.x, 2)+ Math.pow(translate.y, 2)+ Math.pow(translate.z, 2)) < DRAG_THRESHOLD) {
+            this.onNodeClick(node);
         }
-        console.log("Hello Outside");
     }
 
     focusOnNode(node) {