diff --git a/editor/js/editor.js b/editor/js/editor.js index 4ed02600787948df6032b10f1c8515438199a9e9..2ac4c8f6d747d1f942412bcbfd790eb6da9d7a01 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 85c0b05db89f009633c563807b4d9cb64594302c..86184ddc0ab0a2c5618586ebcbb18d57a9ac9d3d 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 112ab2c087cc457d6d4e455654ff2a730fdb0cc7..8811761c918115da2106770847f715b834fd9219 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 8b437840f2b8b537cae7cddf92f8c13fdce8926d..0313a243094e5edc59b0d506dea7c59984bec820 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.');