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