모임지붕 단계 분할

src/components/Roof2.jsx

@@ -2,7 +2,6 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect, useState } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
 import { Button } from '@nextui-org/react'
-
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray, templateTypeState, compassState } from '@/store/canvasAtom'
@@ -10,6 +9,8 @@ import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import * as turf from '@turf/turf'
+import { toGeoJSON } from '@/util/qpolygon-utils'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -53,6 +54,7 @@ export default function Roof2() {
     makeRoofPatternPolygon,
     createRoofRack,
     drawRoofPolygon,
+    drawCellInTrestle,
   } = useMode()
 
   // const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
@@ -615,7 +617,10 @@ export default function Roof2() {
                   지붕타입 지붕재
                 </Button>
                 <Button className="m-1 p-2" onClick={createRoofRack}>
-                  지붕가대
+                  지붕가대설치
+                </Button>
+                <Button className="m-1 p-2" onClick={drawCellInTrestle}>
+                  선택한 가대 셀채우기
                 </Button>
               </>
             )}

src/hooks/useCanvas.js

@@ -89,8 +89,8 @@ export function useCanvas(id) {
     canvas?.off('object:modified')
     canvas?.off('object:removed')
     canvas?.off('object:added')
-    canvas?.off('mouse:move', drawMouseLines)
+    canvas?.off('mouse:move')
-    canvas?.off('mouse:down', handleMouseDown)
+    canvas?.off('mouse:down')
   }
 
   const addEventOnObject = (e) => {
@@ -112,9 +112,11 @@ export function useCanvas(id) {
       target.on('mousedown', () => {
         if (target.get('selected')) {
           target.set({ strokeWidth: 1 })
+          target.set({ strokeDashArray: [5, 5] })
           target.set({ selected: false })
         } else {
           target.set({ strokeWidth: 5 })
+          target.set({ strokeDashArray: [0, 0] })
           target.set({ selected: true })
         }
         canvas?.renderAll()

src/hooks/useMode.js

@@ -537,6 +537,7 @@ export function useMode() {
 
     if (historyPoints.current.length >= 4) {
       const wall = drawWallPolygon()
+      setWall(wall)
       handleOuterlinesTest2(wall)
       setTemplateType(1)
     }
@@ -4460,13 +4461,18 @@ export function useMode() {
   }
 
   const createRoofRack = () => {
+    const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle')
+    // 이미 만들어진 가대가 있을 경우 return
+    if (trestlePolygons.length !== 0) {
+      return
+    }
+
+    canvas?.off('mouse:move')
+    canvas?.off('mouse:out')
+    document.removeEventListener('keydown', handleKeyDown)
     const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
     let roofCells = [] // roof에 적재된 cell들
     roofs.forEach((roof, index) => {
-      let maxLengthLine = roof.lines.reduce((acc, cur) => {
-        return acc.length > cur.length ? acc : cur
-      })
-
       const offsetPolygonPoint = offsetPolygon(roof.points, -20)
 
       const trestlePoly = new QPolygon(offsetPolygonPoint, {
@@ -4487,24 +4493,47 @@ export function useMode() {
       })
 
       canvas?.add(trestlePoly)
-
-      let drawRoofCells
-      if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
-        drawRoofCells = trestlePoly.fillCell({ width: 100, height: 50, padding: 10 })
-        trestlePoly.direction = 'south'
-      } else {
-        drawRoofCells = trestlePoly.fillCell({ width: 50, height: 100, padding: 10 })
-        trestlePoly.direction = 'east'
-      }
-
-      drawRoofCells.forEach((cell) => {
-        roofCells.push(cell)
-      })
     })
 
     setDrewRoofCells(roofCells)
   }
 
+  //배터리 셀 넣기
+  const drawCellInTrestle = () => {
+    const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && obj.selected)
+    const notSelectedTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && !obj.selected)
+    if (trestlePolygons.length === 0) {
+      alert('가대가 없습니다.')
+    }
+
+    if (notSelectedTrestlePolygons.length > 0) {
+      alert('기존 셀은 제거됩니다.')
+    }
+
+    notSelectedTrestlePolygons.forEach((trestle) => {
+      trestle.cells.forEach((cell) => {
+        canvas?.remove(cell)
+      })
+    })
+
+    const drawCellsArray = []
+    trestlePolygons.forEach((trestle, index) => {
+      trestle.fire('mousedown')
+      let maxLengthLine = trestle.lines.reduce((acc, cur) => {
+        return acc.length > cur.length ? acc : cur
+      })
+
+      let drawRoofCells
+      if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
+        drawRoofCells = trestle.fillCell({ width: 50, height: 100, padding: 0 })
+        trestle.direction = 'south'
+      } else {
+        drawRoofCells = trestle.fillCell({ width: 100, height: 50, padding: 0 })
+        trestle.direction = 'east'
+      }
+    })
+  }
+
   // 외적을 계산하는 함수
   const crossProduct = (p1, p2, p3) => {
     const dx1 = p2.x - p1.x
@@ -4547,5 +4576,6 @@ export function useMode() {
     makeRoofTrestle,
     createRoofRack,
     drawRoofPolygon,
+    drawCellInTrestle,
   }
 }