Skip to content
Snippets Groups Projects
Commit 34717c16 authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Moved color mapping from the renderer to the graph data structure.

parent 1c9db559
No related branches found
No related tags found
1 merge request!3Master into new editor
import * as Config from "../config";
interface Link {
source: string;
target: string;
......@@ -33,6 +35,8 @@ export default class Graph {
public nodes: NodeData[];
public links: LinkData[];
private idToNode: Map<string, NodeData>;
public edgeColors: Map<string, string>;
public nodeColors: Map<string, string>;
constructor(nodes: NodeData[], links: Link[]) {
this.nodes = nodes;
......@@ -49,11 +53,16 @@ export default class Graph {
};
});
this.edgeColors = new Map<string, string>();
this.nodeColors = new Map<string, string>();
this.resetNodeData();
this.updateNodeData();
this.mapNodeColors();
this.mapLinkColors();
}
resetNodeData() {
private resetNodeData() {
for (const node of this.nodes) {
node.neighbors = [];
node.links = [];
......@@ -64,7 +73,7 @@ export default class Graph {
* Updates the graph data structure to contain additional values.
* Creates a 'neighbors' and 'links' array for each node object.
*/
updateNodeData() {
private updateNodeData() {
this.resetNodeData();
this.links.forEach((link) => {
......@@ -77,28 +86,55 @@ export default class Graph {
});
}
node(id: string): NodeData {
public node(id: string): NodeData {
return this.idToNode.get(id);
}
/**
* Maps the colors of the color palette to the different edge types
*/
private mapLinkColors() {
// TODO: Legacy - is there a use-case for link types?
const linkClasses = this.getLinkClasses();
for (let i = 0; i < linkClasses.length; i++) {
this.edgeColors.set(
linkClasses[i],
Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
);
}
}
/**
* Maps the colors of the color palette to the different edge types
*/
private mapNodeColors() {
const nodeClasses = this.getNodeClasses();
for (let i = 0; i < nodeClasses.length; i++) {
this.nodeColors.set(
nodeClasses[i],
Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
);
}
}
/**
* Returns an array containing the different edge types of the graph.
* @returns {*[]}
*/
getLinkClasses(): string[] {
public getLinkClasses(): string[] {
const linkClasses: string[] = [];
this.links.forEach((link) => linkClasses.push(link.type));
return [...new Set(linkClasses)].map((c) => String(c));
}
getNodeClasses(): string[] {
public getNodeClasses(): string[] {
const nodeClasses: string[] = [];
this.nodes.forEach((node) => nodeClasses.push(node.type));
return [...new Set(nodeClasses)].map((c) => String(c));
}
view(
public view(
nodeTypes: Map<string, boolean>,
linkTypes: Map<string, boolean>
): Graph {
......
......@@ -39,8 +39,6 @@ export class GraphRenderer extends React.PureComponent<
props: InferType<typeof GraphRenderer.propTypes>;
state: InferType<typeof GraphRenderer.stateTypes>;
forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
edgeColors: Map<string, string>;
nodeColors: Map<string, string>;
highlightedNodes: Set<GraphNode>;
highlightedLinks: Set<GraphLink>;
hoverNode: GraphNode;
......@@ -62,11 +60,6 @@ export class GraphRenderer extends React.PureComponent<
this.highlightedLinks = new Set();
this.hoverNode = null;
this.forceGraph = React.createRef();
this.edgeColors = new Map<string, string>();
this.nodeColors = new Map<string, string>();
this.mapLinkColors();
this.mapNodeColors();
}
componentDidMount() {
......@@ -112,7 +105,7 @@ export class GraphRenderer extends React.PureComponent<
const material = new THREE.SpriteMaterial({
//map: imageTexture,
color: this.nodeColors.get(node.type),
color: this.props.graph.nodeColors.get(node.type),
alphaMap: imageAlpha,
transparent: true,
alphaTest: 0.2,
......@@ -133,9 +126,9 @@ export class GraphRenderer extends React.PureComponent<
const colors = new Float32Array(
[].concat(
...[link.target, link.source]
.map((node) => this.nodeColors.get(node.type))
.map((node) => this.props.graph.nodeColors.get(node.type))
.map((color) => color.replace(/[^\d,]/g, "").split(",")) // Extract rgb() color components
.map((rgb) => rgb.map((v) => parseInt(v) / 255))
.map((rgb) => rgb.map((v: string) => parseInt(v) / 255))
)
);
......@@ -268,34 +261,6 @@ export class GraphRenderer extends React.PureComponent<
);
}
/**
* Maps the colors of the color palette to the different edge types
*/
mapLinkColors() {
// TODO: Move this to the graph data structure - access is also needed in the other menues?
const linkClasses = this.props.graph.getLinkClasses();
for (let i = 0; i < linkClasses.length; i++) {
this.edgeColors.set(
linkClasses[i],
Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
);
}
}
/**
* Maps the colors of the color palette to the different edge types
*/
mapNodeColors() {
// TODO: Move this to the graph data structure - access is also needed in the other menues?
const nodeClasses = this.props.graph.getNodeClasses();
for (let i = 0; i < nodeClasses.length; i++) {
this.nodeColors.set(
nodeClasses[i],
Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
);
}
}
updateLinkPosition(line: Line2, start: Coordinate, end: Coordinate) {
if (!(line instanceof Line2)) {
return false;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment