4각 방향 도형번호 매김

src/hooks/useMode.js

@@ -1,8 +1,8 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import QLine from '@/components/fabric/QLine'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
-import { getStartIndex, rearrangeArray } from '@/util/canvas-util'
+import { getStartIndex, rearrangeArray, findTopTwoIndexesByDistance } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 import { fontSizeState } from '@/store/canvasAtom'
 
@@ -23,6 +23,7 @@ export function useMode() {
   const [canvas, setCanvas] = useState(null)
   const [zoom, setZoom] = useState(100)
   const [fontSize] = useRecoilState(fontSizeState)
+  const [shape, setShape] = useState(0)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -381,45 +382,35 @@ export function useMode() {
   const makePolygon = (otherLines) => {
     // 캔버스에서 모든 라인 객체를 찾습니다.
     const lines = otherLines || historyLines.current
-    if (!otherLines) {
+    if (!otherLines) { //외각선 기준
       const sortedIndex = getStartIndex(lines)
-      const tmpArraySorted = rearrangeArray(lines, sortedIndex)
+      let tmpArraySorted = rearrangeArray(lines, sortedIndex)
       
-      function findTopTwoIndexesByDistance(objArr) {
+      if(tmpArraySorted[0].direction === 'right') { //시계방향
-        if (objArr.length < 2) {
+        tmpArraySorted = tmpArraySorted.reverse() //그럼 배열을 거꾸로 만들어서 무조건 반시계방향으로 배열 보정
-          return [] // 배열의 길이가 2보다 작으면 빈 배열 반환
-        }
-
-        let firstIndex = -1
-        let secondIndex = -1
-        let firstDistance = -Infinity
-        let secondDistance = -Infinity
-
-        for (let i = 0; i < objArr.length; i++) {
-          const distance = objArr[i].length
-
-          if (distance > firstDistance) {
-            secondDistance = firstDistance
-            secondIndex = firstIndex
-            firstDistance = distance
-            firstIndex = i
-          } else if (distance > secondDistance) {
-            secondDistance = distance
-            secondIndex = i
-          }
-        }
-
-        return [firstIndex, secondIndex]
       }
 
-      const topIndex = findTopTwoIndexesByDistance(tmpArraySorted)
+      const topIndex = findTopTwoIndexesByDistance(tmpArraySorted) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
       
-      let shape = 0
+      //일단 배열 6개 짜리 기준의 선 번호
-
+      if (topIndex[0] === 4) { 
-      if (topIndex[0] === 2) {
+        if (topIndex[1] === 5){ //1번
-        if (topIndex[1] === 3) shape = 1
+          setShape(1)
-      } else if (topIndex === 1) {
+          console.log('shape :: ', 1)
-        if (topIndex[1] === 2) shape = 4
+        } 
+      } else if (topIndex[0] === 1) { //4번
+        if (topIndex[1] === 2){
+          console.log('shape :: ', 4)
+          setShape(4)
+        } 
+      }else if (topIndex[0] === 0) { 
+        if(topIndex[1] === 1) { //2번
+          console.log('shape :: ', 2)
+          setShape(2)
+        }else if(topIndex[1] === 5){
+          console.log('shape :: ', 3)
+          setShape(3)
+        }
       }
      
       historyLines.current = []

src/util/canvas-util.js

@@ -177,3 +177,31 @@ export const rearrangeArray = (array, index) => {
   // 두 부분을 concat 메소드를 이용해 합칩니다.
   return fromIndexToEnd.concat(fromStartToIndex)
 }
+
+
+export const findTopTwoIndexesByDistance = (objArr) => {
+  if (objArr.length < 2) {
+    return [] // 배열의 길이가 2보다 작으면 빈 배열 반환
+  }
+
+  let firstIndex = -1
+  let secondIndex = -1
+  let firstDistance = -Infinity
+  let secondDistance = -Infinity
+
+  for (let i = 0; i < objArr.length; i++) {
+    const distance = objArr[i].length
+
+    if (distance > firstDistance) {
+      secondDistance = firstDistance
+      secondIndex = firstIndex
+      firstDistance = distance
+      firstIndex = i
+    } else if (distance > secondDistance) {
+      secondDistance = distance
+      secondIndex = i
+    }
+  }
+
+  return [firstIndex, secondIndex]
+}