QLine 복구 작업중

src/components/Roof2.jsx

@@ -11,6 +11,7 @@ import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPoly
 import { QLine } from '@/components/fabric/QLine'
 import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection2 } from '@/util/canvas-util'
+import { CustomLine } from '@/components/fabric/QLine'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')

src/components/fabric/QLine.js

@@ -91,6 +91,13 @@ export class QLine extends fabric.Group {
     })
   }
 
+  static fromObject(object, callback) {
+    const { points, initOption, initLengthTxt } = object
+    const instance = new QLine(points, initOption, initLengthTxt)
+    callback && callback(instance)
+    return instance
+  }
+
   addLengthText(isFirst) {
     if (this.text) {
       this.removeWithUpdate(this.text)

src/components/fabric/QLine3.js

@@ -0,0 +1,91 @@
+import { fabric } from 'fabric'
+
+export const QLine2 = fabric.util.createClass(fabric.Line, {
+  type: 'QLine2',
+  text: null,
+  canvas: null,
+  initialize: function (points, options, canvas) {
+    if (canvas) {
+      this.canvas = canvas
+    }
+    this.callSuper('initialize', points, options)
+  },
+
+  toObject: function (propertiesToInclude) {
+    return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
+      type: this.type,
+      x1: this.x1,
+      y1: this.y1,
+      x2: this.x2,
+      y2: this.y2,
+    })
+  },
+  init: function () {
+    this.addLengthText(true)
+
+    this.on('moving', () => {
+      this.addLengthText(false)
+    })
+
+    this.on('modified', (e) => {
+      this.addLengthText(false)
+    })
+
+    this.on('removed', () => {
+      if (this.text) {
+        this.canvas.remove(this.text)
+      }
+
+      this.text = null
+    })
+  },
+
+  addLengthText(isFirst) {
+    if (this.text) {
+      this.canvas.remove(this.text)
+      this.text = null
+    }
+
+    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.canvas.add(text)
+      return
+    }
+    const scaleX = this.scaleX
+    const scaleY = this.scaleY
+    const x1 = this.left
+    const y1 = this.top
+    const x2 = this.left + this.width * scaleX
+    const y2 = this.top + this.height * scaleY
+    const dx = x2 - x1
+    const dy = y2 - y1
+    this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
+
+    const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
+      left: (x1 + x2) / 2,
+      top: (y1 + y2) / 2,
+      fontSize: this.fontSize,
+      selectable: false,
+    })
+    text.set({ name: 'lengthText' })
+    this.text = text
+    this.canvas.add(text)
+  },
+  setFontSize(fontSize) {
+    this.fontSize = fontSize
+    this.text.set({ fontSize })
+  },
+  _render: function (ctx) {
+    this.callSuper('_render', ctx)
+    this.init()
+  },
+  _set: function (key, value) {
+    this.callSuper('_set', key, value)
+  },
+})

src/hooks/useCanvas.js

@@ -110,13 +110,24 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStyle = 'rect'
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
-
+    fabric.QLine = QLine
     QPolygon.prototype.canvas = canvas
     QLine.prototype.canvas = canvas
     QRect.prototype.canvas = canvas
 
-    fabric.QLine = fabric.util.createClass(fabric.Group, {})
+    QLine.fromObject = function (object, callback) {
+      const { x1, x2, y1, y2 } = object
+      const instance = new QLine([x1, y1, x2, y2], object, canvas)
+      canvas?.add(instance)
+    }
+
+    // fabric.QLine.fromObject = fabric.Line.fromObject
+
+    // CustomLine.prototype.canvas = canvas
+
+    // fabric.QLine = fabric.util.createClass(fabric.Group, {})
     fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
+    // Register the custom class with fabric
 
     // fromObject 메서드를 QLine 클래스에 직접 추가
     fabric.QLine.fromObject = function (object, callback) {
@@ -577,9 +588,7 @@ export function useCanvas(id) {
         },
         function (o, object) {
           // 각 객체가 로드될 때마다 호출됩니다.
-          console.log('Object loaded: ', o, object)
+          // canvas?.add(object)
-
-          canvas?.add(object)
           canvas?.renderAll()
         },
       )

src/util/qline-utils.js

@@ -2,11 +2,8 @@ import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
 
 export const defineQLine = () => {
-  fabric.QLine = fabric.util.createClass(fabric.Group, {})
+  /*fabric.QLine = QLine
-  fabric.QLine.fromObject = function (object, callback) {
+  fabric.QLine.fromObject = (object, callback) => {
-    const { initOption, initPoints, initLengthTxt } = object
+    return new fabric.QLine([object.x1, object.y1, object.x2, object.y2], object)
-    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
+  }*/
-      return callback(new QLine(initPoints, initOption, initLengthTxt))
-    })
-  }
 }

src/util/qpolygon-utils.js

@@ -20,8 +20,9 @@ export const defineQPloygon = () => {
   // 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))
+      return callback(new QPolygon(initPoints, object, initLengthTxt))
     })
   }
 }