Merge pull request '939 - 배치면 그리기에 흡착점 추가' (#34) from feature/ysCha into dev

Reviewed-on: #34

src/hooks/surface/usePlacementShapeDrawing.js

@@ -14,7 +14,7 @@ import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import {
@@ -37,12 +37,13 @@ import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
+import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 
 // 배치면 그리기
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseLine } =
     useEvent()
   // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
   //   useContext(EventContext)
@@ -118,6 +119,7 @@ export function usePlacementShapeDrawing(id) {
   }, [type])
 
   const clear = () => {
+    addCanvasMouseEventListener('mouse:move', mouseMove)
     setLength1(0)
     setLength2(0)
 
@@ -173,6 +175,80 @@ export function usePlacementShapeDrawing(id) {
     }
   }
 
+/*
+mouseMove
+ */
+  const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+  const roofAdsorptionPoints = useRef([])
+  const intersectionPoints = useRef([])
+  const { getAdsorptionPoints } = useAdsorptionPoint()
+
+  const mouseMove = (e) => {
+    removeMouseLine();
+    const pointer = canvas.getPointer(e.e)
+    const roofsPoints = roofs.map((roof) => roof.points).flat()
+    roofAdsorptionPoints.current = [...roofsPoints]
+
+    const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
+    const otherAdsorptionPoints = []
+
+    auxiliaryLines.forEach((line1) => {
+      auxiliaryLines.forEach((line2) => {
+        if (line1 === line2) {
+          return
+        }
+
+        const intersectionPoint = calculateIntersection(line1, line2)
+        if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+          return
+        }
+        otherAdsorptionPoints.push(intersectionPoint)
+      })
+    })
+
+    let innerLinePoints = []
+    canvas
+      .getObjects()
+      .filter((obj) => obj.innerLines)
+      .forEach((polygon) => {
+        polygon.innerLines.forEach((line) => {
+          innerLinePoints.push({ x: line.x1, y: line.y1 })
+          innerLinePoints.push({ x: line.x2, y: line.y2 })
+        })
+      })
+
+    const adsorptionPoints = [
+      ...getAdsorptionPoints(),
+      ...roofAdsorptionPoints.current,
+      ...otherAdsorptionPoints,
+      ...intersectionPoints.current,
+      ...innerLinePoints,
+    ]
+
+    let arrivalPoint = { x: pointer.x, y: pointer.y }
+    let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints)
+
+    if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) {
+      arrivalPoint = { ...adsorptionPoint }
+    }
+    const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+    canvas?.add(horizontalLine, verticalLine)
+    canvas?.renderAll()
+
+  }
+
   useEffect(() => {
     canvas
       ?.getObjects()