Implemented link colors for different types

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))

editor/js/graph.js

 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(

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];

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.');