수동 셀 작업 추가

src/hooks/useMode.js

@@ -4871,9 +4871,11 @@ export function useMode() {
       let turfPolygon
       let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
       let direction
+
       canvas.on('mouse:move', (e) => {
         //마우스 이벤트 삭제 후 재추가
         const mousePoint = canvas.getPointer(e.e)
+
         for (let i = 0; i < trestlePolygons.length; i++) {
           turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
           direction = trestlePolygons[i].direction //도형의 방향
@@ -4890,27 +4892,28 @@ export function useMode() {
           const turfPoints = coordToTurfPolygon(points)
 
           if (turf.booleanWithin(turfPoints, turfPolygon)) {
-            //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
-
-            // if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
             let isDrawing = false
 
             if (isDrawing) return
             canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
 
-            fabricPolygon = new QPolygon(points, {
+            fabricPolygon = new fabric.Rect({
-              fill: '#BFFD9F',
+              fill: 'white',
-              // stroke: 'black',
+              stroke: 'black',
-              // strokeWidth: 1,
+              strokeWidth: 1,
-              selectable: false, // 선택 가능하게 설정
+              width: width,
-              lockMovementX: true, // X 축 이동 잠금
+              height: height,
-              lockMovementY: true, // Y 축 이동 잠금
+              left: mousePoint.x - width / 2,
-              lockRotation: true, // 회전 잠금
+              top: mousePoint.y - height / 2,
-              lockScalingX: true, // X 축 크기 조정 잠금
+              selectable: false,
-              lockScalingY: true, // Y 축 크기 조정 잠금
+              lockMovementX: true,
+              lockMovementY: true,
+              lockRotation: true,
+              lockScalingX: true,
+              lockScalingY: true,
               opacity: 0.8,
-              parentId: trestlePolygons[i].parentId,
               name: 'tmpCell',
+              parentId: trestlePolygons[i].parentId,
             })
 
             canvas?.add(fabricPolygon) //움직여가면서 추가됨
@@ -4918,67 +4921,127 @@ export function useMode() {
             /**
              * 스냅기능
              */
-            let snapDistance = 20
+            let snapDistance = 10
+            let cellSnapDistance = 20
 
-            const bigLeft = trestlePolygons[i].left
+            const trestleLeft = trestlePolygons[i].left
-            const bigTop = trestlePolygons[i].top
+            const trestleTop = trestlePolygons[i].top
-            const bigRight = bigLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
+            const trestleRight = trestleLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
-            const bigBottom = bigTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
+            const trestleBottom = trestleTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
-            const bigCenter = (bigTop + bigTop + trestlePolygons[i].height) / 2
+            const bigCenterY = (trestleTop + trestleTop + trestlePolygons[i].height) / 2
 
             // 작은 폴리곤의 경계 좌표 계산
             const smallLeft = fabricPolygon.left
             const smallTop = fabricPolygon.top
             const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX
             const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY
-            const smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
+            const smallCenterX = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
+            const smallCenterY = smallTop + (fabricPolygon.height * fabricPolygon.scaleX) / 2
+
+            /**
+             * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
+             */
+            if (manualDrawCells) {
+              manualDrawCells.forEach((cell) => {
+                const holdCellLeft = cell.left
+                const holdCellTop = cell.top
+                const holdCellRight = holdCellLeft + cell.width * cell.scaleX
+                const holdCellBottom = holdCellTop + cell.height * cell.scaleY
+                const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
+                const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
+
+                //설치된 셀에 좌측에 스냅
+                if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                  fabricPolygon.left = holdCellLeft - width - 0.5
+                }
+
+                //설치된 셀에 우측에 스냅
+                if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                  fabricPolygon.left = holdCellRight + 0.5
+                }
+
+                //설치된 셀에 위쪽에 스냅
+                if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                  fabricPolygon.top = holdCellTop - height - 0.5
+                }
+
+                //설치된 셀에 밑쪽에 스냅
+                if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                  fabricPolygon.top = holdCellBottom + 0.5
+                }
+                //가운데 -> 가운데
+                if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
+                  fabricPolygon.left = holdCellCenterX - width / 2
+                }
+                //왼쪽 -> 가운데
+                if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
+                  fabricPolygon.left = holdCellCenterX
+                }
+                // 오른쪽 -> 가운데
+                if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
+                  fabricPolygon.left = holdCellCenterX - width
+                }
+                //세로 가운데 -> 가운데
+                if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
+                  fabricPolygon.top = holdCellCenterY - height / 2
+                }
+                //위쪽 -> 가운데
+                if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
+                  fabricPolygon.top = holdCellCenterY
+                }
+                //아랫쪽 -> 가운데
+                if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
+                  fabricPolygon.top = holdCellCenterY - height
+                }
+              })
+            }
 
             // 위쪽 변에 스냅
