From 9086b39e46dcbd1ccc72ae645a048295065ee6d8 Mon Sep 17 00:00:00 2001
From: Ignacio DM <ignaciofdm@gmail.com>
Date: Sun, 31 Jul 2022 14:20:47 -0300
Subject: [PATCH] Fix example node/edge deletion

With 8.0 breaking changes, the example was no longer working (it was using the old functions)
---
 src/examples/graph.js | 87 +++++++++++++++++++++++++------------------
 1 file changed, 50 insertions(+), 37 deletions(-)

diff --git a/src/examples/graph.js b/src/examples/graph.js
index e467a477..672db700 100644
--- a/src/examples/graph.js
+++ b/src/examples/graph.js
@@ -222,7 +222,6 @@ type IGraphProps = {};
 
 type IGraphState = {
   graph: any,
-  selected: any,
   selected: SelectionT | null,
   totalNodes: number,
   copiedNode: null | INode,
@@ -246,8 +245,6 @@ class Graph extends React.Component<IGraphProps, IGraphState> {
       graph: sample,
       layoutEngineType: undefined,
       selected: null,
-      selectedNodes: null,
-      selectedEdges: null,
       totalNodes: sample.nodes.length,
       allowMultiselect: true,
       locationOverrides: {},
@@ -381,35 +378,6 @@ class Graph extends React.Component<IGraphProps, IGraphState> {
     this.setState({ graph });
   };
 
-  // Deletes a node from the graph
-  onDeleteNode = (viewNode: INode, nodeId: string, nodeArr: INode[]) => {
-    // Note: onDeleteEdge is also called from react-digraph for connected nodes
-    const graph = this.state.graph;
-
-    graph.nodes = nodeArr;
-
-    this.deleteEdgesForNode(nodeId);
-
-    this.setState({ graph, selected: null });
-  };
-
-  // Whenever a node is deleted the consumer must delete any connected edges.
-  // react-digraph won't call deleteEdge for multi-selected edges, only single edge selections.
-  deleteEdgesForNode(nodeID: string) {
-    const { graph } = this.state;
-    const edgesToDelete = graph.edges.filter(
-      edge => edge.source === nodeID || edge.target === nodeID
-    );
-
-    const newEdges = graph.edges.filter(
-      edge => edge.source !== nodeID && edge.target !== nodeID
-    );
-
-    edgesToDelete.forEach(edge => {
-      this.onDeleteEdge(edge, newEdges);
-    });
-  }
-
   // Creates a new node between two edges
   onCreateEdge = (sourceViewNode: INode, targetViewNode: INode) => {
     const graph = this.state.graph;
@@ -461,11 +429,56 @@ class Graph extends React.Component<IGraphProps, IGraphState> {
     });
   };
 
-  // Called when an edge is deleted
-  onDeleteEdge = (viewEdge: IEdge, edges: IEdge[]) => {
+  onDeleteSelected = (selection: SelectionT) => {
     const graph = this.state.graph;
+    let newEdges = this.state.graph.edges;
+
+    // If there are selected nodes, first delete
+    // all edges associated with this node
+    if (selection.nodes) {
+      selection.nodes.forEach(selectedNode => {
+        newEdges = newEdges.filter(testEdge => {
+          // If there is an edge with a source or target pointing
+          // to this node, filter it out
+          if (
+            testEdge.source === selectedNode.id ||
+            testEdge.target === selectedNode.id
+          ) {
+            return false;
+          }
+
+          return true;
+        });
+      });
+    }
+
+    // Delete all selected nodes
+    const newNodes = this.state.graph.nodes.filter(testNode => {
+      const testNodeId = testNode.id;
+
+      // Filter out if the selection contains this node
+      if (selection.nodes && selection.nodes.has(testNodeId)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    // Delete all selected edges
+    newEdges = newEdges.filter(testEdge => {
+      const testEdgeId = `${testEdge.source}_${testEdge.target}`;
+
+      // Filter out if the selection contains this edge
+      if (selection.edges && selection.edges.has(testEdgeId)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    graph.nodes = newNodes;
+    graph.edges = newEdges;
 
-    graph.edges = edges;
     this.setState({
       graph,
       selected: null,
@@ -640,10 +653,10 @@ class Graph extends React.Component<IGraphProps, IGraphState> {
             onSelect={this.onSelect}
             onCreateNode={this.onCreateNode}
             onUpdateNode={this.onUpdateNode}
-            onDeleteNode={this.onDeleteNode}
             onCreateEdge={this.onCreateEdge}
             onSwapEdge={this.onSwapEdge}
-            onDeleteEdge={this.onDeleteEdge}
+            canDeleteSelected={() => true}
+            onDeleteSelected={this.onDeleteSelected}
             onUndo={this.onUndo}
             onCopySelected={this.onCopySelected}
             onPasteSelected={this.onPasteSelected}