zoom값에 따라 mouseLine 안그려지는 부분 수정

This commit is contained in:
hyojun.choi 2025-06-04 15:45:30 +09:00
parent ab93c5ffe5
commit bcb8a11d5a

View File

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