배치면 방향 설정 추가

src/common/common.js

@@ -162,6 +162,7 @@ export const SAVE_KEY = [
   'planeSize',
   'actualSize',
   'surfaceId',
+  'arrow',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

src/components/fabric/QPolygon.js

@@ -139,7 +139,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.on('removed', () => {
       // const children = getAllRelatedObjects(this.id, this.canvas)
-      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id && obj.name === 'lengthText')
+      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
       children.forEach((child) => {
         this.canvas.remove(child)
       })
@@ -167,6 +167,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   initLines() {
+    if (this.lines.length > 0) {
+      return
+    }
+
     this.lines = []
 
     this.points.forEach((point, i) => {

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

@@ -6,17 +6,27 @@ 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/popup/useFlowDirectionSetting'
+import { canvasState } from '@/store/canvasAtom'
 export default function FlowDirectionSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition, target } = props
+  const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
-  const { closePopup } = usePopup()
+
-  const [compasDeg, setCompasDeg] = useState(360)
+  useEffect(() => {
+    return () => {
+      canvas?.discardActiveObject()
+    }
+  }, [])
+
+  const [compasDeg, setCompasDeg] = useState(null)
   const [flowDirection, setFlowDirection] = useState(target.direction)
-  const { changeSurfaceFlowDirection } = useSurfaceShapeBatch()
+  const { closePopup } = usePopup()
+  const { changeSurfaceFlowDirection, type, setType } = useFlowDirectionSetting(id)
 
   const orientations = [
-    // { name: `${getMessage('commons.none')}`, value: 0 },
+    { name: `${getMessage('commons.none')}`, value: 0 },
     { name: `${getMessage('commons.south')}`, value: 360 },
     { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
     { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
@@ -27,41 +37,7 @@ export default function FlowDirectionSetting(props) {
     { name: `${getMessage('commons.north')}`, value: 180 },
   ]
   const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
-  const [type, setType] = useState('0')
-  useEffect(() => {
-    if (target?.angle === 0) {
-      setCompasDeg(360)
-    } else {
-      setCompasDeg(target?.angle ?? 360)
-    }
-  }, [])
-  useEffect(() => {
-    if (type === '0') {
-      setCompasDeg(selectedOrientation.value)
-    }
-  }, [selectedOrientation])
 
-  useEffect(() => {
-    if (type === '1') {
-      if ([15, 345, 360].includes(compasDeg)) {
-        setSelectedOrientation(orientations[0])
-      } else if ([30, 45, 60].includes(compasDeg)) {
-        setSelectedOrientation(orientations[2])
-      } else if ([75, 90, 105].includes(compasDeg)) {
-        setSelectedOrientation(orientations[4])
-      } else if ([120, 135, 150].includes(compasDeg)) {
-        setSelectedOrientation(orientations[6])
-      } else if ([165, 180, 195].includes(compasDeg)) {
-        setSelectedOrientation(orientations[7])
-      } else if ([210, 225, 240].includes(compasDeg)) {
-        setSelectedOrientation(orientations[5])
-      } else if ([255, 270, 285].includes(compasDeg)) {
-        setSelectedOrientation(orientations[3])
-      } else if ([300, 315, 330].includes(compasDeg)) {
-        setSelectedOrientation(orientations[1])
-      }
-    }
-  }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ml mount`}>
@@ -94,16 +70,43 @@ export default function FlowDirectionSetting(props) {
               <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" value={0} checked={type === '0'} onChange={(e) => setType(e.target.value)} />
+                  <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 title={''} options={orientations} value={selectedOrientation} onChange={(e) => setSelectedOrientation(e)} />
+                  <QSelectBox
+                    title={''}
+                    options={orientations}
+                    value={selectedOrientation}
+                    onChange={(e) => {
+                      setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
+                      setSelectedOrientation(e)
+                      setCompasDeg(e.value)
+                    }}
+                  />
                 </div>
               </div>
               <div className="mb-box">
                 <div className="d-check-radio pop">
-                  <input type="radio" name="radio01" id="ra02" value={1} checked={type === '1'} onChange={(e) => setType(e.target.value)} />
+                  <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>
@@ -114,18 +117,27 @@ export default function FlowDirectionSetting(props) {
                       <div
                         key={index}
                         className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
-                        onClick={() => setCompasDeg(15 * (12 + index))}
+                        onClick={() => {
+                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
+                          setCompasDeg(15 * (12 + index))
+                        }}
                       ></div>
                     ))}
                     {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
                       <div
                         key={index}
                         className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
-                        onClick={() => setCompasDeg(15 * (index + 1))}
+                        onClick={() => {
+                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
+                          setCompasDeg(15 * (index + 1))
+                        }}
                       ></div>
                     ))}
                     <div className="compas">
-                      <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                      <div
+                        className="compas-arr"
+                        style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
+                      ></div>
                     </div>
                   </div>
                 </div>
@@ -133,7 +145,7 @@ export default function FlowDirectionSetting(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, selectedOrientation)}>
+            <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
               {getMessage('modal.common.save')}
             </button>
           </div>

src/hooks/popup/useFlowDirectionSetting.js

@@ -0,0 +1,30 @@
+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 }
+}

src/hooks/surface/useSurfaceShapeBatch.js

@@ -965,21 +965,12 @@ export function useSurfaceShapeBatch() {
     }
   }
 
-  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
-    roof.set({
-      direction: direction,
-    })
-    drawDirectionArrow(roof)
-    canvas?.renderAll()
-  }
-
   return {
     applySurfaceShape,
     deleteAllSurfacesAndObjects,
     moveSurfaceShapeBatch,
     resizeSurfaceShapeBatch,
     surfaceShapeActualSize,
-    changeSurfaceFlowDirection,
     changeSurfaceLinePropertyEvent,
     changeSurfaceLineProperty,
   }