치수선, 문자 폰트 추가

src/hooks/common/useCommonUtils.js

@@ -2,13 +2,16 @@ import { useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
-import { checkLineOrientation, getDistance } from '@/util/canvas-util'
+import { checkLineOrientation, getDistance, setSurfaceShapePattern } from '@/util/canvas-util'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { fontSelector } from '@/store/fontAtom'
 
 export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
   const wordDisplay = useRecoilValue(wordDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
+  const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
+  const commonTextFont = useRecoilValue(fontSelector('commonText'))
 
   useEffect(() => {
     initEvent()
@@ -19,21 +22,31 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
     } else if (commonFunctionState.distance) {
       commonDistanceMode()
     }
-  }, [commonFunctionState, dimensionSettings])
+  }, [commonFunctionState, dimensionSettings, commonTextFont, dimensionLineTextFont])
+
+  const loadDataInitialize = () => {
+    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
+    roofs.forEach((roof) => {})
+  }
 
   const commonTextMode = () => {
     let textbox
     if (commonFunctionState.text) {
+      console.log(commonTextFont)
+
       addCanvasMouseEventListener('mouse:down', (event) => {
         const pointer = canvas?.getPointer(event.e)
         textbox = new fabric.Textbox('', {
           left: pointer.x,
           top: pointer.y,
           width: 200,
-          fontSize: 14,
           editable: true,
           name: 'commonText',
           visible: wordDisplay,
+          fill: commonTextFont.fontColor.value,
+          fontFamily: commonTextFont.fontFamily.value,
+          fontSize: commonTextFont.fontSize.value,
+          fontStyle: commonTextFont.fontWeight.value,
         })
 
         canvas?.add(textbox)
@@ -187,21 +200,19 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
           canvas.add(arrow1)
           canvas.add(arrow2)
 
-          console.log(dimensionSettings)
-
-          // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
           distanceText = new fabric.Text(`${distance * 10} `, {
             left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
             top: (p1CenterY + p2CenterY) / 2 + (lineDirection === 'horizontal' ? +15 : 0),
-            fill: dimensionSettings.fontColor,
-            fontSize: dimensionSettings.fontSize,
-            // fontFamily : dimensionSettings.font, //폰트
-            // fontStyle : dimensionSettings.fontStyle, //폰트스타일
+            fill: dimensionLineTextFont.fontColor.value,
+            fontSize: dimensionLineTextFont.fontSize.value,
+            fontFamily: dimensionLineTextFont.fontFamily.value,
+            fontStyle: dimensionLineTextFont.fontWeight.value,
             selectable: true,
             textAlign: 'center',
             originX: 'center',
             originY: 'center',
             angle: lineDirection === 'horizontal' ? 0 : 270,
+            name: 'dimensionLineText',
             // lockMovementX: false,
             // lockMovementY: false,
           })
@@ -361,11 +372,12 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
       }
     }
 
-    setCommonFunctionState(tempStates)
+    if (setCommonFunctionState) setCommonFunctionState(tempStates)
   }
 
   return {
     commonFunctions,
     dimensionSettings,
+    loadDataInitialize,
   }
 }

src/hooks/common/useFont.js

@@ -11,9 +11,35 @@ export function useFont() {
   const lengthText = useRecoilValue(fontSelector('lengthText'))
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
-  useEffect(() => {}, [commonText])
+  useEffect(() => {
+    if (canvas) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
+      textObjs.forEach((obj) => {
+        obj.set({
+          fontFamily: commonText.fontFamily.value,
+          fontWeight: commonText.fontWeight.value,
+          fontSize: commonText.fontSize.value,
+          fill: commonText.fontColor.value,
+        })
+      })
+      canvas.renderAll()
+    }
+  }, [commonText])
 
-  useEffect(() => {}, [dimensionLineText])
+  useEffect(() => {
+    if (canvas) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
+      textObjs.forEach((obj) => {
+        obj.set({
+          fontFamily: dimensionLineText.fontFamily.value,
+          fontWeight: dimensionLineText.fontWeight.value,
+          fontSize: dimensionLineText.fontSize.value,
+          fill: dimensionLineText.fontColor.value,
+        })
+      })
+      canvas.renderAll()
+    }
+  }, [dimensionLineText])
 
   useEffect(() => {
     if (canvas) {