수동셀 추가

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