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

{getMessage('modal.cover.outline.drawing')}

- {/* +
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',