Merge remote-tracking branch 'origin/main' into ui

app/src/components/ui/ModuleToggle.tsx

@@ -18,7 +18,7 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${activeModule === "builder" && "active"}`}
         onClick={() => {
           setActiveModule("builder");
-          setToggleUI(true);
+          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
         }}
       >
         <div className="icon">
@@ -30,7 +30,7 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${activeModule === "simulation" && "active"}`}
         onClick={() => {
           setActiveModule("simulation");
-          setToggleUI(true);
+          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
         }}
       >
         <div className="icon">
@@ -39,12 +39,11 @@ const ModuleToggle: React.FC = () => {
         <div className="module">Simulation</div>
       </div>
       <div
-        className={`module-list ${
-          activeModule === "visualization" && "active"
-        }`}
+        className={`module-list ${activeModule === "visualization" && "active"
+          }`}
         onClick={() => {
           setActiveModule("visualization");
-          setToggleUI(true);
+          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
         }}
       >
         <div className="icon">

app/src/components/ui/Tools.tsx

@@ -3,8 +3,10 @@ import {
   AsileIcon,
   CommentIcon,
   CursorIcon,
+  DeleteIcon,
   FloorIcon,
   FreeMoveIcon,
+  MeasureToolIcon,
   PenIcon,
   PlayIcon,
   SaveTemplateIcon,
@@ -18,17 +20,24 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
 import {
+  useActiveTool,
   useAddAction,
   useDeleteModels,
+  useDeletePointOrLine,
+  useMovePoint,
+  useRefTextUpdate,
   useSelectedWallItem,
   useToggleView,
+  useToolMode,
+  useTransformMode,
 } from "../../store/store";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
-  const [activeTool, setActiveTool] = useState("cursor");
   const [activeSubTool, setActiveSubTool] = useState("cursor");
   const [toggleThreeD, setToggleThreeD] = useState(true);
+  const { toggleUI, setToggleUI } = useToggleStore();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
@@ -39,12 +48,23 @@ const Tools: React.FC = () => {
   const { selectedZone } = useSelectedZoneStore();
 
   // wall options
-  const { setToggleView } = useToggleView();
+  const { toggleView, setToggleView } = useToggleView();
   const { setDeleteModels } = useDeleteModels();
   const { setAddAction } = useAddAction();
   const { setSelectedWallItem } = useSelectedWallItem();
 
+  const { transformMode, setTransformMode } = useTransformMode();
+  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+  const { movePoint, setMovePoint } = useMovePoint();
+  const { toolMode, setToolMode } = useToolMode();
+  const { activeTool, setActiveTool } = useActiveTool();
+  const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+
   // Reset activeTool whenever activeModule changes
+  useEffect(() => {
+    setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
+  }, []);
+
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -56,10 +76,14 @@ const Tools: React.FC = () => {
       setDeleteModels(false);
       setAddAction(null);
       setToggleView(true);
+      // localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
     } else {
       setToggleView(false);
     }
+    setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
     setToggleThreeD(!toggleThreeD);
+    setActiveSubTool("cursor");
+    setActiveTool("cursor");
   };
 
   useEffect(() => {
@@ -84,6 +108,90 @@ const Tools: React.FC = () => {
       document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
     };
   }, []);
+  useEffect(() => {
+    if (!toggleThreeD) {
+      setToggleUI(false);
+    }
+  }, [toggleThreeD]);
+
+  useEffect(() => {
+    setToolMode(null);
+    setDeleteModels(false);
+    setAddAction(null);
+    setTransformMode(null);
+    setMovePoint(false);
+    setDeletePointOrLine(false);
+    setRefTextUpdate((prevUpdate) => prevUpdate - 1);
+
+    switch (activeTool) {
+      case "Move":
+        if (toggleView) {
+          setMovePoint(true);
+        } else {
+          setTransformMode("translate");
+        }
+        break;
+
+      case "Rotate":
+        if (!toggleView) {
+          setTransformMode("rotate");
+        }
+        break;
+
+      case "Scale":
+        if (!toggleView) {
+          setTransformMode("scale");
+        }
+        break;
+
+      case "draw-wall":
+        if (toggleView) {
+          setToolMode("Wall");
+        }
+        break;
+
+      case "draw-aisle":
+        if (toggleView) {
+          setToolMode("Aisle");
+        }
+        break;
+
+      case "draw-zone":
+        if (toggleView) {
+          setToolMode("Zone");
+        }
+        break;
+
+      case "draw-floor":
+        if (toggleView) {
+          setToolMode("Floor");
+        }
+        break;
+
+      case "measure":
+        setToolMode("MeasurementScale");
+        break;
+
+      case "Add pillar":
+        if (!toggleView) {
+          setAddAction("pillar");
+        }
+        break;
+
+      case "delete":
+        if (toggleView) {
+          setDeletePointOrLine(true);
+        } else {
+          setDeleteModels(true);
+        }
+        break;
+
+      default:
+        break;
+    }
+
+    setActiveTool(activeTool);
+  }, [activeTool]);
 
   return (
     <>
@@ -94,9 +202,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");
                     }}
@@ -106,9 +213,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");
                     }}
