diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index 55058cf4..cd2775a9 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -2,7 +2,7 @@ import { useRef } from 'react' import { useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { fabric } from 'fabric' -import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util' +import { calculateDistance, calculateDistancePoint, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util' import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' import { useDotLineGrid } from '@/hooks/useDotLineGrid' import { useTempGrid } from '@/hooks/useTempGrid' @@ -101,10 +101,31 @@ export function useEvent() { if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) { const closestLine = getClosestLineGrid(pointer) - if (closestLine) { - const distance = calculateDistance(pointer, closestLine) + const horizonLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'horizontal') + const verticalLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'vertical') - if (distance < adsorptionRange) { + const closestHorizontalLine = horizonLines.reduce((prev, curr) => { + const prevDistance = calculateDistance(pointer, prev) + const currDistance = calculateDistance(pointer, curr) + return prevDistance < currDistance ? prev : curr + }) + + const closestVerticalLine = verticalLines.reduce((prev, curr) => { + const prevDistance = calculateDistance(pointer, prev) + const currDistance = calculateDistance(pointer, curr) + return prevDistance < currDistance ? prev : curr + }) + + const closestIntersectionPoint = calculateIntersection(closestHorizontalLine, closestVerticalLine) + + if (closestLine) { + const distanceClosestLine = calculateDistance(pointer, closestLine) + let distanceClosestPoint = Infinity + if (closestIntersectionPoint) { + distanceClosestPoint = calculateDistancePoint(pointer, closestIntersectionPoint) + } + + if (distanceClosestLine < adsorptionRange) { arrivalPoint = closestLine.direction === 'vertical' ? { x: closestLine.x1, y: pointer.y } @@ -112,6 +133,10 @@ export function useEvent() { x: pointer.x, y: closestLine.y1, } + + if (distanceClosestPoint * 2 < adsorptionRange) { + arrivalPoint = { ...closestIntersectionPoint } + } } } }