흡착점 추가

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.zoomToPoint(new fabric.Point(x, y), zoom)
-    canvas.calcOffset()
-    canvas.setViewportTransform(canvas.viewportTransform)
-    canvas.requestRenderAll()
 
     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 })
   }