From 34d5e0e791eb03d42f1f31c02540e1acbd83e50b Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 4 Sep 2024 18:28:14 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=ED=99=94?=
 =?UTF-8?q?=EC=82=B4=ED=91=9C=20=EA=B7=B8=EB=A6=BC=20=EC=9E=91=EC=97=85?=
 =?UTF-8?q?=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 12 ++++-
 src/hooks/useMode.js              |  2 +-
 src/util/qpolygon-utils.js        | 81 +++++++++++++++++++++++++++++++
 3 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 0c503185..b03a593d 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -2,7 +2,15 @@ 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, drawHippedRoof, inPolygon, splitPolygonWithLines, toGeoJSON } from '@/util/qpolygon-utils'
+import {
+  calculateAngle,
+  drawDirectionArrow,
+  drawHippedRoof,
+  drawPolygonArrow,
+  inPolygon,
+  splitPolygonWithLines,
+  toGeoJSON,
+} from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -20,6 +28,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   children: [],
   initOptions: null,
   direction: null,
+  arrow: null,
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -121,6 +130,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     })
 
     this.on('selected', () => {
+      drawDirectionArrow(this)
       Object.keys(this.controls).forEach((controlKey) => {
         if (controlKey !== 'ml' && controlKey !== 'mr') {
           this.setControlVisible(controlKey, false)
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 2c3efd8c..fe88c39c 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -933,7 +933,7 @@ export function useMode() {
         width: pointer.x - origX,
         height: pointer.y - origY,
         angle: 0,
-        fill: 'transparent',
+        fill: 'white',
         stroke: 'black',
         transparentCorners: false,
       })
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 2e9f9ebe..f89652f1 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -2704,3 +2704,84 @@ export const inPolygon = (polygonPoints, rectPoints) => {
 
   return allPointsInsidePolygon && noPolygonPointsInsideRect
 }
+
+/**
+ * poolygon의 방향에 따라 화살표를 추가한다.
+ * @param polygon
+ */
+export const drawDirectionArrow = (polygon) => {
+  const direction = polygon.direction
+  if (!direction) {
+    return
+  }
+  let arrow = null
+  let points = []
+
+  let centerPoint = polygon.getCenterPoint()
+
+  const polygonMaxX = Math.max(...polygon.points.map((point) => point.x))
+  const polygonMinX = Math.min(...polygon.points.map((point) => point.x))
+  const polygonMaxY = Math.max(...polygon.points.map((point) => point.y))
+  const polygonMinY = Math.min(...polygon.points.map((point) => point.y))
+
+  switch (direction) {
+    case 'north':
+      points = [
+        { x: centerPoint.x, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 50 },
+        { x: centerPoint.x + 50, y: polygonMinY - 50 },
+        { x: centerPoint.x, y: polygonMinY - 80 },
+        { x: centerPoint.x - 50, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 20 },
+      ]
+      break
+    case 'south':
+      points = [
+        { x: centerPoint.x, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x + 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x, y: polygonMaxY + 80 },
+        { x: centerPoint.x - 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 20 },
+      ]
+      break
+    case 'west':
+      points = [
+        { x: polygonMinX - 20, y: centerPoint.y },
+        { x: polygonMinX - 20, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 50 },
+        { x: polygonMinX - 80, y: centerPoint.y },
+        { x: polygonMinX - 50, y: centerPoint.y - 50 },
+        { x: polygonMinX - 50, y: centerPoint.y - 20 },
+        { x: polygonMinX - 20, y: centerPoint.y - 20 },
+      ]
+      break
+    case 'east':
+      points = [
+        { x: polygonMaxX + 20, y: centerPoint.y },
+        { x: polygonMaxX + 20, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 50 },
+        { x: polygonMaxX + 80, y: centerPoint.y },
+        { x: polygonMaxX + 50, y: centerPoint.y - 50 },
+        { x: polygonMaxX + 50, y: centerPoint.y - 20 },
+        { x: polygonMaxX + 20, y: centerPoint.y - 20 },
+      ]
+      break
+  }
+
+  arrow = new fabric.Polygon(points, {
+    selectable: false,
+    fill: 'transparent',
+    stroke: 'black',
+  })
+
+  polygon.arrow = arrow
+  polygon.canvas.add(arrow)
+  polygon.canvas.renderAll()
+}