세로형 폴리곤 패턴 추가

src/hooks/useMode.js

@@ -3,7 +3,7 @@ import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
-import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom'
+import { fontSizeState, roofState, sortedPolygonArray, roofPolygonPatternArrayState, wallState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export const Mode = {
@@ -29,7 +29,7 @@ export function useMode() {
   const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
   const [roof, setRoof] = useRecoilState(roofState)
   const [wall, setWall] = useRecoilState(wallState)
-  const [templatePolygonState, setTemplatePolygonState] = useRecoilState(templatePolygonArrayState)
+  const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -890,6 +890,34 @@ export function useMode() {
     return rtnLines
   }
 
+  const makeRoofPatternPolygon = (pointsObj, canvas) => {
+    const commonOption = {
+      fill: 'red',
+      opacity: 0.2,
+      selectable: false,
+      fontSize: 15, // fontSize는 필요에 따라 조정
+    }
+
+    const bigRoof = new QPolygon(pointsObj.bigRoofPolygon, commonOption)
+    const middleRoof = new QPolygon(pointsObj.middleRoofPolygon, commonOption)
+    const smallRoof = new QPolygon(pointsObj.smallRoofPolygon, commonOption)
+
+    setRoofPolygonPattern({ bigRoof, middleRoof, smallRoof })
+
+    bigRoof.sendToBack() //객체를 가장 뒤로
+    middleRoof.sendToBack()
+    smallRoof.sendToBack()
+
+    bigRoof.setViewLengthText(false) //치수 필요없음
+    middleRoof.setViewLengthText(false)
+    smallRoof.setViewLengthText(false)
+
+    canvas.add(bigRoof) //캔버스 객체 추가
+    canvas.add(middleRoof)
+    canvas.add(smallRoof)
+    canvas.renderAll()
+  }
+
   const applyTemplateA = () => {
     changeMode(canvas, Mode.EDIT)
     const polygon = drawWallPolygon()
@@ -1244,37 +1272,34 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawLastInLine1)
-        outLines.push(drawLastInLine1)
 
         let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
-        outLines.push(drawLastInLine2)
 
-        console.log('outLines', outLines)
+        const bigRoofPolygon = [
-
-        const bigPolygonArray = [
           { x: outLines[2].x1, y: outLines[2].y1 },
-          { x: outLines[5].x1, y: outLines[5].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[0].x2, y: outLines[0].y2 },
-          { x: outLines[11].x1, y: outLines[11].y1 },
+          { x: outLines[1].x2, y: outLines[0].y2 },
           { x: outLines[1].x2, y: outLines[1].y2 },
         ]
 
-        // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
+        const middleRoofPolygon = [
-        const bigPolygon = new QPolygon(
+          { x: outLines[0].x2, y: outLines[0].y2 },
-          bigPolygonArray,
+          { x: outLines[0].x1, y: outLines[0].y1 },
-          {
+          { x: outLines[3].x2, y: outLines[3].y2 },
-            stroke: 'black',
+          { x: outLines[3].x1, y: outLines[3].y1 },
-            fill: 'red',
+        ]
-            viewLengthText: true,
-            selectable: true,
-            fontSize: fontSize,
-          },
-          canvas,
-        )
 
-        canvas.add(bigPolygon)
+        const smallRoofPolygon = [
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+        ]
+
+        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1299,6 +1324,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1322,8 +1348,8 @@ export function useMode() {
         //작은 지붕쪽 높이 길이를 구하는 로직
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
-
         canvas.add(secondVertCenterLine)
+        outLines.push(secondVertCenterLine)
 
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
@@ -1347,6 +1373,7 @@ export function useMode() {
           }
           let drawline = new QLine(points, centerLineOpt)
           canvas.add(drawline)
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1361,6 +1388,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawFirstLine1)
+        outLines.push(drawFirstLine1)
 
         //첫번째 외곽선 2번
         let drawFirstLine2 = new QLine(
@@ -1368,16 +1396,16 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawFirstLine2)
+        outLines.push(drawFirstLine2)
 
         //중간라인 외각선
         let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], centerLineOpt)
         canvas.add(drawMiddleLine)
+        outLines.push(drawMiddleLine)
 
         //마지막 외각선
         halfLength = lastLine.length / 2
 
-        console.log(lastOuterLine)
-
         let drawLastLine1 = new QLine(
           [lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge],
           centerLineOpt,
@@ -1398,6 +1426,31 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[3].x1, y: outLines[3].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[1].x2, y: outLines[0].y1 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[4].x1, y: outLines[4].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+        ]
+
+        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
       }
     } else {
       if (horizontalDirection === 'left') {
@@ -1423,6 +1476,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1447,6 +1501,7 @@ export function useMode() {
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
         canvas.add(secondVertCenterLine)
+        outLines.push(secondVertCenterLine)
 
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
@@ -1470,6 +1525,7 @@ export function useMode() {
 
           let drawline = new QLine(points, centerLineOpt)
           canvas.add(drawline)
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1498,9 +1554,6 @@ export function useMode() {
 
         //마지막 외각선
         halfLength = lastLine.length / 2
-
-        console.log(lastOuterLine)
-
         let drawLastLine1 = new QLine(
           [lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge],
           centerLineOpt,
@@ -1518,6 +1571,31 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[1].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[3].x1, y: outLines[3].y1 },
+        ]
+
+        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
       } else {
         //윗쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1541,6 +1619,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1571,7 +1650,7 @@ export function useMode() {
         })
 
         canvas.add(secondVertCenterLine)
-
+        outLines.push(secondVertCenterLine)
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
         let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2
@@ -1585,14 +1664,16 @@ export function useMode() {
         //일반라인 외각선 그리기
         normalIndexArray.forEach((index) => {
           const line = lines[index]
+          let drawline
           if (index === 0 || index === 2) {
             let tmpEdge = index === 2 ? 0 : edge
-            let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt)
+            drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt)
             canvas.add(drawline)
           } else {
-            let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt)
+            drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt)
             canvas.add(drawline)
           }
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1635,6 +1716,31 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[1].x1, y: outLines[0].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[3].x1, y: outLines[3].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+        ]
+
+        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
       }
     }
 

src/store/canvasAtom.js

@@ -36,8 +36,8 @@ export const wallState = atom({
   dangerouslyAllowMutability: true,
 })
 
-export const templatePolygonArrayState = atom({
+export const roofPolygonPatternArrayState = atom({
-  key: 'templatePolygon',
+  key: 'roofPolygonPattern',
   default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
+  dangerouslyAllowMutability: true,
 })
-