지붕 방위 추가

src/hooks/useCanvas.js

@@ -113,6 +113,10 @@ export function useCanvas(id) {
 
     if (target.name === 'trestle') {
       target.on('mousedown', () => {
+        if (target.defense === 'north') {
+          alert('북쪽은 선택 불가합니다.')
+          return
+        }
         if (target.get('selected')) {
           target.set({ strokeWidth: 1 })
           target.set({ strokeDashArray: [5, 5] })

src/hooks/useMode.js

@@ -4293,6 +4293,7 @@ export function useMode() {
         selectable: false,
         fontSize: fontSize,
         name: 'trestle',
+        defense: roof.defense,
         lockMovementX: true, // X 축 이동 잠금
         lockMovementY: true, // Y 축 이동 잠금
         lockRotation: true, // 회전 잠금
@@ -4304,6 +4305,7 @@ export function useMode() {
 
       canvas?.add(trestlePoly)
     })
+    removeHelpPointAndHelpLine()
   }
 
   //배터리 셀 넣기
@@ -4556,6 +4558,19 @@ export function useMode() {
       })
   }
 
+  const removeHelpPointAndHelpLine = () => {
+    const helpPoints = canvas?.getObjects().filter((obj) => obj.name === 'helpPoint')
+    helpPoints.forEach((point) => {
+      canvas?.remove(point)
+    })
+
+    const helpLines = canvas?.getObjects().filter((obj) => obj.name === 'helpLine')
+    helpLines.forEach((line) => {
+      canvas?.remove(line)
+    })
+    canvas?.renderAll()
+  }
+
   return {
     mode,
     setMode,

src/util/qpolygon-utils.js

@@ -1128,6 +1128,24 @@ export const splitPolygonWithLines = (polygon) => {
   })
 
   roofs.forEach((roofPoint, index) => {
+    let defense
+    const direction = getDirectionByPoint(roofPoint[0], roofPoint[roofPoint.length - 1])
+
+    switch (direction) {
+      case 'top':
+        defense = 'east'
+        break
+      case 'right':
+        defense = 'south'
+        break
+      case 'bottom':
+        defense = 'west'
+        break
+      case 'left':
+        defense = 'north'
+        break
+    }
+
     const roof = new QPolygon(roofPoint, {
       fontSize: polygon.fontSize,
       stroke: 'black',
@@ -1135,7 +1153,7 @@ export const splitPolygonWithLines = (polygon) => {
       strokeWidth: 3,
       name: 'roof',
       selectable: false,
-      startDirection: polygon.lines[index].direction,
+      defense: defense,
     })
 
     polygon.canvas.add(roof)