feat(keyhandler): add onNodeRemove callback

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -3,20 +3,20 @@ import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
 import { GraphContext } from '../../GraphContext';
-import { updateNodeData, updateNodePos } from '../../state/actions';
+import { updateNodeData, updateNodePos, setSelectedNodesIds } from '../../state/actions';
 
 const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
 export default NodeComponent => (props) => {
   const nodeElement = useRef(null);
-  const graphContext = useContext(GraphContext);
+  const { state, dispatch } = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
 
   const { data, onNodeClick, __rg } = props;
   const { position } = __rg;
   const { id } = data;
-  const [ x, y, k ] = graphContext.state.transform;
-  const selected = graphContext.state.selectedNodeIds.includes(id);
+  const [ x, y, k ] = state.transform;
+  const selected = state.selectedNodeIds.includes(id);
   const nodeClasses = cx('react-graph__node', { selected });
 
   useEffect(() => {
@@ -24,7 +24,7 @@ export default NodeComponent => (props) => {
     const unscaledWith = Math.round(bounds.width * (1 / k));
     const unscaledHeight = Math.round(bounds.height * (1 / k));
 
-    graphContext.dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight }));
+    dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight }));
   }, []);
 
   return (
@@ -50,7 +50,7 @@ export default NodeComponent => (props) => {
           y: e.clientY * (1 / k)
         }
 
-        graphContext.dispatch(updateNodePos(id, {
+        dispatch(updateNodePos(id, {
           x: unscaledPos.x - x - offset.x,
           y: unscaledPos.y - y - offset.y
         }));
@@ -65,6 +65,8 @@ export default NodeComponent => (props) => {
           if (isInputTarget(e)) {
             return false;
           }
+
+          dispatch(setSelectedNodesIds(id));
           onNodeClick({ data, position });
         }}
       >