diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js index db0859cf..d53faa39 100644 --- a/src/hooks/surface/usePlacementShapeDrawing.js +++ b/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()