debugger 제거

src/components/fabric/QPolygon.js

@@ -124,10 +124,7 @@ export default class QPolygon extends fabric.Group {
       const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
-      const midPoint = new fabric.Point(
+      const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
-        (start.x + end.x) / 2,
-        (start.y + end.y) / 2,
-      )
 
       // Create new text object if it doesn't exist
       const text = new fabric.Text(length.toFixed(0), {
@@ -171,16 +168,8 @@ export default class QPolygon extends fabric.Group {
       return
     }
 
-    for (
+    for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) {
-      let x = bounds.left;
+      for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) {
-      x < bounds.left + bounds.width;
-      x += cell.width + cell.padding
-    ) {
-      for (
-        let y = bounds.top;
-        y < bounds.top + bounds.height;
-        y += cell.height + cell.padding
-      ) {
         const rect = new fabric.Rect({
           left: x,
           top: y,
@@ -198,11 +187,7 @@ export default class QPolygon extends fabric.Group {
           new fabric.Point(rect.left + rect.width, rect.top + rect.height),
         ]
 
-        const isInside = rectPoints.every(
+        const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.#distanceFromEdge(rectPoint) >= cell.padding)
-          (rectPoint) =>
-            this.inPolygon(rectPoint) &&
-            this.#distanceFromEdge(rectPoint) >= cell.padding,
-        )
 
         if (isInside) {
           this.addWithUpdate(rect)
@@ -219,24 +204,13 @@ export default class QPolygon extends fabric.Group {
    * return {boolean}
    */
   isValid() {
-    const leftLinesLengthSum = this.lines
+    const leftLinesLengthSum = this.lines.filter((line) => line.direction === 'left').reduce((sum, line) => sum + line.length, 0)
-      .filter((line) => line.direction === 'left')
+    const rightLinesLengthSum = this.lines.filter((line) => line.direction === 'right').reduce((sum, line) => sum + line.length, 0)
-      .reduce((sum, line) => sum + line.length, 0)
-    const rightLinesLengthSum = this.lines
-      .filter((line) => line.direction === 'right')
-      .reduce((sum, line) => sum + line.length, 0)
 
-    const topLinesLengthSum = this.lines
+    const topLinesLengthSum = this.lines.filter((line) => line.direction === 'top').reduce((sum, line) => sum + line.length, 0)
-      .filter((line) => line.direction === 'top')
+    const bottomLinesLengthSum = this.lines.filter((line) => line.direction === 'bottom').reduce((sum, line) => sum + line.length, 0)
-      .reduce((sum, line) => sum + line.length, 0)
-    const bottomLinesLengthSum = this.lines
-      .filter((line) => line.direction === 'bottom')
-      .reduce((sum, line) => sum + line.length, 0)
 
-    return (
+    return leftLinesLengthSum === rightLinesLengthSum && topLinesLengthSum === bottomLinesLengthSum
-      leftLinesLengthSum === rightLinesLengthSum &&
-      topLinesLengthSum === bottomLinesLengthSum
-    )
   }
 
   inPolygon(point) {
@@ -261,10 +235,7 @@ export default class QPolygon extends fabric.Group {
         continue
       }
 
-      let xInt =
+      let xInt = ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) / (vertex2.y - vertex1.y) + vertex1.x
-        ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) /
-          (vertex2.y - vertex1.y) +
-        vertex1.x
       if (xInt < point.x) {
         intersects++
       }
@@ -284,9 +255,7 @@ export default class QPolygon extends fabric.Group {
       const dx = vertex2.x - vertex1.x
       const dy = vertex2.y - vertex1.y
 
-      const t =
+      const t = ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) / (dx * dx + dy * dy)
-        ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) /
-        (dx * dx + dy * dy)
 
       let closestPoint
       if (t < 0) {
@@ -366,9 +335,7 @@ export default class QPolygon extends fabric.Group {
       return
     }
     //외각선 기준
-    const topIndex = findTopTwoIndexesByDistance(this.lines).sort(
+    const topIndex = findTopTwoIndexesByDistance(this.lines).sort((a, b) => a - b) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-      (a, b) => a - b,
-    ) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
 
     //일단 배열 6개 짜리 기준의 선 번호
     if (topIndex[0] === 4) {
@@ -439,23 +406,15 @@ export default class QPolygon extends fabric.Group {
     const direction = smallestLines[0].direction
 
     if (direction === 'top' || direction === 'bottom') {
-      needPlusLine =
+      needPlusLine = smallestLines[0].x1 < smallestLines[1].x1 ? smallestLines[0] : smallestLines[1]
-        smallestLines[0].x1 < smallestLines[1].x1
+      needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
-          ? smallestLines[0]
-          : smallestLines[1]
-      needMinusLine =
-        needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
 
       type = 1 // 가로가 긴 사각형
     }
 
     if (direction === 'left' || direction === 'right') {
-      needPlusLine =
+      needPlusLine = smallestLines[0].y1 < smallestLines[1].y1 ? smallestLines[0] : smallestLines[1]
-        smallestLines[0].y1 < smallestLines[1].y1
+      needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
-          ? smallestLines[0]
-          : smallestLines[1]
-      needMinusLine =
-        needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0]
 
       type = 2 // 세로가 긴 사각형
     }
@@ -466,33 +425,21 @@ export default class QPolygon extends fabric.Group {
     if (type === 1) {
       point1 = {
         x: needPlusLine.x1 + smallestLength / 2,
-        y:
+        y: needPlusLine.y1 > needPlusLine.y2 ? needPlusLine.y1 - smallestLength / 2 : needPlusLine.y2 - smallestLength / 2,
-          needPlusLine.y1 > needPlusLine.y2
-            ? needPlusLine.y1 - smallestLength / 2
-            : needPlusLine.y2 - smallestLength / 2,
       }
 
       point2 = {
         x: needMinusLine.x1 - smallestLength / 2,
-        y:
+        y: needMinusLine.y1 > needMinusLine.y2 ? needMinusLine.y1 - smallestLength / 2 : needMinusLine.y2 - smallestLength / 2,
-          needMinusLine.y1 > needMinusLine.y2
-            ? needMinusLine.y1 - smallestLength / 2
-            : needMinusLine.y2 - smallestLength / 2,
       }
     } else if (type === 2) {
       point1 = {
-        x:
+        x: needPlusLine.x1 > needPlusLine.x2 ? needPlusLine.x1 - smallestLength / 2 : needPlusLine.x2 - smallestLength / 2,
-          needPlusLine.x1 > needPlusLine.x2
-            ? needPlusLine.x1 - smallestLength / 2
-            : needPlusLine.x2 - smallestLength / 2,
         y: needPlusLine.y1 + smallestLength / 2,
       }
 
       point2 = {
-        x:
+        x: needMinusLine.x1 > needMinusLine.x2 ? needMinusLine.x1 - smallestLength / 2 : needMinusLine.x2 - smallestLength / 2,
-          needMinusLine.x1 > needMinusLine.x2
-            ? needMinusLine.x1 - smallestLength / 2
-            : needMinusLine.x2 - smallestLength / 2,
         y: needMinusLine.y1 - smallestLength / 2,
       }
     }
@@ -611,14 +558,8 @@ export default class QPolygon extends fabric.Group {
       lines = [this.lines[0], this.lines[3]]
       lines2 = [this.lines[1], this.lines[4]]
 
-      ridgeLength1 =
+      ridgeLength1 = this.lines[1].length > this.lines[2].length ? this.lines[5].length - this.lines[0].length : this.lines[1].length
-        this.lines[1].length > this.lines[2].length
+      ridgeLength2 = this.lines[1].length > this.lines[2].length ? this.lines[2].length : this.lines[4].length - this.lines[3].length
-          ? this.lines[5].length - this.lines[0].length
-          : this.lines[1].length
-      ridgeLength2 =
-        this.lines[1].length > this.lines[2].length
-          ? this.lines[2].length
-          : this.lines[4].length - this.lines[3].length
       vPoint1 = {
         x: lines[0].x1 + lines[0].length / 2,
         y: lines[0].y1 + lines[0].length / 2,
@@ -636,18 +577,8 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeEndPoint1 = [
+      ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y]
-        vPoint1.x,
+      ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength2]
-        vPoint1.y,
-        vPoint1.x + ridgeLength1,
-        vPoint1.y,
-      ]
-      ridgeEndPoint2 = [
-        vPoint2.x,
-        vPoint2.y,
-        vPoint2.x,
-        vPoint2.y - ridgeLength2,
-      ]
       ridgeHelpLinePoint1 =
         ridgeLength1 > ridgeLength2
           ? [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]]
@@ -679,44 +610,18 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeEndPoint1 = [
+      ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength1, vPoint1.y]
-        vPoint1.x,
-        vPoint1.y,
-        vPoint1.x - ridgeLength1,
-        vPoint1.y,
-      ]
 
-      ridgeEndPoint2 = [
+      ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2]
-        vPoint2.x,
-        vPoint2.y,
-        vPoint2.x,
-        vPoint2.y + ridgeLength2,
-      ]
 
-      ridgeHelpLinePoint1 = [
+      ridgeHelpLinePoint1 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]]
-        lines2[1].x2,
+      ridgeHelpLinePoint2 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]]
-        lines2[1].y2,
-        ridgeEndPoint1[2],
-        ridgeEndPoint1[3],
-      ]
-      ridgeHelpLinePoint2 = [
-        lines2[0].x2,
-        lines2[0].y2,
-        ridgeEndPoint2[2],
-        ridgeEndPoint2[3],
-      ]
     } else if (type === 3) {
       lines = [this.lines[1], this.lines[4]]
       lines2 = [this.lines[2], this.lines[5]]
-      ridgeLength1 =
+      ridgeLength1 = this.lines[2].length > this.lines[3].length ? this.lines[0].length - lines[0].length : this.lines[2].length
-        this.lines[2].length > this.lines[3].length
-          ? this.lines[0].length - lines[0].length
-          : this.lines[2].length
 
-      ridgeLength2 =
+      ridgeLength2 = this.lines[2].length > this.lines[3].length ? this.lines[3].length : this.lines[5].length - lines[1].length
-        this.lines[2].length > this.lines[3].length
-          ? this.lines[3].length
-          : this.lines[5].length - lines[1].length
       vPoint1 = {
         x: lines[0].x1 + lines[0].length / 2,
         y: lines[0].y1 - lines[0].length / 2,
@@ -734,19 +639,9 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeEndPoint1 = [
+      ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength1]
-        vPoint1.x,
-        vPoint1.y,
-        vPoint1.x,
-        vPoint1.y - ridgeLength1,
-      ]
 
-      ridgeEndPoint2 = [
+      ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength2, vPoint2.y]
-        vPoint2.x,
-        vPoint2.y,
-        vPoint2.x - ridgeLength2,
-        vPoint2.y,
-      ]
 
       ridgeHelpLinePoint1 =
         ridgeLength1 > ridgeLength2
@@ -779,32 +674,12 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeEndPoint1 = [
+      ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y]
-        vPoint1.x,
-        vPoint1.y,
-        vPoint1.x + ridgeLength1,
-        vPoint1.y,
-      ]
 
-      ridgeEndPoint2 = [
+      ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2]
-        vPoint2.x,
-        vPoint2.y,
-        vPoint2.x,
-        vPoint2.y + ridgeLength2,
-      ]
 
