diff --git a/public/static/images/canvas/compas.svg b/public/static/images/canvas/compas.svg new file mode 100644 index 0000000..fc9bccb --- /dev/null +++ b/public/static/images/canvas/compas.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/canvas/compas_num.svg b/public/static/images/canvas/compas_num.svg new file mode 100644 index 0000000..5deeea2 --- /dev/null +++ b/public/static/images/canvas/compas_num.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 0160ca6..0c04d0b 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -11,6 +11,7 @@ import DisplayChange from '@/components/canvas/modal/displaychange/DisplayChange import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01' import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02' import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03' +import DrawingFlow from '@/components/canvas/modal/drawingflow/DrawingFlow' import EachPropertyChange from '@/components/canvas/modal/eachpropertychange/EachPropertyChange' import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption' import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' @@ -47,7 +48,7 @@ export default function CanvasPage() { {/* 배치면 초기 설정 */} - {/* */} + {/* 캔버스 기본 셋팅 */} {/* {modalOption.option && } */} @@ -70,7 +71,7 @@ export default function CanvasPage() { {/* */} {/* 보조선 작성 */} - + {/* */} {/* 처마∙케라바 변경 */} {/* */} @@ -111,6 +112,9 @@ export default function CanvasPage() { {/* 각 변 속성 변경 */} {/* */} + + {/* 면 흐름 설정 */} + diff --git a/src/components/canvas/modal/drawingflow/DrawingFlow.jsx b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx new file mode 100644 index 0000000..a415451 --- /dev/null +++ b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx @@ -0,0 +1,94 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import Qselect from "@/components/common/select/Qselect"; +import { useState } from "react"; + +const SelectOption01 = [ + {name: 'M',}, {name: 'M'}, {name: 'M'}, {name: 'M'} +] + +export default function DrawingFlow(){ + const [compasDeg, setCompasDeg] = useState(0); + return( + +
+
+

面フローの設定

+ +
+
+
+
+
流れ方向の設定
+
流れ方向を選択してください。
+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+
方位設定
+
シミュレーション計算の方向を指定します。面が向いている方位を選択してください。
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+
+
+
setCompasDeg(180)}>13
+
setCompasDeg(195)}>12
+
setCompasDeg(210)}>11
+
setCompasDeg(225)}>10
+
setCompasDeg(240)}>9
+
setCompasDeg(255)}>8
+
setCompasDeg(270)}>7
+
setCompasDeg(285)}>6
+
setCompasDeg(300)}>5
+
setCompasDeg(315)}>4
+
setCompasDeg(330)}>3
+
setCompasDeg(345)}>2
+
setCompasDeg(0)}>1
+
setCompasDeg(15)}>24
+
setCompasDeg(30)}>23
+
setCompasDeg(45)}>22
+
setCompasDeg(60)}>21
+
setCompasDeg(75)}>20
+
setCompasDeg(90)}>19
+
setCompasDeg(105)}>18
+
setCompasDeg(120)}>17
+
setCompasDeg(135)}>16
+
setCompasDeg(150)}>15
+
setCompasDeg(165)}>14
+
+
+
+
+
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx index 5b44bbd..2cd493f 100644 --- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx +++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx @@ -75,30 +75,81 @@ export default function PlacementSettingPop(){ -
-
+ {/* case01 */} + {/*
+
W -
+
L -
+
垂木の間隔 -
+
+ +
+
+
*/} + + {/* case02 */} +
+
+ +
+
+ ハゼビーチ +
+ +
+
+
+ 垂木の間隔 +
-
+ + {/* case03 */} + {/*
+
+ +
+
+ ハゼビーチ +
+ +
+
+
*/} + + {/* case04 */} + {/*
+
+ +
+
+ L +
+ +
+
+
+ 垂木の間隔 +
+ +
+
+
*/} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9f438cc..3bfc104 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -55,6 +55,9 @@ $alert-color: #101010; &.l-2{ width: 640px; } + &.lx{ + width: 770px; + } &.l{ width: 800px; } @@ -253,8 +256,14 @@ $alert-color: #101010; } } } +.select-form{ + .sort-select{width: 100%;} +} .grid-select{ flex: 1; + &.no-flx{ + flex: unset; + } .sort-select{ width: 100%; background-color: #313131; @@ -1021,4 +1030,133 @@ $alert-color: #101010; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 15px; -} \ No newline at end of file +} + +// 면 흐름 설정 +.drawing-flow-wrap{ + display: flex; + .discrimination-box{ + flex: 1; + display: flex; + flex-direction: column; + .object-direction-wrap{ + flex: 1; + } + } +} + +.compas-box{ + display: flex; + align-items: center; + justify-content: center; +} +.compas-box-inner { + position: relative; + width: 200px; + height: 200px; + border-radius: 50%; + + .circle { + position: absolute; + width: 12px; + height: 12px; + border: 1px solid #fff; + border-radius: 50%; + top: 95%; + left: 50%; + transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ + cursor:pointer; + z-index: 3; + /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ + i{ + position: absolute; + top: 12.5px; + left: 50%; + font-size: 11px; + color: #8B8B8B; + font-weight: 500; + -webkit-user-select: none; + -moz-user-select: none; + -ms-use-select: none; + user-select: none; + } + &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}} + &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}} + &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}} + &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}} + &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}} + &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}} + &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}} + &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}} + &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}} + &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}} + &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}} + &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}} + &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}} + &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}} + &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}} + &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}} + &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}} + &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}} + &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}} + &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}} + &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}} + &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}} + &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}} + &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}} + &.act{ + &::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 5px; + height: 5px; + background-color: #fff; + } + i{ + color: #fff; + } + } + } + .compas{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 148px; + height: 148px; + border: 4px solid #fff; + border-radius: 50%; + .compas-arr{ + width: 100%; + height: 100%; + background: url(../../public/static/images/canvas/compas.svg)no-repeat center; + background-size: 122px 122px; + } + } +} + + + + + + + + + + + + + + + + + + + + + + +