팔작지붕 작업 중

src/components/Roof2.jsx

@@ -37,7 +37,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 
 export default function Roof2(props) {
@@ -615,6 +615,18 @@ export default function Roof2(props) {
   const setDirectionStringToArrow = () => {
     drawDirectionStringToArrow(canvas, globalCampass)
   }
+
+  const setAllGableRoof = () => {
+    let offset = Number(prompt('gable roof offset', '50'))
+    if (!isNaN(offset) && offset > 0) {
+      const polygon = canvas?.getObjects()
+      console.log('gable roof offset : ', offset)
+      console.log('polygon : ', polygon)
+      changeAllGableRoof(polygon, canvas)
+    } else {
+      alert('offset 은 0 보다 커야 함')
+    }
+  }
   return (
     <>
       {canvas && (
@@ -741,6 +753,9 @@ export default function Roof2(props) {
                 </Button>
               </>
             )}
+            <Button className={'m-1 p-2'} onClick={setAllGableRoof}>
+              팔작지붕
+            </Button>
             <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
               저장
             </Button>

src/components/fabric/QPolygon.js

@@ -2,15 +2,7 @@ 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 {
+import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
-  calculateAngle,
-  drawDirectionArrow,
-  drawHippedRoof,
-  drawPolygonArrow,
-  inPolygon,
-  splitPolygonWithLines,
-  toGeoJSON,
-} from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -724,6 +716,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.addLengthText()
   },
   divideLine() {
-    splitPolygonWithLines(this)
+    // splitPolygonWithLines(this)
   },
 })

src/hooks/useMode.js

@@ -17,16 +17,16 @@ import {
   compassState,
   drewRoofCellsState,
   fontSizeState,
+  guideLineState,
+  horiGuideLinesState,
   modeState,
   roofPolygonArrayState,
   roofPolygonPatternArrayState,
   roofState,
   sortedPolygonArray,
   templateTypeState,
-  wallState,
-  guideLineState,
-  horiGuideLinesState,
   vertGuideLinesState,
+  wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -1255,6 +1255,7 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
+    roof.name = 'roofBase'
     roof.setWall(polygon)
     setRoof(roof)
     setWall(polygon)

src/util/qpolygon-utils.js

@@ -1207,7 +1207,7 @@ const drawRoofRidge = (polygon, chon) => {
 
   const walls = polygon.wall.lines // 외벽의 라인
   const roofs = polygon.lines // 지붕의 라인
-  const ridgeWall = []
+  let ridgeWall = []
   walls.forEach((wall, index) => {
     let currentRoof, prevWall, currentWall, nextWall
 
@@ -1227,7 +1227,7 @@ const drawRoofRidge = (polygon, chon) => {
       nextWall = walls[index + 1]
     }
 
-    if (getLineDirection(prevWall) !== getLineDirection(nextWall) && currentWall.length < currentRoof.length) {
+    if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) {
       ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length })
     }
   })
@@ -1503,6 +1503,7 @@ const drawRoofRidge = (polygon, chon) => {
             fontSize: polygon.fontSize,
             stroke: 'blue',
             strokeWidth: 1,
+            name: 'ridgeLine',
           },
         )
         polygon.canvas.add(ridge)
@@ -1657,6 +1658,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1686,6 +1688,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1715,6 +1718,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1744,6 +1748,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1814,6 +1819,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1839,6 +1845,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1868,6 +1875,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1897,6 +1905,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2204,6 +2213,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2283,12 +2293,14 @@ const drawHips = (polygon) => {
         fontSize: polygon.fontSize,
         stroke: 'red',
         strokeWidth: 1,
+        name: 'hipLine',
       })
       polygon.canvas.add(hip)
       polygon.hips.push(hip)
       polygon.innerLines.push(hip)
     }
   })
+  console.log('polygon.hips : ', polygon.hips)
 }
 
 const getPointInPolygon = (polygon, point, isInclude = false) => {
@@ -2565,20 +2577,28 @@ const connectLinePoint = (polygon) => {
           fontSize: polygon.fontSize,
           stroke: 'blue',
           strokeWidth: 1,
+          name: 'ridgeLine',
         })
-        polygon.canvas.remove(ridge)
+        console.log('newRidge : ', newRidge)
-        polygon.canvas.remove(ridge2)
+        if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.canvas.remove(ridge)
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.canvas.remove(ridge2)
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter(
+            (r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2),
+          )
 
-        polygon.canvas.add(newRidge)
+          polygon.canvas.add(newRidge)
-        polygon.ridges.push(newRidge)
+          polygon.ridges.push(newRidge)
-        polygon.innerLines.push(newRidge)
+          polygon.innerLines.push(newRidge)
+        }
       }
     })
   })
+
+  console.log('polygon : ', polygon)
 }
 
 /*
@@ -2654,6 +2674,53 @@ const getLineDirection = (line) => {
   }
 }
 
+export const changeAllGableRoof = (polygon, 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)
+    if (ridgeHip1.length > 1) {
+      console.log('ridgeHip1 : ')
+      let x1 = ridgeHip1[0].x1,
+        y1 = ridgeHip1[0].y1,
+        x2 = ridgeHip1[1].x1,
+        y2 = ridgeHip1[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (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'
+          canvas?.renderAll()
+        }
+      })
+    }
+    if (ridgeHip2.length > 1) {
+      console.log('ridgeHip2 : ')
+      let x1 = ridgeHip2[0].x1,
+        y1 = ridgeHip2[0].y1,
+        x2 = ridgeHip2[1].x1,
+        y2 = ridgeHip2[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (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'
+          canvas?.renderAll()
+        }
+      })
+    }
+  })
+}
+
 function arePointsEqual(point1, point2) {
   return point1.x === point2.x && point1.y === point2.y
 }