Merge branch 'dev' into dev-yj

src/hooks/usePolygon.js

@@ -181,7 +181,7 @@ export const usePolygon = () => {
 
     polygon.canvas
       .getObjects()
-      .filter((obj) => obj.name === 'flowText' && obj.parent === polygon.arrow)
+      .filter((obj) => obj.name === 'flowText' && obj.parentId === polygon.arrow?.id)
       .forEach((obj) => polygon.canvas.remove(obj))
 
     let arrow = null
@@ -265,6 +265,8 @@ export const usePolygon = () => {
       direction: direction,
       parent: polygon,
       stickeyPoint: stickeyPoint,
+      surfaceCompass: polygon.surfaceCompass,
+      moduleCompass: polygon.moduleCompass,
       visible: isFlowDisplay,
       pitch: polygon.pitch,
       parentId: polygon.id,
@@ -274,7 +276,73 @@ export const usePolygon = () => {
     polygon.arrow = arrow
     polygon.canvas.add(arrow)
     polygon.canvas.renderAll()
-    drawDirectionStringToArrow(polygon.canvas, 0)
+    drawDirectionStringToArrow2(polygon)
+    // drawDirectionStringToArrow()
+  }
+
+  //arrow의 compass 값으로 방향 글자 설정 필요
+  const drawDirectionStringToArrow2 = (polygon) => {
+    const { direction, surfaceCompass, moduleCompass, arrow } = polygon
+
+    if (!surfaceCompass && !moduleCompass) {
+      return
+    }
+
+    let text = ''
+
+    // 東,西,南,北
+    if ([360].includes(surfaceCompass)) {
+      text = '南'
+    } else if ([345, 330].includes(surfaceCompass)) {
+      text = '南南東'
+    } else if ([315].includes(surfaceCompass)) {
+      text = '南東'
+    } else if ([300, 285].includes(surfaceCompass)) {
+      text = '東南東'
+    } else if ([270].includes(surfaceCompass)) {
+      text = '東'
+    } else if ([255, 240].includes(surfaceCompass)) {
+      text = '東北東'
+    } else if ([225].includes(surfaceCompass)) {
+      text = '北東'
+    } else if ([210, 195].includes(surfaceCompass)) {
+      text = '北北東'
+    } else if ([180].includes(surfaceCompass)) {
+      text = '北'
+    } else if ([165, 150].includes(surfaceCompass)) {
+      text = '北北西'
+    } else if ([135].includes(surfaceCompass)) {
+      text = '北西'
+    } else if ([120, 105].includes(surfaceCompass)) {
+      text = '西北西'
+    } else if ([90].includes(surfaceCompass)) {
+      text = '西'
+    } else if ([75, 60].includes(surfaceCompass)) {
+      text = '西南西'
+    } else if ([45].includes(surfaceCompass)) {
+      text = '西南'
+    } else if ([30, 15].includes(surfaceCompass)) {
+      text = '西西南'
+    }
+
+    const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
+      fontSize: flowFontOptions.fontSize.value,
+      fill: flowFontOptions.fontColor.value,
+      fontFamily: flowFontOptions.fontFamily.value,
+      fontWeight: flowFontOptions.fontWeight.value,
+      originX: 'center',
+      originY: 'center',
+      name: 'flowText',
+      originText: text,
+      selectable: false,
+      left: arrow.stickeyPoint.x,
+      top: arrow.stickeyPoint.y,
+      parent: arrow,
+      parentId: arrow.id,
+      visible: isFlowDisplay,
+    })
+
+    polygon.canvas.add(textObj)
   }
 
   /**