offset용 단위, flow용 단위 다름

src/hooks/common/useCanvasConfigInitialize.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector } from '@/store/canvasAtom'
+import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom'
 import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { useFont } from '@/hooks/common/useFont'
 import { useGrid } from '@/hooks/common/useGrid'
@@ -16,6 +16,7 @@ export function useCanvasConfigInitialize() {
   const setGlobalFonts = useSetRecoilState(globalFontAtom)
   const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
   const pitchText = useRecoilValue(pitchTextSelector)
+  const angleUnit = useRecoilValue(showAngleUnitSelector)
   const {} = useFont()
   const {} = useGrid()
   const {} = useRoof()
@@ -33,15 +34,22 @@ export function useCanvasConfigInitialize() {
 
   useEffect(() => {
     if (!canvas) return
-    const texts = canvas.getObjects().filter((obj) => obj.name === 'pitchText' || obj.name === 'flowText')
+    const offsetTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
+    const flowTexts = canvas.getObjects().filter((obj) => obj.name === 'flowText')
     if (basicSetting.roofAngleSet === 'slope') {
-      texts.forEach((obj) => {
+      offsetTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${obj.pitch}${angleUnit}` })
+      })
+      flowTexts.forEach((obj) => {
         obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` })
       })
     }
 
     if (basicSetting.roofAngleSet === 'flat') {
-      texts.forEach((obj) => {
+      offsetTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${angleUnit}` })
+      })
+      flowTexts.forEach((obj) => {
         obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` })
       })
     }

src/hooks/roofcover/useRoofShapeSetting.js

@@ -38,6 +38,8 @@ export function useRoofShapeSetting(id) {
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const outerLineFix = useRecoilValue(outerLineFixState)
 
+  const isFixRef = useRef(false)
+
   const pitchRef = useRef(null)
   const jerkinHeadPitchRef = useRef(null)
 
@@ -60,6 +62,10 @@ export function useRoofShapeSetting(id) {
     }
 
     return () => {
+      if (!isFixRef.current) {
+        return
+      }
+
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
       const pitchTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
       canvas.remove(...pitchTexts)
@@ -83,7 +89,6 @@ export function useRoofShapeSetting(id) {
           })
 
           addPitchText(line)
-          line.setViewLengthText(false)
         }
       })
       canvas.renderAll()
@@ -388,6 +393,7 @@ export function useRoofShapeSetting(id) {
     canvas?.renderAll()
     roof.drawHelpLine()
     // setShowRoofShapeSettingModal(false)
+    isFixRef.current = true
     closePopup(id)
   }
 

src/hooks/useLine.js

@@ -1,5 +1,13 @@
 import { useRecoilValue } from 'recoil'
-import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+import {
+  ANGLE_TYPE,
+  canvasState,
+  currentAngleTypeSelector,
+  fontFamilyState,
+  fontSizeState,
+  pitchTextSelector,
+  showAngleUnitSelector,
+} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 
@@ -8,6 +16,8 @@ export const useLine = () => {
   const fontSize = useRecoilValue(fontSizeState)
   const fontFamily = useRecoilValue(fontFamilyState)
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
+  const angleUnit = useRecoilValue(showAngleUnitSelector)
 
   const addLine = (points = [], options) => {
     const line = new QLine(points, {
@@ -81,8 +91,8 @@ export const useLine = () => {
 
     const textStr =
       currentAngleType === ANGLE_TYPE.SLOPE
-        ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch : ''}`
+        ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch + angleUnit : ''}`
-        : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) : ''}`
+        : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) + angleUnit : ''}`
 
     if (direction === 'top') {
       left = (startPoint.x + endPoint.x) / 2

src/store/canvasAtom.js

@@ -353,3 +353,14 @@ export const pitchTextSelector = selector({
     return roofAngleSet === 'slope' ? '寸' : '度'
   },
 })
+
+//각도 표시, offset 길이에서는 각도가 한자가 아닌 도형으로 표시되어야 한다.
+export const showAngleUnitSelector = selector({
+  key: 'showAngleUnitSelector',
+  get: ({ get }) => {
+    const basicSettingStateValue = get(basicSettingState)
+    const roofAngleSet = basicSettingStateValue.roofAngleSet
+
+    return roofAngleSet === 'slope' ? '寸' : '°'
+  },
+})