Merge remote-tracking branch 'origin/simulation-agv' into simulation

app/src/components/ui/Tools.tsx

@@ -3,8 +3,10 @@ import {
   AsileIcon,
   CommentIcon,
   CursorIcon,
+  DeleteIcon,
   FloorIcon,
   FreeMoveIcon,
+  MeasureToolIcon,
   PenIcon,
   PlayIcon,
   SaveTemplateIcon,
@@ -29,11 +31,13 @@ import {
   useToolMode,
   useTransformMode,
 } from "../../store/store";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
   const [activeSubTool, setActiveSubTool] = useState("cursor");
   const [toggleThreeD, setToggleThreeD] = useState(true);
+  const { toggleUI, setToggleUI } = useToggleStore();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
@@ -57,6 +61,14 @@ const Tools: React.FC = () => {
   const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
 
   // Reset activeTool whenever activeModule changes
+  useEffect(() => {
+    const storedNavBar: any = localStorage.getItem("navBarUi");
+    if (storedNavBar) {
+      const parsedNavBar = JSON.parse(storedNavBar);
+      setToggleUI(parsedNavBar);
+    }
+  }, []);
+
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -68,9 +80,12 @@ const Tools: React.FC = () => {
       setDeleteModels(false);
       setAddAction(null);
       setToggleView(true);
+      localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
     } else {
       setToggleView(false);
     }
+    setActiveSubTool("cursor");
+    setActiveTool("cursor");
     setToggleThreeD(!toggleThreeD);
     setActiveTool("cursor");
   };
@@ -97,6 +112,11 @@ const Tools: React.FC = () => {
       document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
     };
   }, []);
+  useEffect(() => {
+    if (!toggleThreeD) {
+      setToggleUI(false);
+    }
+  }, [toggleThreeD]);
 
   useEffect(() => {
     setToolMode(null);
@@ -134,25 +154,25 @@ const Tools: React.FC = () => {
         }
         break;
 
-      case "Draw Aisle":
+      case "draw-aisle":
         if (toggleView) {
           setToolMode("Aisle");
         }
         break;
 
-      case "Mark zone":
+      case "draw-zone":
         if (toggleView) {
           setToolMode("Zone");
         }
         break;
 
-      case "Draw Floor":
+      case "draw-floor":
         if (toggleView) {
           setToolMode("Floor");
         }
         break;
 
-      case "Measurement Tool":
+      case "measure":
         setToolMode("MeasurementScale");
         break;
 
@@ -162,7 +182,7 @@ const Tools: React.FC = () => {
         }
         break;
 
-      case "Delete":
+      case "delete":
         if (toggleView) {
           setDeletePointOrLine(true);
         } else {
@@ -206,13 +226,24 @@ const Tools: React.FC = () => {
                     <FreeMoveIcon isActive={activeTool === "free-hand"} />
                   </div>
                 )}
+                {activeSubTool == "delete" && (
+                  <div
+                    className={`tool-button ${
+                      activeTool === "delete" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("delete");
+                    }}
+                  >
+                    <DeleteIcon isActive={activeTool === "delete"} />
+                  </div>
+                )}
                 {activeModule !== "visualization" && (
                   <div
                     className="drop-down-option-button"
                     ref={dropdownRef}
                     onClick={() => {
                       setOpenDrop(!openDrop);
-                      console.log(openDrop);
                     }}
                   >
                     <ArrowIcon />
@@ -246,6 +277,20 @@ const Tools: React.FC = () => {
                           <FreeMoveIcon isActive={false} />
                           <div className="option">Free Hand</div>
                         </div>
+                        <div
+                          className="option-list"
+                          onClick={() => {
+                            setOpenDrop(false);
+                            setActiveTool("delete");
+                            setActiveSubTool("delete");
+                          }}
+                        >
+                          <div className="active-option">
+                            {activeSubTool === "delete" && <TickIcon />}
+                          </div>
+                          <DeleteIcon isActive={false} />
+                          <div className="option">Delete</div>
+                        </div>
                       </div>
                     )}
                   </div>
@@ -262,6 +307,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-wall");
                     }}
+                    title="Wall"
                   >
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
@@ -271,6 +317,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-zone");
                     }}
+                    title="Zone"
                   >
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
@@ -280,6 +327,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-aisle");
                     }}
+                    title="Aisle"
                   >
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
@@ -289,12 +337,31 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-floor");
                     }}
+                    title="Floor"
                   >
                     <FloorIcon isActive={activeTool === "draw-floor"} />
                   </div>
                 </div>
               </>
             )}
+            {activeModule === "builder" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button ${
+                      activeTool === "measure" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("measure");
+                    }}
+                    title="Measure"
+                  >
+                    <MeasureToolIcon isActive={activeTool === "measure"} />
+                  </div>
+                </div>
+              </>
+            )}
             {activeModule === "simulation" && (
               <>
                 <div className="split"></div>
@@ -341,15 +408,18 @@ const Tools: React.FC = () => {
               >
                 <CommentIcon isActive={activeTool === "comment"} />
               </div>
-              <div
-                className={`tool-button ${activeTool === "play" ? "active" : ""
+              {toggleThreeD && (
+                <div
+                  className={`tool-button ${
+                    activeTool === "play" ? "active" : ""
                   }`}
-                onClick={() => {
-                  setIsPlaying(!isPlaying);
-                }}
-              >
-                <PlayIcon isActive={activeTool === "play"} />
-              </div>
+                  onClick={() => {
+                    setIsPlaying(!isPlaying);
+                  }}
+                >
+                  <PlayIcon isActive={activeTool === "play"} />
+                </div>
+              )}
             </div>
             <div className="split"></div>
             <div