diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index cf1d1951..ff134358 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -16,6 +16,7 @@ import { useTempGrid } from '@/hooks/useTempGrid' import { gridColorState } from '@/store/gridAtom' import { gridDisplaySelector } from '@/store/settingAtom' import { MENU, POLYGON_TYPE } from '@/common/common' +import { useMouse } from '@/hooks/useMouse' export function useEvent() { const canvas = useRecoilValue(canvasState) @@ -35,6 +36,8 @@ export function useEvent() { const textMode = useRecoilValue(textModeState) + const { getIntersectMousePoint } = useMouse() + // 이벤트 초기화 위치 수정 -> useCanvasSetting에서 세팅값 불러오고 나서 초기화 함수 호출 // useEffect(() => { // initEvent() @@ -97,17 +100,16 @@ export function useEvent() { if (zoom < 0.5) zoom = 0.5 setCanvasZoom(Number((zoom * 100).toFixed(0))) - + const { x, y } = getIntersectMousePoint(opt) // 마우스 위치 기준으로 확대/축소 - canvas.zoomToPoint(new fabric.Point(opt.e.offsetX, opt.e.offsetY), zoom) - canvas.calcOffset() - canvas.setViewportTransform(canvas.viewportTransform) - canvas.requestRenderAll() + canvas.zoomToPoint(new fabric.Point(x, y), zoom) canvas.getObjects().forEach((obj) => { obj.setCoords() }) + canvas.renderAll() + // 이벤트의 기본 동작 방지 (스크롤 방지) opt.e.preventDefault() opt.e.stopPropagation() @@ -138,7 +140,17 @@ export function useEvent() { return } - const intersectionPoint = calculateIntersection(line1, line2) + const intersectionPoint = calculateIntersection(line1, line2) // 보조선끼리 만나는 점 + + const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 외벽선 + + outerLines.forEach((outerLine) => { + const outerIntersectionPoint = calculateIntersection(outerLine, line1) // 외벽선과 보조선의 교차점 + if (outerIntersectionPoint) { + intersectionPoints.current.push(outerIntersectionPoint) + } + }) + if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) { return } @@ -147,6 +159,7 @@ export function useEvent() { }) let innerLinePoints = [] + let outerLinePoints = [] canvas .getObjects() .filter((obj) => obj.innerLines) @@ -157,12 +170,19 @@ export function useEvent() { }) }) + const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') + outerLines.forEach((line) => { + outerLinePoints.push({ x: line.x2, y: line.y2 }) + outerLinePoints.push({ x: line.x1, y: line.y1 }) + }) + const adsorptionPoints = [ ...getAdsorptionPoints(), ...roofAdsorptionPoints.current, ...otherAdsorptionPoints, ...intersectionPoints.current, ...innerLinePoints, + ...outerLinePoints, ] if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 1) { @@ -354,15 +374,10 @@ export function useEvent() { canvas.renderAll() } - const defaultKeyboardEvent = (e) => { - if (e.key === 'Escape') { - console.log('defaultKeyboardEvent') - } - } - const addCanvasMouseEventListener = (eventType, handler) => { canvas.off(eventType) canvas.on(eventType, handler) + canvas.on('mouse:move', defaultMouseMoveEvent) // default mouse:move 이벤트는 항상 등록 mouseEventListeners.current.push({ eventType, handler }) }