points 수정되는 경우 길이,각도,방향 값 초기화

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -48,6 +48,7 @@ export default function OuterLineWall(props) {
   useEffect(() => {
     removeMouseEvent('mouse:down', mouseDown)
     addCanvasMouseEventListener('mouse:down', mouseDown)
+    clear()
     return () => {
       removeAllMouseEventListeners()
     }
@@ -73,6 +74,8 @@ export default function OuterLineWall(props) {
 
     setArrow1('')
     setArrow2('')
+
+    setAngle1(0)
   }
 
   const mouseDown = (e) => {
@@ -168,7 +171,7 @@ export default function OuterLineWall(props) {
         return
       }
 
-      if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
+      /*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
         return
       }
 
@@ -222,7 +225,7 @@ export default function OuterLineWall(props) {
         canvas?.add(guideLine2)
 
         addLineText(guideLine2)
-      }
+      }*/
     }
   }, [points])
 

src/hooks/useCanvasEvent.js

@@ -1,7 +1,6 @@
-import { useEffect, useState } from 'react'
-import { fabric } from 'fabric'
+import { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, currentObjectState, modeState } from '@/store/canvasAtom'
+import { canvasSizeState, currentObjectState } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 // 캔버스에 필요한 이벤트

src/hooks/useLine.js

@@ -19,7 +19,9 @@ export const useLine = () => {
   const addLineText = (line, length = getLengthByLine(line)) => {
     removeLineText(line)
 
-    const text = new fabric.Text(length.toFixed(0), {
+    const lengthTxt = isNaN(Number(length)) ? length : length.toFixed(0)
+
+    const text = new fabric.Text(lengthTxt, {
       left: (line.x2 + line.x1) / 2,
       top: (line.y2 + line.y1) / 2,
       parent: line,