From 0ca9dd7dfde16464c7d88cbbe773765e84309cec Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 9 Sep 2022 14:23:47 +0200
Subject: [PATCH] Improved typing
---
src/display/renderer.tsx | 71 ++++++++++++++++++----------------------
1 file changed, 32 insertions(+), 39 deletions(-)
diff --git a/src/display/renderer.tsx b/src/display/renderer.tsx
index 7f19e95..e9a5c12 100644
--- a/src/display/renderer.tsx
+++ b/src/display/renderer.tsx
@@ -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)
}
/>
--
GitLab