diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 49705917..cf3b6244 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -1,6 +1,6 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' -import { canvasSizeState, currentObjectState } from '@/store/canvasAtom' +import { canvasSizeState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' // 캔버스에 필요한 이벤트 @@ -8,6 +8,8 @@ export function useCanvasEvent() { const [canvas, setCanvasForEvent] = useState(null) const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) const canvasSize = useRecoilValue(canvasSizeState) + const fontSize = useRecoilValue(fontSizeState) + const fontFamily = useRecoilValue(fontFamilyState) // 기본적인 이벤트 필요시 추가 const attachDefaultEventOnCanvas = () => { @@ -74,6 +76,11 @@ export function useCanvasEvent() { }) } + if (target.type.toLowerCase().includes('text')) { + target.set({ fontSize }) + target.set({ fontFamily }) + } + if (target.name === 'lengthText') { const x = target.left const y = target.top diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index c622283b..7806b8f2 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -35,7 +35,7 @@ export const fontFamilyState = atom({ export const fontSizeState = atom({ key: 'fontSizeState', - default: 16, + default: 20, }) export const canvasSizeState = atom({ diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 73b9b285..063d9d4d 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -3,6 +3,7 @@ import { QLine } from '@/components/fabric/QLine' import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint } from '@/util/canvas-util' import { QPolygon } from '@/components/fabric/QPolygon' import * as turf from '@turf/turf' +import { POLYGON_TYPE } from '@/common/common' const TWO_PI = Math.PI * 2 @@ -1149,7 +1150,7 @@ export const splitPolygonWithLines = (polygon) => { stroke: 'black', fill: 'transparent', strokeWidth: 3, - name: 'roof', + name: POLYGON_TYPE.ROOF, selectable: true, defense: defense, })