diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js index 9498b036..3db63427 100644 --- a/src/hooks/common/useFont.js +++ b/src/hooks/common/useFont.js @@ -12,6 +12,7 @@ export function useFont() { const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText')) useEffect(() => { + setTimeout(() => { if (canvas && commonText.fontWeight.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText') textObjs.forEach((obj) => { @@ -24,71 +25,81 @@ export function useFont() { }) }) canvas.renderAll() - } + }}, 200) }, [commonText]) useEffect(() => { - if (canvas && dimensionLineText.fontWeight.value) { - const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText') - textObjs.forEach((obj) => { - obj.set({ - fontFamily: dimensionLineText.fontFamily.value, - fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontSize: dimensionLineText.fontSize.value, - fill: dimensionLineText.fontColor.value, + setTimeout(() => { + if (canvas && dimensionLineText.fontWeight.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText') + textObjs.forEach((obj) => { + obj.set({ + fontFamily: dimensionLineText.fontFamily.value, + fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontSize: dimensionLineText.fontSize.value, + fill: dimensionLineText.fontColor.value, + }) }) - }) - canvas.renderAll() - } + canvas.renderAll() + } + }, 200) + }, [dimensionLineText]) useEffect(() => { - if (canvas && flowText.fontWeight.value) { - const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText') - textObjs.forEach((obj) => { - obj.set({ - fontFamily: flowText.fontFamily.value, - fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontSize: flowText.fontSize.value, - fill: flowText.fontColor.value, + setTimeout(() => { + if (canvas && flowText.fontWeight.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText') + textObjs.forEach((obj) => { + obj.set({ + fontFamily: flowText.fontFamily.value, + fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontSize: flowText.fontSize.value, + fill: flowText.fontColor.value, + }) }) - }) - canvas.renderAll() - } + canvas.renderAll() + } + }, 200) + }, [flowText]) useEffect(() => { - if (canvas && lengthText.fontWeight.value) { - const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') - textObjs.forEach((obj) => { - obj.set({ - fontFamily: lengthText.fontFamily.value, - fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontSize: lengthText.fontSize.value, - fill: lengthText.fontColor.value, + setTimeout(() => { + if (canvas && lengthText.fontWeight.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') + textObjs.forEach((obj) => { + obj.set({ + fontFamily: lengthText.fontFamily.value, + fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontSize: lengthText.fontSize.value, + fill: lengthText.fontColor.value, + }) }) - }) - canvas.renderAll() - } + canvas.renderAll() + } + }, 200) }, [lengthText]) useEffect(() => { - if (canvas && circuitNumberText.fontWeight.value) { - const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber') - textObjs.forEach((obj) => { - obj.set({ - fontFamily: circuitNumberText.fontFamily.value, - fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontSize: circuitNumberText.fontSize.value, - fill: circuitNumberText.fontColor.value, + setTimeout(() => { + if (canvas && circuitNumberText.fontWeight.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber') + textObjs.forEach((obj) => { + obj.set({ + fontFamily: circuitNumberText.fontFamily.value, + fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontSize: circuitNumberText.fontSize.value, + fill: circuitNumberText.fontColor.value, + }) }) - }) - canvas.renderAll() - } + canvas.renderAll() + } + }, 200) }, [circuitNumberText]) return {} diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js index 58f87e7d..66dff769 100644 --- a/src/hooks/useLine.js +++ b/src/hooks/useLine.js @@ -13,6 +13,7 @@ import { basicSettingState } from '@/store/settingAtom' import { calcLineActualSize } from '@/util/qpolygon-utils' import { getDegreeByChon } from '@/util/canvas-util' import { useText } from '@/hooks/useText' +import { fontSelector } from '@/store/fontAtom' export const useLine = () => { const canvas = useRecoilValue(canvasState) @@ -23,14 +24,15 @@ export const useLine = () => { const angleUnit = useRecoilValue(showAngleUnitSelector) const roofSizeSet = useRecoilValue(basicSettingState).roofSizeSet const globalPitch = useRecoilValue(globalPitchState) + const lengthText = useRecoilValue(fontSelector('lengthText')) const { changeCorridorDimensionText } = useText() const addLine = (points = [], options) => { const line = new QLine(points, { ...options, - fontSize: fontSize, - fontFamily: fontFamily, + fontSize: lengthText.fontSize.value, + fontFamily: lengthText.fontFamily.value, }) if (line.length < 1) {