Add keyboard shortcuts for changing modes

Fixes #2

Add keyboard shortcuts for changing between add, edit, delete functionality.

* **MicMasterFlex.tsx**
  - Import `useEffect` from React.
  - Add `useEffect` to handle keyboard event listeners for mode changes.
  - Add event listener for 'keydown' event to switch modes based on key pressed ('1' for Pan, '2' for Add, '3' for Edit, '4' for Delete).
  - Add cleanup function to remove event listeners on component unmount.

* **README.md**
  - Add section to document new keyboard shortcuts for changing modes.
  - Update table of contents to include the new section on keyboard shortcuts.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/nicolasperez19/mic-master-flex/issues/2?shareId=XXXX-XXXX-XXXX-XXXX).

README.md

@@ -19,7 +19,8 @@
 5. [Running the project locally](#running-the-project-locally)
 6. [Building the project locally](#building-the-project-locally)
 7. [Project structure](#project-structure)
-8. [Citation](#citation)
+8. [Keyboard Shortcuts](#keyboard-shortcuts)
+9. [Citation](#citation)
 
 ## 📸 Demo
 https://github.com/user-attachments/assets/419bda8b-d6a5-4f54-87b8-acef9d752226
@@ -82,6 +83,15 @@ There's nothing special about `src/components/`, but that's where we like to put
 
 Any static assets, like images, can be placed in the `public/` directory.
 
+## ⌨️ Keyboard Shortcuts
+
+MicMasterFlex now supports keyboard shortcuts for changing modes:
+
+- Press '1' for Pan mode
+- Press '2' for Add mode
+- Press '3' for Edit mode
+- Press '4' for Delete mode
+
 ## 📝 Citation
 
 If you'd like to cite this project, please use this BibTex:

src/components/MicMasterFlex.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Copy, ZoomIn, ZoomOut, PlusCircle, Trash2, Hand, Edit2 } from 'lucide-react';
 
 type Microphone = {
@@ -31,6 +31,33 @@ const MicMasterFlex = () => {
     const gridSize = 10; // 10x10 meters grid
     const gridDivisions = 20; // Grid lines every 0.5 meters
 
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            switch (e.key) {
+                case '1':
+                    setMode('pan');
+                    break;
+                case '2':
+                    setMode('add');
+                    break;
+                case '3':
+                    setMode('edit');
+                    break;
+                case '4':
+                    setMode('delete');
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+
     // Convert grid coordinates to screen coordinates
     const gridToScreen = (point: Point): Point => ({
         x: (point.x * zoom) + (window.innerWidth / 2) + pan.x,
@@ -357,4 +384,4 @@ const MicMasterFlex = () => {
     );
 };
 
-export default MicMasterFlex;
+export default MicMasterFlex;