지붕 모양 변경 작업 중

docs/dictionary.txt

@@ -23,4 +23,5 @@
 개구: openSpace
 도머: dormer
 그림자: shadow
-
+복도치수: planeSize
+실제치수: actualSize

src/components/Roof2.jsx

@@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { changeAllHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -409,6 +409,20 @@ export default function Roof2(props) {
       { x: 600, y: 100 },
     ]
 
+    const rectangleType1 = [
+      { x: 100, y: 100 },
+      { x: 100, y: 600 },
+      { x: 300, y: 600 },
+      { x: 300, y: 100 },
+    ]
+
+    const rectangleType2 = [
+      { x: 100, y: 100 },
+      { x: 100, y: 300 },
+      { x: 600, y: 300 },
+      { x: 600, y: 100 },
+    ]
+
     const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
     const newP = [
       { x: 450, y: 450 },
@@ -417,7 +431,7 @@ export default function Roof2(props) {
       { x: 450, y: 850 },
     ]
 
-    const polygon = new QPolygon(twelvePoint, {
+    const polygon = new QPolygon(rectangleType2, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,

src/components/fabric/QPolygon.js

@@ -2,7 +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 { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawDirectionArrow, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -174,9 +174,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   // 보조선 그리기
-  drawHelpLine(chon = 4) {
+  drawHelpLine(pitch = 4) {
-    // drawHelpLineInHexagon(this, chon)
+    // drawHelpLineInHexagon(this, pitch)
-    drawHippedRoof(this, chon)
+    console.log('drawHelpLine roofId : ', this.id)
+    drawRidgeRoof(this.id, pitch, this.canvas)
   },
 
   addLengthText() {

src/hooks/useMode.js

@@ -36,10 +36,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-import { INPUT_TYPE, Mode } from '@/common/common'
+import { INPUT_TYPE, LINE_TYPE, Mode } from '@/common/common'
-import { m } from 'framer-motion'
-import { set } from 'react-hook-form'
-import { FaWineGlassEmpty } from 'react-icons/fa6'
 
 export function useMode() {
   const [mode, setMode] = useRecoilState(modeState)
@@ -1509,6 +1506,25 @@ export function useMode() {
    *벽 지붕 외곽선 생성 polygon을 입력받아 만들기
    */
   const handleOuterlinesTest2 = (polygon, offset = 50) => {
+    console.log('polygon : ', polygon)
+    // TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
+    polygon.lines.forEach((line, index) => {
+      if (index === 1 || index === 3) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.WALL,
+          offset: 50,
+          width: 100,
+          pitch: 4,
+        }
+      } else {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.WALL,
+          offset: 50,
+          width: 100,
+          pitch: 4,
+        }
+      }
+    })
     const roof = drawRoofPolygon(polygon) //지붕 그리기
     roof.drawHelpLine()
     // roof.divideLine()
@@ -1677,21 +1693,6 @@ export function useMode() {
   }
 
   const drawRoofPolygon = (wall) => {
-    // TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
-    wall.lines.forEach((line, index) => {
-      if (index === wall.lines.length - 1 || index === 3) {
-        line.attributes = {
-          type: 'gable',
-          offset: 30,
-        }
-      } else {
-        line.attributes = {
-          type: 'hip',
-          offset: 50,
-        }
-      }
-    })
-
     const polygon = createRoofPolygon(wall.points)
     const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
     let offsetPolygon
@@ -1710,13 +1711,33 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
-    roof.name = 'roofBase'
+    roof.name = 'roof'
     roof.setWall(wall)
 
     roof.lines.forEach((line, index) => {
-      line.attributes = { type: wall.lines[index].attributes.type }
+      line.attributes = {
+        roofId: roof.id,
+        wallLine: wall.lines[index].id,
+        type: wall.lines[index].attributes.type,
+        offset: wall.lines[index].attributes.offset,
+        width: wall.lines[index].attributes.width,
+        pitch: wall.lines[index].attributes.pitch,
+      }
     })
 
+    wall.attributes = {
+      roofId: roof.id,
+    }
+
+    wall.lines.forEach((line, index) => {
+      line.attributes = {
+        roofId: roof.id,
+      }
+    })
+
+    console.log('roof : ', roof)
+    console.log('wall : ', wall)
+
     setRoof(roof)
     setWall(wall)
 
@@ -4852,12 +4873,6 @@ export function useMode() {
     )
   }
 
-  const coordToTurfPolygon = (points) => {
-    const coordinates = points.map((point) => [point.x, point.y])
-    coordinates.push(coordinates[0])
-    return turf.polygon([coordinates])
-  }
-
   /**
    * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
    * 확인 후 셀을 이동시킴
@@ -4866,125 +4881,58 @@ export function useMode() {
     const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
 
     if (trestlePolygons.length !== 0) {
+      let lastPointPosition = { x: 0, y: 0 }
       let fabricPolygon = null
       let inside = false
       let turfPolygon
-      let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
+      let manualDrawCells = drewRoofCells //
-      let direction
+
       canvas.on('mouse:move', (e) => {
         //마우스 이벤트 삭제 후 재추가
         const mousePoint = canvas.getPointer(e.e)
+        const turfPoint = turf.point([mousePoint.x, mousePoint.y])
+
         for (let i = 0; i < trestlePolygons.length; i++) {
           turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
-          direction = trestlePolygons[i].direction //도형의 방향
+          if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) {
-          let width = direction === 'south' || direction === 'north' ? 172 : 113
-          let height = direction === 'south' || direction === 'north' ? 113 : 172
-
-          const points = [
-            { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
-            { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
-            { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
-            { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
-          ]
-
-          const turfPoints = coordToTurfPolygon(points)
-
-          if (turf.booleanWithin(turfPoints, turfPolygon)) {
             //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
+            const direction = trestlePolygons[i].direction //도형의 방향
+            let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4
+            let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2
+            if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
+              let isDrawing = false
 
-            // if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
+              if (isDrawing) return
-            let isDrawing = false
+              canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
 
-            if (isDrawing) return
+              const points = [
-            canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
+                { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
+                { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
+                { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
+                { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
+              ]
 
-            fabricPolygon = new QPolygon(points, {
+              fabricPolygon = new QPolygon(points, {
-              fill: '#BFFD9F',
+                fill: '#BFFD9F',
-              // stroke: 'black',
+                stroke: 'black',
-              // strokeWidth: 1,
+                selectable: false, // 선택 가능하게 설정
-              selectable: false, // 선택 가능하게 설정
+                lockMovementX: true, // X 축 이동 잠금
-              lockMovementX: true, // X 축 이동 잠금
+                lockMovementY: true, // Y 축 이동 잠금
-              lockMovementY: true, // Y 축 이동 잠금
+                lockRotation: true, // 회전 잠금
-              lockRotation: true, // 회전 잠금
+                lockScalingX: true, // X 축 크기 조정 잠금
-              lockScalingX: true, // X 축 크기 조정 잠금
+                lockScalingY: true, // Y 축 크기 조정 잠금
-              lockScalingY: true, // Y 축 크기 조정 잠금
+                opacity: 0.8,
-              opacity: 0.8,
+                parentId: trestlePolygons[i].parentId,
-              parentId: trestlePolygons[i].parentId,
+                name: 'tmpCell',
-              name: 'tmpCell',
+              })
-            })
 
-            canvas?.add(fabricPolygon) //움직여가면서 추가됨
+              canvas?.add(fabricPolygon) //움직여가면서 추가됨
-
+              lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
-            /**
-             * 스냅기능
-             */
-            let snapDistance = 20
-
-            const bigLeft = trestlePolygons[i].left
-            const bigTop = trestlePolygons[i].top
-            const bigRight = bigLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
-            const bigBottom = bigTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
-            const bigCenter = (bigTop + bigTop + trestlePolygons[i].height) / 2
-
-            // 작은 폴리곤의 경계 좌표 계산
-            const smallLeft = fabricPolygon.left
-            const smallTop = fabricPolygon.top
-            const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX
-            const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY
-            const smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
-
-            // 위쪽 변에 스냅
-            if (Math.abs(smallTop - bigTop) < snapDistance) {
-              fabricPolygon.top = bigTop
             }
 
-            // 아래쪽 변에 스냅
-            if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (bigTop + trestlePolygons[i].height)) < snapDistance) {
-              fabricPolygon.top = bigTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
-            }
-
-            // 왼쪽변에 스냅
-            if (Math.abs(smallLeft - bigLeft) < snapDistance) {
-              fabricPolygon.left = bigLeft
-            }
-            //오른쪽 변에 스냅
-            if (Math.abs(smallRight - bigRight) < snapDistance) {
-              fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
-            }
-
-            if (direction === 'south' || direction === 'north') {
-              // 모듈왼쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallLeft - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2
-              }
-
-              // 모듈이 가운데가 세로중앙선에 붙게 스냅
-              if (Math.abs(smallCenter - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
-              }
-
-              // 모듈오른쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallRight - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
-                fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
-              }
-            } else {
-              // 모듈이 가로중앙선에 스냅
-              if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenter) < snapDistance) {
-                fabricPolygon.top = bigCenter - fabricPolygon.height / 2
-              }
-
-              if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
-                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
-              }
-              // 모듈 밑면이 가로중앙선에 스냅
-              if (Math.abs(smallBottom - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
-                fabricPolygon.top = bigTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
-              }
-            }
-
-            fabricPolygon.setCoords()
             canvas?.renderAll()
             inside = true
+            break
           } else {
             inside = false
           }
@@ -5000,26 +4948,20 @@ export function useMode() {
         if (!inside) return
         if (fabricPolygon) {
           const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
-          fabricPolygon.setCoords() //좌표 재정렬
+
           if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
             //마우스 클릭시 set으로 해당 위치에 셀을 넣음
-
-            manualDrawCells.forEach((cell) => {
-              console.log('cells', cell.points)
-            })
-            console.log('turfCellPolygon', turfCellPolygon.geometry.coordinates)
-
             const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
             if (!isOverlap) {
               //안겹치면 넣는다
-              fabricPolygon.setCoords()
               fabricPolygon.set({ name: 'cell' })
+              fabricPolygon.setCoords()
               manualDrawCells.push(fabricPolygon)
             } else {
               alert('셀끼리 겹치면 안되죠?')
             }
-            // } else {
+          } else {
-            //   alert('나갔으요!!')
+            alert('나갔으요!!')
           }
           setDrewRoofCells(manualDrawCells)
         }
@@ -5096,6 +5038,27 @@ export function useMode() {
 
       // console.log('bbox', bbox)
 
+      const boxes = []
+      const installedCellsArray = []
+
+      for (let x = bbox[0]; x < bbox[2]; x += width) {
+        for (let y = bbox[1]; y < bbox[3]; y += height) {
+          const box = turf.polygon([
+            [
+              [x, y],
+              [x + width, y],
+              [x + width, y + height],
+              [x, y + height],
+              [x, y],
+            ],
+          ])
+
+          if (turf.booleanWithin(box, turfTrestlePolygon)) {
+            boxes.push(box)
+          }
+        }
+      }
+
       for (let col = 0; col <= cols; col++) {
         for (let row = 0; row <= rows; row++) {
           let x = 0,
@@ -5145,6 +5108,20 @@ export function useMode() {
 
           const squarePolygon = turf.polygon([square])
 
+          // console.log('turfTrestlePolygon', turfTrestlePolygon)
+          // console.log('squarePolygon', squarePolygon)
+
+          const areaSize = turf.area(turfTrestlePolygon)
+
+          // console.log('areaSize', areaSize)
+          const objSize = turf.area(squarePolygon)
+
+          // console.log('objSize', objSize)
+
+          const maxObject = Math.floor(areaSize / objSize)
+
+          // console.log('maxObjectSize', maxObject)
+
           const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon)
 
           if (disjointFromTrestle) {
@@ -5185,8 +5162,6 @@ export function useMode() {
                 lockScalingY: true, // Y 축 크기 조정 잠금
                 opacity: 0.8,
                 parentId: trestle.parentId,
-                lineCol: col,
-                lineRow: row,
               })
               canvas?.add(fabricPolygon)
               drawCellsArray.push(fabricPolygon)