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

Improved typing

parent 11bd8d04
No related branches found
No related tags found
No related merge requests found
...@@ -10,23 +10,16 @@ import React from "react"; ...@@ -10,23 +10,16 @@ import React from "react";
import PropTypes, { InferType } from "prop-types"; import PropTypes, { InferType } from "prop-types";
import SpriteText from "three-spritetext"; import SpriteText from "three-spritetext";
import { Object3D, Sprite } from "three"; import { Object3D, Sprite } from "three";
import { Graph, Coordinate, Link, Node } from "../common/graph/graph"; import { Graph, Coordinate } from "../common/graph/graph";
import { Node } from "../common/graph/node";
export interface GraphNode extends Node { import { Link } from "../common/graph/link";
x: number;
y: number; export interface VisualGraphNode extends Node {
z: number;
vx: number;
vy: number;
vz: number;
fx: number;
fy: number;
fz: number;
color: string; color: string;
__threeObj: THREE.Group; __threeObj: THREE.Group;
} }
export interface GraphLink extends Link { export interface VisualGraphLink extends Link {
__lineObj?: Line2; __lineObj?: Line2;
} }
...@@ -43,9 +36,9 @@ export class GraphRenderer extends React.PureComponent< ...@@ -43,9 +36,9 @@ export class GraphRenderer extends React.PureComponent<
props: InferType<typeof GraphRenderer.propTypes>; props: InferType<typeof GraphRenderer.propTypes>;
state: InferType<typeof GraphRenderer.stateTypes>; state: InferType<typeof GraphRenderer.stateTypes>;
private forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here... private forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
private highlightedNodes: Set<GraphNode>; private highlightedNodes: Set<VisualGraphNode>;
private highlightedLinks: Set<GraphLink>; private highlightedLinks: Set<VisualGraphLink>;
private hoverNode: GraphNode; private hoverNode: VisualGraphNode;
private node3dObjects: Map<number, THREE.Group>; private node3dObjects: Map<number, THREE.Group>;
static propTypes = { static propTypes = {
...@@ -91,7 +84,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -91,7 +84,7 @@ export class GraphRenderer extends React.PureComponent<
this.forceGraph.current.scene().add(mesh); this.forceGraph.current.scene().add(mesh);
} }
drawNode(node: GraphNode): Object3D { drawNode(node: VisualGraphNode): Object3D {
const group = new THREE.Group(); const group = new THREE.Group();
const text = new SpriteText(node.name); const text = new SpriteText(node.name);
...@@ -167,7 +160,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -167,7 +160,7 @@ export class GraphRenderer extends React.PureComponent<
return line; return line;
} }
onNodeHover(node: GraphNode) { onNodeHover(node: VisualGraphNode) {
// no state change // no state change
if ( if (
(!node && !this.highlightedNodes.size) || (!node && !this.highlightedNodes.size) ||
...@@ -175,16 +168,16 @@ export class GraphRenderer extends React.PureComponent< ...@@ -175,16 +168,16 @@ export class GraphRenderer extends React.PureComponent<
) )
return; return;
const highlightedNodes = new Set<GraphNode>(); const highlightedNodes = new Set<VisualGraphNode>();
const highlightedLinks = new Set<GraphLink>(); const highlightedLinks = new Set<VisualGraphLink>();
if (node) { if (node) {
highlightedNodes.add(node); highlightedNodes.add(node);
node.neighbors.forEach((neighbor) => node.neighbors.forEach((neighbor) =>
highlightedNodes.add(neighbor as GraphNode) highlightedNodes.add(neighbor as VisualGraphNode)
); );
node.links.forEach((link) => node.links.forEach((link) =>
highlightedLinks.add(link as GraphLink) highlightedLinks.add(link as VisualGraphLink)
); );
} }
...@@ -192,22 +185,22 @@ export class GraphRenderer extends React.PureComponent< ...@@ -192,22 +185,22 @@ export class GraphRenderer extends React.PureComponent<
this.updateHighlight(highlightedNodes, highlightedLinks); this.updateHighlight(highlightedNodes, highlightedLinks);
} }
onLinkHover(link: GraphLink) { onLinkHover(link: VisualGraphLink) {
const highlightedNodes = new Set<GraphNode>(); const highlightedNodes = new Set<VisualGraphNode>();
const highlightedLinks = new Set<GraphLink>(); const highlightedLinks = new Set<VisualGraphLink>();
if (link && link.__lineObj) { if (link && link.__lineObj) {
highlightedLinks.add(link); highlightedLinks.add(link);
highlightedNodes.add(link.source as GraphNode); highlightedNodes.add(link.source as VisualGraphNode);
highlightedNodes.add(link.target as GraphNode); highlightedNodes.add(link.target as VisualGraphNode);
} }
this.updateHighlight(highlightedNodes, highlightedLinks); this.updateHighlight(highlightedNodes, highlightedLinks);
} }
updateHighlight( updateHighlight(
highlightedNodes: Set<GraphNode>, highlightedNodes: Set<VisualGraphNode>,
highlightedLinks: Set<GraphLink> highlightedLinks: Set<VisualGraphLink>
) { ) {
// Update Links // Update Links
this.highlightedLinks.forEach( this.highlightedLinks.forEach(
...@@ -243,7 +236,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -243,7 +236,7 @@ export class GraphRenderer extends React.PureComponent<
} }
} }
displayNodeSelection(node: GraphNode) { displayNodeSelection(node: VisualGraphNode) {
// Set all nodes to a grayed out state // Set all nodes to a grayed out state
this.node3dObjects.forEach((nodeObj) => { this.node3dObjects.forEach((nodeObj) => {
this.makeNodeInvisible(nodeObj); this.makeNodeInvisible(nodeObj);
...@@ -262,7 +255,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -262,7 +255,7 @@ export class GraphRenderer extends React.PureComponent<
// Reset for current connections // Reset for current connections
for (const l of node.links) { for (const l of node.links) {
const lObj = l as GraphLink; const lObj = l as VisualGraphLink;
lObj.__lineObj.material.opacity = 1.0; lObj.__lineObj.material.opacity = 1.0;
} }
...@@ -287,7 +280,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -287,7 +280,7 @@ export class GraphRenderer extends React.PureComponent<
circle.material.opacity = 1.0; circle.material.opacity = 1.0;
} }
onNodeClick(node: GraphNode) { onNodeClick(node: VisualGraphNode) {
this.focusOnNode(node); this.focusOnNode(node);
if (MODE === "default" && this.props.onNodeClicked) { if (MODE === "default" && this.props.onNodeClicked) {
this.props.onNodeClicked(node); this.props.onNodeClicked(node);
...@@ -295,7 +288,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -295,7 +288,7 @@ export class GraphRenderer extends React.PureComponent<
this.displayNodeSelection(node); this.displayNodeSelection(node);
} }
onNodeDragEnd(node: GraphNode, translate: Coordinate) { onNodeDragEnd(node: VisualGraphNode, translate: Coordinate) {
// NodeDrag is handled like NodeClick if distance is very short // NodeDrag is handled like NodeClick if distance is very short
if ( if (
Math.hypot(translate.x, translate.y, translate.z) < Math.hypot(translate.x, translate.y, translate.z) <
...@@ -305,7 +298,7 @@ export class GraphRenderer extends React.PureComponent< ...@@ -305,7 +298,7 @@ export class GraphRenderer extends React.PureComponent<
} }
} }
focusOnNode(node: GraphNode) { focusOnNode(node: VisualGraphNode) {
const distance = 400; // Aim at node from outside it const distance = 400; // Aim at node from outside it
const speed = 0.5; // Camera travel speed through space const speed = 0.5; // Camera travel speed through space
const minTime = 1000; // Minimum transition time const minTime = 1000; // Minimum transition time
...@@ -369,21 +362,21 @@ export class GraphRenderer extends React.PureComponent< ...@@ -369,21 +362,21 @@ export class GraphRenderer extends React.PureComponent<
graphData={this.props.graph} graphData={this.props.graph}
rendererConfig={{ antialias: true }} rendererConfig={{ antialias: true }}
// nodeLabel={"hidden"} // nodeLabel={"hidden"}
nodeThreeObject={(node: GraphNode) => this.drawNode(node)} nodeThreeObject={(node: VisualGraphNode) => this.drawNode(node)}
linkThreeObject={(link: Link) => this.drawLink(link)} linkThreeObject={(link: Link) => this.drawLink(link)}
onNodeClick={(node: GraphNode) => this.onNodeClick(node)} onNodeClick={(node: VisualGraphNode) => this.onNodeClick(node)}
onBackgroundClick={() => this.deselectNode()} onBackgroundClick={() => this.deselectNode()}
//d3AlphaDecay={0.1} //d3AlphaDecay={0.1}
warmupTicks={150} warmupTicks={150}
cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag? cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag?
enableNodeDrag={false} enableNodeDrag={false}
onNodeHover={(node: GraphNode) => this.onNodeHover(node)} onNodeHover={(node: VisualGraphNode) => this.onNodeHover(node)}
onLinkHover={(link: GraphLink) => this.onLinkHover(link)} onLinkHover={(link: VisualGraphLink) => this.onLinkHover(link)}
linkPositionUpdate={( linkPositionUpdate={(
line: Line2, line: Line2,
coords: { start: Coordinate; end: Coordinate } coords: { start: Coordinate; end: Coordinate }
) => this.updateLinkPosition(line, coords.start, coords.end)} ) => this.updateLinkPosition(line, coords.start, coords.end)}
onNodeDragEnd={(node: GraphNode, translate: Coordinate) => onNodeDragEnd={(node: VisualGraphNode, translate: Coordinate) =>
this.onNodeDragEnd(node, translate) this.onNodeDragEnd(node, translate)
} }
/> />
......
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