From 0b5356040674dc4ab39a5d161493803164678498 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 11 Nov 2024 16:39:06 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=A0=EC=A7=84=20=EC=86=8C=EC=8A=A4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePolygon.js | 72 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 9b3a8e98..1b1538c9 100644
--- a/src/hooks/usePolygon.js
+++ b/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)
   }
 
   /**