qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메뉴 depth 추가 및 수정

Browse Source
This commit is contained in:
김창수 2024-09-26 09:32:53 +09:00
parent 5cb3195b60
commit 39dd2c1f67
4 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/canvas/CanvasMenu.jsx
View File

@ -4,6 +4,8 @@ import Qselect from "../common/select/Qselect";
import MenuDepth01 from "./MenuDepth01";
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
import MenuDepth02 from "./MenuDepth02";
import MenuDepth03 from "./MenuDepth03";
export default function CanvasMenu({setMenuValue}) {
@ -121,8 +123,8 @@ export default function CanvasMenu({setMenuValue}) {
</div>
<div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
{menuNumber === 2 && <MenuDepth01/>}
{menuNumber === 3 && <MenuDepth01/>}
{menuNumber === 4 && <MenuDepth01/>}
{menuNumber === 3 && <MenuDepth02/>}
{menuNumber === 4 && <MenuDepth03/>}
</div>
</div>
)

35
src/components/canvas/MenuDepth01.jsx
View File

@ -1,7 +1,6 @@
'use client'
import { useRecoilState } from "recoil";
import { ToggleonMouse } from "../layout/Header"
import { modalState } from "@/store/modalAtom";
export default function MenuDepth01(){
@ -9,33 +8,13 @@ export default function MenuDepth01(){
return(
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button onClick={() => setModalOption({...modalOption, outerwall: true})}>外壁線を描</button></li>
<li className="canvas-depth2-item"><button>補助線を描</button></li>
<li className="canvas-depth2-item"><button>屋根形状設定</button></li>
<li className="canvas-depth2-item"><button>軒下変更</button></li>
<li className="canvas-depth2-item"><button>外壁線の上げ下げ</button></li>
<li className="canvas-depth2-item"><button>銅線移動</button></li>
<li className="canvas-depth2-item"><button>特殊コーナー形状</button></li>
</ul>
<ul className="canvas-depth2-btn-list">
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根面の割り当て</button>
</li>
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根材の設定と変更</button>
</li>
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根面全体削除</button>
</li>
<li className="canvas-depth2-item active"><button onClick={() => setModalOption({...modalOption, outerwall: true})}>外壁線を描く</button></li>
<li className="canvas-depth2-item"><button>屋根形状の設定</button></li>
<li className="canvas-depth2-item"><button>屋根形状の手動設定</button></li>
<li className="canvas-depth2-item"><button>軒・ケラバ変更</button></li>
<li className="canvas-depth2-item"><button>銅線移動・型上げ下り</button></li>
<li className="canvas-depth2-item"><button>外壁の編集とオフセット</button></li>
<li className="canvas-depth2-item"><button>屋根面の割り当て</button></li>
</ul>
</div>
)

18
src/components/canvas/MenuDepth02.jsx Normal file
View File

@ -0,0 +1,18 @@
'use client'
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
export default function MenuDepth02(){
return(
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>傾斜設定</button></li>
<li className="canvas-depth2-item"><button>配置面の描画</button></li>
<li className="canvas-depth2-item"><button>面形状の配置</button></li>
<li className="canvas-depth2-item"><button>オブジェクトの配置</button></li>
<li className="canvas-depth2-item"><button>配置面全体を削除</button></li>
</ul>
</div>
)
}

16
src/components/canvas/MenuDepth03.jsx Normal file
View File

@ -0,0 +1,16 @@
'use client'
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
export default function MenuDepth03(){
return(
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>基本設定</button></li>
<li className="canvas-depth2-item"><button>回路と架台の設定</button></li>
<li className="canvas-depth2-item"><button>図面方位の適用</button></li>
</ul>
</div>
)
}