-      ridgeHelpLinePoint1 = [
+      ridgeHelpLinePoint1 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]]
-        lines2[0].x2,
+      ridgeHelpLinePoint2 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]]
-        lines2[0].y2,
-        ridgeEndPoint1[2],
-        ridgeEndPoint1[3],
-      ]
-      ridgeHelpLinePoint2 = [
-        lines2[1].x2,
-        lines2[1].y2,
-        ridgeEndPoint2[2],
-        ridgeEndPoint2[3],
-      ]
     }
 
     const realLine1 = new QLine(
@@ -870,32 +745,21 @@ export default class QPolygon extends fabric.Group {
     })
 
     // 용마루
-    const ridge1 = new QLine(
+    const ridge1 = new QLine([vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]], {
-      [vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]],
+      fontSize: this.fontSize,
-      {
+      stroke: 'blue',
-        fontSize: this.fontSize,
+      strokeWidth: 1,
-        stroke: 'blue',
+    })
-        strokeWidth: 1,
-      },
-    )
 
     // 용마루
-    const ridge2 = new QLine(
+    const ridge2 = new QLine([vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]], {
-      [vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]],
+      fontSize: this.fontSize,
-      {
+      stroke: 'blue',
-        fontSize: this.fontSize,
+      strokeWidth: 1,
-        stroke: 'blue',
+    })
-        strokeWidth: 1,
-      },
-    )
 
     const ridgeEndLine = new QLine(
-      [
+      [ridgeEndPoint1[2], ridgeEndPoint1[3], ridgeEndPoint2[2], ridgeEndPoint2[3]],
-        ridgeEndPoint1[2],
-        ridgeEndPoint1[3],
-        ridgeEndPoint2[2],
-        ridgeEndPoint2[3],
-      ],
       {
         fontSize: this.fontSize,
         stroke: 'blue',
@@ -903,17 +767,7 @@ export default class QPolygon extends fabric.Group {
       },
       Math.abs(realLine1.length - realLine3.length),
     )
-    this.helpLines = [
+    this.helpLines = [realLine1, realLine2, realLine3, realLine4, realLine5, realLine6, ridge1, ridge2, ridgeEndLine]
-      realLine1,
-      realLine2,
-      realLine3,
-      realLine4,
-      realLine5,
-      realLine6,
-      ridge1,
-      ridge2,
-      ridgeEndLine,
-    ]
     this.addWithUpdate(realLine1)
     this.addWithUpdate(realLine2)
     this.addWithUpdate(realLine3)
@@ -933,11 +787,7 @@ export default class QPolygon extends fabric.Group {
     const helpPoints = []
     const notInterSectionLines = []
     const ridge = []
-    const maxLength = this.lines.reduce(
+    const maxLength = this.lines.reduce((max, obj) => Math.min(max, obj.length), 999999)
-      (max, obj) => Math.max(max, obj.length),
-      0,
-    )
-
     this.points.forEach((point, index) => {
       const wallPoint = this.wall.points[index]
       // 두 점의 좌표
@@ -951,8 +801,8 @@ export default class QPolygon extends fabric.Group {
       // x1, y1을 기준으로 x2, y2와의 거리를 유지한 새로운 직선 생성
       const angle = Math.atan2(y2 - y1, x2 - x1)
 
-      newX2 = x1 + (maxLength / 2) * Math.cos(angle)
+      newX2 = x1 + (maxLength + 50) * Math.cos(angle)
-      newY2 = y1 + (maxLength / 2) * Math.sin(angle)
+      newY2 = y1 + (maxLength + 50) * Math.sin(angle)
 
       const line = new QLine([x1, y1, newX2, newY2], {
         fontSize: this.fontSize,
@@ -969,8 +819,7 @@ export default class QPolygon extends fabric.Group {
      * 삼각 지붕
      */
     historyLines.forEach((line, index) => {
-      const prevLine =
+      const prevLine = historyLines[(index - 1 + historyLines.length) % historyLines.length]
-        historyLines[(index - 1 + historyLines.length) % historyLines.length]
 
       let intersectionPoint = calculateIntersection(line, prevLine)
 
@@ -979,21 +828,15 @@ export default class QPolygon extends fabric.Group {
         return
       }
 
-      const helpLine1 = new QLine(
+      const helpLine1 = new QLine([prevLine.x1, prevLine.y1, intersectionPoint.x, intersectionPoint.y], {
-        [prevLine.x1, prevLine.y1, intersectionPoint.x, intersectionPoint.y],
+        fontSize: this.fontSize,
-        {
+        stroke: 'red',
-          fontSize: this.fontSize,
+      })
-          stroke: 'red',
-        },
-      )
 
-      const helpLine2 = new QLine(
+      const helpLine2 = new QLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], {
-        [line.x1, line.y1, intersectionPoint.x, intersectionPoint.y],
+        fontSize: this.fontSize,
-        {
+        stroke: 'red',
-          fontSize: this.fontSize,
+      })
-          stroke: 'red',
-        },
-      )
       notInterSectionLines.pop()
       helpPoints.push(intersectionPoint)
 
@@ -1001,18 +844,16 @@ export default class QPolygon extends fabric.Group {
       this.addWithUpdate(helpLine2)
       this.removeWithUpdate(prevLine)
       this.removeWithUpdate(line)
-      this.canvas.requestRenderAll()
+      this.canvas.renderAll()
     })
     // 용마루
 
     const ridgePoint = []
 
     helpPoints.forEach((helpPoint, index) => {
-      const closestLine = findClosestLineToPoint(
+      const closestLine = findClosestLineToPoint(helpPoint, notInterSectionLines)
-        helpPoint,
-        notInterSectionLines,
-      )
 
+      // 가까운 선의 중심점
       const centerClosestLinePoint = {
         x: (closestLine.x1 + closestLine.x2) / 2,
         y: (closestLine.y1 + closestLine.y2) / 2,
@@ -1024,58 +865,35 @@ export default class QPolygon extends fabric.Group {
 
       switch (direction) {
         case 'left': {
-          newX =
+          newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1
-            ((closestLine.x2 - closestLine.x1) *
-              (helpPoint.y - closestLine.y1)) /
-              (closestLine.y2 - closestLine.y1) +
-            closestLine.x1
           newY = helpPoint.y
           break
         }
         case 'right': {
-          newX =
+          newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1
-            ((closestLine.x2 - closestLine.x1) *
-              (helpPoint.y - closestLine.y1)) /
-              (closestLine.y2 - closestLine.y1) +
-            closestLine.x1
           newY = helpPoint.y
           break
         }
         case 'top': {
           newX = helpPoint.x
-          newY =
+          newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1
-            ((closestLine.y2 - closestLine.y1) *
-              (helpPoint.x - closestLine.x1)) /
-              (closestLine.x2 - closestLine.x1) +
-            closestLine.y1
           break
         }
         case 'bottom': {
           newX = helpPoint.x
-          newY =
+          newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1
-            ((closestLine.y2 - closestLine.y1) *
-              (helpPoint.x - closestLine.x1)) /
-              (closestLine.x2 - closestLine.x1) +
-            closestLine.y1
           break
         }
       }
 
-      const ridgeHelpLine = new QLine(
+      const ridgeHelpLine = new QLine([closestLine.x1, closestLine.y1, newX, newY], {
-        [closestLine.x1, closestLine.y1, newX, newY],
+        fontSize: this.fontSize,
-        {
+        stroke: 'purple',
-          fontSize: this.fontSize,
+        strokeWidth: 5,
-          stroke: 'green',
+      })
-          strokeWidth: 5,
-        },
-      )
 
       ridgePoint.push({ x: newX, y: newY })
 
-      this.removeWithUpdate(closestLine)
-
-      this.addWithUpdate(ridgeHelpLine)
-
       const ridge = new QLine([helpPoint.x, helpPoint.y, newX, newY], {
         fontSize: this.fontSize,
         stroke: 'skyblue',
@@ -1083,25 +901,24 @@ export default class QPolygon extends fabric.Group {
       })
 
       this.addWithUpdate(ridge)
+      this.canvas.renderAll()
+
+      this.addWithUpdate(ridgeHelpLine)
+      this.removeWithUpdate(closestLine)
+      this.canvas.renderAll()
     })
 
+    // 용마루 끼리 연결
     for (let i = 0; i < ridgePoint.length; i = i + 2) {
       const currentRidgeEndPoint = ridgePoint[i]
       const nextRidgeEndPoint = ridgePoint[(i + 1) % ridgePoint.length]
-      const ridgeConnectLine = new QLine(
+      const ridgeConnectLine = new QLine([currentRidgeEndPoint.x, currentRidgeEndPoint.y, nextRidgeEndPoint.x, nextRidgeEndPoint.y], {
-        [
+        fontSize: this.fontSize,
-          currentRidgeEndPoint.x,
+        stroke: 'green',
-          currentRidgeEndPoint.y,
+        strokeWidth: 5,
-          nextRidgeEndPoint.x,
+      })
-          nextRidgeEndPoint.y,
-        ],
-        {
-          fontSize: this.fontSize,
-          stroke: 'green',
-          strokeWidth: 5,
-        },
-      )
       this.addWithUpdate(ridgeConnectLine)
+      this.canvas.renderAll()
     }
 
     this.canvas.renderAll()