214 lines
9.0 KiB
JavaScript
214 lines
9.0 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { useEffect, useState } from 'react'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { canvasState } from '@/store/canvasAtom'
|
|
import { usePolygon } from '@/hooks/usePolygon'
|
|
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
|
|
import { useRoofFn } from '@/hooks/common/useRoofFn'
|
|
|
|
const FLOW_DIRECTION_TYPE = {
|
|
EIGHT_AZIMUTH: 'eightAzimuth',
|
|
TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
|
|
}
|
|
|
|
export default function FlowDirectionSetting(props) {
|
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
|
const { id, pos = contextPopupPosition, target } = props
|
|
const canvas = useRecoilValue(canvasState)
|
|
const { getMessage } = useMessage()
|
|
const { setSurfaceShapePattern } = useRoofFn()
|
|
|
|
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
canvas?.discardActiveObject()
|
|
}
|
|
}, [])
|
|
|
|
const [compasDeg, setCompasDeg] = useState(target.surfaceCompass ?? null)
|
|
const [flowDirection, setFlowDirection] = useState(target.direction)
|
|
const { closePopup } = usePopup()
|
|
|
|
useEffect(() => {
|
|
let newCompassDeg = 0
|
|
if ([-15, 0, 15].includes(compasDeg)) {
|
|
newCompassDeg = 0
|
|
} else if ([30, 45, 60].includes(compasDeg)) {
|
|
newCompassDeg = 45
|
|
} else if ([75, 90, 105].includes(compasDeg)) {
|
|
newCompassDeg = 90
|
|
} else if ([120, 135, 150].includes(compasDeg)) {
|
|
newCompassDeg = 135
|
|
} else if ([165, 180, -165].includes(compasDeg)) {
|
|
newCompassDeg = 180
|
|
} else if ([-120, -135, -150].includes(compasDeg)) {
|
|
newCompassDeg = -135
|
|
} else if ([-105, -90, -75].includes(compasDeg)) {
|
|
newCompassDeg = -90
|
|
} else if ([-60, -45, -30].includes(compasDeg)) {
|
|
newCompassDeg = -45
|
|
} else {
|
|
newCompassDeg = ''
|
|
}
|
|
const newOrientation = orientations.find((item) => item.value === newCompassDeg)
|
|
setSelectedOrientation(newOrientation)
|
|
}, [compasDeg])
|
|
|
|
const orientations = [
|
|
{ name: `${getMessage('commons.none')}`, value: '' },
|
|
{ name: `${getMessage('commons.south')}`, value: 0 },
|
|
{ name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
|
|
{ name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
|
|
{ name: `${getMessage('commons.east')}`, value: 90 },
|
|
{ name: `${getMessage('commons.west')}`, value: -90 },
|
|
{ name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
|
|
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
|
|
{ name: `${getMessage('commons.north')}`, value: 180 },
|
|
]
|
|
|
|
const { drawDirectionArrow } = usePolygon()
|
|
|
|
const [type, setType] = useState(target.surfaceCompassType ?? FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
|
|
|
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
|
|
roof.set({
|
|
direction: direction,
|
|
surfaceCompass: orientation,
|
|
surfaceCompassType: type,
|
|
})
|
|
setSurfaceShapePattern(roof, null, null, roof.roofMaterial)
|
|
drawDirectionArrow(roof)
|
|
canvas?.renderAll()
|
|
changeSurfaceLineType(roof)
|
|
closePopup(id)
|
|
}
|
|
|
|
const [selectedOrientation, setSelectedOrientation] = useState(
|
|
target.surfaceCompassType !== null && target.surfaceCompassType === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH
|
|
? orientations.find((item) => item.value === target.surfaceCompass)
|
|
: orientations[0],
|
|
)
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="ml">
|
|
<WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="drawing-flow-wrap">
|
|
<div className="discrimination-box">
|
|
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
|
|
<div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
|
|
<div className="object-direction-wrap">
|
|
<div className="plane-direction">
|
|
<span className="top">{getMessage('commons.north')}</span>
|
|
<button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
|
|
<span className="right">{getMessage('commons.east')}</span>
|
|
<button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
|
|
<span className="bottom">{getMessage('commons.south')}</span>
|
|
<button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
|
|
<span className="left">{getMessage('commons.west')}</span>
|
|
<button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="discrimination-box">
|
|
<div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
|
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
|
|
<div className="mb-box">
|
|
<div className="d-check-radio pop mb15">
|
|
<input
|
|
type="radio"
|
|
name="radio01"
|
|
id="ra01"
|
|
checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
|
|
onChange={(e) => {
|
|
setCompasDeg(0)
|
|
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
|
}}
|
|
/>
|
|
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
|
|
</div>
|
|
<div className="grid-select ">
|
|
<QSelectBox
|
|
value={selectedOrientation}
|
|
options={orientations}
|
|
onChange={(e) => {
|
|
if (e.value === '') {
|
|
setCompasDeg(null)
|
|
setSelectedOrientation(e)
|
|
return
|
|
}
|
|
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
|
setSelectedOrientation(e)
|
|
setCompasDeg(e.value)
|
|
}}
|
|
showKey={'name'}
|
|
targetKey={'value'}
|
|
sourceKey={'value'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mb-box">
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="radio01"
|
|
id="ra02"
|
|
value={1}
|
|
checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
|
|
onChange={(e) => {
|
|
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
|
}}
|
|
/>
|
|
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
|
|
</div>
|
|
</div>
|
|
<div className="draw-flow-wrap">
|
|
<div className="compas-box">
|
|
<div className="compas-box-inner">
|
|
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
|
<div
|
|
key={index}
|
|
className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
|
|
onClick={() => {
|
|
if (index === 0) {
|
|
setCompasDeg(180)
|
|
return
|
|
}
|
|
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
|
setCompasDeg(-15 * index + 180)
|
|
}}
|
|
></div>
|
|
))}
|
|
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
|
<div
|
|
key={index}
|
|
className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
|
|
onClick={() => {
|
|
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
|
setCompasDeg(15 * index * -1)
|
|
}}
|
|
></div>
|
|
))}
|
|
<div className="compas">
|
|
<div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
|
|
{getMessage('modal.common.save')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|