turf 이용 inPolygon2 추가

package.json

@@ -29,6 +29,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@turf/turf": "^7.0.0",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "prisma": "^5.18.0",

src/components/fabric/QPolygon.js

@@ -2,7 +2,8 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, dividePolygon, drawHelpLineInHexagon } from '@/util/qpolygon-utils'
+import { calculateAngle, drawHippedRoof, splitPolygonWithLines, toGeoJSON } from '@/util/qpolygon-utils'
+import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -238,12 +239,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
         const rectPoints = [
           { x: rectLeft, y: rectTop },
-          { x: rectLeft + rectWidth, y: rectTop },
           { x: rectLeft, y: rectTop + rectHeight },
           { x: rectLeft + rectWidth, y: rectTop + rectHeight },
+          { x: rectLeft + rectWidth, y: rectTop },
         ]
 
-        const allPointsInside = rectPoints.every((point) => this.inPolygon(point))
+        const allPointsInside = this.inPolygon2(rectPoints)
 
         if (allPointsInside) {
           const rect = new fabric.Rect({
@@ -593,6 +594,38 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     return inside
   },
 
+  inPolygon2(rectPoints) {
+    const polygonCoords = toGeoJSON(this.points)
+    const rectCoords = toGeoJSON(rectPoints)
+
+    const outerPolygon = turf.polygon([polygonCoords])
+    const innerPolygon = turf.polygon([rectCoords])
+    // 각 점이 다각형 내부에 있는지 확인
+    const allPointsInside = rectCoords.every((coord) => {
+      const point = turf.point(coord)
+      return turf.booleanPointInPolygon(point, outerPolygon)
+    })
+
+    // 사각형의 변 정의
+    const rectEdges = [
+      [rectCoords[0], rectCoords[1]],
+      [rectCoords[1], rectCoords[2]],
+      [rectCoords[2], rectCoords[3]],
+      [rectCoords[3], rectCoords[0]],
+    ]
+
+    // 다각형의 변 정의
+    const outerEdges = turf.lineString(outerPolygon.geometry.coordinates[0])
+
+    // 사각형의 변들이 다각형의 변과 교차하는지 확인
+    const noEdgesIntersect = rectEdges.every((edge) => {
+      const line = turf.lineString(edge)
+      const intersects = turf.lineIntersect(line, outerEdges)
+      return intersects.features.length === 0
+    })
+
+    return allPointsInside && noEdgesIntersect
+  },
   distanceFromEdge(point) {
     const vertices = this.getCurrentPoints()
     let minDistance = Infinity

src/util/qpolygon-utils.js

@@ -2660,3 +2660,13 @@ function arraysHaveSamePoints(array1, array2) {
 
   return true
 }
+
+export const toGeoJSON = (pointsArray) => {
+  // 객체 배열을 GeoJSON 형식의 좌표 배열로 변환
+  const coordinates = pointsArray.map((point) => [point.x, point.y])
+
+  // 닫힌 다각형을 만들기 위해 첫 번째 점을 마지막에 추가
+  coordinates.push([pointsArray[0].x, pointsArray[0].y])
+
+  return coordinates
+}