diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 978c342b..c2b29121 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -38,6 +38,7 @@ import { isObjectNotEmpty } from '@/util/common-utils' import * as turf from '@turf/turf' import { INPUT_TYPE, Mode } from '@/common/common' import { m } from 'framer-motion' +import { set } from 'react-hook-form' export function useMode() { const [mode, setMode] = useRecoilState(modeState) @@ -4949,25 +4950,26 @@ export function useMode() { if (trestlePolygons.length !== 0) { let lastPointPosition = { x: 0, y: 0 } + let fabricPolygon = null + let inside = false + let turfPolygon + let manualDrawCells = drewRoofCells // - canvas.off() canvas.on('mouse:move', (e) => { //마우스 이벤트 삭제 후 재추가 const mousePoint = canvas.getPointer(e.e) const turfPoint = turf.point([mousePoint.x, mousePoint.y]) - let inside = false - for (let i = 0; i < trestlePolygons.length; i++) { - const turfPolygon = polygonToTurfPolygon(trestlePolygons[i]) + turfPolygon = polygonToTurfPolygon(trestlePolygons[i]) if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) { //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다 const direction = trestlePolygons[i].direction //도형의 방향 let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4 let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2 - if (Math.abs(mousePoint.x - lastPointPosition.x) >= 4 || Math.abs(mousePoint.y - lastPointPosition.y) >= 4) { + if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) { let isDrawing = false - let fabricPolygon + if (isDrawing) return canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임 @@ -4981,7 +4983,7 @@ export function useMode() { fabricPolygon = new QPolygon(points, { fill: '#BFFD9F', stroke: 'black', - selectable: true, // 선택 가능하게 설정 + selectable: false, // 선택 가능하게 설정 lockMovementX: true, // X 축 이동 잠금 lockMovementY: true, // Y 축 이동 잠금 lockRotation: true, // 회전 잠금 @@ -4994,17 +4996,13 @@ export function useMode() { canvas?.add(fabricPolygon) //움직여가면서 추가됨 lastPointPosition = { x: mousePoint.x, y: mousePoint.y } - - canvas?.on('mouse:up', (e) => { - //마우스 클릭시 set으로 해당 위치에 셀을 넣음 - fabricPolygon.set({ name: 'cell' }) - fabricPolygon.setCoords() - }) } canvas?.renderAll() inside = true break + } else { + inside = false } } @@ -5013,6 +5011,29 @@ export function useMode() { canvas?.renderAll() } }) + + canvas?.on('mouse:up', (e) => { + if (!inside) return + if (fabricPolygon) { + const turfCellPolygon = polygonToTurfPolygon(fabricPolygon) + + if (turf.booleanWithin(turfCellPolygon, turfPolygon)) { + //마우스 클릭시 set으로 해당 위치에 셀을 넣음 + const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell))) + if (!isOverlap) { + //안겹치면 넣는다 + fabricPolygon.set({ name: 'cell' }) + fabricPolygon.setCoords() + manualDrawCells.push(fabricPolygon) + } else { + alert('셀끼리 겹치면 안되죠?') + } + } else { + alert('나갔으요!!') + } + setDrewRoofCells(manualDrawCells) + } + }) } } @@ -5086,6 +5107,7 @@ export function useMode() { // console.log('bbox', bbox) const boxes = [] + const installedCellsArray = [] for (let x = bbox[0]; x < bbox[2]; x += width) { for (let y = bbox[1]; y < bbox[3]; y += height) { @@ -5193,6 +5215,7 @@ export function useMode() { parentId: trestle.parentId, }) canvas?.add(fabricPolygon) + drawCellsArray.push(fabricPolygon) } } else { //도머가 없을땐 그냥 그림 @@ -5209,6 +5232,7 @@ export function useMode() { parentId: trestle.parentId, }) canvas?.add(fabricPolygon) + drawCellsArray.push(fabricPolygon) } } }