- 면형상배치
This commit is contained in:
minsik
parent
f95641547d
commit
763dc59147
@ -22,6 +22,7 @@ import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryD
|
||||
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
|
||||
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
|
||||
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
|
||||
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
|
||||
|
||||
export default function FloorPlan() {
|
||||
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
|
||||
@ -138,6 +139,7 @@ export default function FloorPlan() {
|
||||
{/*<Movement />*/}
|
||||
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
|
||||
{showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
|
||||
<PlacementSurfaceSetting />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
import Image from 'next/image'
|
||||
|
||||
export default function PlacementSurface(props) {
|
||||
const { id, lines, hasDiagonal, info } = props
|
||||
const num = ['①', '②', '③', '④', '⑤']
|
||||
return (
|
||||
<>
|
||||
<div className="plane-shape-wrapper">
|
||||
<div className="plane-box shape-box">
|
||||
<h3 className="plane-box-tit">設定</h3>
|
||||
<div className="shape-box-inner">
|
||||
<div className="shape-img">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_tab${id < 10 ? '0' + id : id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="shape-data">
|
||||
<div className="eaves-keraba-table">
|
||||
{lines?.map((line, index) => (
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{line.isDiagonal ? '斜めの長さ' : num[index]}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '57px' }}>
|
||||
<input type="text" className="input-origin plane block" defaultValue={line.value} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plane-box direction-box">
|
||||
<h3 className="plane-box-tit">設定</h3>
|
||||
<div className="plane-direction-box">
|
||||
<div className="plane-direction">
|
||||
<span className="top">北</span>
|
||||
<span className="right">ドン</span>
|
||||
<span className="bottom">南</span>
|
||||
<span className="left">立つ</span>
|
||||
<button className="plane-btn up"></button>
|
||||
<button className="plane-btn right"></button>
|
||||
<button className="plane-btn down act"></button>
|
||||
<button className="plane-btn left"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{info && <div className="plane-tab-guide">{info}</div>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,258 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
|
||||
|
||||
export default function PlacementSurfaceSetting({}) {
|
||||
const { getMessage } = useMessage()
|
||||
const [selectedType, setSelectedType] = useState()
|
||||
const [rotate, setRotate] = useState(0)
|
||||
const [sideInversion, setSideInversion] = useState(false)
|
||||
const [upsideInversion, setUpsideInversion] = useState(false)
|
||||
/* type
|
||||
* a: line 2
|
||||
* b: line 2 + diagonal 1
|
||||
* c: line 3
|
||||
* d: line 4
|
||||
* e: line 5
|
||||
* */
|
||||
const types = [
|
||||
{
|
||||
id: 1,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{
|
||||
isDiagonal: true,
|
||||
value: 3500,
|
||||
},
|
||||
],
|
||||
info: 'ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
lineAmount: 3,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
lines: [
|
||||
{ isDiagonal: false, value: 4500 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
{ isDiagonal: false, value: 2600 },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const getInversionState = () => {
|
||||
// return `${getScale()} rotate(${90 * rotate}deg)`
|
||||
return `${getScale()} ${getRotate()}`
|
||||
// return `${getScale()}`
|
||||
}
|
||||
|
||||
const getScale = () => {
|
||||
// if (rotate === 1 || rotate === 3) {
|
||||
// return `scale(${sideInversion ? 1 : -1}, ${upsideInversion ? 1 : -1} )`
|
||||
// } else {
|
||||
// return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1} )`
|
||||
// }
|
||||
return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1})`
|
||||
}
|
||||
|
||||
const getRotate = () => {
|
||||
// return `rotate(${sideInversion && upsideInversion ? 90 * rotate : sideInversion || upsideInversion ? -90 * rotate : 90 * rotate}deg)`
|
||||
if (sideInversion !== upsideInversion) {
|
||||
;`rotate(${90 * rotate - 180}deg)`
|
||||
}
|
||||
return `rotate(${90 * rotate}deg)`
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedType(types[0])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
||||
<div className={`modal-pop-wrap l-2`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">屋根形状の設定 </h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="plane-shape-menu">
|
||||
{types.map((type) => (
|
||||
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
|
||||
<div className="shape-box">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
transform: getInversionState(),
|
||||
transition: 'all .15s ease-in-out',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="shape-library">
|
||||
<button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button>
|
||||
<button className="library-btn ico02" onClick={() => setSideInversion(!sideInversion)}></button>
|
||||
<button className="library-btn ico03" onClick={() => setUpsideInversion(!upsideInversion)}></button>
|
||||
x:{upsideInversion ? 1 : 0}
|
||||
<br />
|
||||
y:{sideInversion ? 1 : 0}
|
||||
<br />
|
||||
rotate:{rotate}
|
||||
</div>
|
||||
<PlacementSurface {...selectedType} />
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">作成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -26,6 +26,18 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.normal-font {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bold-font {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-pop-wrap {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -281,6 +293,10 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
&.border {
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-option-wrap {
|
||||
@ -977,18 +993,14 @@ $alert-color: #101010;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
.shape-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #313131;
|
||||
border-radius: 2px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.act,
|
||||
@ -1642,6 +1654,36 @@ $alert-color: #101010;
|
||||
.module-table-flex-wrap {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.outline-form {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.module-box-tab {
|
||||
display: flex;
|
||||
|
||||
.module-btn {
|
||||
flex: 1;
|
||||
border-top: 1px solid #505050;
|
||||
border-bottom: 1px solid #505050;
|
||||
border-right: 1px solid #505050;
|
||||
background-color: #454545;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid #505050;
|
||||
}
|
||||
|
||||
&.act {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-box {
|
||||
@ -1649,7 +1691,7 @@ $alert-color: #101010;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px;
|
||||
|
||||
.module-table-inneer {
|
||||
.module-table-inner {
|
||||
padding: 10px;
|
||||
|
||||
.outline-form {
|
||||
@ -1657,5 +1699,129 @@ $alert-color: #101010;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-tit {
|
||||
padding: 10px 0;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
|
||||
.eaves-keraba-table {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
|
||||
.eaves-keraba-th {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.eaves-keraba-th,
|
||||
.eaves-keraba-td {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.self-table-tit {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-guide {
|
||||
padding: 20px;
|
||||
|
||||
.warning {
|
||||
color: #FFCACA;
|
||||
max-height: 55px;
|
||||
overflow-y: auto;
|
||||
padding-right: 30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-self-table {
|
||||
display: table;
|
||||
border-top: 1px solid #4D4D4D;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
.self-table-item {
|
||||
display: table-row;
|
||||
|
||||
.self-item-td,
|
||||
.self-item-th {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
|
||||
.self-item-th {
|
||||
width: 60px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.self-item-td {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.self-table-flx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hexagonal-wrap {
|
||||
.hexagonal-item {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hexagonal-flx-auto {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hexagonal-flx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user