diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index 9f9e4ea0..f3c6dee8 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -1,4 +1,4 @@ -import { useRef } from 'react' +import { useEffect, useRef } from 'react' import { useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { fabric } from 'fabric' @@ -25,6 +25,7 @@ export function useEvent() { const setCanvasZoom = useSetRecoilState(canvasZoomState) const gridColor = useRecoilValue(gridColorState) const isGridDisplay = useRecoilValue(gridDisplaySelector) + const zoom = useRecoilValue(canvasZoomState) const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint() const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid() @@ -59,6 +60,12 @@ export function useEvent() { addDefaultEvent() } + useEffect(() => { + if (canvas) { + addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent) + } + }, [zoom]) + const addDefaultEvent = () => { //default Event 추가 addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent) @@ -280,7 +287,7 @@ export function useEvent() { } const drawMouseLine = (pointer) => { - const horizontalLine = new fabric.Line([-4 * canvas.width, pointer.y, 4 * canvas.width, pointer.y], { + const horizontalLine = new fabric.Line([-2 * canvas.width, pointer.y, 2 * canvas.width, pointer.y], { stroke: 'red', strokeWidth: 1, selectable: false, @@ -288,7 +295,7 @@ export function useEvent() { }) // 세로선 - const verticalLine = new fabric.Line([pointer.x, -4 * canvas.height, pointer.x, 4 * canvas.height], { + const verticalLine = new fabric.Line([pointer.x, -2 * canvas.height, pointer.x, 2 * canvas.height], { stroke: 'red', strokeWidth: 1, selectable: false,