add initial components and utility functions for simulation and builder modules

app/src/components/ui/Tools.tsx

@@ -17,6 +17,7 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
+import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
@@ -32,12 +33,32 @@ const Tools: React.FC = () => {
   const { addTemplate } = useTemplateStore();
   const { selectedZone } = useSelectedZoneStore();
 
+  // wall options
+  const { setToggleView } = useToggleView();
+  const { setDeleteModels } = useDeleteModels();
+  const { setAddAction } = useAddAction();
+  const { setSelectedWallItem } = useSelectedWallItem();
+
+
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
   }, [activeModule]);
 
+  const toggleSwitch = () => {
+    if (toggleThreeD) {
+      setSelectedWallItem(null);
+      setDeleteModels(false);
+      setAddAction(null);
+      setToggleView(true);
+    }
+    else {
+      setToggleView(false);
+    }
+    setToggleThreeD(!toggleThreeD);
+  };
+
   useEffect(() => {
     const handleOutsideClick = (event: MouseEvent) => {
       if (
@@ -61,9 +82,8 @@ const Tools: React.FC = () => {
         <div className="activeDropicon">
           {activeSubTool == "cursor" && (
             <div
-              className={`tool-button ${
-                activeTool === "cursor" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("cursor");
               }}
@@ -73,9 +93,8 @@ const Tools: React.FC = () => {
           )}
           {activeSubTool == "free-hand" && (
             <div
-              className={`tool-button ${
-                activeTool === "free-hand" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("free-hand");
               }}
@@ -134,9 +153,8 @@ const Tools: React.FC = () => {
           <div className="split"></div>
           <div className="draw-tools">
             <div
-              className={`tool-button ${
-                activeTool === "draw-wall" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("draw-wall");
               }}
@@ -144,9 +162,8 @@ const Tools: React.FC = () => {
               <WallIcon isActive={activeTool === "draw-wall"} />
             </div>
             <div
-              className={`tool-button ${
-                activeTool === "draw-zone" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("draw-zone");
               }}
@@ -154,9 +171,8 @@ const Tools: React.FC = () => {
               <ZoneIcon isActive={activeTool === "draw-zone"} />
             </div>
             <div
-              className={`tool-button ${
-                activeTool === "draw-aisle" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("draw-aisle");
               }}
@@ -164,9 +180,8 @@ const Tools: React.FC = () => {
               <AsileIcon isActive={activeTool === "draw-aisle"} />
             </div>
             <div
-              className={`tool-button ${
-                activeTool === "draw-floor" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                }`}
               onClick={() => {
                 setActiveTool("draw-floor");
               }}
@@ -233,9 +248,7 @@ const Tools: React.FC = () => {
       <div className="split"></div>
       <div
         className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-        onClick={() => {
-          setToggleThreeD(!toggleThreeD);
-        }}
+        onClick={toggleSwitch}
       >
         <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
           2d