toObject 수정

src/common/common.js

@@ -116,3 +116,39 @@ export const POLYGON_TYPE = {
   ROOF: 'roof',
   TRESTLE: 'trestle',
 }
+
+export const SAVE_KEY = [
+  'selectable',
+  'name',
+  'parentId',
+  'id',
+  'length',
+  'idx',
+  'direction',
+  'parentDirection',
+  'lines',
+  'points',
+  'lockMovementX',
+  'lockMovementY',
+  'lockRotation',
+  'lockScalingX',
+  'lockScalingY',
+  'opacity',
+  'cells',
+  'maxX',
+  'maxY',
+  'minX',
+  'minY',
+  'x',
+  'y',
+  'x1',
+  'x2',
+  'y1',
+  'y2',
+  'attributes',
+  'stickeyPoint',
+  'text',
+  'pitch',
+  'uuid',
+  'originText',
+]

src/components/fabric/QLine.js

@@ -39,12 +39,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
   },
 
-  toObject: function (propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
-      type: this.type,
-      text: this.text,
-    })
-  },
   init: function () {
     this.addLengthText()
 

src/components/fabric/QPolygon.js

@@ -101,17 +101,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.shape = shape
   },
-
-  toObject: function (propertiesToInclude) {
-    return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
-      id: this.id,
-      type: this.type,
-      text: this.text,
-      hips: this.hips,
-      ridges: this.ridges,
-      connectRidges: this.connectRidges,
-    })
-  },
   init: function () {
     this.addLengthText()
 

src/hooks/useCanvas.js

@@ -13,6 +13,7 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
+import { SAVE_KEY } from '@/common/common'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -103,6 +104,25 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStyle = 'rect'
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
+
+    fabric.Line.prototype.toObject = function (propertiesToInclude) {
+      let source = {}
+      for (let key in this) {
+        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
+          source.key = this[key]
+        }
+      }
+      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
+    }
+    fabric.Polygon.prototype.toObject = function (propertiesToInclude) {
+      let source = {}
+      for (let key in this) {
+        if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
+          source.key = this[key]
+        }
+      }
+      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
+    }
     fabric.QLine = QLine
     fabric.QPolygon = QPolygon
     QPolygon.prototype.canvas = canvas

src/hooks/usePlan.js

@@ -5,6 +5,7 @@ import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState,
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
+import { SAVE_KEY } from '@/common/common'
 
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
@@ -33,41 +34,7 @@ export function usePlan() {
   }
 
   const addCanvas = () => {
-    const objs = canvas?.toJSON([
+    const objs = canvas?.toJSON(SAVE_KEY)
-      'selectable',
-      'name',
-      'parentId',
-      'id',
-      'length',
-      'idx',
-      'direction',
-      'parentDirection',
-      'lines',
-      'points',
-      'lockMovementX',
-      'lockMovementY',
-      'lockRotation',
-      'lockScalingX',
-      'lockScalingY',
-      'opacity',
-      'cells',
-      'maxX',
-      'maxY',
-      'minX',
-      'minY',
-      'x',
-      'y',
-      'x1',
-      'x2',
-      'y1',
-      'y2',
-      'attributes',
-      'stickeyPoint',
-      'text',
-      'pitch',
-      'uuid',
-      'originText',
-    ])
 
     const str = JSON.stringify(objs)
 

src/store/canvasAtom.js

@@ -323,7 +323,6 @@ export const pitchSelector = selector({
   set: ({ get, set }, newValue) => {
     const basicSettingStateValue = get(basicSettingState)
     const roofAngleSet = basicSettingStateValue.roofAngleSet
-    console.log(newValue)
     if (roofAngleSet === 'slope') {
       set(globalPitchState, newValue)
     } else {