Canvas setting font 관련 기능 수정

src/components/common/font/FontSetting.jsx

@@ -3,76 +3,69 @@ import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
-import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 import { contextPopupPositionState } from '@/store/popupAtom'
 
 const fonts = [
-  { name: 'MS PGothic', value: 'MS PGothic' },
+  { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
-  { name: '@Yu Gothic', value: '@Yu Gothic' },
+  { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
-  { name: 'Yu Gothic', value: 'Yu Gothic' },
+  { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
-  { name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
+  { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
-  { name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+  { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+  3,
 ]
 
 const fontSizes = [
   ...Array.from({ length: 4 }).map((_, index) => {
-    return { name: index + 8, value: index + 8 }
+    return { id: index + 8, name: index + 8, value: index + 8 }
   }),
   ...Array.from({ length: 9 }).map((_, index) => {
-    return { name: (index + 6) * 2, value: (index + 6) * 2 }
+    return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
   }),
-  { name: 36, value: 36 },
+  { id: 36, name: 36, value: 36 },
-  { name: 48, value: 48 },
+  { id: 48, name: 48, value: 48 },
-  { name: 72, value: 72 },
+  { id: 72, name: 72, value: 72 },
 ]
 
 export default function FontSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
+  const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false, onSave, font } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
+  const [selectedFont, setSelectedFont] = useState(font.fontFamily)
-  const currentFont = useRecoilValue(fontSelector(type))
+  const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight)
-
+  const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize)
-  const [selectedFont, setSelectedFont] = useState(currentFont.fontFamily)
+  const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor)
-  const [selectedFontWeight, setSelectedFontWeight] = useState(currentFont.fontWeight)
-  const [selectedFontSize, setSelectedFontSize] = useState(currentFont.fontSize)
-  const [selectedFontColor, setSelectedFontColor] = useState(currentFont.fontColor)
   const fontOptions = [
-    { name: getMessage('font.style.normal'), value: 'normal' },
+    { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
-    { name: getMessage('font.style.italic'), value: 'italic' },
+    { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
     {
+      id: 'bold',
       name: getMessage('font.style.bold'),
       value: 'bold',
     },
-    { name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
+    { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
   ]
   const fontColors = [
-    { name: getMessage('color.black'), value: 'black' },
+    { id: 'black', name: getMessage('color.black'), value: 'black' },
-    { name: getMessage('color.red'), value: 'red' },
+    { id: 'red', name: getMessage('color.red'), value: 'red' },
-    { name: getMessage('color.blue'), value: 'blue' },
+    { id: 'blue', name: getMessage('color.blue'), value: 'blue' },
-    { name: getMessage('color.gray'), value: 'gray' },
+    { id: 'gray', name: getMessage('color.gray'), value: 'gray' },
-    { name: getMessage('color.yellow'), value: 'yellow' },
+    { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
-    { name: getMessage('color.green'), value: 'green' },
+    { id: 'green', name: getMessage('color.green'), value: 'green' },
-    { name: getMessage('color.pink'), value: 'pink' },
+    { id: 'pink', name: getMessage('color.pink'), value: 'pink' },
-    { name: getMessage('color.gold'), value: 'gold' },
+    { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
-    { name: getMessage('color.darkblue'), value: 'darkblue' },
+    { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
   ]
   const handleSaveBtn = () => {
-    setGlobalFont((prev) => {
+    onSave({
-      return {
+      fontFamily: selectedFont,
-        ...prev,
+      fontSize: selectedFontSize,
-        [type]: {
+      fontColor: selectedFontColor,
-          fontFamily: selectedFont,
+      fontWeight: selectedFontWeight,
-          fontSize: selectedFontSize,
-          fontColor: selectedFontColor,
-          fontWeight: selectedFontWeight,
-        },
-      }
     })
     if (setIsShow) setIsShow(false)
-    closePopup(id)
+    closePopup(id, isConfig)
   }
 
   return (
@@ -125,7 +118,8 @@ export default function FontSetting(props) {
                   style={{
                     fontFamily: selectedFont?.value ?? '',
                     fontSize: selectedFontSize?.value ?? '12px',
-                    fontWeight: '400',
+                    fontStyle: selectedFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                    fontWeight: selectedFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     color: selectedFontColor?.value ?? 'black',
                   }}
                 >

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -1,4 +1,3 @@
-import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -6,55 +5,35 @@ import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import FontSetting from '@/components/common/font/FontSetting'
 import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
-import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 
 export default function SecondOption() {
   const { getMessage } = useMessage()
-  const { addPopup, closePopup, closePopups } = usePopup()
+  const { addPopup, closePopup } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
-  const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
+  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
   const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
   const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
   const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
+  const commonFont = useRecoilValue(fontSelector('commonText'))
+  const flowFont = useRecoilValue(fontSelector('flowText'))
+  const lengthFont = useRecoilValue(fontSelector('lengthText'))
+  const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText'))
 
+  const [dimensionId, setDimensionId] = useState(uuidv4())
+  const [fontId, setFontId] = useState(uuidv4())
+  const [planSizeId, setPlanSizeId] = useState(uuidv4())
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    console.log('SecondOption useEffect 실행')
     //fetchSettings()
   }, [objectNo])
 
-  let dimensionId = null
-  let fontId = null
-  let planSizeId = null
-  const [pixel, setPixel] = useState(dimensionSettings.pixel)
-  const [color, setColor] = useState(dimensionSettings.color)
-  const [font, setFont] = useState(null)
-  const [fontSize, setFontSize] = useState(dimensionSettings.fontSize)
-  const [fontColor, setFontColor] = useState(dimensionSettings.fontColor)
-
-  useEffect(() => {
-    dimensionId = uuidv4()
-    fontId = uuidv4()
-    planSizeId = uuidv4()
-  }, [])
-
   const dimensionProps = {
-    color,
-    setColor,
-    pixel,
-    setPixel,
-    font,
-    setFont,
-    fontSize,
-    setFontSize,
-    fontColor,
-    setFontColor,
     id: dimensionId,
     isShow: showDimensionLineSettingModal,
     setIsShow: setShowDimensionLineSettingModal,
@@ -62,23 +41,6 @@ export default function SecondOption() {
 
   const [horizon, setHorizon] = useState(1600)
   const [vertical, setVertical] = useState(1600)
-
-  const fontProps = {
-    id: fontId,
-    pos: { x: 745, y: 180 },
-    setIsShow: setShowFontSettingModal,
-    isConfig: true,
-  }
-  const planSizeProps = {
-    id: planSizeId,
-    horizon,
-    setHorizon,
-    vertical,
-    setVertical,
-    setIsShow: setShowPlanSizeSettingModal,
-    pos: { x: 1025, y: 180 },
-  }
-
   const handlePopup = (type) => {
     setShowPlanSizeSettingModal(false)
     setShowFontSettingModal(false)
@@ -90,6 +52,7 @@ export default function SecondOption() {
         setShowDimensionLineSettingModal(false)
         fontProps.type = 'commonText'
         fontProps.id = fontId + 1
+        fontProps.font = commonFont
         addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
         break
       }
@@ -99,6 +62,7 @@ export default function SecondOption() {
         setShowFontSettingModal(true)
         setShowDimensionLineSettingModal(false)
         fontProps.type = 'flowText'
+        fontProps.font = flowFont
         fontProps.id = fontId + 2
         addPopup(fontId + 2, 2, <FontSetting {...fontProps} />, true)
         break
@@ -107,9 +71,9 @@ export default function SecondOption() {
       case 'font3': {
         //치수 글꼴변경
         setShowFontSettingModal(true)
-
         setShowDimensionLineSettingModal(false)
         fontProps.type = 'lengthText'
+        fontProps.font = lengthFont
         fontProps.id = fontId + 3
         addPopup(fontId + 3, 2, <FontSetting {...fontProps} />, true)
         break
@@ -120,6 +84,7 @@ export default function SecondOption() {
         setShowFontSettingModal(true)
         setShowDimensionLineSettingModal(false)
         fontProps.type = 'circuitNumberText'
+        fontProps.font = circuitNumberTextFont
         fontProps.id = fontId
         addPopup(fontId, 2, <FontSetting {...fontProps} />, true)
         break
@@ -129,6 +94,12 @@ export default function SecondOption() {
         //치수선 설정
         if (!showDimensionLineSettingModal) {
           setShowDimensionLineSettingModal(true)
+          fontProps.font = {
+            fontFamily: '',
+            fontColor: '',
+            fontSize: '',
+            fontWeight: '',
+          }
           addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
         } else {
           setShowDimensionLineSettingModal(false)
@@ -147,6 +118,38 @@ export default function SecondOption() {
     }
   }
 
+  const handleFontSave = (font) => {
+    setGlobalFont((prev) => {
+      return {
+        ...prev,
+        [fontProps.type]: {
+          fontFamily: font.fontFamily,
+          fontWeight: font.fontWeight,
+          fontSize: font.fontSize,
+          fontColor: font.fontColor,
+        },
+      }
+    })
+  }
+
+  const fontProps = {
+    id: fontId,
+    pos: { x: 745, y: 180 },
+    setIsShow: setShowFontSettingModal,
+    onSave: handleFontSave,
+    isConfig: true,
+  }
+
+  const planSizeProps = {
+    id: planSizeId,
+    horizon,
+    setHorizon,
+    vertical,
+    setVertical,
+    setIsShow: setShowPlanSizeSettingModal,
+    pos: { x: 1025, y: 180 },
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -8,68 +8,57 @@ import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { useRecoilState } from 'recoil'
+import { globalFontAtom } from '@/store/fontAtom'
 
-/*
- color: 치수선 색
- fontColor: 글꼴 색
- fontSize: 치수선 치수 색
- pixel: 치수선 두깨
-*/
 export default function DimensionLineSetting(props) {
-  const {
+  const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props
-    color,
-    setColor,
-    font,
-    setFont,
-    fontColor,
-    setFontColor,
-    fontSize,
-    setFontSize,
-    pixel,
-    setPixel,
-    isShow,
-    setIsShow,
-    id,
-    pos = { x: 985, y: 180 },
-  } = props
   const { addPopup, closePopup, closePopups } = usePopup()
   const pixels = Array.from({ length: 5 }).map((_, index) => {
-    return { name: index + 1, value: index + 1 }
+    return { id: index, name: index + 1, value: index + 1 }
   })
-  const [originColor, setOriginColor] = useState(color)
+  const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
-  const [originFont, setOriginFont] = useState(font)
+  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  const [originFontColor, setOriginFontColor] = useState(fontColor)
+  const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
-  const [originFontSize, setOriginFontSize] = useState(fontSize)
+  const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
-  const [originPixel, setOriginPixel] = useState(pixel)
+  const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
+  const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
+  const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
+  const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
   const [fontModalId, setFontModalId] = useState(uuidv4())
-  const [colorModalId, setColorModalId] = useState(uuidv4())
 
+  const [colorModalId, setColorModalId] = useState(uuidv4())
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showFontModal, setShowFontModal] = useState(false)
   const { getMessage } = useMessage()
-  const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
   useEffect(() => {
-    console.log(2, isShow)
+    if (originPixel) {
-    if (pixel) {
+      setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
-      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
     }
     setIsShow(true)
   }, [])
 
   useEffect(() => {
-    console.log(1, isShow)
     if (!isShow) {
       closePopups([fontModalId, colorModalId])
     }
   }, [isShow])
 
+  const handleFontSave = (font) => {
+    setOriginFont(font.fontFamily)
+    setOriginFontSize(font.fontSize)
+    setOriginFontColor(font.fontColor)
+    setOriginFontWeight(font.fontWeight)
+  }
+  const handleColorSave = () => {}
+
   const colorPickerProps = {
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
     color: originColor,
     setColor: setOriginColor,
     id: colorModalId,
+    isConfig: true,
     pos: {
       x: 495,
       y: 180,
@@ -79,14 +68,13 @@ export default function DimensionLineSetting(props) {
   const fontProps = {
     isShow: showFontModal,
     setIsShow: setShowFontModal,
-    color: originColor,
+    font: {
-    setColor: setOriginColor,
+      fontFamily: originFont,
-    font: originFont,
+      fontSize: originFontSize,
-    setFont: setOriginFont,
+      fontColor: originFontColor,
-    fontColor: 'black',
+      fontWeight: originFontWeight,
-    setFontColor: setOriginFontColor,
+    },
-    fontSize: originFontSize,
+    onSave: handleFontSave,
-    setFontSize: setOriginFontSize,
     isConfig: true,
     id: fontModalId,
     pos: {
@@ -106,6 +94,29 @@ export default function DimensionLineSetting(props) {
     }
   }
 
+  const onSave = () => {
+    setGlobalFont((prev) => {
+      return {
+        ...prev,
+        dimensionLineText: {
+          fontFamily: originFont,
+          fontWeight: originFontWeight,
+          fontSize: originFontSize,
+          fontColor: originFontColor,
+        },
+      }
+    })
+    setDimensionLineSettings((prev) => {
+      return {
+        ...prev,
+        pixel: originPixel?.value,
+        color: originColor,
+      }
+    })
+    setIsShow(false)
+    closePopups([fontModalId, colorModalId, id])
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm mount`}>
@@ -149,9 +160,10 @@ export default function DimensionLineSetting(props) {
                     className="font"
                     style={{
                       fontFamily: originFont?.value ?? '',
-                      color: originFontColor?.value ?? 'black',
+                      color: originFontColor.value ?? 'black',
                       fontSize: originFontSize?.value ?? '12px',
-                      fontWeight: '400',
+                      fontStyle: originFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                      fontWeight: originFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     }}
                   >
                     9,999
@@ -161,7 +173,7 @@ export default function DimensionLineSetting(props) {
                     style={{
                       backgroundColor: originColor,
                       borderColor: originColor,
-                      height: originPixel.value,
+                      height: originPixel?.value,
                     }}
                   ></span>
                 </div>
@@ -169,26 +181,7 @@ export default function DimensionLineSetting(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button
+            <button className="btn-frame modal act" onClick={onSave}>
-              className="btn-frame modal act"
-              onClick={() => {
-                setPixel(originPixel.value)
-                setColor(originColor)
-                setFont(originFont)
-                setDimensionLineSettings((prev) => {
-                  return {
-                    ...prev,
-                    pixel: originPixel.value,
-                    color: originColor,
-                    font: originFont,
-                    fontColor: originFontColor,
-                    fontSize: originFontSize,
-                  }
-                })
-                setIsShow(false)
-                closePopups([fontModalId, colorModalId, id])
-              }}
-            >
               {getMessage('modal.common.save')}
             </button>
           </div>

src/hooks/common/useCommonUtils.js

@@ -1,16 +1,14 @@
 import { useEffect } from 'react'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
-import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
 import { canvasState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
-import { commonUtilsState } from '@/store/commonUtilsAtom'
-import { center, point } from '@turf/turf'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
@@ -39,6 +37,7 @@ export function useCommonUtils() {
       commonTextKeyEvent()
       addCanvasMouseEventListener('mouse:down', (event) => {
         const pointer = canvas?.getPointer(event.e)
+        
         textbox = new fabric.Textbox('', {
           left: pointer.x,
           top: pointer.y,
@@ -49,7 +48,8 @@ export function useCommonUtils() {
           fill: commonTextFont.fontColor.value,
           fontFamily: commonTextFont.fontFamily.value,
           fontSize: commonTextFont.fontSize.value,
-          fontStyle: commonTextFont.fontWeight.value,
+          fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
           selectable: true,
           lockMovementX: true,
           lockMovementY: true,
@@ -262,7 +262,8 @@ export function useCommonUtils() {
             fill: dimensionLineTextFont.fontColor.value,
             fontSize: dimensionLineTextFont.fontSize.value,
             fontFamily: dimensionLineTextFont.fontFamily.value,
-            fontStyle: dimensionLineTextFont.fontWeight.value,
+            fontStyle: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontWeight: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
             selectable: true,
             textAlign: 'center',
             originX: 'center',

src/hooks/common/useFont.js

@@ -17,8 +17,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: commonText.fontFamily.value,
-          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: commonText.fontSize.value,
           fill: commonText.fontColor.value,
         })
@@ -33,8 +33,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: dimensionLineText.fontFamily.value,
-          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: dimensionLineText.fontSize.value,
           fill: dimensionLineText.fontColor.value,
         })
@@ -49,8 +49,8 @@ export function useFont() {
       textObjs.forEach((obj) => {
         obj.set({
           fontFamily: flowText.fontFamily.value,
-          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
           fontSize: flowText.fontSize.value,
           fill: flowText.fontColor.value,
         })

src/store/commonUtilsAtom.js

@@ -11,10 +11,6 @@ export const dimensionLineSettingsState = atom({
   default: {
     pixel: 1,
     color: '#000000',
-    font: 'Arial',
-    fontColor: '#000000',
-    fontSize: 15,
-    fontStyle: 'normal',
   },
 })