From b04e7128a7f6d2c4affb873364b5ee0f3d910324 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 11 Jul 2024 11:17:26 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=90=206=EA=B0=9C=EC=9D=BC=EB=95=8C=20shap?=
 =?UTF-8?q?e=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 49 +++++++++++++++++++++++++++++++
 src/hooks/useMode.js              |  2 ++
 2 files changed, 51 insertions(+)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index d15c93dd..3a7d2020 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -1,6 +1,7 @@
 import { fabric } from 'fabric'
 import {
   distanceBetweenPoints,
+  findTopTwoIndexesByDistance,
   getDegreeByChon,
   getDirectionByPoint,
   getRoofHeight,
@@ -19,6 +20,7 @@ export default class QPolygon extends fabric.Group {
   fontSize
   qCells = []
   name
+  shape = 0 // 점 6개일때의 shape 모양
   constructor(points, options, canvas) {
     if (!options.fontSize) {
       throw new Error('Font size is required.')
@@ -38,6 +40,7 @@ export default class QPolygon extends fabric.Group {
     this.#init()
     this.#addEvent()
     this.#initLines()
+    this.setShape()
   }
 
   #initLines() {
@@ -460,4 +463,50 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(realLine6)
     this.canvas.add(ridge)
   }
+
+  /**
+   * 현재 점 6개만 가능
+   */
+  setShape() {
+    let shape = 0
+    if (this.lines.length !== 6) {
+      throw new Error('Only 6 points are allowed.')
+    }
+    //외각선 기준
+    const topIndex = findTopTwoIndexesByDistance(this.lines) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
+
+    //일단 배열 6개 짜리 기준의 선 번호
+    if (topIndex[0] === 4) {
+      if (topIndex[1] === 5) {
+        //1번
+        shape = 1
+      }
+    } else if (topIndex[0] === 1) {
+      //4번
+      if (topIndex[1] === 2) {
+        shape = 4
+      }
+    } else if (topIndex[0] === 0) {
+      if (topIndex[1] === 1) {
+        //2번
+        shape = 2
+      } else if (topIndex[1] === 5) {
+        //3번
+        shape = 3
+      }
+    }
+
+    this.shape = shape
+  }
+
+  /**
+   * 현재 점 6개만 가능
+   * @returns {number}
+   */
+  getShape() {
+    if (this.lines.length !== 6) {
+      throw new Error('Only 6 points are allowed.')
+    }
+    return this.shape
+  }
 }
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index c8db2ac6..6d89a0df 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -392,6 +392,8 @@ export function useMode() {
       canvas,
     )
 
+    console.log(polygon.getShape())
+
     // 새로운 다각형 객체를 캔버스에 추가합니다.
     canvas.add(polygon)