refactor(change-events): cleanup delete events #2036

example/src/Stress/index.tsx

@@ -10,6 +10,8 @@ import ReactFlow, {
   applyNodeChanges,
   Connection,
   addEdge,
+  applyEdgeChanges,
+  EdgeChange,
 } from 'react-flow-renderer';
 
 import { getNodesAndEdges } from './utils';
@@ -21,7 +23,7 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log(reactFlowInstance.getNodes());
 };
 
-const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(30, 30);
+const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(5, 5);
 
 const StressFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
@@ -54,8 +56,19 @@ const StressFlow = () => {
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 
+  const onEdgeChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
+
   return (
-    <ReactFlow nodes={nodes} edges={edges} onInit={onInit} onConnect={onConnect} onNodesChange={onNodesChange}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onConnect={onConnect}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgeChange}
+    >
       <MiniMap />
       <Controls />
       <Background />

src/hooks/useGlobalKeyHandler.ts

@@ -12,14 +12,13 @@ interface HookParams {
 }
 
 const selector = (s: ReactFlowState) => ({
-  resetSelectedElements: s.resetSelectedElements,
   onNodesChange: s.onNodesChange,
   onEdgesChange: s.onEdgesChange,
 });
 
 export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const store = useStoreApi();
-  const { resetSelectedElements, onNodesChange, onEdgesChange } = useStore(selector, shallow);
+  const { onNodesChange, onEdgesChange } = useStore(selector, shallow);
 
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
@@ -41,7 +40,12 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
     if (deleteKeyPressed && (nodesToRemove || selectedEdges)) {
       const connectedEdges = getConnectedEdges(nodesToRemove, edges);
       const edgesToRemove = [...selectedEdges, ...connectedEdges];
-      const edgeIdsToRemove = edgesToRemove.map((e) => e.id);
+      const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
+        if (!res.includes(edge.id)) {
+          res.push(edge.id);
+        }
+        return res;
+      }, []);
 
       if (hasDefaultEdges || hasDefaultNodes) {
         if (hasDefaultEdges) {
@@ -83,8 +87,6 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
       }
 
       store.setState({ nodesSelectionActive: false });
-
-      resetSelectedElements();
     }
   }, [deleteKeyPressed, onNodesChange, onEdgesChange]);