From 04dafd01ce2faf9bf64791262dc1d9d16912296b Mon Sep 17 00:00:00 2001
From: mgfcf <m.giller@tu-braunschweig.de>
Date: Sat, 4 Sep 2021 17:58:10 +0200
Subject: [PATCH] Implemented link colors for different types
---
editor/js/editor.js | 3 ++-
editor/js/graph.js | 28 ++++++++++++++++++++++++++--
editor/js/state.js | 8 ++++++++
editor/js/tools/tool.js | 16 ++++++++++++++++
4 files changed, 52 insertions(+), 3 deletions(-)
diff --git a/editor/js/editor.js b/editor/js/editor.js
index 4ed0260..2ac4c8f 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -50,7 +50,8 @@ function load() {
.width(width)
.graphData(graph.data)
.nodeLabel(Graph.NODE_LABEL)
- .nodeAutoColorBy(Graph.NODE_GROUP)
+ .linkColor((link) => state.linkColor(link))
+ .nodeColor((node) => state.nodeColor(node))
.onNodeClick((node) => state.onNodeClick(node))
.autoPauseRedraw(false) // keep redrawing after engine has stopped
.linkWidth((link) => state.linkWidth(link))
diff --git a/editor/js/graph.js b/editor/js/graph.js
index 85c0b05..86184dd 100644
--- a/editor/js/graph.js
+++ b/editor/js/graph.js
@@ -1,5 +1,5 @@
import ManagedData from "./manageddata";
-import { PLUGIN_PATH } from "../../config";
+import { PLUGIN_PATH, COLOR_PALETTE } from "../../config";
export const NODE_LABEL = "name";
export const NODE_ID = "id";
@@ -23,7 +23,7 @@ export const NODE_PARAMS = [NODE_ID, NODE_LABEL, NODE_IMAGE, NODE_DESCRIPTION];
export const LINK_SIM_PARAMS = ["index"];
export const NODE_SIM_PARAMS = ["index", "x", "y", "vx", "vy", "fx", "fy"]; // Based on https://github.com/d3/d3-force#simulation_nodes
-export const JSON_CONFIG = PLUGIN_PATH + "datasets/aud1.json";
+export const JSON_CONFIG = PLUGIN_PATH + "datasets/aud1v2.json";
export const STOP_PHYSICS_DELAY = 5000; // ms
@@ -31,6 +31,7 @@ export class Graph extends ManagedData {
constructor(data) {
super(Graph.addIdentifiers(data));
+ this.calculateLinkTypes();
this.onChangeCallbacks = [];
}
@@ -50,6 +51,29 @@ export class Graph extends ManagedData {
return this.getCleanData(data, true);
}
+ /**
+ * Based on the function from the 3d-graph code from @JoschaRode
+ */
+ calculateLinkTypes() {
+ const linkClasses = [];
+
+ this.data[GRAPH_LINKS].forEach((link) =>
+ linkClasses.push(link[LINK_TYPE])
+ );
+
+ this.linkTypes = [...new Set(linkClasses)];
+ }
+
+ getLinkColor(link) {
+ return this.getLinkTypeColor(link[LINK_TYPE])
+ }
+
+ getLinkTypeColor(linkClass) {
+ var classIndex = this.linkTypes.indexOf(linkClass);
+
+ return COLOR_PALETTE[classIndex % COLOR_PALETTE.length];
+ }
+
deleteNode(nodeId) {
// Delete node from nodes
this.data[GRAPH_NODES] = this.data[GRAPH_NODES].filter(
diff --git a/editor/js/state.js b/editor/js/state.js
index 112ab2c..8811761 100644
--- a/editor/js/state.js
+++ b/editor/js/state.js
@@ -90,6 +90,14 @@ export class State extends Tool {
this.tool.onLinkClick(link);
}
+ linkColor(link) {
+ return graph.getLinkColor(link);
+ }
+
+ nodeColor(node) {
+ return 'lightblue';
+ }
+
onKeyDown(key) {
var id = this.getKeyId(key);
var previous = this.keyStates[id];
diff --git a/editor/js/tools/tool.js b/editor/js/tools/tool.js
index 8b43784..0313a24 100644
--- a/editor/js/tools/tool.js
+++ b/editor/js/tools/tool.js
@@ -92,6 +92,22 @@ export default class Tool {
}
}
+ linkColor(link) {
+ if (this.warnings) {
+ console.warn(
+ 'Method "linkColor" not implemented.'
+ );
+ }
+ }
+
+ nodeColor(node) {
+ if (this.warnings) {
+ console.warn(
+ 'Method "nodeColor" not implemented.'
+ );
+ }
+ }
+
onBackgroundClick(event, positions) {
if (this.warnings) {
console.warn('Method "onBackgroundClick" not implemented.');
--
GitLab