Highlight targeted node

components/graph/base.js

@@ -1,3 +1,4 @@
+/* global document */
 
 const r = require('r-dom');
 
@@ -22,6 +23,28 @@ class GraphView extends GraphViewBase {
 		});
 	}
 
+	shouldComponentUpdate(nextProps, nextState) {
+		return super.shouldComponentUpdate(nextProps, nextState) ||
+			this.state.edgeEndNode !== nextState.edgeEndNode;
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+		const { nodeKey } = this.props;
+
+		if (this.state.edgeEndNode !== prevState.edgeEndNode) {
+			if (prevState.edgeEndNode) {
+				const prevNode = document.getElementById('node-' + prevState.edgeEndNode[nodeKey]);
+				prevNode.classList.remove('targeted');
+			}
+			if (this.state.edgeEndNode) {
+				const node = document.getElementById('node-' + this.state.edgeEndNode[nodeKey]);
+				node.classList.add('targeted');
+			}
+		}
+
+		super.componentDidUpdate(prevProps, prevState);
+	}
+
 	handleNodeMove(position, nodeId, shiftKey) {
 		this._super_handleNodeMove(position, nodeId, shiftKey);
 		if (this.props.onNodeMove) {

components/graph/index.js

@@ -17,8 +17,6 @@ const r = require('r-dom');
 const { connect } = require('react-redux');
 const { bindActionCreators } = require('redux');
 
-const math = require('mathjs');
-
 const d = require('../../utils/d');
 
 const {

index.css

@@ -55,6 +55,9 @@ button:active {
 .view-wrapper .node.hovered {
 	stroke: var(--themeSelectedBgColor);
 }
+.view-wrapper .node.targeted {
+	stroke: var(--themeSelectedBgColor);
+}
 .view-wrapper .node.selected {
 	fill: var(--themeSelectedBgColor);
 	color: var(--themeSelectedFgColor);