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

면 형상 처리 팝업 rotate 정리

Browse Source
This commit is contained in:
김창수 2024-10-08 17:46:42 +09:00
parent 7be32c4ccd
commit 0aeec572f9
13 changed files with 478 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,16 @@ import Penal04 from '@/components/canvas/penal/Penal04'
import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption'
import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption'
import CircuitStandSetting from '@/components/canvas/modal/circuitstandsetting/CircuitStandSetting'
import AdditionalMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalMove'
import AdditionalCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy'
import AdditionalColumnCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy'
import AdditionalColumnMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove'
import AdditionalBundleMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove'
import AdditionalBundleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy'
import AllModuleMove from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleMove'
import AllModuleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy'
import AllModuleNumChange from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange'
import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -110,7 +120,7 @@ export default function CanvasPage() {
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
{/* <PlaneShapeOption/> */}
<PlaneShapeOption/>
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}
@ -133,10 +143,27 @@ export default function CanvasPage() {
{/* <RoofModuleOption/> */}
{/* 육지붕모듈 선택 */}
<HexagonalRoofOption/>
{/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */}
<CircuitStandSetting/>
{/* <CircuitStandSetting/> */}
{/* 모듈 부가기능 */}
{/* 이동, 복사, 열이동, 열복사, 단이동, 단복사, 모듈일괄회로번호변경, 모듈일관이동, 모듈일괄복사 */}
{/* <AdditionalMove/> */}
{/* <AdditionalCopy/> */}
{/* <AdditionalColumnMove/> */}
{/* <AdditionalColumnCopy/> */}
{/* <AdditionalBundleMove/> */}
{/* <AdditionalBundleCopy/> */}
{/* <AllModuleNumChange/> */}
{/* <AllModuleMove/> */}
{/* <AllModuleCopy/> */}
{/* 열삭제, 열삽입, 단삭제, 단삽입 */}
{/* <AdditionalColumnDelete/> */}
</div>
</div>
</div>

39
src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleCopy(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleMove(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnCopy(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnMove(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

40
src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx Normal file
View File

@ -0,0 +1,40 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalCopy(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal mr5">保存</button>
<button className="btn-frame modal act">キャンセル</button>
</div>
</div>
</div>
</WithDraggable>
)
}

40
src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx Normal file
View File

@ -0,0 +1,40 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalMove(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal mr5">保存</button>
<button className="btn-frame modal act">キャンセル</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleCopy(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleMove(){
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="grid-input-form">
<span className="mr10">間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={0}/>
</div>
<span>mm</span>
</div>
<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="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

32
src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx Normal file
View File

@ -0,0 +1,32 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleNumChange(){
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="outline-form">
<span className="mr10" style={{width: 'auto'}}>回路番号</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block"/>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

51
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx Normal file
View File

@ -0,0 +1,51 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnDelete(){
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="properties-setting-wrap">
<div className="setting-tit">削除列をどのようにしますか？</div>
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01"/>
<label htmlFor="ra01">左に減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">右に減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra03" />
<label htmlFor="ra03">両側に減る</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra04" />
<label htmlFor="ra04">減らさない</label>
</div>
</div>
<div className="additional-img-wrap">
</div>
</div>
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">凡例</div>
<div className="module-table-box">
<div className="module-table-inner"></div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

43
src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
View File

@ -1,3 +1,5 @@
'use client'
import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
@ -22,6 +24,29 @@ import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18";
export default function PlaneShapeOption(){
const [shapeNum, setShapeNum] = useState(1);
const [rotate, setRotate] = useState(0);
const [xfilp, setXfilp] = useState(false);
const [yfilp, setYfilp] = useState(false);
const RotateMenual = () => {
setRotate(rotate >= 271 ? 0 :rotate + 90)
}
const TransformRotate = () => {
return `${TransFormScale()} rotate(${(xfilp === false && yfilp === true) || (xfilp === true && yfilp === false) ? `-`: ``}${rotate}deg)`
}
const TransFormScale = () => {
if(xfilp === false && yfilp === false){
return `scale(1, 1)`
}else if(xfilp === false && yfilp === true){
return `scale(1, -1)`
}else if(xfilp === true && yfilp === true){
return `scale(-1, -1)`
}else if(xfilp === true && yfilp === false){
return `scale(-1, 1)`
}
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap l-2`}>
@ -34,15 +59,25 @@ export default function PlaneShapeOption(){
{Array.from({length : 18}).map((_,idx) => (
<button key={idx + 1} className={`shape-menu-box ${shapeNum === idx + 1 ? 'act': ''}`} onClick={() => setShapeNum(idx + 1)}>
<div className="shape-box">
<Image src={`/static/images/canvas/plane_shape0${idx + 1}.svg`} alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
<Image
src={`/static/images/canvas/plane_shape0${idx + 1}.svg`}
alt="react" width={0} height={0}
style={{
width: 'auto',
height:'auto',
transition: 'all .15s ease-in-out',
transform: `${TransformRotate()}`
}}/>
</div>
</button>
))}
</div>
<div className="shape-library">
<button className="library-btn ico01"></button>
<button className="library-btn ico02"></button>
<button className="library-btn ico03"></button>
<button className="library-btn ico01" onClick={() => RotateMenual()}></button>
<button className="library-btn ico02" onClick={() => setXfilp(!xfilp)}></button>
<button className="library-btn ico03" onClick={() => setYfilp(!yfilp)}></button>
<span>x {xfilp ? '1':'0'}</span>
<span>y {yfilp ? '1':'0'}</span>
</div>
{shapeNum === 1 && <PlaneShapeTab01/>}
{shapeNum === 2 && <PlaneShapeTab02/>}

12
src/styles/_modal.scss
View File

@ -1468,3 +1468,15 @@ $alert-color: #101010;
align-items: center;
gap: 10px;
}
// 모듈부가기능
.additional-radio-wrap{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px 0;
margin-bottom: 24px;
}
.additional-wrap{
padding: 24px 0;
border-top: 1px solid #424242;
}