qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

흐름방향 설정 수정

Browse Source
This commit is contained in:
hyojun.choi 2024-12-11 14:33:59 +09:00
parent 873cbcf2d2
commit b5aeed7874
3 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -159,6 +159,7 @@ export const SAVE_KEY = [
'offset',
'arrow',
'surfaceCompass',
'surfaceCompassType',
'moduleCompass',
'isFixed',
'modules',

41
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -5,9 +5,14 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { FLOW_DIRECTION_TYPE, useFlowDirectionSetting } from '@/hooks/contextpopup/useFlowDirectionSetting'
import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'
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
@ -20,10 +25,9 @@ export default function FlowDirectionSetting(props) {
}
}, [])
const [compasDeg, setCompasDeg] = useState(null)
const [compasDeg, setCompasDeg] = useState(target.surfaceCompass ?? null)
const [flowDirection, setFlowDirection] = useState(target.direction)
const { closePopup } = usePopup()
const { changeSurfaceFlowDirection, type, setType } = useFlowDirectionSetting(id)
const orientations = [
{ name: `${getMessage('commons.none')}`, value: 0 },
@ -36,7 +40,27 @@ export default function FlowDirectionSetting(props) {
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
{ name: `${getMessage('commons.north')}`, value: 180 },
]
const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
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,
})
drawDirectionArrow(roof)
canvas?.renderAll()
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}>
@ -84,9 +108,8 @@ export default function FlowDirectionSetting(props) {
</div>
<div className="grid-select ">
<QSelectBox
title={''}
title={selectedOrientation.name}
options={orientations}
value={selectedOrientation}
onChange={(e) => {
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
setSelectedOrientation(e)
@ -116,7 +139,7 @@ export default function FlowDirectionSetting(props) {
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
<div
key={index}
className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
onClick={() => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (12 + index))
@ -126,7 +149,7 @@ export default function FlowDirectionSetting(props) {
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
<div
key={index}
className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
onClick={() => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (index + 1))

30
src/hooks/contextpopup/useFlowDirectionSetting.js
View File

@ -1,30 +0,0 @@
import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { usePolygon } from '@/hooks/usePolygon'
import { useState } from 'react'
import { usePopup } from '@/hooks/usePopup'
export const FLOW_DIRECTION_TYPE = {
EIGHT_AZIMUTH: 'eightAzimuth',
TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
}
export function useFlowDirectionSetting(id) {
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
const { closePopup } = usePopup()
const [type, setType] = useState(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
roof.set({
direction: direction,
surfaceCompass: orientation,
})
drawDirectionArrow(roof)
canvas?.renderAll()
closePopup(id)
}
return { changeSurfaceFlowDirection, type, setType }
}