updated ui

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 (
@@ -136,9 +157,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");
               }}
@@ -146,9 +166,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");
               }}
@@ -156,9 +175,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");
               }}
@@ -166,9 +184,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");
               }}