Q시리즈 수정

src/components/Roof2.jsx

@@ -34,13 +34,9 @@ export default function Roof2() {
         stroke: 'black',
         width: 400,
         height: 100,
-        viewLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
-        selectable: false,
       })
 
       canvas?.add(rect)
-
-      setTimeout(() => rect.delete(), 500)
     }
   }
 
@@ -60,25 +56,19 @@ export default function Roof2() {
       const polygon = new QPolygon(
         [
           { x: 100, y: 100 },
-          { x: 200, y: 200 },
+          { x: 600, y: 200 },
-          { x: 200, y: 300 },
+          { x: 700, y: 800 },
-          { x: 100, y: 300 },
+          { x: 100, y: 800 },
         ],
         {
           fill: 'transparent',
           stroke: 'black',
           strokeWidth: 2,
-
-          viewLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
           selectable: true,
         },
       )
 
       canvas?.add(polygon)
-
-      setTimeout(() => {
-        polygon.fillCell({ width: 10, height: 20 })
-      }, 500)
     }
   }
 

src/components/fabric/QLine.js

@@ -1,8 +1,8 @@
 import { fabric } from 'fabric'
 
 export default class QLine extends fabric.Line {
-  length
+  #length
-  text
+  #text
 
   constructor(points, option) {
     super(points, option)
@@ -14,7 +14,7 @@ export default class QLine extends fabric.Line {
     // 선의 길이를 계산하여 length 속성을 초기화합니다.
     const dx = this.x2 - this.x1
     const dy = this.y2 - this.y1
-    this.length = Math.sqrt(dx * dx + dy * dy).toFixed(0)
+    this.#length = Math.sqrt(dx * dx + dy * dy).toFixed(0)
     this.viewLengthText = option.viewLengthText ?? true
   }
 
@@ -36,9 +36,13 @@ export default class QLine extends fabric.Line {
       const dx = this.x2 - this.x1
       const dy = this.y2 - this.y1
       const length = Math.sqrt(dx * dx + dy * dy)
-      this.length = length.toFixed(0) // 선의 길이를 length 속성에 저장합니다.
+      this.#length = length.toFixed(0) // 선의 길이를 length 속성에 저장합니다.
       this.#addLengthText()
     })
+
+    this.on('removed', () => {
+      this.canvas.remove(this.#text)
+    })
   }
 
   setViewLengthText(bool) {
@@ -47,18 +51,18 @@ export default class QLine extends fabric.Line {
   }
 
   #addLengthText() {
-    if (this.text) {
+    if (this.#text) {
-      this.canvas.remove(this.text)
+      this.canvas.remove(this.#text)
     }
 
     if (this.viewLengthText) {
-      const text = new fabric.Text(this.length, {
+      const text = new fabric.Text(this.#length, {
         left: (this.x1 + this.x2) / 2,
         top: (this.y1 + this.y2) / 2,
         fontSize: 16,
         selectable: false,
       })
-      this.text = text
+      this.#text = text
       this.canvas.add(text)
     }
   }

src/components/fabric/QPolygon.js

@@ -1,65 +1,88 @@
 import { fabric } from 'fabric'
-import QRect from '@/components/fabric/QRect'
 import { distanceBetweenPoints } from '@/app/util/canvas-util'
 export default class QPolygon extends fabric.Polygon {
-  group
+  #viewLengthText
-  polygon
+  #text = []
 
   constructor(points, option) {
     super(points, option)
-    this.polygon = this
+    this.#init(points)
-    this.on('added', () => {
+    this.#addControl()
-      if (this.viewLengthText) {
+  }
-        this.#addLengthText()
+
-      } else {
+  #init(points) {
-        this.#makeGroupItem([this])
+    this.#viewLengthText = points.viewLengthText ?? true
+  }
+
+  setViewLengthText(bool) {
+    this.#viewLengthText = bool
+    this.#addLengthText()
+  }
+
+  #addControl() {
+    this.on('removed', () => {
+      if (this.#text.length > 0) {
+        this.#text.forEach((text) => {
+          this.canvas.remove(text)
+        })
+        this.#text = []
       }
     })
-  }
 
-  #makeGroupItem(groupItems) {
+    this.on('added', () => {
-    const group = new fabric.Group(groupItems, {
+      this.#addLengthText()
-      selectable: this.selectable,
-      type: 'QRect',
-      canvas: this.canvas,
     })
 
-    this.group = group
+    this.on('modified', (e) => {
-    this.canvas.add(group)
+      this.#addLengthText()
-    this.canvas.renderAll()
+    })
-    this.canvas.remove(this)
-  }
 
-  delete() {
+    this.on('scaling', (e) => {
-    this.group.canvas.remove(this.group)
+      this.#addLengthText()
+    })
+
+    this.on('removed', (e) => {
+      this.#text.forEach((text) => {
+        this.canvas.remove(text)
+      })
+    })
   }
 
   #addLengthText() {
-    const groupItems = [this]
+    if (this.#text.length > 0) {
+      this.#text.forEach((text) => {
+        this.canvas.remove(text)
+      })
+      this.#text = []
+    }
+    if (!this.#viewLengthText) {
+      return
+    }
+
+    const scaleX = this.scaleX
+    const scaleY = this.scaleY
 
     for (let i = 0; i < this.points.length; i++) {
       const start = this.points[i]
       const end = this.points[(i + 1) % this.points.length]
 
-      const dx = end.x - start.x
+      const dx = (end.x - start.x) * scaleX
-      const dy = end.y - start.y
+      const dy = (end.y - start.y) * scaleY
       const length = Math.sqrt(dx * dx + dy * dy)
 
       const text = new fabric.Text(length.toFixed(0), {
-        left: (start.x + end.x) / 2,
+        left: ((start.x + end.x) / 2) * scaleX,
-        top: (start.y + end.y) / 2,
+        top: ((start.y + end.y) / 2) * scaleY,
         fontSize: 16,
         selectable: false,
       })
-
+      this.#text.push(text)
-      groupItems.push(text)
+      this.canvas.add(text)
     }
-
-    this.#makeGroupItem(groupItems)
   }
 
   #distanceFromEdge(point) {
