보조선 작성 수직 수평모드 추가

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">

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)
     }
   }
 

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',