refactor(nodes): also select edges when only one node is selected

src/GlobalKeyHandler/index.js

@@ -3,6 +3,7 @@ import { useEffect, useContext } from 'react';
 import { useKeyPress } from '../hooks';
 import { setNodesSelection } from '../state/actions';
 import { GraphContext } from '../GraphContext';
+import { isEdge, getConnectedEdges } from '../graph-utils';
 
 export default (props) => {
   const { state, dispatch } = useContext(GraphContext);
@@ -10,10 +11,18 @@ export default (props) => {
 
   useEffect(() => {
     if (removePressed && state.selectedElements.length) {
-      props.onElementsRemove(state.selectedElements);
+      let elementsToRemove = state.selectedElements;
+
+      // we also want to remove the edges if only one node is selected
+      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
+        const connectedEdges = getConnectedEdges(state.selectedElements, state.edges);
+        elementsToRemove = [...state.selectedElements, ...connectedEdges];
+      }
+
+      props.onElementsRemove(elementsToRemove);
       dispatch(setNodesSelection({ isActive: false }));
     }
   }, [removePressed])
 
   return null;
-}
+};

src/graph-utils.js

@@ -85,9 +85,15 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
     });
 };
 
+export const getConnectedEdges = (nodes, edges) => {
+  const nodeIds = nodes.map(n => n.data.id);
+  return edges.filter(e => nodeIds.includes(e.data.source) || nodeIds.includes(e.data.target))
+}
+
 export default {
   isEdge,
   separateElements,
   getBoundingBox,
-  graphPosToZoomedPos
+  graphPosToZoomedPos,
+  getConnectedEdges
 };

src/index.js

@@ -25,7 +25,8 @@ class ReactGraph extends PureComponent {
 
   render() {
     const {
-      style, onElementClick, children, onLoad, onMove, onChange, elements, onElementsRemove
+      style, onElementClick, children, onLoad,
+      onMove, onChange, elements, onElementsRemove
     } = this.props;
 
     const { nodes, edges } = elements

src/state/index.js

@@ -1,6 +1,6 @@
 import { zoomIdentity } from 'd3-zoom';
 
-import { getBoundingBox, getNodesInside } from '../graph-utils';
+import { getBoundingBox, getNodesInside, getConnectedEdges } from '../graph-utils';
 
 export const SET_EDGES = 'SET_EDGES';
 export const SET_NODES = 'SET_NODES';
@@ -79,10 +79,13 @@ export const reducer = (state, action) => {
     }
     case UPDATE_SELECTION: {
       const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
-      const selectedNodesIds = selectedNodes.map(n => n.data.id);
-      const selectedEdges = state.edges.filter(e => selectedNodesIds.includes(e.data.source) || selectedNodesIds.includes(e.data.target))
+      const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
 
-      return { ...state, ...action.payload, selectedElements: [...selectedNodes, ...selectedEdges] };
+      return {
+        ...state,
+        ...action.payload,
+        selectedElements: [...selectedNodes, ...selectedEdges]
+      };
     }
     case SET_NODES_SELECTION: {
       if (!action.payload.nodesSelectionActive) {
@@ -93,6 +96,7 @@ export const reducer = (state, action) => {
 
       return { ...state, ...action.payload, selectedNodesBbox };
     }
+    // unused
     case REMOVE_NODES: {
       const { ids } = action.payload;
       const nextEdges = state.edges.filter(e => !ids.includes(e.data.target) && !ids.includes(e.data.source));