From 932ab5463115ba6cb3d88c2742156a8bad2cf6f7 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Wed, 26 Mar 2025 10:03:43 +0530
Subject: [PATCH] added 2d 3d view

---
 app/src/components/ui/Tools.tsx | 211 +++++++++++++++-----------------
 1 file changed, 97 insertions(+), 114 deletions(-)

diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 64a5ade..7f66584 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -78,80 +78,76 @@ const Tools: React.FC = () => {
 
   return (
     <div className="tools-container">
-      {!isPlaying && (
-        <div className="drop-down-icons">
-          <div className="activeDropicon">
-            {activeSubTool == "cursor" && (
-              <div
-                className={`tool-button ${
-                  activeTool === "cursor" ? "active" : ""
+      <div className="drop-down-icons">
+        <div className="activeDropicon">
+          {activeSubTool == "cursor" && (
+            <div
+              className={`tool-button ${activeTool === "cursor" ? "active" : ""
                 }`}
-                onClick={() => {
-                  setActiveTool("cursor");
-                }}
-              >
-                <CursorIcon isActive={activeTool === "cursor"} />
-              </div>
-            )}
-            {activeSubTool == "free-hand" && (
-              <div
-                className={`tool-button ${
-                  activeTool === "free-hand" ? "active" : ""
+              onClick={() => {
+                setActiveTool("cursor");
+              }}
+            >
+              <CursorIcon isActive={activeTool === "cursor"} />
+            </div>
+          )}
+          {activeSubTool == "free-hand" && (
+            <div
+              className={`tool-button ${activeTool === "free-hand" ? "active" : ""
                 }`}
-                onClick={() => {
-                  setActiveTool("free-hand");
-                }}
-              >
-                <FreeMoveIcon isActive={activeTool === "free-hand"} />
-              </div>
-            )}
-            {activeModule !== "visualization" && (
-              <div
-                className="drop-down-option-button"
-                ref={dropdownRef}
-                onClick={() => {
-                  setOpenDrop(!openDrop);
-                  console.log(openDrop);
-                }}
-              >
-                <ArrowIcon />
-                {openDrop && (
-                  <div className="drop-down-container">
-                    <div
-                      className="option-list"
-                      onClick={() => {
-                        setOpenDrop(false);
-                        setActiveTool("cursor");
-                        setActiveSubTool("cursor");
-                      }}
-                    >
-                      <div className="active-option">
-                        {activeSubTool === "cursor" && <TickIcon />}
-                      </div>
-                      <CursorIcon isActive={false} />
-                      <div className="option">Cursor</div>
-                    </div>
-                    <div
-                      className="option-list"
-                      onClick={() => {
-                        setOpenDrop(false);
-                        setActiveTool("free-hand");
-                        setActiveSubTool("free-hand");
-                      }}
-                    >
-                      <div className="active-option">
-                        {activeSubTool === "free-hand" && <TickIcon />}
-                      </div>
-                      <FreeMoveIcon isActive={false} />
-                      <div className="option">Free Hand</div>
+              onClick={() => {
+                setActiveTool("free-hand");
+              }}
+            >
+              <FreeMoveIcon isActive={activeTool === "free-hand"} />
+            </div>
+          )}
+          {activeModule !== "visualization" && (
+            <div
+              className="drop-down-option-button"
+              ref={dropdownRef}
+              onClick={() => {
+                setOpenDrop(!openDrop);
+                console.log(openDrop);
+              }}
+            >
+              <ArrowIcon />
+              {openDrop && (
+                <div className="drop-down-container">
+                  <div
+                    className="option-list"
+                    onClick={() => {
+                      setOpenDrop(false);
+                      setActiveTool("cursor");
+                      setActiveSubTool("cursor");
+                    }}
+                  >
+                    <div className="active-option">
+                      {activeSubTool === "cursor" && <TickIcon />}
                     </div>
+                    <CursorIcon isActive={false} />
+                    <div className="option">Cursor</div>
                   </div>
-                )}
-              </div>
-            )}
-          </div>
+                  <div
+                    className="option-list"
+                    onClick={() => {
+                      setOpenDrop(false);
+                      setActiveTool("free-hand");
+                      setActiveSubTool("free-hand");
+                    }}
+                  >
+                    <div className="active-option">
+                      {activeSubTool === "free-hand" && <TickIcon />}
+                    </div>
+                    <FreeMoveIcon isActive={false} />
+                    <div className="option">Free Hand</div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
-      )}
+      </div>
       {!toggleThreeD && activeModule === "builder" && (
         <>
           <div className="split"></div>
@@ -210,7 +206,7 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {activeModule === "visualization" && !isPlaying && (
+      {activeModule === "visualization" && (
         <>
           <div className="split"></div>
           <div className="draw-tools">
@@ -229,51 +225,38 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {!isPlaying && (
-        <>
-          <div className="split"></div>
-          <div className="general-options">
-            <div
-              className={`tool-button ${
-                activeTool === "comment" ? "active" : ""
-              }`}
-              onClick={() => {
-                setActiveTool("comment");
-              }}
-            >
-              <CommentIcon isActive={activeTool === "comment"} />
-            </div>
-            <div
-              className={`tool-button ${activeTool === "play" ? "active" : ""}`}
-              onClick={() => {
-                setActiveTool("play");
-                setIsPlaying(!isPlaying);
-              }}
-            >
-              <PlayIcon isActive={activeTool === "play"} />
-            </div>
-          </div>
-          <div className="split"></div>
-          <div
-            className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-            onClick={() => {
-              setToggleThreeD(!toggleThreeD);
-            }}
-          >
-            <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-              2d
-            </div>
-            <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-              3d
-            </div>
-          </div>
-        </>
-      )}
-      {isPlaying && (
-        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
-          X
+      <div className="split"></div>
+      <div className="general-options">
+        <div
+          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
+          onClick={() => {
+            setActiveTool("comment");
+          }}
+        >
+          <CommentIcon isActive={activeTool === "comment"} />
         </div>
-      )}
+        <div
+          className={`tool-button ${activeTool === "play" ? "active" : ""}`}
+          onClick={() => {
+            setActiveTool("play");
+            setIsPlaying(!isPlaying);
+          }}
+        >
+          <PlayIcon isActive={activeTool === "play"} />
+        </div>
+      </div>
+      <div className="split"></div>
+      <div
+        className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
+        onClick={toggleSwitch}
+      >
+        <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+          2d
+        </div>
+        <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+          3d
+        </div>
+      </div>
     </div>
   );
 };