버그 수정

src/components/fabric/QLine.js

@@ -12,6 +12,7 @@ export class QLine extends fabric.Group {
   direction
   type = 'QLine'
   parent
+  #lengthTxt = 0
 
   constructor(points, option, lengthTxt) {
     const [x1, y1, x2, y2] = points
@@ -33,7 +34,7 @@ export class QLine extends fabric.Group {
     this.parent = option.parent
 
     if (lengthTxt > 0) {
-      this.length = Number(lengthTxt)
+      this.#lengthTxt = Number(lengthTxt)
     }
 
     this.#init()
@@ -41,20 +42,16 @@ export class QLine extends fabric.Group {
   }
 
   #init() {
-    this.#addLengthText()
+    this.#addLengthText(true)
   }
 
   #addControl() {
-    this.on('added', () => {
-      this.#addLengthText()
-    })
-
     this.on('moving', () => {
-      this.#addLengthText()
+      this.#addLengthText(false)
     })
 
     this.on('modified', (e) => {
-      this.#addLengthText()
+      this.#addLengthText(false)
     })
 
     this.on('selected', () => {
@@ -66,21 +63,24 @@ export class QLine extends fabric.Group {
     })
   }
 
-  #addLengthText() {
+  #addLengthText(isFirst) {
     if (this.text) {
       this.removeWithUpdate(this.text)
       this.text = null
     }
-    if (this.length > 0) {
-      const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
+
+    if (isFirst && this.#lengthTxt > 0) {
+      const text = new fabric.Textbox(this.#lengthTxt.toFixed(0).toString(), {
         left: (this.x1 + this.x2) / 2,
         top: (this.y1 + this.y2) / 2,
         fontSize: this.fontSize,
       })
+      this.length = this.#lengthTxt
       this.text = text
       this.addWithUpdate(text)
       return
     }
+
     const scaleX = this.scaleX
     const scaleY = this.scaleY
     const x1 = this.left

src/components/fabric/QPolygon.js

@@ -1,9 +1,7 @@
 import { fabric } from 'fabric'
 import {
-  calculateIntersection,
   distanceBetweenPoints,
   getDegreeByChon,
-  getDirection,
   getDirectionByPoint,
   getRoofHeight,
   getRoofHypotenuse,
@@ -81,6 +79,13 @@ export default class QPolygon extends fabric.Group {
     this.texts.forEach((text) => {
       text.set({ fontSize })
     })
+
+    this.getObjects().forEach((obj) => {
+      if (obj.type === 'QLine') {
+        obj.setFontSize(fontSize)
+      }
+    })
+
     this.addWithUpdate()
   }
 
@@ -304,9 +309,14 @@ export default class QPolygon extends fabric.Group {
       }
     })
 
-    const smallestLines = this.lines.filter(
-      (line) => line.length === smallestLength,
-    )
+    // QPolygon 객체의 모든 선들을 가져옵니다.
+    const lines = [...this.lines]
+
+    // 이 선들을 길이에 따라 정렬합니다.
+    lines.sort((a, b) => a.length - b.length)
+
+    // 정렬된 배열에서 가장 작은 두 선을 선택합니다.
+    const smallestLines = lines.slice(0, 2)
 
     let needPlusLine
     let needMinusLine
@@ -448,6 +458,6 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(realLine4)
     this.addWithUpdate(realLine5)
     this.addWithUpdate(realLine6)
-    this.addWithUpdate(ridge)
+    this.canvas.add(ridge)
   }
 }