test

src/components/Roof2.jsx

@@ -385,8 +385,12 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
               지붕패턴2
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.MODULE)}>
+            <Button
-              모듈
+              className="m-1 p-2"
+              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+              onClick={() => changeMode(canvas, Mode.ROOT_TRESTLE)}
+            >
+              지붕가대생성
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드

src/hooks/useMode.js

@@ -3,7 +3,16 @@ import QRect from '@/components/fabric/QRect'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 
-import { canvasSizeState, fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
+import {
+  canvasSizeState,
+  fontSizeState,
+  roofPolygonPatternArrayState,
+  roofState,
+  sortedPolygonArray,
+  wallState,
+  templateTypeState,
+  roofPolygonArrayState,
+} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -17,6 +26,8 @@ export const Mode = {
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
   ROOF_PATTERN: 'roofPattern',
+  MODULE: 'module',
+  ROOT_TRESTLE: 'rootTrestle',
   DEFAULT: 'default',
 }
 
@@ -39,6 +50,8 @@ export function useMode() {
   const pointCount = useRef(0)
 
   const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
+  const [roofPolygonArray, setRoofPolygonArray] = useRecoilState(roofPolygonArrayState)
+  const [templateType, setTemplateType] = useRecoilState(templateTypeState)
 
   const [canvasSize] = useRecoilState(canvasSizeState)
 
@@ -225,6 +238,9 @@ export function useMode() {
       case 'roofPattern':
         makeRoofPatternPolygon()
         break
+      case 'rootTrestle':
+        makeRoofTrestle()
+        break
     }
   }
 
@@ -1013,9 +1029,7 @@ export function useMode() {
   /**
    *벽 지붕 외곽선 생성
    */
-  const handleOuterlinesTest = (offsetInputX, offsetInputY = 0) => {
+  const handleOuterlinesTest = (polygon, offsetInputX, offsetInputY = 0) => {
-    const polygon = drawWallPolygon()
-
     let offsetPoints = []
     const originalMax = 71
     const transformedMax = 100
@@ -1083,7 +1097,7 @@ export function useMode() {
       offsetPoints.push(offsetPoint)
     }
 
-    makePolygon(offsetPoints)
+    return makePolygon(offsetPoints)
   }
 
   /**
@@ -1206,6 +1220,7 @@ export function useMode() {
     } else if (polygon.lines.length === 8) {
       handleOuterLineTemplateA8Points(polygon)
     }
+    setTemplateType(2)
   }
 
   const handleOuterLineTemplateA4Points = (polygon) => {
@@ -1327,15 +1342,15 @@ export function useMode() {
 
     const dashedCenterLineOpt = {
       stroke: 'black',
-      strokeWidth: 4,
+      strokeWidth: 1,
       property: 'centerLine',
-      strokeDashArray: [5, 5],
+      strokeDashArray: [10, 5],
       fontSize: 14,
     }
 
     const centerLineOpt = {
       stroke: 'blue',
-      strokeWidth: 5,
+      strokeWidth: 1,
       property: 'bigHoriCenter',
       fontSize: 14,
     }
@@ -1347,7 +1362,7 @@ export function useMode() {
 
       const line = new QLine([start.x, start.y, end.x, end.y], {
         stroke: '#A0D468',
-        strokeWidth: 5,
+        strokeWidth: 2,
         property: 'normal',
         fontSize: 14,
       })
@@ -2637,6 +2652,8 @@ export function useMode() {
       console.log('6각형')
       handleTemplateB(params)
     }
+
+    setTemplateType(3)
   }
 
   /**
@@ -3190,13 +3207,32 @@ export function useMode() {
       fontSize: 15, // fontSize는 필요에 따라 조정
     }
 
+    let polygonArray = []
+
     roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
       drawPolygon.setViewLengthText(false)
       drawPolygon.sendToBack()
       canvas.add(drawPolygon)
+      polygonArray.push(drawPolygon)
     })
     canvas.renderAll()
+
+    setRoofPolygonArray(polygonArray)
+  }
+
+  const makeRoofTrestle = () => {
+    if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
+      alert('객체가 비어있습니다.')
+      return
+    }
+
+    const polygons = roofPolygonArray
+
+    polygons.forEach((polygon) => {
+      const trestlePolygon = handleOuterlinesTest(polygon, -12)
+      trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
+    })
   }
 
   return {

src/store/canvasAtom.js

@@ -42,6 +42,12 @@ export const roofPolygonPatternArrayState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const roofPolygonArrayState = atom({
+  key: 'roofPolygonArray',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
 export const templateTypeState = atom({
   key: 'templateType',
   default: 1, //1:모임지붕, 2:A타입, 3:B타입