파워콘작업

src/components/Roof2.jsx

@@ -545,6 +545,9 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.FILL_CELLS)}>
               태양광셀생성
             </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.CELL_POWERCON)}>
+              파워콘설치
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>

src/hooks/useMode.js

@@ -30,6 +30,7 @@ export const Mode = {
   ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
   ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
   FILL_CELLS: 'fillCells', //태양광셀 모드
+  CELL_POWERCON: 'cellPowercon', //파워콘
   DEFAULT: 'default',
 }
 
@@ -250,6 +251,9 @@ export function useMode() {
       case 'fillCells':
         makeRoofFillCells()
         break
+      case 'cellPowercon':
+        makeCellPowercon()
+        break
       case 'default':
         canvas?.off('mouse:down')
         break
@@ -4450,7 +4454,7 @@ export function useMode() {
         referenceDirection: polygon.referenceDirection,
         startIndex: polygon.startIndex,
       })
-      drawCellsArray.push({ roofIndex: polygon.customIndex, drawCells: drawCells })
+      drawCellsArray.push({ roofIndex: polygon.idx, drawCells: drawCells })
 
       // toggleSelection(polygon) //선택 후 셀그리면 지우려고 했는데 방위 땜에 삭제
     })
@@ -4505,6 +4509,44 @@ export function useMode() {
     setDrewRoofCells(roofCells)
   }
 
+  const makeCellPowercon = () => {
+    setMode(Mode.DEFAULT)
+    let cellsGroupObj = []
+
+    drewRoofCells.forEach((obj) => {
+      cellsGroupObj = cellsGroupObj.concat(obj.drawCells)
+    })
+
+    const chunkSize = 1000 / 200 // 파워콘와트 나누기 셀와트
+    const cellPowerconArray = []
+
+    //파워콘과 셀의 파워를 나눠서 나온 갯수만큼 배열을 재생성
+    for (let i = 0; i < cellsGroupObj.length; i += chunkSize) {
+      cellPowerconArray.push(cellsGroupObj.slice(i, i + chunkSize))
+    }
+
+    for (let i = 0; i < cellPowerconArray.length; i++) {
+      const cellPowerconGroups = cellPowerconArray[i]
+      cellPowerconGroups.forEach((cellPowerconGroup, index) => {
+        const cellRectObj = cellPowerconGroup._objects[0]
+        const cellTextObj = cellPowerconGroup._objects[1]
+
+        cellTextObj.set({
+          text: `(${i + 1})`,
+        })
+        cellPowerconGroup.addWithUpdate()
+
+        //폰트 사이즈가 커진 후에 계산을 해야함
+        cellTextObj.set({
+          left: cellRectObj.left + cellRectObj.width / 2 - cellTextObj.width / 2,
+          top: cellRectObj.top + cellRectObj.height / 2 - cellTextObj.height / 2,
+        })
+        cellPowerconGroup.addWithUpdate()
+      })
+    }
+    canvas.renderAll()
+  }
+
   // 외적을 계산하는 함수
   const crossProduct = (p1, p2, p3) => {
     const dx1 = p2.x - p1.x