From c431061a0bae9a3e83b6692275e0b059c0bd2a00 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 23 Oct 2024 13:43:56 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=88=98=EC=A7=81=20=EC=88=98=ED=8F=89=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../outerlinesetting/WallLineSetting.jsx      |  3 +-
 src/hooks/roofcover/useAuxiliaryDrawing.js    | 32 ++++++++++++++++---
 src/hooks/usePolygon.js                       |  2 +-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index a98c937a..70ff2150 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -118,8 +118,7 @@ export default function WallLineSetting(props) {
       <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
-          {/*<button className="modal-close" onClick={() => closePopup(id)}>*/}
-          <button className="modal-close">닫기</button>
+          <button className="modal-close" onClick={() => closePopup(id)}></button>
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index 610db186..5ab18a40 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { adsorptionRangeState, canvasState } from '@/store/canvasAtom'
+import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
@@ -21,6 +21,7 @@ import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useSwal } from '@/hooks/useSwal'
 import { booleanPointInPolygon } from '@turf/turf'
 import { usePopup } from '@/hooks/usePopup'
+import { calculateAngle } from '@/util/qpolygon-utils'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
@@ -60,6 +61,7 @@ export function useAuxiliaryDrawing(id) {
 
   const outerLineDiagonalLengthRef = useRef(0)
   const intersectionPoints = useRef([])
+  const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
 
   useEffect(() => {
     arrow1Ref.current = arrow1
@@ -100,6 +102,10 @@ export function useAuxiliaryDrawing(id) {
     }
   }, [])
 
+  useEffect(() => {
+    addCanvasMouseEventListener('mouse:down', mouseDown)
+  }, [verticalHorizontalMode])
+
   const clear = () => {
     addCanvasMouseEventListener('mouse:move', mouseMove)
     setLength1(0)
@@ -453,11 +459,26 @@ export function useAuxiliaryDrawing(id) {
 
   const mouseDown = (e) => {
     canvas.renderAll()
-    const pointer = getIntersectMousePoint(e)
+    let pointer = getIntersectMousePoint(e)
 
-    mousePointerArr.current.push(pointer)
-    if (mousePointerArr.current.length === 2) {
-      drawLine(mousePointerArr.current[0], mousePointerArr.current[1])
+    if (mousePointerArr.current.length === 1) {
+      const currentPoint = canvas.getPointer(e.e)
+      const prevPoint = mousePointerArr.current[0]
+
+      const degreeByTwoPoints = calculateAngle(prevPoint, currentPoint)
+
+      const degree = Math.round(degreeByTwoPoints / 45) * 45
+
+      if (verticalHorizontalMode) {
+        pointer = {
+          x: prevPoint.x + distanceBetweenPoints(currentPoint, prevPoint) * Math.cos((degree * Math.PI) / 180),
+          y: prevPoint.y + distanceBetweenPoints(currentPoint, prevPoint) * Math.sin((degree * Math.PI) / 180),
+        }
+      }
+
+      mousePointerArr.current.push(pointer)
+
+      drawLine()
     } else {
       const circle = new fabric.Circle({
         radius: 3,
@@ -471,6 +492,7 @@ export function useAuxiliaryDrawing(id) {
       })
       canvas.add(circle)
       canvas.renderAll()
+      mousePointerArr.current.push(pointer)
     }
   }
 
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 3fbf1388..a976c0aa 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -401,7 +401,7 @@ export const usePolygon = () => {
   const addTextByArrows = (arrows, txt, canvas) => {
     arrows.forEach((arrow, index) => {
       const text = new fabric.Text(`${txt}${index + 1} (${arrow.pitch}寸)`, {
-        fontSize: arrow.parent.fontSize,
+        fontSize: fontSize,
         fill: 'black',
         originX: 'center',
         originY: 'center',