-    const vertices = this.getPoints()
+    const vertices = this.points
     let minDistance = Infinity
 
     for (let i = 0; i < vertices.length; i++) {
@@ -92,7 +115,7 @@ export default class QPolygon extends fabric.Polygon {
   }
 
   fillCell(cell = { width: 50, height: 100, padding: 10 }) {
-    const points = this.getPoints()
+    const points = this.points
     let bounds
 
     try {
@@ -136,24 +159,16 @@ export default class QPolygon extends fabric.Polygon {
         )
 
         if (isInside) {
-          this.group.canvas.add(rect)
+          this.canvas.add(rect)
         }
       }
     }
 
-    this.group.canvas.renderAll()
+    this.canvas.renderAll()
-  }
-
-  getPoints() {
-    return this.points
-  }
-
-  getInfo() {
-    return this
   }
 
   inPolygon(point) {
-    const vertices = this.getPoints()
+    const vertices = this.points
     let intersects = 0
 
     for (let i = 0; i < vertices.length; i++) {

src/components/fabric/QRect.js

@@ -1,49 +1,76 @@
 import { fabric } from 'fabric'
 export default class QRect extends fabric.Rect {
-  group
+  #text = []
-  constructor(options) {
+  #viewLengthText
-    super(options)
+  constructor(points, option) {
+    super(points, option)
+    this.#init(points)
+    this.#addControl()
+  }
 
-    this.on('added', () => {
+  #init(points) {
-      if (this.viewLengthText) {
+    this.#viewLengthText = points.viewLengthText ?? true
-        this.#addLengthText()
+  }
-      } else {
+
-        this.#makeGroupItem([this])
+  setViewLengthText(bool) {
+    this.#viewLengthText = bool
+    this.#addLengthText()
+  }
+
+  #addControl() {
+    this.on('removed', () => {
+      if (this.#text.length > 0) {
+        this.#text.forEach((text) => {
+          this.canvas.remove(text)
+        })
+        this.#text = []
       }
     })
-  }
 
-  delete() {
+    this.on('added', () => {
-    this.group.canvas.remove(this.group)
+      this.#addLengthText()
-  }
-
-  #makeGroupItem(groupItems) {
-    const group = new fabric.Group(groupItems, {
-      selectable: this.selectable,
-      type: 'QRect',
-      canvas: this.canvas,
     })
 
-    this.group = group
+    this.on('modified', (e) => {
-    this.canvas.add(group)
+      this.#addLengthText()
-    this.canvas.renderAll()
+    })
-    this.canvas.remove(this)
-  }
 
+    this.on('scaling', (e) => {
+      this.#addLengthText()
+    })
+
+    this.on('removed', (e) => {
+      this.#text.forEach((text) => {
+        this.canvas.remove(text)
+      })
+    })
+  }
   #addLengthText() {
+    if (this.#text.length > 0) {
+      this.#text.forEach((text) => {
+        this.canvas.remove(text)
+      })
+      this.#text = []
+    }
+
+    if (!this.#viewLengthText) {
+      return
+    }
+
+    const scaleX = this.scaleX
+    const scaleY = this.scaleY
+
     const lines = [
       {
         start: { x: this.left, y: this.top },
-        end: { x: this.left + this.width, y: this.top },
+        end: { x: this.left + this.width * scaleX, y: this.top },
       },
       {
-        start: { x: this.left, y: this.top + this.height },
+        start: { x: this.left, y: this.top + this.height * scaleY },
         end: { x: this.left, y: this.top },
       },
     ]
 
-    const groupItems = [this]
-
     lines.forEach((line) => {
       const dx = line.end.x - line.start.x
       const dy = line.end.y - line.start.y
@@ -55,14 +82,8 @@ export default class QRect extends fabric.Rect {
         fontSize: 16,
         selectable: false,
       })
-
+      this.#text.push(text)
-      groupItems.push(text)
+      this.canvas.add(text)
     })
-
-    this.#makeGroupItem(groupItems)
-  }
-
-  getInfo() {
-    return this
   }
 }

src/hooks/useMode.js

@@ -356,9 +356,6 @@ export function useMode() {
       if (line.type === 'line') {
         canvas?.remove(line)
       }
-      if (line.type === 'QLine') {
-        line.delete()
-      }
     })
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
@@ -376,6 +373,7 @@ export function useMode() {
     if (!otherLines) {
       polygon.fillCell()
       canvas.renderAll()
+      polygon.setViewLengthText(false)
     }
   }