diff --git a/components/graph/base.js b/components/graph/base.js index bfbabd8..8b8c624 100644 --- a/components/graph/base.js +++ b/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) { diff --git a/components/graph/index.js b/components/graph/index.js index 0033986..0f635e9 100644 --- a/components/graph/index.js +++ b/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 { diff --git a/index.css b/index.css index d4f4f43..6fb44f0 100644 --- a/index.css +++ b/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);