치수선 모달 수정

src/hooks/common/useCommonUtils.js

@@ -254,13 +254,13 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
     if (commonFunctionState.distance) {
       let points = []
       let distanceText = null
+      let drawPoints = []
 
-      const circleOptions = {
+      const crossOptions = {
-        radius: 5,
+        stroke: 'black',
-        strokeWidth: 2,
+        strokeWidth: 1,
-        stroke: 'red',
+        originX: 'center',
-        fill: 'white',
+        originY: 'center',
-        selectable: false,
       }
 
       const lineOptions = {
@@ -286,23 +286,15 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
         let cross = {}
 
         if (points.length === 0) {
-          point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], {
+          point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], crossOptions)
-            stroke: 'black',
-            strokeWidth: 1,
-            originX: 'center',
-            originY: 'center',
-          })
           canvas.add(point)
           cross['x'] = parseInt(point.left.toFixed(0))
+          drawPoints.push(point)
 
           // 세로 선 생성 (십자 모양의 다른 축)
-          point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], {
+          point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], crossOptions)
-            stroke: 'black',
-            strokeWidth: 1,
-            originX: 'center',
-            originY: 'center',
-          })
           cross['y'] = parseInt(point.top.toFixed(0))
+          drawPoints.push(point)
 
           canvas.add(point)
           points.push(cross)
@@ -310,23 +302,15 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
           // 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
           const p1 = points[0]
 
-          point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], {
+          point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], crossOptions)
-            stroke: 'black',
-            strokeWidth: 1,
-            originX: 'center',
-            originY: 'center',
-          })
           canvas.add(point)
           cross['x'] = parseInt(point.left.toFixed(0))
+          drawPoints.push(point)
           // 세로 선 생성 (십자 모양의 다른 축)
-          point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], {
+          point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], crossOptions)
-            stroke: 'black',
-            strokeWidth: 1,
-            originX: 'center',
-            originY: 'center',
-          })
           canvas.add(point)
           cross['y'] = parseInt(point.top.toFixed(0))
+          drawPoints.push(point)
           points.push(cross)
 
           let isParallel = false
@@ -354,43 +338,46 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
             top: (p1CenterY + p2CenterY) / 2,
             ...textOptions,
           })
-          canvas.add(distanceText)
+          // canvas.add(distanceText)
 
+          let distance2 = 0
+          let distance3 = 0
           if (!isParallel) {
             const p3 = new fabric.Point(p2CenterX, p1CenterY)
             const line2 = new fabric.Line([p2CenterX, p2CenterY, p3.x, p3.y], lineOptions)
             const line3 = new fabric.Line([p3.x, p3.y, p1CenterX, p1CenterY], lineOptions)
             canvas.add(line2)
             canvas.add(line3)
-            const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
+            distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
-            const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
+            distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
             distanceText = new fabric.Text(`${distance2 * 10}`, {
               left: (p2CenterX + p3.x) / 2,
               top: (p2CenterY + p3.y) / 2,
               ...textOptions,
             })
-            canvas.add(distanceText)
+            // canvas.add(distanceText)
             distanceText = new fabric.Text(`${distance3 * 10}`, {
               left: (p3.x + p1CenterX) / 2,
               top: (p3.y + p1CenterY) / 2,
               ...textOptions,
             })
-            canvas.add(distanceText)
+            // canvas.add(distanceText)
-            const id = uuidv4()
-            addPopup(
-              id,
-              1,
-              <Distance
-                id={id}
-                distance={{
-                  horizon: distance3 * 10,
-                  vertical: distance2 * 10,
-                  diagonal: distance1 * 10,
-                }}
-              />,
-            )
           }
 
+          const id = uuidv4()
+          addPopup(
+            id,
+            1,
+            <Distance
+              id={id}
+              distance={{
+                horizon: distance3 * 10,
+                vertical: distance2 * 10,
+                diagonal: distance1 * 10,
+              }}
+            />,
+          )
+
           // 거리 계산 후, 다음 측정을 위해 초기화
           points = []
         }