@@ -116,13 +222,23 @@ 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 />
@@ -156,6 +272,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>
@@ -167,56 +297,72 @@ 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");
                     }}
+                    title="Wall"
                   >
                     <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");
                     }}
+                    title="Zone"
                   >
                     <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");
                     }}
+                    title="Aisle"
                   >
                     <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");
                     }}
+                    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>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "pen" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("pen");
                     }}
@@ -248,31 +394,30 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${
-                  activeTool === "comment" ? "active" : ""
-                }`}
+                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                  }`}
                 onClick={() => {
                   setActiveTool("comment");
                 }}
               >
                 <CommentIcon isActive={activeTool === "comment"} />
               </div>
-              <div
-                className={`tool-button ${
-                  activeTool === "play" ? "active" : ""
-                }`}
-                onClick={() => {
-                  setIsPlaying(!isPlaying);
-                }}
-              >
-                <PlayIcon isActive={activeTool === "play"} />
-              </div>
+              {toggleThreeD && (
+                <div
+                  className={`tool-button ${activeTool === "play" ? "active" : ""
+                    }`}
+                  onClick={() => {
+                    setIsPlaying(!isPlaying);
+                  }}
+                >
+                  <PlayIcon isActive={activeTool === "play"} />
+                </div>
+              )}
             </div>
             <div className="split"></div>
             <div
-              className={`toggle-threed-button${
-                toggleThreeD ? " toggled" : ""
-              }`}
+              className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                }`}
               onClick={toggleSwitch}
             >
               <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -80,7 +80,7 @@ const RealTimeVisulization: React.FC = () => {
     }
 
     GetZoneData();
-  }, []); // Removed `zones` from dependencies
+  }, [activeModule]); // Removed `zones` from dependencies
 
   useEffect(() => {
     setZonesData((prev) => {

app/src/components/ui/inputs/EyeDropInput.tsx

@@ -1,18 +1,36 @@
 import React from "react";
-import RegularDropDown from "./RegularDropDown";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
+import RegularDropDown from "./RegularDropDown";
+
+interface EyeDropInputProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options?: string[];
+}
+
+const EyeDropInput: React.FC<EyeDropInputProps> = ({
+  label = "Object",
+  onChange,
+}) => {
+  const handleEyeDropClick = () => {
+    // Here you would typically implement the eye dropper functionality
+    // For now, we'll just simulate selecting a value
+    const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
+    onChange(simulatedValue);
+  };
 
-const EyeDropInput: React.FC = () => {
   return (
     <div className="eye-dropper-input-container">
-      <div className="label">Object</div>
+      <div className="label">{label}</div>
       <div className="input-container">
+        {/* <input disabled type="text" /> */}
         <RegularDropDown
           header="select object"
           options={[]}
-          onSelect={() => {}}
+          onSelect={() => { }}
         />
-        <div className="eye-picker-button">
+        <div className="eye-picker-button" onClick={handleEyeDropClick}>
           <EyeDroperIcon isActive={false} />
         </div>
       </div>
@@ -20,4 +38,4 @@ const EyeDropInput: React.FC = () => {
   );
 };
 
-export default EyeDropInput;
+export default EyeDropInput;