polygon 이동 시 묶여있는 arrow도 재 생성

src/components/fabric/QPolygon.js

@@ -127,6 +127,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.on('modified', (e) => {
       this.addLengthText()
+      if (this.arrow) {
+        drawDirectionArrow(this)
+      }
     })
 
     this.on('selected', () => {

src/hooks/useMode.js

@@ -32,7 +32,7 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import offsetPolygon from '@/util/qpolygon-utils'
+import offsetPolygon, { inPolygon } from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
 import { Mode } from '@/common/common'
@@ -1061,8 +1061,25 @@ export function useMode() {
       origY: 0,
       down: (o) => {
         if (mode !== Mode.OPENING) return
-        mouseEvent.openingMode.isDown = true
+        const roofs = canvas?._objects.filter((obj) => obj.name === 'roof')
+        if (roofs.length === 0) {
+          alert('지붕을 먼저 그려주세요')
+          setMode(Mode.DEFAULT)
+          return
+        }
         const pointer = canvas.getPointer(o.e)
+        let selectRoof = null
+        roofs.forEach((roof) => {
+          if (roof.inPolygon({ x: pointer.x, y: pointer.y })) {
+            selectRoof = roof
+          }
+        })
+        if (!selectRoof) {
+          alert('지붕 내부에만 생성 가능합니다.')
+          return
+        }
+        mouseEvent.openingMode.isDown = true
+
         mouseEvent.openingMode.origX = pointer.x
         mouseEvent.openingMode.origY = pointer.y
         mouseEvent.openingMode.rect = new fabric.Rect({
@@ -1123,17 +1140,21 @@ export function useMode() {
       return false
     }
 
+    const rectPoints = [
+      { x: rect.left, y: rect.top },
+      { x: rect.left, y: rect.top + rect.height },
+      { x: rect.left + rect.width, y: rect.top + rect.height },
+      { x: rect.left + rect.width, y: rect.top },
+    ]
+
     for (let i = 0; i < openings.length; i++) {
       const rect2 = openings[i]
-      // Check if one rectangle is to the left of the other
+      const rect2Points = [
-      if (rect.x + rect.width <= rect2.x || rect2.x + rect2.width <= rect.x) {
+        { x: rect2.left, y: rect2.top },
-        return true
+        { x: rect2.left, y: rect2.top + rect2.height },
-      }
+        { x: rect2.left + rect2.width, y: rect2.top + rect2.height },
-
+        { x: rect2.left + rect2.width, y: rect2.top },
-      // Check if one rectangle is above the other
+      ]
-      if (rect.y + rect.height <= rect2.y || rect2.y + rect2.height <= rect.y) {
-        return true
-      }
     }
 
     return false
@@ -1147,6 +1168,7 @@ export function useMode() {
       canvas?.remove(rect)
       return false
     }
+
     return result
   }
 

src/store/canvasAtom.js

@@ -171,5 +171,5 @@ export const surfacePlacementModeState = atom({
 // 오브젝트 배치 모드
 export const objectPlacementModeState = atom({
   key: 'objectPlacementMode',
-  default: { width: 0, height: 0, areaBoundary: true, inputType: 'free', batchType: 'opening' },
+  default: { width: 0, height: 0, areaBoundary: false, inputType: 'free', batchType: 'opening' },
 })

src/util/qpolygon-utils.js

@@ -2714,6 +2714,12 @@ export const drawDirectionArrow = (polygon) => {
   if (!direction) {
     return
   }
+
+  polygon.canvas
+    .getObjects()
+    .filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
+    .forEach((obj) => polygon.canvas.remove(obj))
+
   let arrow = null
   let points = []
 
@@ -2721,13 +2727,13 @@ export const drawDirectionArrow = (polygon) => {
     polygon.canvas.remove(polygon.arrow)
   }
 
-  let centerPoint = polygon.getCenterPoint()
+  let centerPoint = { x: polygon.width / 2 + polygon.left, y: polygon.height / 2 + polygon.top }
   let stickeyPoint
 
-  const polygonMaxX = Math.max(...polygon.points.map((point) => point.x))
+  const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
-  const polygonMinX = Math.min(...polygon.points.map((point) => point.x))
+  const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
-  const polygonMaxY = Math.max(...polygon.points.map((point) => point.y))
+  const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
-  const polygonMinY = Math.min(...polygon.points.map((point) => point.y))
+  const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
 
   switch (direction) {
     case 'north':
@@ -2800,6 +2806,7 @@ export const drawDirectionArrow = (polygon) => {
   polygon.arrow = arrow
   polygon.canvas.add(arrow)
   polygon.canvas.renderAll()
+  drawDirectionStringToArrow(polygon.canvas, 0)
 }
 
 /**
@@ -2807,7 +2814,7 @@ export const drawDirectionArrow = (polygon) => {
  * @param canvas
  * @param compass
  */
-export const drawDirectionStringToArrow = (canvas, compass, fontSize) => {
+export const drawDirectionStringToArrow = (canvas, compass = 0) => {
   const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
 
   if (arrows.length === 0) {
@@ -3000,8 +3007,10 @@ const addTextByArrows = (arrows, txt, canvas) => {
       originX: 'center',
       originY: 'center',
       name: 'directionText',
+      selectable: false,
       left: arrow.stickeyPoint.x,
       top: arrow.stickeyPoint.y,
+      parent: arrow,
     })
     canvas.add(text)
   })