면형상 => 모듈 회로구성 => 모듈 채우기 작업중

src/components/Roof2.jsx

@@ -535,44 +535,6 @@ export default function Roof2(props) {
     })
   }
 
-  const setCurrentPattern = (polygon) => {
-    const { width, height, roofStyle } = roofMaterial
-    const roofRatio = window.devicePixelRatio || 1
-    const patternSourceCanvas = document.createElement('canvas')
-
-    if (roofStyle === 1) {
-      patternSourceCanvas.width = width * roofRatio
-      patternSourceCanvas.height = height * roofRatio
-    } else if (roofStyle === 2) {
-      patternSourceCanvas.width = width * 2
-      patternSourceCanvas.height = height * 2
-    }
-
-    const ctx = patternSourceCanvas.getContext('2d')
-
-    ctx.scale(roofRatio, roofRatio)
-    ctx.strokeStyle = 'green'
-    ctx.lineWidth = 0.4
-    // 벽돌 패턴 그리기
-    if (roofStyle === 1) {
-      ctx.strokeRect(0, 0, 50, 30)
-    } else if (roofStyle === 2) {
-      // 지그재그
-      ctx.strokeRect(0, 0, 200, 100)
-      ctx.strokeRect(100, 100, 200, 100)
-    }
-
-    // 패턴 생성
-    const pattern = new fabric.Pattern({
-      source: patternSourceCanvas,
-      repeat: 'repeat',
-    })
-    polygon.set('fill', null)
-
-    polygon.set('fill', pattern)
-    canvas?.renderAll()
-  }
-
   /**
    * canvas 내용 불러오기
    */
@@ -1531,6 +1493,9 @@ export default function Roof2(props) {
     })
   }
 
+  const moduleConfiguration = () => {
+    createRoofRack()
+  }
   return (
     <>
       {canvas && (
@@ -1764,8 +1729,11 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={createTemplate29}>
               29번 추가
             </Button>
-            <Button className="m-1 p-2" onClick={createPentagon2}>
+            <Button className="m-1 p-2" onClick={moduleConfiguration}>
-              오각형 추가2
+              모듈,회로구성
+            </Button>
+            <Button className="m-1 p-2" onClick={drawCellInTrestle}>
+              모듈 채우기
             </Button>
             <Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
               canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}

src/components/ui/SurfaceShape.jsx

@@ -1,9 +1,9 @@
 import { Button, Input } from '@nextui-org/react'
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import { fontSizeState } from '@/store/canvasAtom'
+import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
 
 /**
  * 면형상 배치 모달
@@ -14,6 +14,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
   const [type, setType] = useState(0)
   const setOpen = useSetRecoilState(modalState)
   const fontSize = useRecoilValue(fontSizeState)
+  //지붕재
+  const roofMaterial = useRecoilValue(roofMaterialState)
 
   /**
    * 최대 5개의 length
@@ -42,21 +44,27 @@ export const SurfaceShapeModal = ({ canvas }) => {
       if (!isDrawing) {
         return
       }
+      const pointer = canvas?.getPointer(e.e)
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
       switch (type) {
         case 1: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+          let newLength2 = length2
-          const pointer = canvas?.getPointer(e.e)
+
+          if (length3 !== 0) {
+            newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
+          }
+
           obj = new QPolygon(
             [
-              { x: pointer.x, y: pointer.y - parseInt(length2) / 2 },
+              { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
-              { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(length1) / 2 },
+              { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
-              { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(length1) / 2 },
+              { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
             ],
             {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -65,8 +73,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
         case 2: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
@@ -78,7 +84,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -86,8 +92,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
         case 3: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
@@ -99,7 +103,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -107,8 +111,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
         case 4: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
@@ -119,7 +121,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -128,8 +130,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
         case 5: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
@@ -140,7 +140,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -149,8 +149,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
         }
 
         case 6: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
@@ -162,7 +160,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -171,8 +169,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
         }
 
         case 7: {
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
@@ -184,7 +180,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -192,8 +188,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
         }
         case 8: {
           const angleInRadians = Math.asin(length2 / length3)
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
@@ -205,7 +199,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -213,7 +207,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
         }
         case 9: {
           const angleInRadians = Math.asin(length2 / length3)
-          const pointer = canvas?.getPointer(e.e)
           obj = new QPolygon(
             [
               { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
@@ -225,7 +218,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               fill: 'transparent',
               stroke: 'black',
               strokeWidth: 2,
-              selectable: true,
+              selectable: false,
               fontSize: fontSize,
               name: 'guideTriangle',
             },
@@ -233,6 +226,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
         }
       }
       canvas?.add(obj)
+      setCurrentPattern(obj)
+      canvas?.renderAll()
     })
 
     canvas?.on('mouse:down', (e) => {
@@ -265,6 +260,44 @@ export const SurfaceShapeModal = ({ canvas }) => {
     }
   }
 
+  const setCurrentPattern = (polygon) => {
+    const { width, height, roofStyle } = roofMaterial
+    const roofRatio = window.devicePixelRatio || 1
+    const patternSourceCanvas = document.createElement('canvas')
+
+    if (roofStyle === 1) {
+      patternSourceCanvas.width = width * roofRatio
+      patternSourceCanvas.height = height * roofRatio
+    } else if (roofStyle === 2) {
+      patternSourceCanvas.width = width * 2
+      patternSourceCanvas.height = height * 2
+    }
+
+    const ctx = patternSourceCanvas.getContext('2d')
+
+    ctx.scale(roofRatio, roofRatio)
+    ctx.strokeStyle = 'green'
+    ctx.lineWidth = 0.4
+    // 벽돌 패턴 그리기
+    if (roofStyle === 1) {
+      ctx.strokeRect(0, 0, 50, 30)
+    } else if (roofStyle === 2) {
+      // 지그재그
+      ctx.strokeRect(0, 0, 200, 100)
+      ctx.strokeRect(100, 100, 200, 100)
+    }
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: patternSourceCanvas,
+      repeat: 'repeat',
+    })
+    polygon.set('fill', null)
+
+    polygon.set('fill', pattern)
+    canvas?.renderAll()
+  }
+
   return (
     <>
       <div>
@@ -301,8 +334,12 @@ export const SurfaceShapeModal = ({ canvas }) => {
         <div>
           길이1
           <Input type="number" name={'length1'} value={length1} onChange={setLength} />
-          길이2
+          {length3 === 0 && (
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+            <>
+              길이2
+              <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+            </>
+          )}
           길이3 <Input type="number" name={'length3'} value={length3} onChange={setLength} />
         </div>
       ) : type === 2 ? (