qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hyojun.choi 2025-06-04 15:45:30 +09:00
parent ab93c5ffe5
commit bcb8a11d5a
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/hooks/useEvent.js
View File

@ -1,4 +1,4 @@
import { useRef } from 'react' import { useEffect, useRef } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil' import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric' import { fabric } from 'fabric'
@ -25,6 +25,7 @@ export function useEvent() {
const setCanvasZoom = useSetRecoilState(canvasZoomState) const setCanvasZoom = useSetRecoilState(canvasZoomState)
const gridColor = useRecoilValue(gridColorState) const gridColor = useRecoilValue(gridColorState)
const isGridDisplay = useRecoilValue(gridDisplaySelector) const isGridDisplay = useRecoilValue(gridDisplaySelector)
const zoom = useRecoilValue(canvasZoomState)
const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint() const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid() const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
@ -59,6 +60,12 @@ export function useEvent() {
addDefaultEvent() addDefaultEvent()
} }
useEffect(() => {
if (canvas) {
addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
}
}, [zoom])
const addDefaultEvent = () => { const addDefaultEvent = () => {
//default Event 추가 //default Event 추가
addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent) addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
@ -280,7 +287,7 @@ export function useEvent() {
} }
const drawMouseLine = (pointer) => { 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', stroke: 'red',
strokeWidth: 1, strokeWidth: 1,
selectable: false, 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', stroke: 'red',
strokeWidth: 1, strokeWidth: 1,
selectable: false, selectable: false,