그리드 흡착 내용 수정

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 horizonLines = canvas.getObjects().filter((obj) => obj.name === 'lineGrid' && obj.direction === 'horizontal')
-          const distance = calculateDistance(pointer, closestLine)
+        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 }
+            }
           }
         }
       }