흐름방향 설정 수정

src/common/common.js

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

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -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))

src/hooks/contextpopup/useFlowDirectionSetting.js

@@ -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 }
-}