diff --git a/src/common/common.js b/src/common/common.js index decf1aad..a0204047 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -1,3 +1,5 @@ +import { fabric } from 'fabric' + export const MENU = { PLAN_DRAWING: 'planDrawing', INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정 @@ -152,3 +154,11 @@ export const SAVE_KEY = [ 'uuid', 'originText', ] + +export const OBJECT_PROTOTYPE = [ + fabric.Line.prototype, + fabric.Polygon.prototype, + fabric.Text.prototype, + fabric.IText.prototype, + fabric.Triangle.prototype, +] diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js index 5be247e9..6ffb03fc 100644 --- a/src/hooks/useCanvas.js +++ b/src/hooks/useCanvas.js @@ -13,7 +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' +import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common' export function useCanvas(id) { const [canvas, setCanvas] = useRecoilState(canvasState) @@ -105,24 +105,19 @@ export function useCanvas(id) { 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] + // 해당 오브젝트 타입의 경우 저장한 값 그대로 불러와야함 + OBJECT_PROTOTYPE.forEach((type) => { + type.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) } - 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