팔작지붕 추가.

src/components/Roof2.jsx

@@ -634,7 +634,7 @@ export default function Roof2(props) {
       const polygon = canvas?.getObjects()
       console.log('gable roof offset : ', offset)
       console.log('polygon : ', polygon)
-      changeAllGableRoof(polygon, canvas)
+      changeAllGableRoof(polygon, offset, canvas)
     } else {
       alert('offset 은 0 보다 커야 함')
     }

src/components/fabric/QLine.js

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
-import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
+import { getDirectionByPoint } from '@/util/canvas-util'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -52,6 +52,8 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     })
 
     this.on('modified', (e) => {
+      this.startPoint = { x: this.x1, y: this.y1 }
+      this.endPoint = { x: this.x2, y: this.y2 }
       this.addLengthText()
     })
 

src/util/qpolygon-utils.js

@@ -967,6 +967,11 @@ export const splitPolygonWithLines = (polygon) => {
   const roofs = []
   const allLines = [...polygon.innerLines]
 
+  allLines.forEach((line) => {
+    line.startPoint = { x: line.x1, y: line.y1 }
+    line.endPoint = { x: line.x2, y: line.y2 }
+  })
+
   // allLines에 x1,y1,x2,y2를 비교해서 중복되는 값을 제거한다.
   allLines.forEach((line, index) => {
     const startPoint = line.startPoint
@@ -2674,20 +2679,17 @@ const getLineDirection = (line) => {
   }
 }
 
-export const changeAllGableRoof = (polygon, canvas) => {
+export const changeAllGableRoof = (polygon, offset, canvas) => {
-  const walls = polygon.find((p) => p.name === 'wall').lines // 외벽의 라인
   const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
   const roofLines = roof.lines // 지붕의 라인
   const ridges = roof.ridges // 마루의 라인
   const hips = roof.hips // 추녀마루의 라인
 
   ridges.forEach((ridge) => {
-    console.log('ridge : ', ridge)
-    console.log(ridge.direction)
     let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
     let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
+    let gableLines = []
     if (ridgeHip1.length > 1) {
-      console.log('ridgeHip1 : ')
       let x1 = ridgeHip1[0].x1,
         y1 = ridgeHip1[0].y1,
         x2 = ridgeHip1[1].x1,
@@ -2697,13 +2699,11 @@ export const changeAllGableRoof = (polygon, canvas) => {
           (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
           (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
         ) {
-          roofLine.stroke = 'blue'
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
-          canvas?.renderAll()
         }
       })
     }
     if (ridgeHip2.length > 1) {
-      console.log('ridgeHip2 : ')
       let x1 = ridgeHip2[0].x1,
         y1 = ridgeHip2[0].y1,
         x2 = ridgeHip2[1].x1,
@@ -2713,12 +2713,274 @@ export const changeAllGableRoof = (polygon, canvas) => {
           (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
           (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
         ) {
-          roofLine.stroke = 'blue'
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
+        }
+      })
+    }
+    gableLines.forEach((gableLine) => {
+      roof.innerLines.push(gableLine)
+    })
+  })
+
+  // splitPolygonWithLines(roof)
+}
+
+const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
+  let x1 = hip1.x1,
+    y1 = hip1.y1
+  let gableLine, diffOffset
+  if (ridge.direction === 'top') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+  }
+  if (ridge.direction === 'bottom') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'right') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'left') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
   canvas?.renderAll()
-        }
+  return gableLine
-      })
-    }
-  })
 }
 
 function arePointsEqual(point1, point2) {