132 lines
4.9 KiB
JavaScript
132 lines
4.9 KiB
JavaScript
import { useEffect, useRef, useState } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
|
|
import { canvasState } from '@/store/canvasAtom'
|
|
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
|
|
|
export default function DormerOffset(props) {
|
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
|
const { id, pos = contextPopupPosition, title } = props
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
const [arrow1, setArrow1] = useState(null)
|
|
const [arrow2, setArrow2] = useState(null)
|
|
const arrow1LengthRef = useRef(0)
|
|
const arrow2LengthRef = useRef(0)
|
|
const [arrow1Length, setArrow1Length] = useState(0)
|
|
const [arrow2Length, setArrow2Length] = useState(0)
|
|
|
|
const canvas = useRecoilValue(canvasState)
|
|
const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
|
|
|
|
useEffect(() => {
|
|
if (canvas) {
|
|
dormerOffsetKeyEvent(setArrow1, setArrow2)
|
|
}
|
|
}, [])
|
|
|
|
const handleOffsetDormer = () => {
|
|
const length1 = arrow1LengthRef.current.value
|
|
const length2 = arrow2LengthRef.current.value
|
|
|
|
dormerOffset(arrow1, arrow2, length1, length2)
|
|
|
|
// setArrow1(null)
|
|
// setArrow2(null)
|
|
// arrow1LengthRef.current.value = ''
|
|
// arrow2LengthRef.current.value = ''
|
|
|
|
// closePopup(id)
|
|
}
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="xm">
|
|
<WithDraggable.Header title={title} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
|
|
<div className="grid-option-wrap">
|
|
<div className="grid-option-box">
|
|
<div className="move-form">
|
|
<p className="mb5">{getMessage('length')}</p>
|
|
<div className="input-move-wrap mb5">
|
|
<div className="input-move">
|
|
{/*<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />*/}
|
|
<CalculatorInput
|
|
id=""
|
|
name=""
|
|
label=""
|
|
className="input-origin block"
|
|
value={arrow1LengthRef.current?.value ?? 0}
|
|
ref={arrow1LengthRef}
|
|
onChange={() => {}} // No-op function to prevent error
|
|
options={{
|
|
allowNegative: false,
|
|
allowDecimal: false,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span>mm</span>
|
|
<div className="direction-move-wrap">
|
|
<button
|
|
className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
|
|
onClick={() => {
|
|
setArrow1('up')
|
|
}}
|
|
></button>
|
|
<button
|
|
className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
|
|
onClick={() => {
|
|
setArrow1('down')
|
|
}}
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div className="input-move-wrap">
|
|
<div className="input-move">
|
|
{/*<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />*/}
|
|
<CalculatorInput
|
|
id=""
|
|
name=""
|
|
label=""
|
|
className="input-origin block"
|
|
value={arrow2LengthRef.current?.value ?? 0}
|
|
ref={arrow2LengthRef}
|
|
onChange={() => {}} // No-op function to prevent error
|
|
options={{
|
|
allowNegative: false,
|
|
allowDecimal: false,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span>mm</span>
|
|
<div className="direction-move-wrap">
|
|
<button
|
|
className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
|
|
onClick={() => {
|
|
setArrow2('left')
|
|
}}
|
|
></button>
|
|
<button
|
|
className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
|
|
onClick={() => {
|
|
setArrow2('right')
|
|
}}
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={handleOffsetDormer}>
|
|
{getMessage('modal.common.save')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|