90 lines
3.9 KiB
JavaScript
90 lines
3.9 KiB
JavaScript
'use client'
|
|
|
|
import { useRecoilValue } from 'recoil'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import { useRef, useState } from 'react'
|
|
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
|
|
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
|
|
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
|
|
|
|
export default function SizeSetting(props) {
|
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
|
const [settingTarget, setSettingTarget] = useState(1)
|
|
const { id, pos = contextPopupPosition, target } = props
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
const { resizeObjectBatch } = useObjectBatch({})
|
|
const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
|
|
const widthRef = useRef(null)
|
|
const heightRef = useRef(null)
|
|
|
|
// const { initEvent } = useEvent()
|
|
// const { initEvent } = useContext(EventContext)
|
|
|
|
// useEffect(() => {
|
|
// initEvent()
|
|
// }, [])
|
|
|
|
const handleReSizeObject = () => {
|
|
const width = widthRef.current.value
|
|
const height = heightRef.current.value
|
|
|
|
if (target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW) {
|
|
resizeObjectBatch(settingTarget, target, width, height, id)
|
|
} else if (target.name === POLYGON_TYPE.ROOF) {
|
|
resizeSurfaceShapeBatch(settingTarget, target, width, height, id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="ssm">
|
|
<WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="slope-wrap">
|
|
<div className="size-option-top">
|
|
<div className="size-option-wrap">
|
|
<div className="size-option mb5">
|
|
<input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
|
|
<span className="normal-font">mm</span>
|
|
</div>
|
|
<div className="size-option">
|
|
<input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
|
|
<span className="normal-font">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="size-inner-warp">
|
|
<div className="size-option-side">
|
|
<div className="size-option-wrap">
|
|
<div className="size-option mb5">
|
|
<input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
|
|
<span className="normal-font">mm</span>
|
|
</div>
|
|
<div className="size-option">
|
|
<input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
|
|
<span className="normal-font">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="size-check-wrap">
|
|
<button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
|
|
<button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
|
|
<button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
|
|
<button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
|
|
<div className="size-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
|
|
{getMessage('write')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|