directionText 기존 있던 내용 제거

src/components/floor-plan/CanvasMenu.jsx

@@ -159,7 +159,7 @@ export default function CanvasMenu(props) {
       roof.set({ selectable: true })
       setSurfaceShapePattern(roof, null, false, roof.roofMaterial)
       delete roof.moduleCompass
-      drawDirectionArrow(roof)
+      drawDirectionArrow(roof, false)
     })
   }
 
@@ -184,13 +184,13 @@ export default function CanvasMenu(props) {
         break
       case 'surface':
         const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
+        initRoofs()
         if (modules.length > 0) {
           swalFire({
             text: getMessage('module.delete.confirm'),
             type: 'confirm',
             confirmFn: () => {
               //해당 메뉴 이동시 배치면 삭제
-              initRoofs()
 
               const moduleSurfacesArray = canvas
                 .getObjects()
@@ -204,6 +204,7 @@ export default function CanvasMenu(props) {
                 moduleSurfacesArray.forEach((moduleSurface) => {
                   canvas.remove(moduleSurface)
                 })
+
                 canvas.renderAll()
                 onClickNav(menu)
               }

src/hooks/module/useOrientation.js

@@ -27,6 +27,11 @@ export function useOrientation() {
       setCompasDeg(0)
     }
     const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+    roofs.forEach((roof) => {
+      delete roof.directionText
+    })
+
     roofs.forEach((roof) => {
       roof.set({
         moduleCompass: isNaN(compasDeg) ? 0 : compasDeg,

src/hooks/usePolygon.js

@@ -172,8 +172,9 @@ export const usePolygon = () => {
   /**
    * poolygon의 방향에 따라 화살표를 추가한다.
    * @param polygon
+   * @param showDirectionText
    */
-  const drawDirectionArrow = (polygon) => {
+  const drawDirectionArrow = (polygon, showDirectionText = true) => {
     if (polygon.points.length < 3) {
       return
     }
@@ -319,17 +320,16 @@ export const usePolygon = () => {
       pitch: polygon.roofMaterial?.pitch ?? 4,
       parentId: polygon.id,
     })
-
     arrow.setViewLengthText(false)
     polygon.arrow = arrow
     polygon.canvas.add(arrow)
     polygon.canvas.renderAll()
-    drawDirectionStringToArrow2(polygon)
+    drawDirectionStringToArrow2(polygon, showDirectionText)
     // drawDirectionStringToArrow()
   }
 
   //arrow의 compass 값으로 방향 글자 설정 필요
-  const drawDirectionStringToArrow2 = (polygon) => {
+  const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
     const { direction, surfaceCompass, moduleCompass, arrow } = polygon
     if (moduleCompass === null || moduleCompass === undefined) {
       const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
@@ -510,24 +510,27 @@ export const usePolygon = () => {
 
     text = text + (sameDirectionCnt.length + 1)
     polygon.set('directionText', text)
-    const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
-      fontFamily: flowFontOptions.fontFamily.value,
-      fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-      fontStyle: flowFontOptions.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-      fontSize: flowFontOptions.fontSize.value,
-      fill: flowFontOptions.fontColor.value,
-      pitch: arrow.pitch,
-      originX: 'center',
-      originY: 'center',
-      name: 'flowText',
-      originText: text,
-      selectable: false,
-      left: arrow.stickeyPoint.x,
-      top: arrow.stickeyPoint.y,
-      parent: arrow,
-      parentId: arrow.id,
-      visible: isFlowDisplay,
-    })
+    const textObj = new fabric.Text(
+      `${showDirectionText && text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`,
+      {
+        fontFamily: flowFontOptions.fontFamily.value,
+        fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+        fontStyle: flowFontOptions.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+        fontSize: flowFontOptions.fontSize.value,
+        fill: flowFontOptions.fontColor.value,
+        pitch: arrow.pitch,
+        originX: 'center',
+        originY: 'center',
+        name: 'flowText',
+        originText: text,
+        selectable: false,
+        left: arrow.stickeyPoint.x,
+        top: arrow.stickeyPoint.y,
+        parent: arrow,
+        parentId: arrow.id,
+        visible: isFlowDisplay,
+      },
+    )
 
     polygon.canvas.add(textObj)
   }