지붕재 할당 함수 수정

src/hooks/usePolygon.js

@@ -1,7 +1,14 @@
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { fabric } from 'fabric'
-import { findAndRemoveClosestPoint, getDegreeByChon, getDegreeInOrientation, isPointOnLine, toFixedWithoutRounding } from '@/util/canvas-util'
+import {
+  distanceBetweenPoints,
+  findAndRemoveClosestPoint,
+  getDegreeByChon,
+  getDegreeInOrientation,
+  isPointOnLine,
+  toFixedWithoutRounding,
+} from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils'
 import { flowDisplaySelector } from '@/store/settingAtom'
@@ -755,7 +762,7 @@ export const usePolygon = () => {
 
   const splitPolygonWithLines = (polygon) => {
     polygon.set({ visible: false })
-    let innerLines = [...polygon.innerLines]
+    let innerLines = [...polygon.innerLines].filter((line) => line.visible)
 
     /*// innerLine이 세팅이 안되어있는경우 찾아서 세팅한다.
     if (!innerLines || innerLines.length === 0) {
@@ -825,8 +832,8 @@ export const usePolygon = () => {
     /*polygonLines.forEach((line) => {
       line.set({ strokeWidth: 10 })
       canvas.add(line)
-    })*/
+    })
-    canvas.renderAll()
+    canvas.renderAll()*/
 
     polygonLines.forEach((line) => {
       /*const originStroke = line.stroke
@@ -838,12 +845,14 @@ export const usePolygon = () => {
         innerLine.set({ stroke: 'red' })
         canvas.renderAll()*/
         if (isPointOnLine(line, innerLine.startPoint)) {
+          canvas.renderAll()
           if (isSamePoint(line.startPoint, innerLine.startPoint) || isSamePoint(line.endPoint, innerLine.startPoint)) {
             return
           }
           intersections.push(innerLine.startPoint)
         }
         if (isPointOnLine(line, innerLine.endPoint)) {
+          canvas.renderAll()
           if (isSamePoint(line.startPoint, innerLine.endPoint) || isSamePoint(line.endPoint, innerLine.endPoint)) {
             return
           }
@@ -852,13 +861,14 @@ export const usePolygon = () => {
         /*innerLine.set({ stroke: originInnerStroke })
         canvas.renderAll()*/
       })
-      line.set({ intersections })
+      /*line.set({ intersections })
 
-      /*line.set({ stroke: originStroke })
+      line.set({ stroke: originStroke })
       canvas.renderAll()*/
     })
 
-    const divideLines = polygonLines.filter((line) => line.intersections.length > 0)
+    const divideLines = polygonLines.filter((line) => line.intersections?.length > 0)
+
     let newLines = []
 
     divideLines.forEach((line) => {
@@ -873,12 +883,14 @@ export const usePolygon = () => {
           strokeWidth: 3,
           fontSize: polygon.fontSize,
           attributes: line.attributes,
+          name: 'newLine',
         })
         const newLine2 = new QLine(newLinePoint2, {
           stroke: 'blue',
           strokeWidth: 3,
           fontSize: polygon.fontSize,
           attributes: line.attributes,
+          name: 'newLine',
         })
         newLine1.attributes = {
           ...line.attributes,
@@ -907,6 +919,7 @@ export const usePolygon = () => {
             strokeWidth: 3,
             fontSize: polygon.fontSize,
             attributes: line.attributes,
+            name: 'newLine',
           })
           newLine.attributes = {
             ...line.attributes,
@@ -923,6 +936,7 @@ export const usePolygon = () => {
           strokeWidth: 3,
           fontSize: polygon.fontSize,
           attributes: line.attributes,
+          name: 'newLine',
         })
         newLine.attributes = {
           ...line.attributes,
@@ -936,7 +950,7 @@ export const usePolygon = () => {
     //polygonLines에서 divideLines를 제거하고 newLines를 추가한다.
     newLines = newLines.filter((line) => !(Math.abs(line.startPoint.x - line.endPoint.x) < 1 && Math.abs(line.startPoint.y - line.endPoint.y) < 1))
     polygonLines = polygonLines.filter((line) => line.intersections?.length === 0)
-    const originPolygonLines = [...polygonLines]
+
     polygonLines = [...polygonLines, ...newLines]
 
     let allLines = [...polygonLines, ...innerLines]
@@ -1005,6 +1019,13 @@ export const usePolygon = () => {
       }
     })
 
+    /*innerLines.forEach((line) => {
+      const startPoint = line.startPoint
+      const endPoint = line.endPoint
+      /!*canvas.add(new fabric.Circle({ left: startPoint.x, top: startPoint.y + 10, radius: 5, fill: 'red' }))
+      canvas.add(new fabric.Circle({ left: endPoint.x, top: endPoint.y - 10, radius: 5, fill: 'blue' }))*!/
+    })*/
+
     /**
      * 왼쪽 상단을 startPoint로 전부 변경
      */
@@ -1031,27 +1052,18 @@ export const usePolygon = () => {
       line.endPoint = endPoint
     })
 
-    // polygonLines에서 시작점 혹은 끝점이 innerLines와 연결된 line만 가져온다.
+    //allLines에서 중복을 제거한다.
-    let startLines = polygonLines.filter((line) => {
+    allLines = allLines.filter((line, index, self) => {
-      const startPoint = line.startPoint
+      return (
-      const endPoint = line.endPoint
+        index ===
-
+        self.findIndex((l) => {
-      return innerLines.some((innerLine) => {
+          return isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint)
-        return (
+        })
-          isSamePoint(innerLine.startPoint, startPoint) ||
+      )
-          isSamePoint(innerLine.endPoint, startPoint) ||
-          isSamePoint(innerLine.startPoint, endPoint) ||
-          isSamePoint(innerLine.endPoint, endPoint)
-        )
-      })
     })
 
-    if (startLines.length === 0) {
-      startLines = originPolygonLines
-    }
-
     // 나눠서 중복 제거된 roof return
-    const newRoofs = getSplitRoofsPoints(startLines, allLines, innerLines, uniquePoints)
+    const newRoofs = getSplitRoofsPoints(allLines)
 
     newRoofs.forEach((roofPoint, index) => {
       let defense, pitch
@@ -1152,11 +1164,11 @@ export const usePolygon = () => {
     })
   }
 
-  const getSplitRoofsPoints = (startLines, allLines, innerLines, uniquePoints) => {
+  const getSplitRoofsPoints = (allLines) => {
     // ==== Utility functions ====
 
     function isSamePoint(p1, p2, epsilon = 1) {
-      return Math.abs(p1.x - p2.x) <= epsilon && Math.abs(p1.y - p2.y) <= epsilon
+      return Math.abs(p1.x - p2.x) <= 2 && Math.abs(p1.y - p2.y) <= 2
     }
 
     function normalizePoint(p, epsilon = 1) {
@@ -1248,7 +1260,7 @@ export const usePolygon = () => {
 
     const roofs = []
 
-    startLines.forEach((line) => {
+    allLines.forEach((line) => {
       // 그래프 생성
       const graph = {}
       const edges = allLines