diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index d701bcd9..9f9e4ea0 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -160,6 +160,7 @@ export function useEvent() { const verticalLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'vertical') if (!horizonLines || !verticalLines) { + drawMouseLine(pointer) return } @@ -183,6 +184,7 @@ export function useEvent() { } if (!closestVerticalLine || !closestHorizontalLine) { + drawMouseLine(pointer) return } @@ -271,7 +273,14 @@ export function useEvent() { console.error(e) } - const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], { + drawMouseLine(arrivalPoint) + + // 캔버스를 다시 그립니다. + canvas?.renderAll() + } + + const drawMouseLine = (pointer) => { + const horizontalLine = new fabric.Line([-4 * canvas.width, pointer.y, 4 * canvas.width, pointer.y], { stroke: 'red', strokeWidth: 1, selectable: false, @@ -279,7 +288,7 @@ export function useEvent() { }) // 세로선 - const verticalLine = new fabric.Line([arrivalPoint.x, -4 * canvas.height, arrivalPoint.x, 4 * canvas.height], { + const verticalLine = new fabric.Line([pointer.x, -4 * canvas.height, pointer.x, 4 * canvas.height], { stroke: 'red', strokeWidth: 1, selectable: false, @@ -288,9 +297,6 @@ export function useEvent() { // 선들을 캔버스에 추가합니다. canvas?.add(horizontalLine, verticalLine) - - // 캔버스를 다시 그립니다. - canvas?.renderAll() } const removeMouseLine = () => {