Refactor Tools component for improved readability and structure
This commit is contained in:
parent
b71fdbddbb
commit
e54c9e6e0d
|
@ -68,7 +68,7 @@ const Tools: React.FC = () => {
|
||||||
: true
|
: true
|
||||||
);
|
);
|
||||||
}, []);
|
}, []);
|
||||||
useEffect(() => {}, [activeModule]);
|
useEffect(() => { }, [activeModule]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveTool(activeSubTool);
|
setActiveTool(activeSubTool);
|
||||||
setActiveSubTool(activeSubTool);
|
setActiveSubTool(activeSubTool);
|
||||||
|
@ -210,8 +210,7 @@ const Tools: React.FC = () => {
|
||||||
<div className="activeDropicon">
|
<div className="activeDropicon">
|
||||||
{activeSubTool == "cursor" && (
|
{activeSubTool == "cursor" && (
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "cursor" ? "active" : ""
|
||||||
activeTool === "cursor" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("cursor");
|
setActiveTool("cursor");
|
||||||
|
@ -222,8 +221,7 @@ const Tools: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
{activeSubTool == "free-hand" && (
|
{activeSubTool == "free-hand" && (
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
|
||||||
activeTool === "free-hand" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("free-hand");
|
setActiveTool("free-hand");
|
||||||
|
@ -234,8 +232,7 @@ const Tools: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
{activeSubTool == "delete" && (
|
{activeSubTool == "delete" && (
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "delete" ? "active" : ""
|
||||||
activeTool === "delete" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("delete");
|
setActiveTool("delete");
|
||||||
|
@ -308,8 +305,7 @@ const Tools: React.FC = () => {
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div className="draw-tools">
|
<div className="draw-tools">
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
|
||||||
activeTool === "draw-wall" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-wall");
|
setActiveTool("draw-wall");
|
||||||
|
@ -319,8 +315,7 @@ const Tools: React.FC = () => {
|
||||||
<WallIcon isActive={activeTool === "draw-wall"} />
|
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
|
||||||
activeTool === "draw-zone" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-zone");
|
setActiveTool("draw-zone");
|
||||||
|
@ -330,8 +325,7 @@ const Tools: React.FC = () => {
|
||||||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
|
||||||
activeTool === "draw-aisle" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-aisle");
|
setActiveTool("draw-aisle");
|
||||||
|
@ -341,8 +335,7 @@ const Tools: React.FC = () => {
|
||||||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
|
||||||
activeTool === "draw-floor" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-floor");
|
setActiveTool("draw-floor");
|
||||||
|
@ -359,8 +352,7 @@ const Tools: React.FC = () => {
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div className="draw-tools">
|
<div className="draw-tools">
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "measure" ? "active" : ""
|
||||||
activeTool === "measure" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("measure");
|
setActiveTool("measure");
|
||||||
|
@ -377,8 +369,7 @@ const Tools: React.FC = () => {
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div className="draw-tools">
|
<div className="draw-tools">
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "pen" ? "active" : ""
|
||||||
activeTool === "pen" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("pen");
|
setActiveTool("pen");
|
||||||
|
@ -411,8 +402,7 @@ const Tools: React.FC = () => {
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div className="general-options">
|
<div className="general-options">
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "comment" ? "active" : ""
|
||||||
activeTool === "comment" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("comment");
|
setActiveTool("comment");
|
||||||
|
@ -422,8 +412,7 @@ const Tools: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
{toggleThreeD && (
|
{toggleThreeD && (
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${activeTool === "play" ? "active" : ""
|
||||||
activeTool === "play" ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsPlaying(!isPlaying);
|
setIsPlaying(!isPlaying);
|
||||||
|
@ -433,10 +422,11 @@ const Tools: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{activeModule === "builder" && (
|
||||||
|
<>
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div
|
<div
|
||||||
className={`toggle-threed-button${
|
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
|
||||||
toggleThreeD ? " toggled" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={toggleSwitch}
|
onClick={toggleSwitch}
|
||||||
>
|
>
|
||||||
|
@ -447,6 +437,8 @@ const Tools: React.FC = () => {
|
||||||
3d
|
3d
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
Loading…
Reference in New Issue