src/components/fabric/QPolygon.js

@@ -272,21 +272,33 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.lines.forEach((line) => types.push(line.attributes.type))
 
     const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+    const isEaves = types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
 
+    let isGable = false
+    if (types.includes(LINE_TYPE.WALLLINE.GABLE)) {
+      const gableOdd = types.filter((type, i) => i % 2 === 0)
+      const gableEven = types.filter((type, i) => i % 2 === 1)
+      if (
+        (gableOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableEven.every((type) => gableType.includes(type))) ||
+        (gableEven.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableOdd.every((type) => gableType.includes(type)))
+      ) {
+        isGable = true
+      }
+    }
     const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
-
-    if (hasShed) {
+    let isShed = false
+    if (types.includes(LINE_TYPE.WALLLINE.SHED)) {
       const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
       const areLinesParallel = function (line1, line2) {
         const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
         const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
         return angle1 === angle2
       }
-
       let isShedRoof = true
       sheds.forEach((shed, i) => {
         isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
       })
+
       if (isShedRoof) {
         const eaves = this.lines
           .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
@@ -301,17 +313,23 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
           const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
           const isGable = gables.every((line) => gableType.includes(line.attributes.type))
           if (isGable) {
-            drawShedRoof(this.id, this.canvas, textMode)
-          } else {
-            drawRidgeRoof(this.id, this.canvas, textMode)
+            isShed = true
           }
-        } else {
-          drawRidgeRoof(this.id, this.canvas, textMode)
         }
-      } else {
-        drawRidgeRoof(this.id, this.canvas, textMode)
       }
+    }
+
+    if (isEaves) {
+      // 용마루 -- straight-skeleton
+      console.log('용마루 지붕')
+    } else if (isGable) {
+      // A형, B형 박공 지붕
+      console.log('패턴 지붕')
+    } else if (isShed) {
+      console.log('한쪽흐름 지붕')
+      drawShedRoof(this.id, this.canvas, textMode)
     } else {
+      console.log('변별로 설정')
       drawRidgeRoof(this.id, this.canvas, textMode)
     }
   },

src/components/floor-plan/CanvasFrame.jsx

@@ -68,7 +68,7 @@ export default function CanvasFrame() {
           canvas?.renderAll() // 캔버스를 다시 그립니다.
           if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
             setSelectedMenu('module')
-          } else if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL).length > 0) {
+          } else if (canvas.getObjects().length === 0 || canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL).length > 0) {
             setSelectedMenu('outline')
           } else {
             setSelectedMenu('surface')