From bcdb6a8d82e533266aaeda632526b1dcde2ba569 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 25 Feb 2025 13:04:43 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=20=ED=9D=A1?=
 =?UTF-8?q?=EC=B0=A9=20=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEvent.js | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

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 }
+            }
           }
         }
       }