-            if (Math.abs(smallTop - bigTop) < snapDistance) {
+            if (Math.abs(smallTop - trestleTop) < snapDistance) {
-              fabricPolygon.top = bigTop
+              fabricPolygon.top = trestleTop
             }
 
             // 아래쪽 변에 스냅
-            if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (bigTop + trestlePolygons[i].height)) < snapDistance) {
+            if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (trestleTop + trestlePolygons[i].height)) < snapDistance) {
-              fabricPolygon.top = bigTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
+              fabricPolygon.top = trestleTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
             }
 
             // 왼쪽변에 스냅
-            if (Math.abs(smallLeft - bigLeft) < snapDistance) {
+            if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
-              fabricPolygon.left = bigLeft
+              fabricPolygon.left = trestleLeft
             }
             //오른쪽 변에 스냅
-            if (Math.abs(smallRight - bigRight) < snapDistance) {
+            if (Math.abs(smallRight - trestleRight) < snapDistance) {
-              fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
+              fabricPolygon.left = trestleRight - fabricPolygon.width * fabricPolygon.scaleX
             }
 
             if (direction === 'south' || direction === 'north') {
               // 모듈왼쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallLeft - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+              if (Math.abs(smallLeft - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2
+                fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2
               }
 
               // 모듈이 가운데가 세로중앙선에 붙게 스냅
-              if (Math.abs(smallCenter - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+              if (Math.abs(smallCenterX - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
+                fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
               }
 
               // 모듈오른쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallRight - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
+              if (Math.abs(smallRight - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
+                fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
               }
             } else {
               // 모듈이 가로중앙선에 스냅
-              if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenter) < snapDistance) {
+              if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenterY) < snapDistance) {
-                fabricPolygon.top = bigCenter - fabricPolygon.height / 2
+                fabricPolygon.top = bigCenterY - fabricPolygon.height / 2
               }
 
-              if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
+              if (Math.abs(smallTop - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
-                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
+                fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2
               }
               // 모듈 밑면이 가로중앙선에 스냅
-              if (Math.abs(smallBottom - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
+              if (Math.abs(smallBottom - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
-                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
+                fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
               }
             }
 
@@ -4999,27 +5062,34 @@ export function useMode() {
       canvas?.on('mouse:up', (e) => {
         if (!inside) return
         if (fabricPolygon) {
-          const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
+          const rectPoints = [
+            { x: fabricPolygon.left + 0.1, y: fabricPolygon.top + 0.1 },
+            { x: fabricPolygon.left + 0.1 + fabricPolygon.width * fabricPolygon.scaleX, y: fabricPolygon.top + 0.1 },
+            {
+              x: fabricPolygon.left + fabricPolygon.width * fabricPolygon.scaleX + 0.1,
+              y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.1,
+            },
+            { x: fabricPolygon.left + 0.1, y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.1 },
+          ]
+
+          fabricPolygon.set({ points: rectPoints })
+          const tempTurfModule = polygonToTurfPolygon(fabricPolygon)
+
           fabricPolygon.setCoords() //좌표 재정렬
-          if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
+          if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
             //마우스 클릭시 set으로 해당 위치에 셀을 넣음
 
-            manualDrawCells.forEach((cell) => {
+            const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell)))
-              console.log('cells', cell.points)
-            })
-            console.log('turfCellPolygon', turfCellPolygon.geometry.coordinates)
-
-            const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
             if (!isOverlap) {
               //안겹치면 넣는다
               fabricPolygon.setCoords()
-              fabricPolygon.set({ name: 'cell' })
+              fabricPolygon.set({ name: 'cell', fill: '#BFFD9F' })
               manualDrawCells.push(fabricPolygon)
             } else {
               alert('셀끼리 겹치면 안되죠?')
             }
-            // } else {
+          } else {
-            //   alert('나갔으요!!')
+            alert('나갔으요!!')
           }
           setDrewRoofCells(manualDrawCells)
         }