캔버스 세팅 수정, arrow usePolygon으로 변경

src/components/fabric/QPolygon.js

@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -121,13 +121,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.on('modified', (e) => {
       this.addLengthText()
-      // if (this.arrow) {
-      //   drawDirectionArrow(this)
-      // }
     })
 
     this.on('selected', () => {
-      // drawDirectionArrow(this)
       Object.keys(this.controls).forEach((controlKey) => {
         if (controlKey !== 'ml' && controlKey !== 'mr') {
           this.setControlVisible(controlKey, false)

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useResetRecoilState } from 'recoil'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { adsorptionPointAddModeState } from '@/store/canvasAtom'
@@ -18,47 +18,42 @@ export default function GridOption(props) {
   const [color, setColor] = useColor(gridColor)
 
   useEffect(() => {
-    console.log('GridOption useEffect 실행')
     setGridColor(color.hex)
   }, [color])
 
   const onClickOption = (option) => {
+    const { id, name, selected } = option
+
     const newGridOptions = [...gridOptions]
-    newGridOptions.map((item) => {
+
-      if (item.id === option.id) {
+    // 초기화
+    setShowColorPickerModal(false)
+    setShowDotLineGridModal(false)
+    setTempGridMode(false)
+    setAdsorptionPointAddMode(false)
+    //
+
+    newGridOptions.forEach((item) => {
+      if (item.id === id) {
         item.selected = !item.selected
+      } else {
+        item.selected = false
       }
     })
 
-    if (option.id === 1) {
+    const selectedOption = newGridOptions.find((item) => item.id === option.id)
-      // 점 그리드
+    if (selectedOption.id === 1) {
-      setAdsorptionPointAddMode(false)
+      // 임의 그리드 모드
-      setTempGridMode(option.selected)
+      setTempGridMode(selectedOption.selected)
-      newGridOptions[2].selected = false
+    } else if (selectedOption.id === 2) {
-    }
+      // 점 선 그리드 설정 모달
-
+      setShowDotLineGridModal(selectedOption.selected)
-    if (option.id === 2) {
+    } else if (selectedOption.id === 3) {
-      // 점.선 그리드
+      // 흡착점 모드
-      if (option.selected) {
+      setAdsorptionPointAddMode(selectedOption.selected)
-        setShowDotLineGridModal(true)
+    } else if (selectedOption.id === 4) {
-      } else {
+      // 그리드 색 설정 모달
-        setShowDotLineGridModal(false)
+      setShowColorPickerModal(selectedOption.selected)
-      }
-    }
-
-    if (option.name === 'modal.canvas.setting.grid.absorption.add') {
-      setAdsorptionPointAddMode(!adsorptionPointAddMode)
-      setTempGridMode(false)
-      newGridOptions[0].selected = false
-    }
-
-    if (option.id === 4) {
-      // 그리드 색 설정
-      if (option.selected) {
-        setShowColorPickerModal(true)
-      } else {
-        setShowColorPickerModal(false)
-      }
     }
 
     setGridOptions(newGridOptions)

src/hooks/object/useObjectBatch.js

@@ -1,14 +1,13 @@
 'use client'
 import { useMessage } from '@/hooks/useMessage'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
+import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
+import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
-import { QPolygon } from '@/components/fabric/QPolygon'
+import { usePolygon } from '@/hooks/usePolygon'
-import { drawDirectionArrow } from '@/util/qpolygon-utils'
 
 export function useObjectBatch() {
   const { getMessage } = useMessage()
@@ -16,6 +15,8 @@ export function useObjectBatch() {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const { swalFire } = useSwal()
 
+  const { drawDirectionArrow } = usePolygon()
+
   const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
     const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
     const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -2,12 +2,14 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
-import { drawDirectionArrow, splitPolygonWithLines } from '@/util/qpolygon-utils'
+import { splitPolygonWithLines } from '@/util/qpolygon-utils'
 import { useSwal } from '@/hooks/useSwal'
+import { usePolygon } from '@/hooks/usePolygon'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
   const canvas = useRecoilValue(canvasState)
+  const { drawDirectionArrow } = usePolygon()
 
   const { swalFire } = useSwal()
 

src/hooks/surface/usePlacementShapeDrawing.js

@@ -14,7 +14,7 @@ import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
 import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
 import { fabric } from 'fabric'
-import { calculateAngle, drawDirectionArrow } from '@/util/qpolygon-utils'
+import { calculateAngle } from '@/util/qpolygon-utils'
 import {
   placementShapeDrawingAngle1State,
   placementShapeDrawingAngle2State,
@@ -37,7 +37,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
     useEvent()
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
-  const { addPolygonByLines } = usePolygon()
+  const { addPolygonByLines, drawDirectionArrow } = usePolygon()
   const { tempGridMode } = useTempGrid()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)

src/hooks/usePolygon.js

@@ -4,9 +4,11 @@ import { fabric } from 'fabric'
 import { getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint } from '@/util/qpolygon-utils'
+import { flowDisplaySelector } from '@/store/settingAtom'
 
 export const usePolygon = () => {
   const canvas = useRecoilValue(canvasState)
+  const isFlowDisplay = useRecoilValue(flowDisplaySelector)
   const fontSize = useRecoilValue(fontSizeState)
   const fontFamily = useRecoilValue(fontFamilyState)
 
@@ -100,9 +102,323 @@ export const usePolygon = () => {
     canvas.renderAll()
   }
 
+  /**
+   * poolygon의 방향에 따라 화살표를 추가한다.
+   * @param polygon
+   */
+  const drawDirectionArrow = (polygon) => {
+    const direction = polygon.direction
+    if (!direction) {
+      return
+    }
+
+    polygon.canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
+      .forEach((obj) => polygon.canvas.remove(obj))
+
+    let arrow = null
+    let points = []
+
+    if (polygon.arrow) {
+      polygon.canvas.remove(polygon.arrow)
+    }
+
+    let centerPoint = { x: polygon.left, y: polygon.top }
+    let stickeyPoint
+
+    const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
+    const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
+    const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
+    const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
+
+    switch (direction) {
+      case 'north':
+        points = [
+          { x: centerPoint.x, y: polygonMinY - 50 },
+          { x: centerPoint.x + 20, y: polygonMinY - 50 },
+          { x: centerPoint.x + 20, y: polygonMinY - 80 },
+          { x: centerPoint.x + 50, y: polygonMinY - 80 },
+          { x: centerPoint.x, y: polygonMinY - 110 },
+          { x: centerPoint.x - 50, y: polygonMinY - 80 },
+          { x: centerPoint.x - 20, y: polygonMinY - 80 },
+          { x: centerPoint.x - 20, y: polygonMinY - 50 },
+        ]
+
+        stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
+        break
+      case 'south':
+        points = [
+          { x: centerPoint.x, y: polygonMaxY + 50 },
+          { x: centerPoint.x + 20, y: polygonMaxY + 50 },
+          { x: centerPoint.x + 20, y: polygonMaxY + 80 },
+          { x: centerPoint.x + 50, y: polygonMaxY + 80 },
+          { x: centerPoint.x, y: polygonMaxY + 110 },
+          { x: centerPoint.x - 50, y: polygonMaxY + 80 },
+          { x: centerPoint.x - 20, y: polygonMaxY + 80 },
+          { x: centerPoint.x - 20, y: polygonMaxY + 50 },
+        ]
+        stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
+        break
+      case 'west':
+        points = [
+          { x: polygonMinX - 50, y: centerPoint.y },
+          { x: polygonMinX - 50, y: centerPoint.y + 20 },
+          { x: polygonMinX - 80, y: centerPoint.y + 20 },
+          { x: polygonMinX - 80, y: centerPoint.y + 50 },
+          { x: polygonMinX - 110, y: centerPoint.y },
+          { x: polygonMinX - 80, y: centerPoint.y - 50 },
+          { x: polygonMinX - 80, y: centerPoint.y - 20 },
+          { x: polygonMinX - 50, y: centerPoint.y - 20 },
+        ]
+
+        stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
+        break
+      case 'east':
+        points = [
+          { x: polygonMaxX + 50, y: centerPoint.y },
+          { x: polygonMaxX + 50, y: centerPoint.y + 20 },
+          { x: polygonMaxX + 80, y: centerPoint.y + 20 },
+          { x: polygonMaxX + 80, y: centerPoint.y + 50 },
+          { x: polygonMaxX + 110, y: centerPoint.y },
+          { x: polygonMaxX + 80, y: centerPoint.y - 50 },
+          { x: polygonMaxX + 80, y: centerPoint.y - 20 },
+          { x: polygonMaxX + 50, y: centerPoint.y - 20 },
+        ]
+
+        stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
+        break
+    }
+
+    arrow = new fabric.Polygon(points, {
+      selectable: false,
+      name: 'arrow',
+      fill: 'transparent',
+      stroke: 'black',
+      direction: direction,
+      parent: polygon,
+      stickeyPoint: stickeyPoint,
+      visible: isFlowDisplay,
+    })
+
+    polygon.arrow = arrow
+    polygon.canvas.add(arrow)
+    polygon.canvas.renderAll()
+    drawDirectionStringToArrow(polygon.canvas, 0)
+  }
+
+  /**
+   * 방향을 나타낸 화살표에 각도에 따라 글씨 추가
+   * @param canvas
+   * @param compass
+   */
+  const drawDirectionStringToArrow = (canvas, compass = 0) => {
+    const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
+
+    if (arrows.length === 0) {
+      return
+    }
+
+    const eastArrows = arrows.filter((arrow) => arrow.direction === 'east')
+    const westArrows = arrows.filter((arrow) => arrow.direction === 'west')
+    const northArrows = arrows.filter((arrow) => arrow.direction === 'north')
+    const southArrows = arrows.filter((arrow) => arrow.direction === 'south')
+
+    let southText = '南'
+    let eastText = '東'
+    let westText = '西'
+    let northText = '北'
+
+    if (compass === 0 || compass === 360) {
+      // 남,동,서 가능
+      // 그대로
+    } else if (compass < 45) {
+      //남(남남동),동(동북동),서(서남서) 가능
+      //북(북북서)
+      southText = '南南東'
+      eastText = '東北東'
+      westText = '西南西'
+      northText = '北北西'
+    } else if (compass === 45) {
+      // 남, 서 가능
+      // 남(남동)
+      // 서(남서)
+      // 북(북서)
+      // 동(북동)
+      southText = '南東'
+      westText = '南西'
+      northText = '北西'
+      eastText = '北東'
+    } else if (compass < 90) {
+      // 북(서북서)
+      // 동 (북북동)
+      // 남(동남동)
+      // 서(남남서)
+      northText = '北西北'
+      eastText = '北北東'
+      southText = '東南東'
+      westText = '南南西'
+    } else if (compass === 90) {
+      // 동(북)
+      // 서(남)
+      // 남(동)
+      // 북(서)
+      eastText = '北'
+      westText = '南'
+      southText = '東'
+      northText = '西'
+    } else if (compass < 135) {
+      // 남,서,북 가능
+      // 동(북북서)
+      // 서(남남동)
+      // 남(동북동)
+      // 북(서남서)
+      eastText = '北北西'
+      westText = '南南東'
+      southText = '東北東'
+      northText = '西南西'
+    } else if (compass === 135) {
+      // 서,북 가능
+
+      // 서(남동)
+      // 북(남서)
+      // 남(북동)
+      // 동(북서)
+
+      westText = '南東'
+      northText = '南西'
+      southText = '北東'
+      eastText = '北西'
+    } else if (compass < 180) {
+      // 북,동,서 가능
+      // 북(남남서)
+      // 동(서북서)
+      // 남(북북동)
+      // 서(동남동)
+
+      northText = '南南西'
+      eastText = '西北西'
+      southText = '北北東'
+      westText = '東南東'
+    } else if (compass === 180) {
+      // 북,동,서 가능
+      // 북(남)
+      // 동(서)
+      // 남(북)
+      // 서(동)
+      northText = '南'
+      eastText = '西'
+      southText = '北'
+      westText = '東'
+    } else if (compass < 225) {
+      // 서,북,동 가능
+      // 북(남남동)
+      // 동(서남서)
+      // 남(북북서)
+      // 서(동남동)
+      northText = '南南東'
+      eastText = '西南西'
+      southText = '北北西'
+      westText = '東南東'
+    } else if (compass === 225) {
+      // 북,동 가능
+      // 북(남동)
+      // 동(남서)
+      // 남(북서)
+      // 서(북동)
+      northText = '南東'
+      eastText = '南西'
+      southText = '北西'
+      westText = '北東'
+    } else if (compass < 270) {
+      // 북동남 가능
+      // 북(동남동)
+      // 동(남남서)
+      // 남(서북서)
+      // 서(북북동)
+      northText = '東南東'
+      eastText = '南南西'
+      southText = '西北西'
+      westText = '北北東'
+    } else if (compass === 270) {
+      // 북동남 가능
+      // 북(동)
+      // 동(남)
+      // 남(서)
+      // 서(북)
+      northText = '東'
+      eastText = '南'
+      southText = '西'
+      westText = '北'
+    } else if (compass < 315) {
+      // 북,동,남 가능
+      // 북(동북동)
+      // 동(남남동)
+      // 남(서남서)
+      // 서(북북서)
+      northText = '東北東'
+      eastText = '南南東'
+      southText = '西南西'
+      westText = '北北西'
+    } else if (compass === 315) {
+      // 동,남 가능
+      // 북(북동)
+      // 동(남동)
+      // 남(남서)
+      // 서(북서)
+      northText = '北東'
+      eastText = '南東'
+      southText = '南西'
+      westText = '北西'
+    } else if (compass < 360) {
+      // 남,동,서 가능
+      // 북(북북동)
+      // 동(동남동)
+      // 남(남남서)
+      // 서(서북서)
+      northText = '北北東'
+      eastText = '東南東'
+      southText = '南南西'
+      westText = '西北西'
+    }
+
+    clearDirectionText(canvas)
+
+    addTextByArrows(eastArrows, eastText, canvas)
+    addTextByArrows(westArrows, westText, canvas)
+    addTextByArrows(northArrows, northText, canvas)
+    addTextByArrows(southArrows, southText, canvas)
+  }
+
+  const clearDirectionText = (canvas) => {
+    const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
+    texts.forEach((text) => {
+      canvas.remove(text)
+    })
+  }
+
+  const addTextByArrows = (arrows, txt, canvas) => {
+    arrows.forEach((arrow, index) => {
+      const text = new fabric.Text(`${txt}${index + 1}`, {
+        fontSize: arrow.parent.fontSize,
+        fill: 'black',
+        originX: 'center',
+        originY: 'center',
+        name: 'directionText',
+        selectable: false,
+        left: arrow.stickeyPoint.x,
+        top: arrow.stickeyPoint.y,
+        parent: arrow,
+        visible: isFlowDisplay,
+      })
+      canvas.add(text)
+    })
+  }
+
   return {
     addPolygon,
     addPolygonByLines,
     removePolygon,
+    drawDirectionArrow,
   }
 }

src/util/qpolygon-utils.js

@@ -3038,314 +3038,3 @@ export const inPolygon = (polygonPoints, rectPoints) => {
 
   return allPointsInsidePolygon && noPolygonPointsInsideRect
 }
-
-/**
- * poolygon의 방향에 따라 화살표를 추가한다.
- * @param polygon
- */
-export const drawDirectionArrow = (polygon) => {
-  const direction = polygon.direction
-  if (!direction) {
-    return
-  }
-
-  polygon.canvas
-    .getObjects()
-    .filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
-    .forEach((obj) => polygon.canvas.remove(obj))
-
-  let arrow = null
-  let points = []
-
-  if (polygon.arrow) {
-    polygon.canvas.remove(polygon.arrow)
-  }
-
-  let centerPoint = { x: polygon.left, y: polygon.top }
-  let stickeyPoint
-
-  const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
-  const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
-  const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
-  const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
-
-  switch (direction) {
-    case 'north':
-      points = [
-        { x: centerPoint.x, y: polygonMinY - 50 },
-        { x: centerPoint.x + 20, y: polygonMinY - 50 },
-        { x: centerPoint.x + 20, y: polygonMinY - 80 },
-        { x: centerPoint.x + 50, y: polygonMinY - 80 },
-        { x: centerPoint.x, y: polygonMinY - 110 },
-        { x: centerPoint.x - 50, y: polygonMinY - 80 },
-        { x: centerPoint.x - 20, y: polygonMinY - 80 },
-        { x: centerPoint.x - 20, y: polygonMinY - 50 },
-      ]
-
-      stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
-      break
-    case 'south':
-      points = [
-        { x: centerPoint.x, y: polygonMaxY + 50 },
-        { x: centerPoint.x + 20, y: polygonMaxY + 50 },
-        { x: centerPoint.x + 20, y: polygonMaxY + 80 },
-        { x: centerPoint.x + 50, y: polygonMaxY + 80 },
-        { x: centerPoint.x, y: polygonMaxY + 110 },
-        { x: centerPoint.x - 50, y: polygonMaxY + 80 },
-        { x: centerPoint.x - 20, y: polygonMaxY + 80 },
-        { x: centerPoint.x - 20, y: polygonMaxY + 50 },
-      ]
-      stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
-      break
-    case 'west':
-      points = [
-        { x: polygonMinX - 50, y: centerPoint.y },
-        { x: polygonMinX - 50, y: centerPoint.y + 20 },
-        { x: polygonMinX - 80, y: centerPoint.y + 20 },
-        { x: polygonMinX - 80, y: centerPoint.y + 50 },
-        { x: polygonMinX - 110, y: centerPoint.y },
-        { x: polygonMinX - 80, y: centerPoint.y - 50 },
-        { x: polygonMinX - 80, y: centerPoint.y - 20 },
-        { x: polygonMinX - 50, y: centerPoint.y - 20 },
-      ]
-
-      stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
-      break
-    case 'east':
-      points = [
-        { x: polygonMaxX + 50, y: centerPoint.y },
-        { x: polygonMaxX + 50, y: centerPoint.y + 20 },
-        { x: polygonMaxX + 80, y: centerPoint.y + 20 },
-        { x: polygonMaxX + 80, y: centerPoint.y + 50 },
-        { x: polygonMaxX + 110, y: centerPoint.y },
-        { x: polygonMaxX + 80, y: centerPoint.y - 50 },
-        { x: polygonMaxX + 80, y: centerPoint.y - 20 },
-        { x: polygonMaxX + 50, y: centerPoint.y - 20 },
-      ]
-
-      stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
-      break
-  }
-
-  arrow = new fabric.Polygon(points, {
-    selectable: false,
-    name: 'arrow',
-    fill: 'transparent',
-    stroke: 'black',
-    direction: direction,
-    parent: polygon,
-    stickeyPoint: stickeyPoint,
-  })
-
-  polygon.arrow = arrow
-  polygon.canvas.add(arrow)
-  polygon.canvas.renderAll()
-  drawDirectionStringToArrow(polygon.canvas, 0)
-}
-
-/**
- * 방향을 나타낸 화살표에 각도에 따라 글씨 추가
- * @param canvas
- * @param compass
- */
-export const drawDirectionStringToArrow = (canvas, compass = 0) => {
-  const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
-
-  if (arrows.length === 0) {
-    return
-  }
-
-  const eastArrows = arrows.filter((arrow) => arrow.direction === 'east')
-  const westArrows = arrows.filter((arrow) => arrow.direction === 'west')
-  const northArrows = arrows.filter((arrow) => arrow.direction === 'north')
-  const southArrows = arrows.filter((arrow) => arrow.direction === 'south')
-
-  let southText = '南'
-  let eastText = '東'
-  let westText = '西'
-  let northText = '北'
-
-  if (compass === 0 || compass === 360) {
-    // 남,동,서 가능
-    // 그대로
-  } else if (compass < 45) {
-    //남(남남동),동(동북동),서(서남서) 가능
-    //북(북북서)
-    southText = '南南東'
-    eastText = '東北東'
-    westText = '西南西'
-    northText = '北北西'
-  } else if (compass === 45) {
-    // 남, 서 가능
-    // 남(남동)
-    // 서(남서)
-    // 북(북서)
-    // 동(북동)
-    southText = '南東'
-    westText = '南西'
-    northText = '北西'
-    eastText = '北東'
-  } else if (compass < 90) {
-    // 북(서북서)
-    // 동 (북북동)
-    // 남(동남동)
-    // 서(남남서)
-    northText = '北西北'
-    eastText = '北北東'
-    southText = '東南東'
-    westText = '南南西'
-  } else if (compass === 90) {
-    // 동(북)
-    // 서(남)
-    // 남(동)
-    // 북(서)
-    eastText = '北'
-    westText = '南'
-    southText = '東'
-    northText = '西'
-  } else if (compass < 135) {
-    // 남,서,북 가능
-    // 동(북북서)
-    // 서(남남동)
-    // 남(동북동)
-    // 북(서남서)
-    eastText = '北北西'
-    westText = '南南東'
-    southText = '東北東'
-    northText = '西南西'
-  } else if (compass === 135) {
-    // 서,북 가능
-
-    // 서(남동)
-    // 북(남서)
-    // 남(북동)
-    // 동(북서)
-
-    westText = '南東'
-    northText = '南西'
-    southText = '北東'
-    eastText = '北西'
-  } else if (compass < 180) {
-    // 북,동,서 가능
-    // 북(남남서)
-    // 동(서북서)
-    // 남(북북동)
-    // 서(동남동)
-
-    northText = '南南西'
-    eastText = '西北西'
-    southText = '北北東'
-    westText = '東南東'
-  } else if (compass === 180) {
-    // 북,동,서 가능
-    // 북(남)
-    // 동(서)
-    // 남(북)
-    // 서(동)
-    northText = '南'
-    eastText = '西'
-    southText = '北'
-    westText = '東'
-  } else if (compass < 225) {
-    // 서,북,동 가능
-    // 북(남남동)
-    // 동(서남서)
-    // 남(북북서)
-    // 서(동남동)
-    northText = '南南東'
-    eastText = '西南西'
-    southText = '北北西'
-    westText = '東南東'
-  } else if (compass === 225) {
-    // 북,동 가능
-    // 북(남동)
-    // 동(남서)
-    // 남(북서)
-    // 서(북동)
-    northText = '南東'
-    eastText = '南西'
-    southText = '北西'
-    westText = '北東'
-  } else if (compass < 270) {
-    // 북동남 가능
-    // 북(동남동)
-    // 동(남남서)
-    // 남(서북서)
-    // 서(북북동)
-    northText = '東南東'
-    eastText = '南南西'
-    southText = '西北西'
-    westText = '北北東'
-  } else if (compass === 270) {
-    // 북동남 가능
-    // 북(동)
-    // 동(남)
-    // 남(서)
-    // 서(북)
-    northText = '東'
-    eastText = '南'
-    southText = '西'
-    westText = '北'
-  } else if (compass < 315) {
-    // 북,동,남 가능
-    // 북(동북동)
-    // 동(남남동)
-    // 남(서남서)
-    // 서(북북서)
-    northText = '東北東'
-    eastText = '南南東'
-    southText = '西南西'
-    westText = '北北西'
-  } else if (compass === 315) {
-    // 동,남 가능
-    // 북(북동)
-    // 동(남동)
-    // 남(남서)
-    // 서(북서)
-    northText = '北東'
-    eastText = '南東'
-    southText = '南西'
-    westText = '北西'
-  } else if (compass < 360) {
-    // 남,동,서 가능
-    // 북(북북동)
-    // 동(동남동)
-    // 남(남남서)
-    // 서(서북서)
-    northText = '北北東'
-    eastText = '東南東'
-    southText = '南南西'
-    westText = '西北西'
-  }
-
-  clearDirectionText(canvas)
-
-  addTextByArrows(eastArrows, eastText, canvas)
-  addTextByArrows(westArrows, westText, canvas)
-  addTextByArrows(northArrows, northText, canvas)
-  addTextByArrows(southArrows, southText, canvas)
-}
-
-const clearDirectionText = (canvas) => {
-  const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
-  texts.forEach((text) => {
-    canvas.remove(text)
-  })
-}
-
-const addTextByArrows = (arrows, txt, canvas) => {
-  arrows.forEach((arrow, index) => {
-    const text = new fabric.Text(`${txt}${index + 1}`, {
-      fontSize: arrow.parent.fontSize,
-      fill: 'black',
-      originX: 'center',
-      originY: 'center',
-      name: 'directionText',
-      selectable: false,
-      left: arrow.stickeyPoint.x,
-      top: arrow.stickeyPoint.y,
-      parent: arrow,
-    })
-    canvas.add(text)
-  })
-}