작업중

src/components/fabric/QLine.js

@@ -131,7 +131,6 @@ export class QLine extends fabric.Group {
   async = true
 
   toObject(propertiesToInclude) {
-    console.log('toObject')
     return fabric.util.object.extend(this.callSuper('toObject'), {
       length: this.length,
       line: this.line,

src/components/fabric/QPolygon.js

@@ -29,6 +29,9 @@ export default class QPolygon extends fabric.Group {
 
   wall
 
+  initPoints
+  initOption
+
   constructor(points, options, canvas) {
     /*if (points.length !== 4 && points.length !== 6) {
       throw new Error('Points must be 4 or 6.')
@@ -52,6 +55,10 @@ export default class QPolygon extends fabric.Group {
     this.points = sortPoints
     this.polygon = polygon
     this.name = options.name
+
+    this.initPoints = points
+    this.initOption = options
+
     this.init()
     this.addEvent()
     this.initLines()
@@ -108,7 +115,7 @@ export default class QPolygon extends fabric.Group {
       }
     })
 
-    this.addWithUpdate()
+    this.canvas.add()
   }
 
   addLengthText() {
@@ -137,7 +144,7 @@ export default class QPolygon extends fabric.Group {
       })
 
       this.texts.push(text)
-      this.addWithUpdate(text)
+      this.canvas.add(text)
     })
 
     this.canvas.renderAll()
@@ -192,7 +199,7 @@ export default class QPolygon extends fabric.Group {
         const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.distanceFromEdge(rectPoint) >= cell.padding)
 
         if (isInside) {
-          this.addWithUpdate(rect)
+          this.canvas.add(rect)
         }
       }
     }
@@ -516,12 +523,12 @@ export default class QPolygon extends fabric.Group {
       strokeWidth: 1,
     })
 
-    this.addWithUpdate(realLine1)
-    this.addWithUpdate(realLine2)
-    this.addWithUpdate(realLine3)
-    this.addWithUpdate(realLine4)
-    this.addWithUpdate(realLine5)
-    this.addWithUpdate(realLine6)
+    this.canvas.add(realLine1)
+    this.canvas.add(realLine2)
+    this.canvas.add(realLine3)
+    this.canvas.add(realLine4)
+    this.canvas.add(realLine5)
+    this.canvas.add(realLine6)
     if (smallestLength !== maxLength) {
       // 정사각형이 아닌경우에만 용마루를 추가한다.
       this.canvas.add(ridge)
@@ -586,7 +593,7 @@ export default class QPolygon extends fabric.Group {
         direction: 'horizontal',
       })
 
-      // this.addWithUpdate(centerLine)
+      // this.canvas.add(centerLine)
 
       centerLines.push(centerLine)
     })
@@ -611,7 +618,7 @@ export default class QPolygon extends fabric.Group {
         strokeWidth: 1,
         direction: 'vertical',
       })
-      // this.addWithUpdate(centerLine)
+      // this.canvas.add(centerLine)
 
       centerLines.push(centerLine)
     })
@@ -639,7 +646,7 @@ export default class QPolygon extends fabric.Group {
         stroke: 'green',
         idx: index,
       })
-      this.addWithUpdate(line)
+      this.canvas.add(line)
       helpLines.push(line)
       this.canvas.renderAll()
     })
@@ -670,10 +677,10 @@ export default class QPolygon extends fabric.Group {
       })
 
       ridgeStartPoints.push(intersectionPoint)
-      this.addWithUpdate(helpLine1)
-      this.addWithUpdate(helpLine2)
-      this.removeWithUpdate(nextLine)
-      this.removeWithUpdate(line)
+      this.canvas.add(helpLine1)
+      this.canvas.add(helpLine2)
+      this.canvas.remove(nextLine)
+      this.canvas.remove(line)
       this.canvas.renderAll()
     })
 
@@ -724,9 +731,9 @@ export default class QPolygon extends fabric.Group {
         })
 
         ridgeEndPoints.push(arrivalPoint)
-        this.addWithUpdate(ridge)
-        this.addWithUpdate(helpLine)
-        this.removeWithUpdate(line)
+        this.canvas.add(ridge)
+        this.canvas.add(helpLine)
+        this.canvas.remove(line)
         this.canvas.renderAll()
       }
     })
@@ -739,7 +746,7 @@ export default class QPolygon extends fabric.Group {
         stroke: 'green',
       })
 
-      this.addWithUpdate(ridgeConnectLine)
+      this.canvas.add(ridgeConnectLine)
       this.canvas.renderAll()
     })
   }
@@ -771,7 +778,7 @@ export default class QPolygon extends fabric.Group {
         idx: index,
       })
       historyLines.push(line)
-      this.addWithUpdate(line)
+      this.canvas.add(line)
 
       this.canvas.renderAll()
     })
@@ -801,10 +808,10 @@ export default class QPolygon extends fabric.Group {
       notInterSectionLines.pop()
       helpPoints.push(intersectionPoint)
 
-      this.addWithUpdate(helpLine1)
-      this.addWithUpdate(helpLine2)
-      this.removeWithUpdate(prevLine)
-      this.removeWithUpdate(line)
+      this.canvas.add(helpLine1)
+      this.canvas.add(helpLine2)
+      this.canvas.remove(prevLine)
+      this.canvas.remove(line)
       this.canvas.renderAll()
     })
     // 용마루
@@ -861,11 +868,11 @@ export default class QPolygon extends fabric.Group {
         strokeWidth: 5,
       })
 
-      this.addWithUpdate(ridge)
+      this.canvas.add(ridge)
       this.canvas.renderAll()
 
-      this.addWithUpdate(ridgeHelpLine)
-      this.removeWithUpdate(closestLine)
+      this.canvas.add(ridgeHelpLine)
+      this.canvas.remove(closestLine)
       this.canvas.renderAll()
     })
 
@@ -878,7 +885,7 @@ export default class QPolygon extends fabric.Group {
         stroke: 'green',
         strokeWidth: 5,
       })
-      this.addWithUpdate(ridgeConnectLine)
+      this.canvas.add(ridgeConnectLine)
       this.canvas.renderAll()
     }
 
@@ -890,4 +897,22 @@ export default class QPolygon extends fabric.Group {
   getObject() {
     return this
   }
+
+  toObject(propertiesToInclude) {
+    return fabric.util.object.extend(this.callSuper('toObject'), {
+      points: this.points,
+      fontSize: this.fontSize,
+      name: this.name,
+      shape: this.shape,
+      texts: this.texts,
+      lines: this.lines,
+      wall: this.wall,
+      initPoints: this.initPoints,
+      initOption: this.initOption,
+    })
+  }
+
+  _set(key, value) {
+    this.callSuper('_set', key, value)
+  }
 }

src/hooks/useCanvas.js

@@ -118,6 +118,7 @@ export function useCanvas(id) {
     QRect.prototype.canvas = canvas
 
     fabric.QLine = fabric.util.createClass(fabric.Group, {})
+    fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
 
     // fromObject 메서드를 QLine 클래스에 직접 추가
     fabric.QLine.fromObject = function (object, callback) {
@@ -126,6 +127,14 @@ export function useCanvas(id) {
         return callback(new QLine(initPoints, initOption, initLengthTxt))
       })
     }
+
+    // fromObject 메서드를 QLine 클래스에 직접 추가
+    fabric.QPolygon.fromObject = function (object, callback) {
+      const { initOption, initPoints, initLengthTxt } = object
+      fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
+        return callback(new QPolygon(initPoints, initOption, initLengthTxt))
+      })
+    }
   }
 
   /**
@@ -570,6 +579,9 @@ export function useCanvas(id) {
       function (o, object) {
         // 각 객체가 로드될 때마다 호출됩니다.
         console.log('Object loaded: ', o, object)
+
+        canvas?.add(object)
+        canvas?.renderAll()
       },
     )