Fixed a few bugs related to bad props/state type checking.

src/editor/renderer.tsx

@@ -41,6 +41,10 @@ export class GraphRenderer2D extends React.PureComponent<
     constructor(props: InferType<typeof GraphRenderer2D.propTypes>) {
         super(props);
 
+        this.handleNodeClick = this.handleNodeClick.bind(this);
+        this.handleEngineStop = this.handleEngineStop.bind(this);
+        this.handleNodeDrag = this.handleNodeDrag.bind(this);
+        this.handleElementRightClick = this.handleElementRightClick.bind(this);
         this.screen2GraphCoords = this.screen2GraphCoords.bind(this);
         this.handleNodeCanvasObject = this.handleNodeCanvasObject.bind(this);
         this.handleLinkCanvasObject = this.handleLinkCanvasObject.bind(this);
@@ -62,6 +66,7 @@ export class GraphRenderer2D extends React.PureComponent<
             selectedNodes: [], // TODO: Why was undefined allowed here?
         };
 
+        this.keys = {};
         this.forceGraph = React.createRef();
     }
 
@@ -100,7 +105,7 @@ export class GraphRenderer2D extends React.PureComponent<
     private handleNodeClick(node: Node) {
         this.graphInFocus = true;
 
-        if (this.state.keys["Control"]) {
+        if (this.keys["Control"]) {
             // Connect to clicked node as parent while control is pressed
             if (this.state.selectedNodes.length == 0) {
                 // Have no node connected, so select
@@ -109,7 +114,7 @@ export class GraphRenderer2D extends React.PureComponent<
                 // Already have *other* node/s selected, so connect
                 this.connectSelectionToNode(node);
             }
-        } else if (this.state.keys["Shift"]) {
+        } else if (this.keys["Shift"]) {
             this.toggleNodeSelection(node);
         } else {
             // By default, simply select node
@@ -129,7 +134,7 @@ export class GraphRenderer2D extends React.PureComponent<
         this.graphInFocus = true;
 
         // Is there really no node there? Trying to prevent small error, where this event is triggered, even if there is a node.
-        const nearestNode = this.state.graph.getClosestNode(
+        const nearestNode = this.props.graph.getClosestNode(
             position.graph.x,
             position.graph.y
         );
@@ -139,7 +144,7 @@ export class GraphRenderer2D extends React.PureComponent<
         }
 
         // Just deselect if control key is pressed
-        if (this.state.keys["Control"]) {
+        if (this.keys["Control"]) {
             this.props.onNodeSelectionChanged([]);
             return;
         }
@@ -155,7 +160,7 @@ export class GraphRenderer2D extends React.PureComponent<
         this.forceUpdate(); // TODO: Remove?
 
         // Select newly created node
-        if (this.state.keys["Shift"]) {
+        if (this.keys["Shift"]) {
             // Simply add to current selection of shift is pressed
             this.toggleNodeSelection(node);
         } else {
@@ -177,22 +182,22 @@ export class GraphRenderer2D extends React.PureComponent<
      * Propagates the changed state of the graph.
      */
     private onGraphDataChange() {
-        const nodes: Node[] = this.state.selectedNodes.map((node: Node) =>
-            this.state.graph.node(node.id)
+        const nodes: Node[] = this.props.selectedNodes.map((node: Node) =>
+            this.props.graph.node(node.id)
         );
         this.props.onNodeSelectionChanged(nodes);
         this.forceUpdate(); // TODO
     }
 
     private connectSelectionToNode(node: Node) {
-        if (this.state.selectedNodes.length == 0) {
+        if (this.props.selectedNodes.length == 0) {
             return;
         }
 
-        if (this.state.selectedNodes.length == 1) {
+        if (this.props.selectedNodes.length == 1) {
             node.connect(this.state.selectedNodes[0]);
         } else {
-            this.state.selectedNodes.forEach((selectedNode: Node) =>
+            this.props.selectedNodes.forEach((selectedNode: Node) =>
                 node.connect(selectedNode)
             );
         }
@@ -200,7 +205,7 @@ export class GraphRenderer2D extends React.PureComponent<
 
     private toggleNodeSelection(node: Node) {
         // Convert selection to array as basis
-        let selection = this.state.selectedNodes;
+        let selection = this.props.selectedNodes;
 
         // Add/Remove node
         if (selection.includes(node)) {
@@ -262,7 +267,7 @@ export class GraphRenderer2D extends React.PureComponent<
         // TODO: Refactor
 
         // add ring just for highlighted nodes
-        if (this.state.selectedNodes.includes(node)) {
+        if (this.props.selectedNodes.includes(node)) {
             // Outer circle
             ctx.beginPath();
             ctx.arc(node.x, node.y, 4 * 0.7, 0, 2 * Math.PI, false);