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

배치면 그리기 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-10-02 15:38:12 +09:00
parent a2d21590ab
commit 4fc202c640
9 changed files with 325 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/canvas/page.jsx
View File

@ -2,6 +2,7 @@
import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
import ArrangementSetting from '@/components/canvas/modal/arrangementsetting/ArrangementSetting'
import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
@ -19,6 +20,7 @@ import PropertiesSetting from '@/components/canvas/modal/propertiessetting/Prope
import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation'
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import SlopeOption from '@/components/canvas/modal/slopeoption/SlopeOption'
import Header from '@/components/layout/Header'
import { modalState } from '@/store/modalAtom'
import '@/styles/contents.scss'
@ -78,7 +80,13 @@ export default function CanvasPage() {
{/* <AuxiliaryCopy/> */}
{/* 지붕면 할당 */}
<RoofAllocation/>
{/* <RoofAllocation/> */}
{/* 경사 설정 */}
{/* <SlopeOption/> */}
{/* 배치면 그리기 */}
<ArrangementSetting/>
</div>
</div>
</div>

68
src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx Normal file
View File

@ -0,0 +1,68 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import ArrangementTab01 from "./ArrangementTab01";
import ArrangementTab02 from "./ArrangementTab02";
import ArrangementTab03 from "./ArrangementTab03";
import ArrangementTab04 from "./ArrangementTab04";
import ArrangementTab05 from "./ArrangementTab05";
export default function ArrangementSetting(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">配置面の描画</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
<button
className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`}
onClick={() => setButtonAct(1)}
>
直線
</button>
<button
className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`}
onClick={() => setButtonAct(2)}
>
直角
</button>
<button
className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`}
onClick={() => setButtonAct(3)}
>
イ・グベ
</button>
<button
className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`}
onClick={() => setButtonAct(4)}
>
角度
</button>
<button
className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`}
onClick={() => setButtonAct(5)}
>
対角線
</button>
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <ArrangementTab01/>}
{buttonAct === 2 && <ArrangementTab02/>}
{buttonAct === 3 && <ArrangementTab03/>}
{buttonAct === 4 && <ArrangementTab04/>}
{buttonAct === 5 && <ArrangementTab05/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">外壁線確定</button>
</div>
</div>
</div>
</WithDraggable>
)
}

24
src/components/canvas/modal/arrangementsetting/ArrangementTab01.jsx Normal file
View File

@ -0,0 +1,24 @@
export default function ArrangementTab01(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

42
src/components/canvas/modal/arrangementsetting/ArrangementTab02.jsx Normal file
View File

@ -0,0 +1,42 @@
export default function ArrangementTab02(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

64
src/components/canvas/modal/arrangementsetting/ArrangementTab03.jsx Normal file
View File

@ -0,0 +1,64 @@
export default function ArrangementTab03(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={6}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={3000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

29
src/components/canvas/modal/arrangementsetting/ArrangementTab04.jsx Normal file
View File

@ -0,0 +1,29 @@
import Image from "next/image";
export default function ArrangementTab04(){
return(
<div className="outline-wrap">
<div className="cul-wrap">
<div className="outline-box">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="cul-box">
<Image src="/static/images/canvas/outline_cul.svg" alt="react" width={70} height={59} />
</div>
</div>
</div>
)
}

52
src/components/canvas/modal/arrangementsetting/ArrangementTab05.jsx Normal file
View File

@ -0,0 +1,52 @@
export default function ArrangementTab05(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">対角線の<br/>長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '98px'}}>
<input type="text" className="input-origin block" defaultValue={8000}/>
</div>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

28
src/components/canvas/modal/slopeoption/SlopeOption.jsx Normal file
View File

@ -0,0 +1,28 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function SlopeOption (){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">傾斜設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="slope-wrap">
<div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>斜傾</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={300}/>
</div>
<span className="thin">寸(度)</span>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

10
src/styles/_modal.scss
View File

@ -18,7 +18,6 @@ $alert-color: #101010;
top: 200px;
right: 100px;
width: 100%;
min-width: 300px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
@ -26,6 +25,9 @@ $alert-color: #101010;
border-radius: 4px;
background-color: #272727;
z-index: 9999999;
&.xxxm{
width: 230px;
}
&.xxm{
width: 270px;
}
@ -777,4 +779,10 @@ $alert-color: #101010;
}
}
}
}
// 경사설정
.slope-wrap{
padding-bottom: 24px;
border-bottom: 1px solid #424242;
}