정사각형 대응

src/components/fabric/QPolygon.js

@@ -298,7 +298,56 @@ export default class QPolygon extends fabric.Group {
   }
 
   // 보조선 그리기 사각형에서만
-  drawHelpLine(chon) {
+  drawHelpLine(chon = 4) {
+    if (this.lines.length === 4) {
+      this.#drawHelpLineInRect(chon)
+    }
+  }
+
+  /**
+   * 현재 점 6개만 가능
+   */
+  setShape() {
+    let shape = 0
+    if (this.lines.length !== 6) {
+      return
+    }
+    //외각선 기준
+    const topIndex = findTopTwoIndexesByDistance(this.lines) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
+
+    //일단 배열 6개 짜리 기준의 선 번호
+    if (topIndex[0] === 4) {
+      if (topIndex[1] === 5) {
+        //1번
+        shape = 1
+      }
+    } else if (topIndex[0] === 1) {
+      //4번
+      if (topIndex[1] === 2) {
+        shape = 4
+      }
+    } else if (topIndex[0] === 0) {
+      if (topIndex[1] === 1) {
+        //2번
+        shape = 2
+      } else if (topIndex[1] === 5) {
+        //3번
+        shape = 3
+      }
+    }
+
+    this.shape = shape
+  }
+
+  /**
+   * 현재 점 6개만 가능
+   * @returns {number}
+   */
+  getShape() {
+    return this.shape
+  }
+
+  #drawHelpLineInRect(chon) {
     let type
     let smallestLength = Infinity
     let maxLength = 0
@@ -319,7 +368,15 @@ export default class QPolygon extends fabric.Group {
     lines.sort((a, b) => a.length - b.length)
 
     // 정렬된 배열에서 가장 작은 두 선을 선택합니다.
-    const smallestLines = lines.slice(0, 2)
+    let smallestLines
+
+    if (smallestLength === maxLength) {
+      // 정사각형인 경우 0, 2번째 라인이 가장 짧은 라인
+
+      smallestLines = [lines[0], lines[2]]
+    } else {
+      smallestLines = lines.slice(0, 2)
+    }
 
     let needPlusLine
     let needMinusLine
@@ -433,7 +490,7 @@ export default class QPolygon extends fabric.Group {
         strokeWidth: 1,
         strokeDashArray: [5, 5],
       },
-      getRoofHeight(smallestLength / 2, getDegreeByChon(4)),
+      getRoofHeight(smallestLength / 2, getDegreeByChon(chon)),
     )
 
     // 옆으로 누워있는 지붕의 높이
@@ -445,7 +502,7 @@ export default class QPolygon extends fabric.Group {
         strokeWidth: 1,
         strokeDashArray: [5, 5],
       },
-      getRoofHeight(smallestLength / 2, getDegreeByChon(4)),
+      getRoofHeight(smallestLength / 2, getDegreeByChon(chon)),
     )
 
     // 용마루
@@ -461,49 +518,9 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(realLine4)
     this.addWithUpdate(realLine5)
     this.addWithUpdate(realLine6)
-    this.canvas.add(ridge)
-  }
-
-  /**
-   * 현재 점 6개만 가능
-   */
-  setShape() {
-    let shape = 0
-    if (this.lines.length !== 6) {
-      return
+    if (smallestLength !== maxLength) {
+      // 정사각형이 아닌경우에만 용마루를 추가한다.
+      this.canvas.add(ridge)
     }
-    //외각선 기준
-    const topIndex = findTopTwoIndexesByDistance(this.lines) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-
-    //일단 배열 6개 짜리 기준의 선 번호
-    if (topIndex[0] === 4) {
-      if (topIndex[1] === 5) {
-        //1번
-        shape = 1
-      }
-    } else if (topIndex[0] === 1) {
-      //4번
-      if (topIndex[1] === 2) {
-        shape = 4
-      }
-    } else if (topIndex[0] === 0) {
-      if (topIndex[1] === 1) {
-        //2번
-        shape = 2
-      } else if (topIndex[1] === 5) {
-        //3번
-        shape = 3
-      }
-    }
-
-    this.shape = shape
-  }
-
-  /**
-   * 현재 점 6개만 가능
-   * @returns {number}
-   */
-  getShape() {
-    return this.shape
   }
 }