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 13:27:54 +09:00
parent 98a2589aa8
commit 4213fbcd7c
12 changed files with 363 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,9 @@
import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
import AuxiliarySize from '@/components/canvas/modal/auxiliarysupport/AuxiliarySize'
import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
@ -10,6 +13,7 @@ import GridOption from '@/components/canvas/modal/gridoption/GridOption'
import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
@ -33,13 +37,13 @@ export default function CanvasPage() {
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
{/* 점·선 그리드 설정 */}
{modalOption.gridoption && <GridOption/>}
{/* {modalOption.gridoption && <GridOption/>} */}
{/* {modalOption.gridcopy && <GridCopy/>} */}
{/* {modalOption.gridmove && <GridMove/>} */}
@ -63,6 +67,14 @@ export default function CanvasPage() {
{/* 동선이동∙형 올림 내림 */}
{/* <MovingUpDonw/> */}
{/* 외벽선 편집 및 오프셋 */}
{/* <OuterWallOffset/> */}
{/* 보조선 사이즈, 이동, 복사 */}
<AuxiliarySize/>
<AuxiliaryMove/>
<AuxiliaryCopy/>
</div>
</div>
</div>

4
src/app/draggable/page.jsx
View File

@ -10,9 +10,9 @@ export default function DraggablePage() {
<>
{!divIsShow ? <button onClick={() => setDivIsShow(true)}>show draggable div</button> : ''}
{/* WithDraggable 태그로 이동하고 싶은 컴포넌트나 엘리먼트등을 감싸주면 WithDraggable 컴포넌트가 드래그 가능하게 만들어줍니다. */}
<WithDraggable isShow={divIsShow}>
<WithDraggable isShow={divIsShow} handle='.modal'>
<div style={{ width: '200px', height: '200px', margin: '5px', padding: '5px', background: '#00ffee' }}>
<h1>test draggable div</h1>
<h1 className='modal'>test draggable div</h1>
<div>
<button onClick={() => setDivIsShow(false)}>close</button>
</div>

47
src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx Normal file
View File

@ -0,0 +1,47 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryCopy(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線のコピー </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="grid-option-tit">
コピーする方向を入力してください
</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
<div className="move-form">
<p className="mb5">長さ</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/>
</div>
<span>mm</span>
</div>
<div className="input-move-wrap">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/>
</div>
<span>mm</span>
</div>
</div>
<div className="direction-move-wrap">
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

47
src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx Normal file
View File

@ -0,0 +1,47 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryMove(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線の移動 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="grid-option-tit">
移動する方向を入力してください
</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
<div className="move-form">
<p className="mb5">長さ</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/>
</div>
<span>mm</span>
</div>
<div className="input-move-wrap">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/>
</div>
<span>mm</span>
</div>
</div>
<div className="direction-move-wrap">
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

57
src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx Normal file
View File

@ -0,0 +1,57 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliarySize(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線サイズ変更 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="discrimination-box mb10">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">1支店</label>
</div>
<div className="outline-form mb15">
<div className="input-grid mr5" style={{flex: '1 1 auto'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>長さ</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="discrimination-box ">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">2支店</label>
</div>
<div className="outline-form mb15">
<div className="input-grid mr5" style={{flex: '1 1 auto'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>長さ</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

4
src/components/canvas/modal/movingupdown/MovingTab02.jsx
View File

@ -12,7 +12,7 @@ export default function MovingTab02(){
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">高さ変更：下、左</label>
<label htmlFor="ra01">桁を上げる</label>
</div>
</div>
<div className="eaves-keraba-td">
@ -27,7 +27,7 @@ export default function MovingTab02(){
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">高さ変更：上、右</label>
<label htmlFor="ra02">桁数を下げる</label>
</div>
</div>
<div className="eaves-keraba-td">

6
src/components/canvas/modal/movingupdown/MovingUpDown.jsx
View File

@ -1,6 +1,7 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import MovingTab01 from "./MovingTab01";
import MovingTab02 from "./MovingTab02";
const buttonMenu = [
{id: 1, name: '銅線の移動軒'},
@ -11,6 +12,7 @@ export default function MovingUpDonw(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">軒・ケラバ変更</h1>
@ -31,13 +33,13 @@ export default function MovingUpDonw(){
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <MovingTab01/>}
{buttonAct === 2 && <MovingTab02/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
// <WithDraggable isShow={true}>
// </WithDraggable>
</WithDraggable>
)
}

87
src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx Normal file
View File

@ -0,0 +1,87 @@
export default function OffsetTab01(){
return(
<>
<div className="outline-wrap">
<div className="guide sm">
辺と始点を選択して長さと方向を指定してください。
</div>
<div className="discrimination-box mb10">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">1支店</label>
</div>
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
長さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
方向 (矢印)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<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>
</div>
</div>
<div className="discrimination-box">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">2支店</label>
</div>
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
長さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
方向 (矢印)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<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>
</div>
</div>
</div>
</>
)
}

49
src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx Normal file
View File

@ -0,0 +1,49 @@
export default function OffsetTab02(){
return(
<>
<div className="outline-wrap">
<div className="guide sm">
オフセットしたい外壁を選択してください。
</div>
<div className="discrimination-box mb10">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">1支店</label>
</div>
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
長さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
方向 (矢印)
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<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>
</div>
</div>
</div>
</>
)
}

46
src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx Normal file
View File

@ -0,0 +1,46 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import OffsetTab01 from "./OffsetTab01";
import OffsetTab02 from "./OffsetTab02";
const buttonMenu = [
{id: 1, name: '外壁の編集'},
{id: 2, name: 'オフセット'},
]
export default function OuterWallOffset(){
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">
{buttonMenu.map((item) => (
<button
key={item.id}
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
onClick={() => setButtonAct(item.id)}
>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <OffsetTab01/>}
{buttonAct === 2 && <OffsetTab02/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

7
src/styles/_modal.scss
View File

@ -468,6 +468,7 @@ $alert-color: #101010;
margin-right: 0;
}
}
.reset-btn{
flex: none;
width: 30px;
@ -625,6 +626,9 @@ $alert-color: #101010;
display: table-row;
.eaves-keraba-th,
.eaves-keraba-td{
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-normal-weight;
display: table-cell;
vertical-align: middle;
padding-bottom: 14px;
@ -657,4 +661,7 @@ $alert-color: #101010;
font-weight: $pop-normal-weight;
color: $pop-color;
margin-bottom: 24px;
&.sm{
margin-bottom: 15px;
}
}

1
src/styles/_reset.scss
View File

@ -606,6 +606,7 @@ input[type=text]{
}
&.pop{
label{
font-size: 12px;
&:before{
width: 16px;
height: 16px;