가대 설치 추가

src/components/fabric/QPolygon.js

@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { drawHelpLineInHexagon, drawHelpLineInHexagon2, drawHelpLineInHexagon3 } from '@/util/qpolygon-utils'
+import { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -212,9 +212,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             top: rectTop,
             width: rectWidth,
             height: rectHeight,
-            stroke: 'black', // or any other color
-            fill: 'transparent',
+            fill: '#BFFD9F',
             selectable: false,
+            opacity: 0.6,
           })
 
           this.canvas.add(rect)

src/hooks/useMode.js

@@ -6,12 +6,12 @@ import { useRecoilState } from 'recoil'
 import {
   canvasSizeState,
   fontSizeState,
+  roofPolygonArrayState,
   roofPolygonPatternArrayState,
   roofState,
   sortedPolygonArray,
-  wallState,
   templateTypeState,
-  roofPolygonArrayState,
+  wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -2267,7 +2267,13 @@ export function useMode() {
           canvas.add(centerLine2)
           canvas.remove(outLines[idx]) //기존 라인 삭제
 
-          halfHoriCenterLinePoint.push({ index: idx, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+          halfHoriCenterLinePoint.push({
+            index: idx,
+            x1: centerLine1.x1,
+            y1: centerLine1.y1,
+            x2: centerLine1.x2,
+            y2: centerLine1.y2,
+          }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
         }
       })
 
@@ -2468,7 +2474,13 @@ export function useMode() {
             canvas.add(centerLine2)
             canvas.remove(outline) //기존 라인 삭제
 
-            halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+            halfHoriCenterLinePoint.push({
+              index: index,
+              x1: centerLine1.x1,
+              y1: centerLine1.y1,
+              x2: centerLine1.x2,
+              y2: centerLine1.y2,
+            }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
           }
         }
       })
@@ -3211,9 +3223,8 @@ export function useMode() {
 
     roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
       const drawPolygon = new QPolygon(patternPolygon, commonOption)
-      drawPolygon.setViewLengthText(false)
-      drawPolygon.sendToBack()
       canvas.add(drawPolygon)
+      drawPolygon.setViewLengthText(false)
       polygonArray.push(drawPolygon)
     })
     canvas.renderAll()
@@ -3227,11 +3238,14 @@ export function useMode() {
       return
     }
 
+    // 오목한 부분 인덱스 찾기
     const polygons = roofPolygonArray
+    let concavePolygonObj = []
 
-    polygons.forEach((polygon) => {
+    polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
       trestlePolygon.set('stroke', 'red').set('strokeDashArray', [9, 5]).set('strokeWidth', 0.3).setViewLengthText(false)
+      trestlePolygon.fillCell({ width: 100, height: 30, padding: 10 })
     })
   }
 
@@ -3247,5 +3261,6 @@ export function useMode() {
     handleOuterlinesTest,
     handleOuterlinesTest2,
     makeRoofPatternPolygon,
+    makeRoofTrestle,
   }
 }