From ca4b89d1dfc81703c172e7b2340e44011818264c Mon Sep 17 00:00:00 2001
From: Harm Kube <h.kube@tu-braunschweig.de>
Date: Wed, 22 Dec 2021 12:56:25 +0100
Subject: [PATCH] Adding feature to 2D graph in editor
---
config.js | 2 +-
display/graph.js | 4 ++--
editor/js/editor.js | 8 ++++++++
3 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/config.js b/config.js
index 7097bd1..5d8f84c 100644
--- a/config.js
+++ b/config.js
@@ -19,4 +19,4 @@ export function setSpace(space) {
SPACE = space;
}
-export const DRAG_THRESHOLD = 10;
+export const DRAG_THRESHOLD_3D = 10;
diff --git a/display/graph.js b/display/graph.js
index 9108557..c2a1eaf 100644
--- a/display/graph.js
+++ b/display/graph.js
@@ -9,7 +9,7 @@ import {
CSS3DRenderer,
CSS3DSprite,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import { MODE, DRAG_THRESHOLD } from "../config";
+import { MODE, DRAG_THRESHOLD_3D } from "../config";
/**
* The main ForceGraph. Displays the graph and handles all connected events.
@@ -200,7 +200,7 @@ export default class Graph {
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)) < DRAG_THRESHOLD) {
+ if(Math.sqrt(Math.pow(translate.x, 2)+ Math.pow(translate.y, 2)+ Math.pow(translate.z, 2)) < DRAG_THRESHOLD_3D) {
this.onNodeClick(node);
}
}
diff --git a/editor/js/editor.js b/editor/js/editor.js
index c111023..c6c11dc 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -9,6 +9,7 @@ import { setSpace, SPACE } from "../../config";
export var state = undefined;
export var graph = undefined;
var graphObj;
+export const DRAG_THRESHOLD_2D = 5;
window.onload = function () {
// Only execute, if corresponding dom is present
@@ -60,6 +61,7 @@ function load() {
.linkColor((link) => state.linkColor(link))
.nodeColor((node) => state.nodeColor(node))
.onNodeClick((node) => state.onNodeClick(node))
+ .onNodeDragEnd((node, translate) => onNodeDragEnd(node, translate))
.autoPauseRedraw(false) // keep redrawing after engine has stopped
.linkWidth((link) => state.linkWidth(link))
.linkDirectionalParticles(state.linkDirectionalParticles())
@@ -79,3 +81,9 @@ 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)
+ }
+}
--
GitLab