82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
import { useRecoilValue } from 'recoil'
|
|
import { canvasState } from '@/store/canvasAtom'
|
|
import { fontSelector } from '@/store/fontAtom'
|
|
import { useEffect } from 'react'
|
|
|
|
export function useFont() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const commonText = useRecoilValue(fontSelector('commonText'))
|
|
const dimensionLineText = useRecoilValue(fontSelector('dimensionLineText'))
|
|
const flowText = useRecoilValue(fontSelector('flowText'))
|
|
const lengthText = useRecoilValue(fontSelector('lengthText'))
|
|
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
|
|
|
|
useEffect(() => {
|
|
if (canvas && commonText.fontWeight.value) {
|
|
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
|
|
textObjs.forEach((obj) => {
|
|
obj.set({
|
|
fontFamily: commonText.fontFamily.value,
|
|
fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
|
fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
|
fontSize: commonText.fontSize.value,
|
|
fill: commonText.fontColor.value,
|
|
})
|
|
})
|
|
canvas.renderAll()
|
|
}
|
|
}, [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,
|
|
})
|
|
})
|
|
canvas.renderAll()
|
|
}
|
|
}, [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,
|
|
})
|
|
})
|
|
canvas.renderAll()
|
|
}
|
|
}, [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,
|
|
})
|
|
})
|
|
canvas.renderAll()
|
|
}
|
|
}, [lengthText])
|
|
|
|
useEffect(() => {}, [circuitNumberText])
|
|
|
|
return {}
|
|
}
|