"updated single flow"

app/src/utils/outerClick.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface OuterClickProps {
-  contextClassName: string;
+  contextClassName: string[]; // Make sure this is an array of strings
   setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -11,8 +11,12 @@ export default function OuterClick({
 }: OuterClickProps) {
   const handleClick = (event: MouseEvent) => {
     const targets = event.target as HTMLElement;
-    // Check if the click is outside the selectable-dropdown-wrapper
-    if (!targets.closest(`.${contextClassName}`)) {
+    // Check if the click is outside of any of the provided class names
+    const isOutside = contextClassName.every(
+      (className) => !targets.closest(`.${className}`)
+    );
+
+    if (isOutside) {
       setMenuVisible(false); // Close the menu by updating the state
     }
   };
@@ -23,7 +27,7 @@ export default function OuterClick({
     return () => {
       document.removeEventListener("click", handleClick);
     };
-  }, []);
+  }, [contextClassName]); // Add contextClassName to dependency array to handle any changes
 
   return null; // This component doesn't render anything
 }

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -0,0 +1,198 @@
+// Importing React and useEffect from React library
+import React, { useEffect } from "react";
+// Importing the necessary hooks and types from React and TypeScript
+import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
+import useToggleStore from "../../store/useUIToggleStore";
+import { useActiveSubTool, useActiveTool, useAddAction, useDeleteTool, useSelectedWallItem, useToggleView, useToolMode } from "../../store/store";
+import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+
+const KeyPressListener: React.FC = () => {
+    // Function to detect if Shift, Ctrl, Alt, or combinations are pressed
+    const detectModifierKeys = (event: KeyboardEvent): string => {
+        const modifiers = [
+            event.ctrlKey ? "Ctrl" : "",
+            event.altKey ? "Alt" : "",
+            event.shiftKey ? "Shift" : "",
+            event.metaKey ? "Meta" : "" // Add support for Command/Win key
+        ].filter(Boolean);
+
+        // Ignore modifier keys when they're pressed alone
+        const isModifierKey = [
+            "Control", "Shift", "Alt", "Meta",
+            "Ctrl", "AltGraph", "OS" // Additional modifier key aliases
+        ].includes(event.key);
+
+        const mainKey = isModifierKey ? "" : event.key.toUpperCase();
+
+        // Handle special cases for keys with different representations
+        const normalizedKey = mainKey === " " ? "Space" : mainKey;
+
+        // Build the combination string
+        if (modifiers.length > 0 && normalizedKey) {
+            return `${modifiers.join("+")}+${normalizedKey}`;
+        } else if (modifiers.length > 0) {
+            return modifiers.join("+");
+        } else {
+            return normalizedKey;
+        }
+    };
+
+    // Importing the necessary hooks from the store
+    const { activeModule, setActiveModule } = useModuleStore();
+    const { setActiveSubTool } = useActiveSubTool();
+    const { toggleUI, setToggleUI } = useToggleStore();
+    const { setToggleThreeD } = useThreeDStore();
+    const { setToolMode } = useToolMode();
+    const { setIsPlaying } = usePlayButtonStore();
+
+    // wall options
+    const { toggleView, setToggleView } = useToggleView();
+    const { setDeleteTool } = useDeleteTool();
+    const { setAddAction } = useAddAction();
+    const { setSelectedWallItem } = useSelectedWallItem();
+    const { setActiveTool } = useActiveTool();
+
+    useEffect(() => {
+        // Function to handle keydown events
+        const handleKeyPress = (event: KeyboardEvent) => {
+
+            const activeElement = document.activeElement;
+
+            const isTyping = 
+              activeElement instanceof HTMLInputElement ||
+              activeElement instanceof HTMLTextAreaElement ||
+              (activeElement && activeElement.getAttribute('contenteditable') === 'true');
+      
+            if (isTyping) {
+              return; // Don't trigger shortcuts while typing
+            }
+
+            const keyCombination = detectModifierKeys(event);
+            
+            // Allow default behavior for F5 and F12
+            if (["F5", "F11", "F12"].includes(event.key) || keyCombination === "Ctrl+R") {
+                return;
+            }
+
+            // Prevent default action for the key press
+            event.preventDefault();
+
+            // Detect the key combination pressed
+            if (keyCombination) {
+                // Check for specific key combinations to switch modules
+                if (keyCombination === "1" && !toggleView) {
+                    setActiveTool("cursor");
+                    setActiveSubTool("cursor");
+                    setActiveModule("builder");
+                }
+                if (keyCombination === "2" && !toggleView) {
+                    setActiveTool("cursor");
+                    setActiveSubTool("cursor");
+                    setActiveModule("simulation");
+                }
+                if (keyCombination === "3" && !toggleView) {
+                    setActiveTool("cursor");
+                    setActiveSubTool("cursor");
+                    setActiveModule("visualization");
+                }
+                if (keyCombination === "4" && !toggleView) {
+                    setActiveTool("cursor");
+                    setActiveSubTool("cursor");
+                    setToggleUI(false);
+                    setActiveModule("market");
+                }
+
+                // sidebar toggle
+                if (keyCombination === "Ctrl+." && activeModule !== "market") {
+                    setToggleUI(!toggleUI);
+                }
+
+                // tools toggle
+                if (keyCombination === "V") {
+                    setActiveTool("cursor");
+                    setActiveSubTool("cursor");
+                }
+                if (keyCombination === "X") {
+                    setActiveTool("delete");
+                    setActiveSubTool("delete");
+                }
+                if (keyCombination === "H") {
+                    setActiveTool("free-hand");
+                    setActiveSubTool("free-hand");
+                }
+
+                // player toggle
+                if (keyCombination === "Ctrl+P" && !toggleView) {
+                    setIsPlaying(true);
+                }
+
+                // builder key combination
+                if (activeModule === "builder") {
+                    if (keyCombination === "TAB") {
+                        if (toggleView) {
+                            setToggleView(false);
+                            setToggleThreeD(true);
+                            setActiveTool("cursor");
+                        } else {
+                            setSelectedWallItem(null);
+                            setDeleteTool(false);
+                            setAddAction(null);
+                            setToggleView(true);
+                            setToggleThreeD(false);
+                            setActiveTool("cursor");
+                        }
+                    }
+                    // builder tools
+                    if (toggleView) {
+                        if (keyCombination === "Q" || keyCombination === "6") {
+                            setActiveTool("draw-wall");
+                            setToolMode("Wall");
+                        }
+                        if (keyCombination === "R" || keyCombination === "7") {
+                            setActiveTool("draw-aisle");
+                            setToolMode("Aisle");
+                        }
+                        if (keyCombination === "E" || keyCombination === "8") {
+                            setActiveTool("draw-zone");
+                            setToolMode("Zone");
+                        }
+                        if (keyCombination === "T" || keyCombination === "9") {
+                            setActiveTool("draw-floor");
+                            setToolMode("Floor");
+                        }
+                    }
+                    if (keyCombination === "M") {
+                        setActiveTool("measure");
+                        setToolMode("MeasurementScale");
+                    }
+                }
+
+                // Undo redo
+                if (keyCombination === "Ctrl+Z") {
+                    // Handle undo action here
+                }
+                if (keyCombination === "Ctrl+Y" || keyCombination === "Ctrl+Shift+Z") {
+                    // Handle redo action here
+                }
+
+                // cleanup function to remove event listener
+                if (keyCombination === "ESCAPE") {
+                    setActiveTool("cursor");
+                    setIsPlaying(false);
+                }
+            }
+        };
+
+        // Add event listener for keydown
+        window.addEventListener("keydown", handleKeyPress);
+
+        // Cleanup function to remove event listener
+        return () => {
+            window.removeEventListener("keydown", handleKeyPress);
+        };
+    }, [activeModule, toggleUI, toggleView]); // Empty dependency array ensures this runs only once
+
+    return null; // No UI component to render, so return null
+};
+
+export default KeyPressListener;