refactor(delete): only trigger when some node or edge is selected #1987

example/src/Overview/index.tsx

@@ -200,7 +200,6 @@ const OverviewFlow = () => {
       maxZoom={Infinity}
       onNodesDelete={onNodesDelete}
       onEdgesDelete={onEdgesDelete}
-      deleteKeyCode={null}
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />

src/hooks/useGlobalKeyHandler.ts

@@ -43,34 +43,43 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
       const edgesToRemove = [...selectedEdges, ...connectedEdges];
       const edgeIdsToRemove = edgesToRemove.map((e) => e.id);
 
-      if (hasDefaultNodes) {
+      if (hasDefaultEdges || hasDefaultNodes) {
-        nodesToRemove.forEach((node) => {
+        if (hasDefaultEdges) {
-          nodeInternals.delete(node.id);
+          store.setState({
-        });
+            edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
+          });
+        }
+
+        if (hasDefaultNodes) {
+          nodesToRemove.forEach((node) => {
+            nodeInternals.delete(node.id);
+          });
+
+          store.setState({
+            nodeInternals: new Map(nodeInternals),
+          });
+        }
       }
 
-      if (hasDefaultEdges) {
+      if (edgeIdsToRemove.length > 0) {
-        store.setState({
+        onEdgesDelete?.(edgesToRemove);
-          nodeInternals: new Map(nodeInternals),
+
-          edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
+        if (onEdgesChange) {
-        });
+          const edgeChanges: EdgeChange[] = edgeIdsToRemove.map((id) => ({
+            id,
+            type: 'remove',
+          }));
+          onEdgesChange(edgeChanges);
+        }
       }
 
-      onEdgesDelete?.(edgesToRemove);
+      if (nodesToRemove.length > 0) {
-      onNodesDelete?.(nodesToRemove);
+        onNodesDelete?.(nodesToRemove);
 
-      if (onEdgesChange) {
+        if (onNodesChange) {
-        const edgeChanges: EdgeChange[] = edgeIdsToRemove.map((id) => ({
+          const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
-          id,
+          onNodesChange(nodeChanges);
-          type: 'remove',
+        }
-        }));
-
-        onEdgesChange(edgeChanges);
-      }
-
-      if (onNodesChange) {
-        const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
-        onNodesChange(nodeChanges);
       }
 
       store.setState({ nodesSelectionActive: false });