Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added 2d 3d view

This commit is contained in:
Nalvazhuthi 2025-03-26 10:03:43 +05:30
parent 1d91d9c4a2
commit 932ab54631
1 changed files with 97 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
app/src/components/ui/Tools.tsx
View File

@ -78,80 +78,76 @@ const Tools: React.FC = () => {
return ( return (
<div className="tools-container"> <div className="tools-container">
{!isPlaying && ( <div className="drop-down-icons">
<div className="drop-down-icons"> <div className="activeDropicon">
<div className="activeDropicon"> {activeSubTool == "cursor" && (
{activeSubTool == "cursor" && ( <div
<div className={`tool-button ${activeTool === "cursor" ? "active" : ""
className={`tool-button ${
activeTool === "cursor" ? "active" : ""
}`} }`}
onClick={() => { onClick={() => {
setActiveTool("cursor"); setActiveTool("cursor");
}} }}
> >
<CursorIcon isActive={activeTool === "cursor"} /> <CursorIcon isActive={activeTool === "cursor"} />
</div> </div>
)} )}
{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");
}} }}
> >
<FreeMoveIcon isActive={activeTool === "free-hand"} /> <FreeMoveIcon isActive={activeTool === "free-hand"} />
</div> </div>
)} )}
{activeModule !== "visualization" && ( {activeModule !== "visualization" && (
<div <div
className="drop-down-option-button" className="drop-down-option-button"
ref={dropdownRef} ref={dropdownRef}
onClick={() => { onClick={() => {
setOpenDrop(!openDrop); setOpenDrop(!openDrop);
console.log(openDrop); console.log(openDrop);
}} }}
> >
<ArrowIcon /> <ArrowIcon />
{openDrop && ( {openDrop && (
<div className="drop-down-container"> <div className="drop-down-container">
<div <div
className="option-list" className="option-list"
onClick={() => { onClick={() => {
setOpenDrop(false); setOpenDrop(false);
setActiveTool("cursor"); setActiveTool("cursor");
setActiveSubTool("cursor"); setActiveSubTool("cursor");
}} }}
> >
<div className="active-option"> <div className="active-option">
{activeSubTool === "cursor" && <TickIcon />} {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>
</div> </div>
<CursorIcon isActive={false} />
<div className="option">Cursor</div>
</div> </div>
)} <div
</div> className="option-list"
)} onClick={() => {
</div> 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>
)} </div>
{!toggleThreeD && activeModule === "builder" && ( {!toggleThreeD && activeModule === "builder" && (
<> <>
<div className="split"></div> <div className="split"></div>
@ -210,7 +206,7 @@ const Tools: React.FC = () => {
</div> </div>
</> </>
)} )}
{activeModule === "visualization" && !isPlaying && ( {activeModule === "visualization" && (
<> <>
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
@ -229,51 +225,38 @@ const Tools: React.FC = () => {
</div> </div>
</> </>
)} )}
{!isPlaying && ( <div className="split"></div>
<> <div className="general-options">
<div className="split"></div> <div
<div className="general-options"> className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
<div onClick={() => {
className={`tool-button ${ setActiveTool("comment");
activeTool === "comment" ? "active" : "" }}
}`} >
onClick={() => { <CommentIcon isActive={activeTool === "comment"} />
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> </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> </div>
); );
}; };