100 lines
3.8 KiB
JavaScript
100 lines
3.8 KiB
JavaScript
import { forwardRef, useContext, useImperativeHandle, useState } from 'react'
|
||
import { useMessage } from '@/hooks/useMessage'
|
||
import { useOrientation } from '@/hooks/module/useOrientation'
|
||
import { getDegreeInOrientation } from '@/util/canvas-util'
|
||
import { numberCheck } from '@/util/common-utils'
|
||
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
|
||
|
||
export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||
const { getMessage } = useMessage()
|
||
|
||
const { nextStep, compasDeg, setCompasDeg } = useOrientation()
|
||
|
||
const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
|
||
|
||
useImperativeHandle(ref, () => ({
|
||
handleNextStep,
|
||
}))
|
||
|
||
const handleNextStep = () => {
|
||
nextStep()
|
||
canvasPopupStatusTrigger(compasDeg)
|
||
}
|
||
|
||
const checkDegree = (e) => {
|
||
if (numberCheck(Number(e)) && Number(e) >= -180 && Number(e) <= 180) {
|
||
setCompasDeg(Number(e))
|
||
} else {
|
||
setCompasDeg(compasDeg)
|
||
}
|
||
}
|
||
|
||
const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
|
||
|
||
return (
|
||
<>
|
||
<div className="properties-setting-wrap">
|
||
<div className="outline-wrap">
|
||
<div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
|
||
<div className="roof-module-compas">
|
||
<div className="compas-box">
|
||
<div className="compas-box-inner">
|
||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||
<div
|
||
key={index}
|
||
className={`circle ${getDegreeInOrientation(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
|
||
onClick={() => setCompasDeg(15 * (12 + index))}
|
||
>
|
||
{index === 0 && <i>180°</i>}
|
||
{index === 6 && <i>-90°</i>}
|
||
</div>
|
||
))}
|
||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||
<div
|
||
key={index}
|
||
className={`circle ${getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
|
||
onClick={() => setCompasDeg(15 * index)}
|
||
>
|
||
{index === 0 && <i>0°</i>}
|
||
{index === 6 && <i>90°</i>}
|
||
</div>
|
||
))}
|
||
<div className="compas">
|
||
<div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="center-wrap">
|
||
<div className="d-check-box pop">
|
||
<input type="checkbox" id="ch99" checked={!hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
|
||
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
|
||
</div>
|
||
<div className="outline-form">
|
||
<div className="input-grid mr10" style={{ width: '160px' }}>
|
||
<input
|
||
type="text"
|
||
className="input-origin block"
|
||
value={compasDeg}
|
||
readOnly={hasAnglePassivity}
|
||
placeholder={0}
|
||
onChange={
|
||
(e) => checkDegree(e.target.value)
|
||
// setCompasDeg(
|
||
|
||
// e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
|
||
// ? e.target.value
|
||
// : 0,
|
||
// )
|
||
}
|
||
/>
|
||
</div>
|
||
<span className="thin">°</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
})
|