- 지붕형상 설정 완료 시 각 라인 별 타입 및 offset 추가

src/components/fabric/QLine.js

@@ -90,7 +90,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     const y2 = this.top + this.height * scaleY
 
     if (thisText) {
-      thisText.set({ text: this.length.toFixed(0).toString(), left: (x1 + x2) / 2, top: (y1 + y2) / 2 })
+      thisText.set({ text: this.getLength().toString(), left: (x1 + x2) / 2, top: (y1 + y2) / 2 })
       this.text = thisText
       return
     }
@@ -109,7 +109,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     const maxY = this.top + this.length
     const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
 
-    const text = new fabric.Textbox(Number(this.length.toFixed(1) * 10).toString(), {
+    const text = new fabric.Textbox(this.getLength().toString(), {
       left: left,
       top: top,
       fontSize: this.fontSize,
@@ -148,6 +148,11 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     this.canvas = canvas
   },
 
+  getLength() {
+    //10배 곱해진 값 return
+    return Number(this.length.toFixed(1) * 10)
+  },
+
   setViewLengthText(bool) {
     const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
     if (thisText) {

src/hooks/roofcover/useOuterLineWall.js

@@ -92,6 +92,11 @@ export function useOuterLineWall() {
   }, [type])
 
   useEffect(() => {
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name !== 'outerLinePoint')
+      .forEach((obj) => canvas.remove(obj))
+
     const outerLinePoints = canvas?.getObjects().filter((obj) => obj.name === 'outerLinePoint')
     const newPoints = []
     if (points.length === 0 && outerLinePoints.length > 0) {
@@ -299,20 +304,6 @@ export function useOuterLineWall() {
     })
   }
 
-  const settingLine = () => {
-    const outerLines = canvas?.getObjects().filter((obj) => obj.name === 'outerLine')
-    outerLines.forEach((line) => {
-      removeLine(line)
-    })
-
-    addPolygonByLines(outerLines, {
-      fill: 'rgba(0,0,0,0)',
-      stroke: 'black',
-      strokeWidth: 3,
-    })
-    setShowOutlineModal(false)
-  }
-
   // 직각 완료될 경우 확인
   const checkRightAngle = (direction) => {
     const activeElem = document.activeElement
@@ -529,8 +520,6 @@ export function useOuterLineWall() {
 
     const length2Value = getLength2()
 
-    console.log(length2Value)
-
     if (diagonalLength !== 0 && length1Value !== 0 && arrow1Value !== '') {
       setLength2(getLength2())
       length2Ref.current.focus()

src/hooks/roofcover/usePropertiesSetting.js

@@ -128,16 +128,18 @@ export function usePropertiesSetting() {
         strokeWidth: 4,
       })
 
-      hideLine(hideLine)
+      hideLine(line)
     })
 
     const wall = addPolygonByLines(lines, { name: 'WallLine', fill: 'transparent', stroke: 'black' })
 
     wall.lines = [...lines]
 
-    drawRoofPolygon(wall)
+    const roof = drawRoofPolygon(wall)
+
     setPoints([])
     canvas.renderAll()
+    roof.drawHelpLine()
   }
 
   const closeModal = (fn) => {

src/hooks/roofcover/useRoofShapeSetting.js

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, MENU } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
@@ -26,6 +26,8 @@ export function useRoofShapeSetting() {
   const { drawRoofPolygon } = useMode()
   const { hideLine, showLine } = useLine()
 
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+
   const history = useRef([])
 
   useEffect(() => {
@@ -107,11 +109,15 @@ export function useRoofShapeSetting() {
     { id: 6, name: getMessage('shed') },
   ]
 
-  //모달 닫기위한 함수
+  /**
+   *
+   * @param fn 모달 닫기 위한 함수
+   */
   const handleSave = (fn) => {
     //기존 wallLine 삭제
 
     let outerLines
+
     canvas?.remove(canvas.getObjects().find((obj) => obj.name === 'wallLine'))
     canvas?.remove(canvas.getObjects().find((obj) => obj.name === 'roofBase'))
 
@@ -323,24 +329,21 @@ export function useRoofShapeSetting() {
   const saveAPattern = () => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
 
-    outerLines
+    outerLines.forEach((line) => {
-      .filter((line) => line.direction === 'left' || line.direction === 'right')
+      if (line.direction === 'left' || line.direction === 'right') {
-      .forEach((line) => {
         line.attributes = {
           offset: gableOffset / 10,
           type: LINE_TYPE.WALLLINE.GABLE,
         }
-      })
+      } else if (line.direction === 'top' || line.direction === 'bottom') {
-
-    outerLines
-      .filter((line) => line.direction === 'top' || line.direction === 'bottom')
-      .forEach((line) => {
         line.attributes = {
           offset: eavesOffset / 10,
           pitch: pitch,
           type: LINE_TYPE.WALLLINE.EAVES,
         }
-      })
+      }
+      hideLine(line)
+    })
 
     return outerLines
   }
@@ -349,24 +352,21 @@ export function useRoofShapeSetting() {
   const saveBPattern = () => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
 
-    outerLines
+    outerLines.forEach((line) => {
-      .filter((line) => line.direction === 'left' || line.direction === 'right')
+      if (line.direction === 'top' || line.direction === 'bottom') {
-      .forEach((line) => {
+        line.attributes = {
+          offset: gableOffset / 10,
+          type: LINE_TYPE.WALLLINE.GABLE,
+        }
+      } else if (line.direction === 'left' || line.direction === 'right') {
         line.attributes = {
           offset: eavesOffset / 10,
           pitch: pitch,
           type: LINE_TYPE.WALLLINE.EAVES,
         }
-      })
+      }
-
+      hideLine(line)
-    outerLines
+    })
-      .filter((line) => line.direction === 'top' || line.direction === 'bottom')
-      .forEach((line) => {
-        line.attributes = {
-          offset: gableOffset / 10,
-          type: LINE_TYPE.WALLLINE.GABLE,
-        }
-      })
 
     return outerLines
   }