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

Dynamically changing the node rendering based on node selection.

parent ff3d18a0
No related branches found
No related tags found
1 merge request!3Master into new editor
Pipeline #56807 passed
......@@ -128,7 +128,10 @@ class Display extends React.Component<
node={this.state.currentNode}
nodeColors={this.state.graph.nodeColors}
height={this.state.nodeActive ? this.state.height : 0}
onClose={this.handleNodeClose}
onClose={() => {
this.handleNodeClose();
this.rendererRef.current.deselectNode();
}}
nodeClickedCallback={this.handleNodeChangeRequest}
></NodeInfoBar>
)}
......@@ -148,6 +151,7 @@ class Display extends React.Component<
width={this.state.width}
height={this.state.height}
onNodeClicked={this.handleNodeClicked}
onNodeDeselected={this.handleNodeClose}
/>
)}
</div>
......
......@@ -9,7 +9,7 @@ import { Line2, LineGeometry, LineMaterial } from "three-fatline";
import React from "react";
import PropTypes, { InferType } from "prop-types";
import SpriteText from "three-spritetext";
import { Object3D } from "three";
import { Object3D, Sprite } from "three";
import Graph, { Coordinate, LinkData, NodeData } from "./graph";
export interface GraphNode extends NodeData {
......@@ -42,16 +42,18 @@ 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...
highlightedNodes: Set<GraphNode>;
highlightedLinks: Set<GraphLink>;
hoverNode: GraphNode;
private forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
private highlightedNodes: Set<GraphNode>;
private highlightedLinks: Set<GraphLink>;
private hoverNode: GraphNode;
private node3dObjects: Map<string, THREE.Group>;
static propTypes = {
graph: PropTypes.instanceOf(Graph).isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
onNodeClicked: PropTypes.func,
onNodeDeselected: PropTypes.func,
isFullscreen: PropTypes.bool,
};
......@@ -62,6 +64,7 @@ export class GraphRenderer extends React.PureComponent<
this.highlightedNodes = new Set();
this.highlightedLinks = new Set();
this.node3dObjects = new Map<string, THREE.Group>();
this.hoverNode = null;
this.forceGraph = React.createRef();
}
......@@ -122,7 +125,7 @@ export class GraphRenderer extends React.PureComponent<
sprite.scale.set(...Config.NODE_SIZE);
group.add(sprite);
this.node3dObjects.set(node.id, group);
return group;
}
......@@ -156,6 +159,7 @@ export class GraphRenderer extends React.PureComponent<
const line = new Line2(geometry, material);
line.computeLineDistances();
line.scale.set(1, 1, 1);
return line;
}
......@@ -223,11 +227,68 @@ export class GraphRenderer extends React.PureComponent<
});
}
deselectNode() {
this.node3dObjects.forEach((nodeObj) => this.makeNodeVisible(nodeObj));
for (const l of this.props.graph.links) {
l.__lineObj.material.opacity = 1.0;
}
if (this.props.onNodeDeselected !== undefined) {
this.props.onNodeDeselected();
}
}
displayNodeSelection(node: GraphNode) {
// Set all nodes to a grayed out state
this.node3dObjects.forEach((nodeObj) => {
this.makeNodeInvisible(nodeObj);
});
// Reset neighbors
for (const neighbor of node.neighbors) {
const neighborObj = this.node3dObjects.get(neighbor.id);
this.makeNodeVisible(neighborObj);
}
// Set all links to a grayed out state
for (const l of this.props.graph.links) {
l.__lineObj.material.opacity = 0.15;
}
// Reset for current connections
for (const l of node.links) {
const lObj = l as GraphLink;
lObj.__lineObj.material.opacity = 1.0;
}
// Reset for current node
const nodeObj = this.node3dObjects.get(node.id);
this.makeNodeVisible(nodeObj);
}
private makeNodeInvisible(nodeObjectGroup: THREE.Group) {
const text = nodeObjectGroup.children[0] as SpriteText;
text.material.opacity = 0.0;
const circle = nodeObjectGroup.children[1] as Sprite;
circle.material.opacity = 0.5;
}
private makeNodeVisible(nodeObjectGroup: THREE.Group) {
const text = nodeObjectGroup.children[0] as SpriteText;
text.material.opacity = 0.85;
const circle = nodeObjectGroup.children[1] as Sprite;
circle.material.opacity = 1.0;
}
onNodeClick(node: GraphNode) {
this.focusOnNode(node);
if (MODE === "default" && this.props.onNodeClicked) {
this.props.onNodeClicked(node);
}
this.displayNodeSelection(node);
}
onNodeDragEnd(node: GraphNode, translate: Coordinate) {
......@@ -306,6 +367,7 @@ export class GraphRenderer extends React.PureComponent<
nodeThreeObject={(node: GraphNode) => this.drawNode(node)}
linkThreeObject={(link: LinkData) => this.drawLink(link)}
onNodeClick={(node: GraphNode) => this.onNodeClick(node)}
onBackgroundClick={() => this.deselectNode()}
//d3AlphaDecay={0.1}
warmupTicks={150}
cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag?
......
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