From 6682ff3de13c028bf40ca9de4c9887d40554a47c Mon Sep 17 00:00:00 2001
From: Mayank Yadav <mayankyadav@Mayanks-MacBook-Air.local>
Date: Fri, 26 Jun 2026 22:14:19 +0530
Subject: [PATCH] feat: allow Delete key to remove selected nodes

---
 src/react-app/App.tsx | 150 +++++++++++++++++++-----------------------
 1 file changed, 68 insertions(+), 82 deletions(-)

diff --git a/src/react-app/App.tsx b/src/react-app/App.tsx
index 1ae0445..1ce1f34 100644
--- a/src/react-app/App.tsx
+++ b/src/react-app/App.tsx
@@ -178,93 +178,79 @@ export default function App() {
   const tutorialPhase = useThemeStore((state) => state.tutorialPhase);
 
   return (
-  <>
-    {isMobile ? <MobileOverlay /> : 
-    <div style={{ width: '100vw', height: '100vh' }} className="app">
-        <>
-        <ReactFlow<AppNode, AppEdge>
-            nodes={visualNodes}
-            edges={visualEdges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            onConnectEnd={onConnectEnd}
-            onEdgesDelete={onEdgesDelete}
-            onNodesDelete={onNodesDelete}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            // connectionMode={ConnectionMode.Loose}
-            fitView
-            defaultEdgeOptions={defaultEdgeOptions}
-            colorMode={prefersDark ? 'dark' : 'light'}
-            
+    <>
+      {isMobile ? (
+        <MobileOverlay />
+      ) : (
+        <div style={{ width: "100vw", height: "100vh" }} className="app">
+          <>
+            <ReactFlow<AppNode, AppEdge>
+              nodes={visualNodes}
+              edges={visualEdges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onConnectEnd={onConnectEnd}
+              onEdgesDelete={onEdgesDelete}
+              onNodesDelete={onNodesDelete}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              // connectionMode={ConnectionMode.Loose}
+              fitView
+              defaultEdgeOptions={defaultEdgeOptions}
+              colorMode={prefersDark ? "dark" : "light"}
+              deleteKeyCode={["Backspace", "Delete"]}
             >
-          <Background />
-          <Controls />
-          <FocusController />
-        </ReactFlow>
-        </>
-
-
-        {/* Drawer on left to add species */}
-        <div className="action-container"
-        > 
-
-          <button 
-            className="action-button"
-
-            onClick={() => {
-              const id = 'N' + numberToLetters(nextId++);
-              const label = 'Species ' + String(nextId - 1);
-              const color = NODE_COLORS[0];
-              addNode(id, label, color, 'molecule');
-            }}
-
-            style={{
-              backgroundColor: NODE_COLORS[0]
-            }}
-          >
-            Add <div className="action-button-strong-text">Molecule</div>
-          </button>
-
-
-          <button 
-            className="action-button"
-
-            onClick={() => {
-              const id = 'N' + numberToLetters(nextId++);
-              const label = 'Species ' + String(nextId - 1);
-              const color = NODE_COLORS[1];
-              addNode(id, label, color, 'enzyme');
-            }}
-
-            style={{
-              backgroundColor: NODE_COLORS[1]
-            }}
+              <Background />
+              <Controls />
+              <FocusController />
+            </ReactFlow>
+          </>
+
+          {/* Drawer on left to add species */}
+          <div className="action-container">
+            <button
+              className="action-button"
+              onClick={() => {
+                const id = "N" + numberToLetters(nextId++);
+                const label = "Species " + String(nextId - 1);
+                const color = NODE_COLORS[0];
+                addNode(id, label, color, "molecule");
+              }}
+              style={{
+                backgroundColor: NODE_COLORS[0],
+              }}
+            >
+              Add <div className="action-button-strong-text">Molecule</div>
+            </button>
+
+            <button
+              className="action-button"
+              onClick={() => {
+                const id = "N" + numberToLetters(nextId++);
+                const label = "Species " + String(nextId - 1);
+                const color = NODE_COLORS[1];
+                addNode(id, label, color, "enzyme");
+              }}
+              style={{
+                backgroundColor: NODE_COLORS[1],
+              }}
+            >
+              Add <div className="action-button-strong-text">Enzyme</div>
+            </button>
+          </div>
 
-          >
-            Add <div className="action-button-strong-text">Enzyme</div>
-          </button>
+          <FeedbackDrawer />
+          <Banner />
+          <ToastError />
 
+          <TutorialPopup />
 
+          <RxnDrawer />
+          {tutorialPhase !== 0 && <SimulationDrawer />}
         </div>
-
-
-        
-
-
-        <FeedbackDrawer />
-        <Banner />
-        <ToastError />
-
-        <TutorialPopup />
-
-        <RxnDrawer />
-        {tutorialPhase !== 0 && <SimulationDrawer />}
-        
-      
-    </div>}
-  </>
+      )}
+    </>
   );
 }