QLine, QPolygon, QRect 생성 - 삭제 방법이 살짝 다름

src/components/Roof2.jsx

@@ -39,6 +39,8 @@ export default function Roof2() {
       })
 
       canvas?.add(rect)
+
+      setTimeout(() => rect.delete(), 500)
     }
   }
 
@@ -52,6 +54,8 @@ export default function Roof2() {
       })
 
       canvas?.add(line)
+
+      setTimeout(() => line.delete(), 500)
     }
   }
 
@@ -75,9 +79,7 @@ export default function Roof2() {
 
       canvas?.add(polygon)
 
-      setTimeout(() => {
+      setTimeout(() => polygon.delete(), 500)
-        console.log(canvas?.getObjects())
-      }, 1000)
     }
   }
 

src/components/fabric/QLine.js

@@ -1,16 +1,38 @@
+import { fabric } from 'fabric'
 export default class QLine extends fabric.Line {
   length
+  group
+
   constructor(points, option) {
     super(points, option)
 
     this.on('added', () => {
       if (this.isLengthText) {
-        this.addLengthText()
+        this.#addLengthText()
+      } else {
+        this.#makeGroupItem([this])
       }
     })
   }
 
-  addLengthText() {
+  delete() {
+    this.group.canvas.remove(this.group)
+  }
+
+  #makeGroupItem(groupItems) {
+    const group = new fabric.Group(groupItems, {
+      selectable: false,
+      type: 'QRect',
+      canvas: this.canvas,
+    })
+
+    this.group = group
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+
+  #addLengthText() {
     const dx = this.x2 - this.x1
     const dy = this.y2 - this.y1
     const length = Math.sqrt(dx * dx + dy * dy)
@@ -24,13 +46,6 @@ export default class QLine extends fabric.Line {
       selectable: false,
     })
 
-    const group = new fabric.Group([this, text], {
+    this.#makeGroupItem([this, text])
-      selectable: false,
-      type: 'QLine',
-    })
-
-    this.canvas.add(group)
-    this.canvas.renderAll()
-    this.canvas.remove(this)
   }
 }

src/components/fabric/QPolygon.js

@@ -1,15 +1,37 @@
+import { fabric } from 'fabric'
 export default class QPolygon extends fabric.Polygon {
+  group
+
   constructor(points, option) {
     super(points, option)
 
     this.on('added', () => {
       if (this.isLengthText) {
-        this.addLengthText()
+        this.#addLengthText()
+      } else {
+        this.#makeGroupItem([this])
       }
     })
   }
 
-  addLengthText() {
+  #makeGroupItem(groupItems) {
+    const group = new fabric.Group(groupItems, {
+      selectable: false,
+      type: 'QRect',
+      canvas: this.canvas,
+    })
+
+    this.group = group
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+
+  delete() {
+    this.group.canvas.remove(this.group)
+  }
+
+  #addLengthText() {
     const groupItems = [this]
 
     for (let i = 0; i < this.points.length; i++) {
@@ -30,13 +52,6 @@ export default class QPolygon extends fabric.Polygon {
       groupItems.push(text)
     }
 
-    const group = new fabric.Group(groupItems, {
+    this.#makeGroupItem(groupItems)
-      selectable: false,
-      type: 'QPolygon',
-    })
-
-    this.canvas.add(group)
-    this.canvas.renderAll()
-    this.canvas.remove(this)
   }
 }

src/components/fabric/QRect.js

@@ -1,15 +1,36 @@
+import { fabric } from 'fabric'
 export default class QRect extends fabric.Rect {
+  group
   constructor(options) {
     super(options)
 
     this.on('added', () => {
       if (this.isLengthText) {
-        this.addLengthText()
+        this.#addLengthText()
+      } else {
+        this.#makeGroupItem([this])
       }
     })
   }
 
-  addLengthText() {
+  delete() {
+    this.group.canvas.remove(this.group)
+  }
+
+  #makeGroupItem(groupItems) {
+    const group = new fabric.Group(groupItems, {
+      selectable: false,
+      type: 'QRect',
+      canvas: this.canvas,
+    })
+
+    this.group = group
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+
+  #addLengthText() {
     const lines = [
       {
         start: { x: this.left, y: this.top },
@@ -46,13 +67,6 @@ export default class QRect extends fabric.Rect {
       groupItems.push(text)
     })
 
-    const group = new fabric.Group(groupItems, {
+    this.#makeGroupItem(groupItems)
-      selectable: false,
-      type: 'QRect',
-    })
-
-    this.canvas.add(group)
-    this.canvas.renderAll()
-    this.canvas.remove(this)
   }
 }

src/hooks/useCanvas.js

@@ -116,7 +116,7 @@ export function useCanvas(id) {
   const onChange = (e) => {
     const target = e.target
     if (target) {
-      settleDown(target)
+      // settleDown(target)
     }
 
     if (!isLocked) {

src/hooks/useMode.js

@@ -241,7 +241,7 @@ export function useMode() {
       const pointer = canvas.getPointer(o.e)
       origX = pointer.x
       origY = pointer.y
-      rect = new QRect({
+      rect = new fabric.Rect({
         left: origX,
         top: origY,
         originX: 'left',
@@ -250,7 +250,6 @@ export function useMode() {
         height: pointer.y - origY,
         angle: 0,
         fill: 'transparent',
-        isLengthText: true,
         stroke: 'black',
         transparentCorners: false,
       })
@@ -269,10 +268,25 @@ export function useMode() {
 
       rect.set({ width: Math.abs(origX - pointer.x) })
       rect.set({ height: Math.abs(origY - pointer.y) })
-      canvas.renderAll()
     })
 
     canvas.on('mouse:up', function (o) {
+      const pointer = canvas.getPointer(o.e)
+      const qRect = new QRect({
+        left: origX,
+        top: origY,
+        originX: 'left',
+        originY: 'top',
+        width: pointer.x - origX,
+        height: pointer.y - origY,
+        angle: 0,
+        isLengthText: true,
+        fill: 'transparent',
+        stroke: 'black',
+        transparentCorners: false,
+      })
+      canvas.remove(rect)
+      canvas.add(qRect)
       isDown = false
     })
   }
@@ -308,6 +322,7 @@ export function useMode() {
       stroke: 'black',
       strokeWidth: 2,
       selectable: false,
+      isLengthText: true,
       direction: getDirection(a, b),
     })
     historyLines.current.push(line)
@@ -325,7 +340,9 @@ export function useMode() {
     const points = lines.map((line) => ({ x: line.x1, y: line.y1 }))
 
     // 모든 라인 객체를 캔버스에서 제거합니다.
-    lines.forEach((line) => canvas.remove(line))
+    lines.forEach((line) => {
+      line.delete()
+    })
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
     const polygon = new QPolygon(points, {
@@ -337,9 +354,6 @@ export function useMode() {
 
     // 새로운 다각형 객체를 캔버스에 추가합니다.
     canvas.add(polygon)
-
-    // 캔버스를 다시 그립니다.
-    canvas.renderAll()
   }
 
   /**