Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/fabric/QPolygon.js

@@ -221,6 +221,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     //센터 정렬시에 쓴다 체크박스가 존재함 TODO: if문 추가해서 정렬해야함
     let tmpWidth = (boundingBoxWidth - (rectWidth + cell.padding) * cols) / 2
 
+    const drawCellsArray = [] //그려진 셀의 배열
+
     for (let i = 0; i < cols; i++) {
       for (let j = 0; j < rows; j++) {
         const rectLeft = minX + i * (rectWidth + cell.padding) + tmpWidth
@@ -248,14 +250,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             lockRotation: true, // 회전 잠금
             lockScalingX: true, // X 축 크기 조정 잠금
             lockScalingY: true, // Y 축 크기 조정 잠금
-            opacity: 0.6,
+            opacity: 0.8,
           })
-
+          drawCellsArray.push(rect) //배열에 넣어서 반환한다
           this.canvas.add(rect)
         }
       }
     }
     this.canvas?.renderAll()
+    return drawCellsArray
   },
   inPolygon(point) {
     const vertices = this.getCurrentPoints()

src/hooks/useMode.js

@@ -5,6 +5,7 @@ import { useRecoilState } from 'recoil'
 
 import {
   canvasSizeState,
+  drewRoofCellsState,
   fontSizeState,
   roofPolygonArrayState,
   roofPolygonPatternArrayState,
@@ -25,10 +26,9 @@ export const Mode = {
   PATTERNB: 'patternb',
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
-  ROOF_PATTERN: 'roofPattern',
+  ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
-  MODULE: 'module',
+  ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
-  ROOF_TRESTLE: 'roofTrestle',
+  FILL_CELLS: 'fillCells', //태양광셀 모드
-  FILL_CELLS: 'fillCells',
   DEFAULT: 'default',
 }
 
@@ -57,6 +57,7 @@ export function useMode() {
   const [canvasSize] = useRecoilState(canvasSizeState)
 
   const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
+  const [drewRoofCells, setDrewRoofCells] = useRecoilState(drewRoofCellsState)
 
   useEffect(() => {
     // 이벤트 리스너 추가
@@ -3178,23 +3179,27 @@ export function useMode() {
     canvas?.renderAll()
   }
 
+  /**
+   * 지붕 패턴 생성 로직
+   * @param roofStyle
+   */
   const makeRoofPatternPolygon = (roofStyle) => {
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
       return
     }
 
-    //내부 선 점선으로 변경
+    //내부 선 점선으로 변경 추후에 다시 되돌리는 로직 필요
     roofPolygonPattern.lines.forEach((line, index) => {
       line.line.set('strokeDashArray', [10, 5, 2, 5])
       line.line.set('stroke', 'blue')
       line.line.set('strokeWidth', 1)
     })
 
-    var ratio = window.devicePixelRatio || 1
+    const ratio = window.devicePixelRatio || 1
 
-    let inputPatternSize = { width: 30, height: 20 } //임시 사이즈
+    const inputPatternSize = { width: 30, height: 20 } //임시 사이즈
-    let patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
 
     if (templateType === 2) {
       //세로형이면 width height를 바꿈
@@ -3250,6 +3255,7 @@ export function useMode() {
 
     let polygonArray = []
 
+    //패턴 폴리곤을 생성 후 배열에 담음
     roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
       canvas.add(drawPolygon)
@@ -3259,9 +3265,13 @@ export function useMode() {
     })
     canvas?.renderAll()
 
+    //지붕 폴리곤 recoil에 담음
     setRoofPolygonArray(polygonArray)
   }
 
+  /**
+   * 가대 생성 로직
+   */
   const makeRoofTrestle = () => {
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
@@ -3282,8 +3292,13 @@ export function useMode() {
       strokeWidth: 3,
     }
 
+    /**
+     * 지붕가대 생성 후 가대 선택 이벤트를 추가하는 로직
+     * @param polygon
+     */
     function toggleSelection(polygon) {
       if (polygon.strokeWidth === defualtStrokeStyle.strokeWidth) {
+        //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
         polygon.set({
           stroke: selectedStrokeStyle.stroke,
           strokeWidth: selectedStrokeStyle.strokeWidth,
@@ -3292,6 +3307,7 @@ export function useMode() {
         canvas.discardActiveObject() // 객체의 활성 상태 해제
         selectedAreaArray.push(polygon)
       } else {
+        //선택후 재선택하면 선택안됨으로 변경
         polygon.set({
           stroke: defualtStrokeStyle.stroke,
           strokeWidth: defualtStrokeStyle.strokeWidth,
@@ -3299,6 +3315,7 @@ export function useMode() {
         })
         canvas.discardActiveObject() // 객체의 활성 상태 해제
 
+        //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
         const removeIndex = polygon.customIndex
         const removeArrayIndex = selectedAreaArray.findIndex((x) => x.customIndex === removeIndex)
         selectedAreaArray.splice(removeArrayIndex, 1)
@@ -3306,6 +3323,7 @@ export function useMode() {
       canvas?.renderAll()
     }
 
+    //외각선을 안쪽으로 그려 가대선을 그린다.
     polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
       trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다...
@@ -3319,25 +3337,45 @@ export function useMode() {
         lockScalingX: true,
         lockScalingY: true,
         bringToFront: true,
-        customIndex: polygon.customIndex,
+        customIndex: polygon.customIndex, //가대 폴리곤의 임시 인덱스를 넣어줌
       })
 
+      /**
+       * 가대 선택 이벤트
+       */
       trestlePolygon.on('mousedown', function () {
-        const customIndex = polygon.get('customIndex')
         toggleSelection(trestlePolygon)
       })
     })
     setSelectedCellRoofArray(selectedAreaArray)
   }
 
+  /**
+   * 가대 선택 후 셀 채우기
+   */
   const makeRoofFillCells = () => {
-    // const selectedCellRoofs = selectedCellRoofArray
+    const drawCellsArray = []
+
     if (selectedCellRoofArray.length === 0) {
+      //배열에 선택된 가대 셀이 없으면 리턴
       alert('선택된 영역이 없습니다.')
       setMode(Mode.DEFAULT) //default 모드로 변경
       return
     }
 
+    if (drewRoofCells.length > 0) {
+      //리코일에
+      if (confirm('패널이 초기화 됩니다.')) {
+        drewRoofCells.forEach((cells, index) => {
+          cells.drawCells.forEach((cell) => {
+            canvas?.remove(cell)
+          })
+        })
+        setDrewRoofCells([])
+        canvas?.renderAll()
+      }
+    }
+
     const inputCellSize = { width: 172, height: 113 }
     const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
 
@@ -3346,8 +3384,11 @@ export function useMode() {
     }
 
     selectedCellRoofArray.forEach((polygon, index) => {
-      polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
+      const drawCells = polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
+      drawCellsArray.push({ roofIndex: polygon.customIndex, drawCells: drawCells })
     })
+
+    setDrewRoofCells(drawCellsArray)
     setMode(Mode.DEFAULT) //default 모드로 변경
   }
 

src/store/canvasAtom.js

@@ -53,3 +53,10 @@ export const templateTypeState = atom({
   default: 1, //1:모임지붕, 2:A타입, 3:B타입
   dangerouslyAllowMutability: true,
 })
+
+//셀 그린 이후에 생성하는 state
+export const drewRoofCellsState = atom({
+  key: 'drewRoofCells',
+  default: [],
+  dangerouslyAllowMutability: true,
+})