6각형 polygon make 테스트

src/hooks/useMode.js

@@ -1,13 +1,7 @@
 import { useRef, useState } from 'react'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
-import {
+import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
-  findTopTwoIndexesByDistance,
-  getCenterPoint,
-  getDirection,
-  getStartIndex,
-  rearrangeArray,
-} from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
@@ -75,7 +69,7 @@ export function useMode() {
   }
 
   const editMode = () => {
-    canvas?.on('mouse:down', function(options) {
+    canvas?.on('mouse:down', function (options) {
       const pointer = canvas?.getPointer(options.e)
       const circle = new fabric.Circle({
         radius: 1,
@@ -226,7 +220,7 @@ export function useMode() {
   }
 
   const textboxMode = () => {
-    canvas?.on('mouse:down', function(options) {
+    canvas?.on('mouse:down', function (options) {
       if (canvas?.getActiveObject()?.type === 'textbox') return
       const pointer = canvas?.getPointer(options.e)
 
@@ -241,14 +235,14 @@ export function useMode() {
       canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
       canvas?.renderAll()
       // textbox가 active가 풀린 경우 editing mode로 변경
-      textbox?.on('editing:exited', function() {
+      textbox?.on('editing:exited', function () {
         changeMode(canvas, Mode.EDIT)
       })
     })
   }
 
   const drawLineMode = () => {
-    canvas?.on('mouse:down', function(options) {
+    canvas?.on('mouse:down', function (options) {
       const pointer = canvas?.getPointer(options.e)
 
       const line = new QLine(
@@ -269,7 +263,7 @@ export function useMode() {
 
   const drawRectMode = () => {
     let rect, isDown, origX, origY
-    canvas.on('mouse:down', function(o) {
+    canvas.on('mouse:down', function (o) {
       isDown = true
       const pointer = canvas.getPointer(o.e)
       origX = pointer.x
@@ -289,7 +283,7 @@ export function useMode() {
       canvas.add(rect)
     })
 
-    canvas.on('mouse:move', function(o) {
+    canvas.on('mouse:move', function (o) {
       if (!isDown) return
       const pointer = canvas.getPointer(o.e)
       if (origX > pointer.x) {
@@ -303,7 +297,7 @@ export function useMode() {
       rect.set({ height: Math.abs(origY - pointer.y) })
     })
 
-    canvas.on('mouse:up', function(o) {
+    canvas.on('mouse:up', function (o) {
       const pointer = canvas.getPointer(o.e)
       const qRect = new QRect({
         left: origX,
@@ -1171,7 +1165,6 @@ export function useMode() {
         )
         canvas.add(horiCenterLine2)
 
-
         //작은 지붕쪽 높이 길이를 구하는 로직
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
@@ -1257,11 +1250,31 @@ export function useMode() {
         canvas.add(drawLastInLine2)
         outLines.push(drawLastInLine2)
 
-        const bigPolygon = [
+        console.log('outLines', outLines)
-          { x1: outLines[2].x1, y1: outLines[2].y1 },
+
+        const bigPolygonArray = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[5].x1, y: outLines[5].y1 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[11].x1, y: outLines[11].y1 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
         ]
 
+        // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
+        const bigPolygon = new QPolygon(
+          bigPolygonArray,
+          {
+            stroke: 'black',
+            fill: 'red',
+            viewLengthText: true,
+            selectable: true,
+            fontSize: fontSize,
+          },
+          canvas,
+        )
 
+        canvas.add(bigPolygon)
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다