면 폴리곤 생성

src/hooks/useMode.js

@@ -1,9 +1,15 @@
 import { useRef, useState } from 'react'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
-import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
+import {
+  findTopTwoIndexesByDistance,
+  getCenterPoint,
+  getDirection,
+  getStartIndex,
+  rearrangeArray,
+} from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
-import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
+import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export const Mode = {
@@ -29,6 +35,7 @@ export function useMode() {
   const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
   const [roof, setRoof] = useRecoilState(roofState)
   const [wall, setWall] = useRecoilState(wallState)
+  const [templatePolygonState, setTemplatePolygonState] = useRecoilState(templatePolygonArrayState)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -1018,6 +1025,8 @@ export function useMode() {
     let lines = []
     let outLines = []
 
+    let halfLength = 0
+
     const dashedCenterLineOpt = {
       stroke: 'black',
       strokeWidth: 4,
@@ -1119,6 +1128,7 @@ export function useMode() {
     let lastLine = lines[5]
     let vertCenterLine
     let secondVertCenterLine
+    let templatePolygonObj = {}
 
     if (prevHighIndex === 1) {
       if (horizontalDirection === 'left') {
@@ -1139,6 +1149,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1160,11 +1171,12 @@ export function useMode() {
         )
         canvas.add(horiCenterLine2)
 
+
         //작은 지붕쪽 높이 길이를 구하는 로직
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
-
         canvas.add(secondVertCenterLine)
+        outLines.push(secondVertCenterLine)
 
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
@@ -1188,6 +1200,7 @@ export function useMode() {
           }
           let drawline = new QLine(points, centerLineOpt)
           canvas.add(drawline)
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1196,22 +1209,26 @@ export function useMode() {
         const lastOuterLine = lines[5]
 
         //첫번째 외곽선 1번
-        let halfLength = firstOuterLine.length / 2
+        halfLength = firstOuterLine.length / 2
         let drawFirstLine1 = new QLine(
           [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge],
           centerLineOpt,
         )
         canvas.add(drawFirstLine1)
+        outLines.push(drawFirstLine1)
+
         //첫번째 외곽선 2번
         let drawFirstLine2 = new QLine(
           [drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge],
           centerLineOpt,
         )
         canvas.add(drawFirstLine2)
+        outLines.push(drawFirstLine2)
 
         //중간라인 외각선
         let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], centerLineOpt)
         canvas.add(drawMiddleLine)
+        outLines.push(drawMiddleLine)
 
         //마지막 외각선
         halfLength = lastLine.length / 2
@@ -1220,21 +1237,31 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawLastLine1)
+        outLines.push(drawLastLine1)
 
         let drawLastLine2 = new QLine(
           [drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge],
           centerLineOpt,
         )
         canvas.add(drawLastLine2)
+        outLines.push(drawLastLine2)
 
         let drawLastInLine1 = new QLine(
           [secondVertCenterLine.x1, secondVertCenterLine.y1, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y1],
           centerLineOpt,
         )
         canvas.add(drawLastInLine1)
+        outLines.push(drawLastInLine1)
 
         let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
+        outLines.push(drawLastInLine2)
+
+        const bigPolygon = [
+          { x1: outLines[2].x1, y1: outLines[2].y1 },
+        ]
+
+
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1315,7 +1342,7 @@ export function useMode() {
         const lastOuterLine = lines[3]
 
         //첫번째 외곽선 1번
-        let halfLength = firstOuterLine.length / 2
+        halfLength = firstOuterLine.length / 2
         let drawFirstLine1 = new QLine(
           [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge],
           centerLineOpt,
@@ -1438,7 +1465,7 @@ export function useMode() {
         const lastOuterLine = lines[1]
 
         //첫번째 외곽선 1번
-        let halfLength = firstOuterLine.length / 2
+        halfLength = firstOuterLine.length / 2
         let drawFirstLine1 = new QLine(
           [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge],
           centerLineOpt,
@@ -1561,7 +1588,7 @@ export function useMode() {
         const lastOuterLine = lines[3]
 
         //첫번째 외곽선 1번
-        let halfLength = firstOuterLine.length / 2
+        halfLength = firstOuterLine.length / 2
         let drawFirstLine1 = new QLine(
           [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge],
           centerLineOpt,

src/store/canvasAtom.js

@@ -35,3 +35,9 @@ export const wallState = atom({
   default: {},
   dangerouslyAllowMutability: true,
 })
+
+export const templatePolygonArrayState = atom({
+  key: 'templatePolygon',
+  default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
+})
+

src/util/canvas-util.js

@@ -1,4 +1,4 @@
-import { atan2, chain, derivative, e, evaluate, log, pi, pow, round, sqrt, intersect } from 'mathjs'
+import { intersect } from 'mathjs'
 
 /**
  * Collection of function to use on canvas