Merge branch 'dev' into feature/test-jy

src/components/Roof2.jsx

@@ -108,7 +108,8 @@ export default function Roof2() {
   }
 
   useEffect(() => {
-    setCanvasSize({ ...canvasSize, vertical: verticalSize, horizontal: horizontalSize })
+    console.log('horizontalSize', horizontalSize)
+    setCanvasSize({ ...canvasSize, vertical: parseInt(verticalSize), horizontal: parseInt(horizontalSize) })
   }, [verticalSize, horizontalSize])
 
   /**
@@ -119,7 +120,10 @@ export default function Roof2() {
   // }, [verticalSize, horizontalSize])
   useEffect(() => {
     const { vertical, horizontal } = canvasSize
+    console.log('canvasSize', canvasSize)
+    console.log('horizontalSize', horizontalSize)
     if (vertical !== verticalSize || horizontal !== horizontalSize) {
+      console.log('setCanvasSize!!')
       canvas.setWidth(horizontalSize)
       canvas.setHeight(verticalSize)
       canvas.renderAll()
@@ -442,10 +446,17 @@ export default function Roof2() {
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.ROOT_TRESTLE)}
+              onClick={() => changeMode(canvas, Mode.ROOF_TRESTLE)}
             >
               지붕가대생성
             </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+              onClick={() => changeMode(canvas, Mode.FILL_CELLS)}
+            >
+              태양광셀생성
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>

src/components/fabric/QPolygon.js

@@ -184,6 +184,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
   fillCell(cell = { width: 50, height: 100, padding: 10 }) {
     const points = this.points
+
     const minX = Math.min(...points.map((p) => p.x))
     const maxX = Math.max(...points.map((p) => p.x))
     const minY = Math.min(...points.map((p) => p.y))
@@ -198,10 +199,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     const cols = Math.floor((boundingBoxWidth + cell.padding) / (rectWidth + cell.padding))
     const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
 
+    //전체 높이에서 패딩을 포함하고 rows를 곱해서 여백길이를 계산 후에 2로 나누면 반높이를 넣어서 중간으로 정렬
+    const tmpHeight = (boundingBoxHeight - (rectHeight + cell.padding) * rows) / 2
+    //센터 정렬시에 쓴다 체크박스가 존재함 TODO: if문 추가해서 정렬해야함
+    let tmpWidth = (boundingBoxWidth - (rectWidth + cell.padding) * cols) / 2
+
     for (let i = 0; i < cols; i++) {
       for (let j = 0; j < rows; j++) {
-        const rectLeft = minX + i * (rectWidth + cell.padding)
+        const rectLeft = minX + i * (rectWidth + cell.padding) + tmpWidth
-        const rectTop = minY + j * (rectHeight + cell.padding)
+        const rectTop = minY + j * (rectHeight + cell.padding) + tmpHeight
 
         const rectPoints = [
           { x: rectLeft, y: rectTop },
@@ -219,7 +225,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             width: rectWidth,
             height: rectHeight,
             fill: '#BFFD9F',
-            selectable: false,
+            selectable: true, // 선택 가능하게 설정
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            lockScalingX: true, // X 축 크기 조정 잠금
+            lockScalingY: true, // Y 축 크기 조정 잠금
             opacity: 0.6,
           })
 

src/hooks/useMode.js

@@ -27,7 +27,8 @@ export const Mode = {
   DRAW_RECT: 'drawRect',
   ROOF_PATTERN: 'roofPattern',
   MODULE: 'module',
-  ROOT_TRESTLE: 'rootTrestle',
+  ROOF_TRESTLE: 'roofTrestle',
+  FILL_CELLS: 'fillCells',
   DEFAULT: 'default',
 }
 
@@ -55,6 +56,8 @@ export function useMode() {
 
   const [canvasSize] = useRecoilState(canvasSizeState)
 
+  const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
+
   useEffect(() => {
     // 이벤트 리스너 추가
     if (!canvas) {
@@ -238,9 +241,12 @@ export function useMode() {
       case 'roofPattern':
         makeRoofPatternPolygon()
         break
-      case 'rootTrestle':
+      case 'roofTrestle':
         makeRoofTrestle()
         break
+      case 'fillCells':
+        makeRoofFillCells()
+        break
     }
   }
 
@@ -3479,27 +3485,38 @@ export function useMode() {
 
     var ratio = window.devicePixelRatio || 1
 
+    let inputPatternSize = { width: 30, height: 20 } //임시 사이즈
+    let patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+
+    if (templateType === 2) {
+      //세로형이면 width height를 바꿈
+      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
+    }
+
     // 패턴 소스를 위한 임시 캔버스 생성
     const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = 30 * ratio
+    patternSourceCanvas.width = patternSize.width * ratio
-    patternSourceCanvas.height = 30 * ratio
+    patternSourceCanvas.height = patternSize.height * ratio
     const ctx = patternSourceCanvas.getContext('2d')
 
     // 벽돌 패턴 그리기
     ctx.scale(ratio, ratio)
     ctx.strokeStyle = 'green'
-    ctx.lineWidth = 0.2
+    ctx.lineWidth = 0.4
 
     // 첫 번째 행 벽돌
     if (roofStyle === 2) {
       //지그재그
       // // 두 번째 행 벽돌
-      ctx.strokeRect(0, 0, 30, 15)
+      if (templateType === 2) {
-      ctx.strokeRect(30, 15, 30, 15)
+        ctx.strokeRect(0, 0, patternSize.width / 2, patternSize.height)
-      ctx.strokeRect(-15, 15, 30, 15)
+        ctx.strokeRect(patternSize.width / 2, patternSize.height / 2, patternSize.width / 2, patternSize.height)
-      ctx.strokeRect(0, 30, 30, 15)
+      } else if (templateType === 3) {
+        ctx.strokeRect(0, 0, patternSize.width, patternSize.height / 2)
+        ctx.strokeRect(patternSize.width / 2, patternSize.height / 2, patternSize.width, patternSize.height / 2)
+      }
     } else {
-      ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
+      ctx.strokeRect(0, 0, patternSize.width, patternSize.height) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
     }
 
     // 패턴 생성
@@ -3510,8 +3527,13 @@ export function useMode() {
 
     const commonOption = {
       fill: pattern,
-      selectable: true,
+      selectable: false,
       fontSize: 15, // fontSize는 필요에 따라 조정
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingY: true,
+      lockScalingX: true,
     }
 
     let polygonArray = []
@@ -3520,6 +3542,7 @@ export function useMode() {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
       canvas.add(drawPolygon)
       drawPolygon.setViewLengthText(false)
+      drawPolygon.set('customIndex', index)
       polygonArray.push(drawPolygon)
     })
     canvas.renderAll()
@@ -3533,14 +3556,83 @@ export function useMode() {
       return
     }
 
-    // 오목한 부분 인덱스 찾기
+    const polygons = roofPolygonArray //리코일에 있는 패턴그린 폴리곤가져옴
-    const polygons = roofPolygonArray
+    let selectedAreaArray = []
-    let concavePolygonObj = []
+
+    const defualtStrokeStyle = {
+      stroke: 'red',
+      strokeDashArray: [9, 5],
+      strokeWidth: 0.3,
+    }
+
+    const selectedStrokeStyle = {
+      stroke: 'red',
+      strokeWidth: 3,
+    }
+
+    function toggleSelection(polygon) {
+      if (polygon.strokeWidth === defualtStrokeStyle.strokeWidth) {
+        polygon.set({
+          stroke: selectedStrokeStyle.stroke,
+          strokeWidth: selectedStrokeStyle.strokeWidth,
+          strokeDashArray: [0],
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+        selectedAreaArray.push(polygon)
+      } else {
+        polygon.set({
+          stroke: defualtStrokeStyle.stroke,
+          strokeWidth: defualtStrokeStyle.strokeWidth,
+          strokeDashArray: defualtStrokeStyle.strokeDashArray,
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+
+        const removeIndex = polygon.customIndex
+        const removeArrayIndex = selectedAreaArray.findIndex((x) => x.customIndex === removeIndex)
+        selectedAreaArray.splice(removeArrayIndex, 1)
+      }
+      canvas.renderAll()
+    }
 
     polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
-      trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
+      trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다...
-      trestlePolygon.fillCell({ width: 100, height: 30, padding: 10 })
+      trestlePolygon.set({
+        stroke: 'red',
+        strokeDashArray: [9, 5],
+        strokeWidth: 0.3,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        bringToFront: true,
+        customIndex: polygon.customIndex,
+      })
+
+      trestlePolygon.on('mousedown', function () {
+        const customIndex = polygon.get('customIndex')
+        toggleSelection(trestlePolygon)
+      })
+    })
+    setSelectedCellRoofArray(selectedAreaArray)
+  }
+
+  const makeRoofFillCells = () => {
+    const selectedCellRoofs = selectedCellRoofArray
+    if (selectedCellRoofs.length === 0) {
+      alert('선택된 영역이 없습니다.')
+      return
+    }
+    let inputCellSize = { width: 172, height: 113 }
+    let cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
+
+    if (templateType === 2) {
+      ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
+    }
+
+    selectedCellRoofs.forEach((polygon, index) => {
+      polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
     })
   }