integrated Factory builder features

app/src/components/ui/Tools.tsx

@@ -3,8 +3,10 @@ import {
   AsileIcon,
   CommentIcon,
   CursorIcon,
+  DeleteIcon,
   FloorIcon,
   FreeMoveIcon,
+  MeasureToolIcon,
   PenIcon,
   PlayIcon,
   SaveTemplateIcon,
@@ -18,17 +20,23 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
 import {
+  useActiveTool,
   useAddAction,
   useDeleteModels,
+  useDeletePointOrLine,
+  useMovePoint,
   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 +47,24 @@ 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();
 
-  // Reset activeTool whenever activeModule changes
+  const { transformMode, setTransformMode } = useTransformMode();
+  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+  const { movePoint, setMovePoint } = useMovePoint();
+  const { toolMode, setToolMode } = useToolMode();
+  const { activeTool, setActiveTool } = useActiveTool();
+  useEffect(() => {
+    const storedNavBar: any = localStorage.getItem("navBarUi");
+    if (storedNavBar) {
+      const parsedNavBar = JSON.parse(storedNavBar);
+      setToggleUI(parsedNavBar);
+    }
+  }, []);
+
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -56,9 +76,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);
   };
 
@@ -84,7 +107,88 @@ 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);
 
+    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 (
     <>
       {!isPlaying ? (
@@ -116,13 +220,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 />
@@ -156,6 +271,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>
@@ -173,6 +302,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-wall");
                     }}
+                    title="Wall"
                   >
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
@@ -183,6 +313,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-zone");
                     }}
+                    title="Zone"
                   >
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
@@ -193,6 +324,7 @@ const Tools: React.FC = () => {
                     onClick={() => {
                       setActiveTool("draw-aisle");
                     }}
+                    title="Aisle"
                   >
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
@@ -203,12 +335,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>
@@ -257,16 +408,18 @@ const Tools: React.FC = () => {
               >
                 <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