127 lines
5.2 KiB
JavaScript
127 lines
5.2 KiB
JavaScript
import Image from 'next/image'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { forwardRef, useState } from 'react'
|
|
|
|
const PlacementSurface = forwardRef((props, refs) => {
|
|
const { getMessage } = useMessage()
|
|
const { id, lines, info, rotate, xInversion, yInversion } = props
|
|
let { length1, length2, length3, length4, length5, lengthetc, azimuth } = refs
|
|
|
|
const [azimuthDirection, setAzimuthDirection] = useState(azimuth.current)
|
|
|
|
const num = ['①', '②', '③', '④', '⑤']
|
|
const getImageUrl = () => {
|
|
// re_는 normal의 y축 대칭 이미지
|
|
const imageName = id < 10 ? '0' + id : id
|
|
let imageRotate = 0
|
|
if (xInversion && !yInversion) {
|
|
if (rotate % 2 === 0 || rotate < 0) {
|
|
imageRotate = Math.abs(rotate % 4)
|
|
} else {
|
|
if (rotate < 0) {
|
|
imageRotate = Math.abs((rotate - 2) % 4)
|
|
} else {
|
|
imageRotate = Math.abs((rotate + 2) % 4)
|
|
}
|
|
}
|
|
} else if (xInversion && yInversion) {
|
|
imageRotate = Math.abs((rotate + 4) % 4)
|
|
} else if (xInversion !== yInversion && rotate < 0) {
|
|
imageRotate = Math.abs(rotate)
|
|
} else if (!xInversion && yInversion) {
|
|
if (rotate % 2 === 0 || rotate < 0) {
|
|
imageRotate = Math.abs(rotate % 4)
|
|
} else {
|
|
if (rotate < 0) {
|
|
imageRotate = Math.abs((rotate - 2) % 4)
|
|
} else {
|
|
imageRotate = Math.abs((rotate + 2) % 4)
|
|
}
|
|
}
|
|
} else {
|
|
imageRotate = (rotate + 4) % 4
|
|
}
|
|
const rotateType = imageRotate % 4 !== 0 ? (imageRotate % 4) * 90 + 'deg' : 'normal'
|
|
if (xInversion !== yInversion) {
|
|
return `/static/images/canvas/shape/re_${rotateType}/plane_tab${imageName}.svg`
|
|
} else {
|
|
return `/static/images/canvas/shape/${rotateType}/plane_tab${imageName}.svg`
|
|
}
|
|
}
|
|
|
|
const azimuthButton = (direction, e) => {
|
|
setAzimuthDirection(direction)
|
|
azimuth.current = direction
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="plane-shape-wrapper">
|
|
<div className="plane-box shape-box">
|
|
<h3 className="plane-box-tit">{getMessage('setting')}</h3>
|
|
<div className="shape-box-inner">
|
|
<div className="shape-img">
|
|
<Image src={getImageUrl()} 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" id={index} key={index}>
|
|
<div className="eaves-keraba-th">
|
|
{/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
|
|
{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}
|
|
ref={
|
|
line.isDiagonal
|
|
? lengthetc
|
|
: index === 0
|
|
? length1
|
|
: index === 1
|
|
? length2
|
|
: index === 2
|
|
? length3
|
|
: index === 3
|
|
? length4
|
|
: length5
|
|
}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="plane-box direction-box">
|
|
<h3 className="plane-box-tit">{getMessage('setting')}</h3>
|
|
<div className="plane-direction-box">
|
|
<div className="plane-direction">
|
|
<span className="top">{getMessage('commons.north')}</span>
|
|
<span className="right">{getMessage('commons.east')}</span>
|
|
<span className="bottom">{getMessage('commons.south')}</span>
|
|
<span className="left">{getMessage('commons.west')}</span>
|
|
<button className={`plane-btn up ${azimuthDirection === 'up' ? ' act' : ''}`} onClick={() => azimuthButton('up')}></button>
|
|
<button className={`plane-btn right ${azimuthDirection === 'right' ? ' act' : ''}`} onClick={() => azimuthButton('right')}></button>
|
|
<button className={`plane-btn down ${azimuthDirection === 'down' ? ' act' : ''}`} onClick={() => azimuthButton('down')}></button>
|
|
<button className={`plane-btn left ${azimuthDirection === 'left' ? ' act' : ''}`} onClick={() => azimuthButton('left')}></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{info && <div className="plane-tab-guide">{info}</div>}
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default PlacementSurface
|