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