폴리곤 패턴 배열로 수정

src/hooks/useMode.js

@@ -1290,6 +1290,11 @@ export function useMode() {
     let vertCenterLine
     let secondVertCenterLine
     let templatePolygonObj = {}
+    let roofPatternPolygonArray = []
+
+    let bigRoofPolygon = []
+    let middleRoofPolygon = []
+    let smallRoofPolygon = []
 
     if (prevHighIndex === 1) {
       if (horizontalDirection === 'left') {
@@ -1415,7 +1420,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        bigRoofPolygon = [
           { x: outLines[2].x1, y: outLines[2].y1 },
           { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
@@ -1424,20 +1429,19 @@ export function useMode() {
           { x: outLines[1].x2, y: outLines[1].y2 },
         ]
 
-        const middleRoofPolygon = [
+        middleRoofPolygon = [
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[3].x2, y: outLines[3].y2 },
           { x: outLines[3].x1, y: outLines[3].y1 },
         ]
 
-        const smallRoofPolygon = [
+        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 },
         ]
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1565,7 +1569,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        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 },
@@ -1574,20 +1578,19 @@ export function useMode() {
           { x: outLines[1].x2, y: outLines[0].y1 },
         ]
 
-        const middleRoofPolygon = [
+        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 = [
+        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 },
         ]
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     } else {
       if (horizontalDirection === 'left') {
@@ -1709,7 +1712,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        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 },
@@ -1718,21 +1721,19 @@ export function useMode() {
           { x: outLines[0].x1, y: outLines[0].y1 },
         ]
 
-        const middleRoofPolygon = [
+        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 = [
+        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 },
         ]
-
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //윗쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1854,7 +1855,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        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 },
@@ -1863,24 +1864,28 @@ export function useMode() {
           { x: outLines[4].x2, y: outLines[4].y2 },
         ]
 
-        const middleRoofPolygon = [
+        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 = [
+        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 },
         ]
-
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     }
 
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    roofPatternPolygonArray.push(smallRoofPolygon)
+
+    setRoofPolygonPattern({ roofPatternPolygonArray, lines })
+
     canvas.renderAll()
   }
 
@@ -1893,6 +1898,8 @@ export function useMode() {
     let lines = [] //내각라인
     let outLines = [] //아웃라인
     let halfLength = 0 //선길이
+    let offsetX
+    let offsetY
 
     const dashedCenterLineOpt = {
       stroke: 'black',
@@ -1945,6 +1952,32 @@ export function useMode() {
       y: line.y1,
     }))
 
+    //좌표 재정렬
+    function reSortQlineArray(array) {
+      let tmpArray = []
+      array.forEach((arr, index) => {
+        let minX, minY, maxX, maxY
+        let tmp = arr
+        if (arr.x2 < arr.x1 || arr.y2 < arr.y1) {
+          minX = arr.x2
+          minY = arr.y2
+          maxX = arr.x1
+          maxY = arr.y1
+          tmp['x1'] = minX
+          tmp['y1'] = minY
+          tmp['x2'] = maxX
+          tmp['y2'] = maxY
+          tmp.line['x1'] = minX
+          tmp.line['y1'] = minY
+          tmp.line['x2'] = maxX
+          tmp.line['y2'] = maxY
+        }
+        tmpArray.push(tmp)
+      })
+
+      return tmpArray
+    }
+
     // 외적을 계산하는 함수
     function crossProduct(p1, p2, p3) {
       const dx1 = p2.x - p1.x
@@ -1977,7 +2010,10 @@ export function useMode() {
     // 오목한 부분 인덱스 찾기
     concaveIndices = findConcavePointIndices(points) //오목한 부분을 제외한 인덱스
     const concavePoints = concaveIndices.map((index) => points[index])
-
+    const concaveLine = {
+      index: concavePointIndices[0],
+      line: lines[concavePointIndices[0]],
+    }
     for (var i = 0; i < points.length; i++) {
       var prev = points[(i - 1 + points.length) % points.length]
       var current = points[i]
@@ -2012,11 +2048,8 @@ export function useMode() {
         y: averageNormal.y / lengthNormal,
       }
 
-      let offsetX
-      let offsetY
-
       if (concavePointIndices[0] === i || concavePointIndices[1] === i) {
-        // 인덱스가 배열이랑 같으면
+        //인덱스가 배열이랑 같으면
         if ((concavePointIndices[0] === 4 && concavePointIndices[1] === 5) || (concavePointIndices[0] === 2 && concavePointIndices[1] === 3)) {
           offsetX = 1
           offsetY = (offsetInputY / transformedMax) * originalMax * 2
@@ -2058,35 +2091,121 @@ export function useMode() {
     }
 
     canvas?.remove(outlinePolygon) //임시 폴리곤을 삭제
-    canvas?.remove(outLines[concavePointIndices[0]]) //가운데 제외되는 선을 지운다
 
     //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정
-    outLines.forEach((outline, index) => {
+    outLines = reSortQlineArray(outLines)
-      let minX, minY, maxX, maxY
+
-      if (outline.x2 < outline.x1 || outline.y2 < outline.y1) {
+    let parallelLinesIdx = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기
-        outLines[index].x1 = outline.x2
+    let parallelLines = outLines[parallelLinesIdx]
-        outLines[index].y1 = outline.y2
+    if (parallelLinesIdx >= outLines.length) {
-        outLines[index].x2 = outline.x1
+      parallelLines = outLines[parallelLinesIdx - outLines.length]
-        outLines[index].y2 = outline.y1
+      parallelLinesIdx = parallelLinesIdx - outLines.length
-        outLines[index].line.x1 = minX
+    }
-        outLines[index].line.y1 = minY
+
-        outLines[index].line.x2 = maxX
+    let vertCenterLine = []
-        outLines[index].line.y2 = maxY
+    let halfHoriCenterLinePoint = [] //카라바선의 2분할의 1번 배열
+    let horiCenterLine = []
+    let shorVertCenterLine = []
+
+    if (concavePointIndices[0] % 2 === 0) {
+      // 오목한 부분이 세로선일때 ㄷ, 역ㄷ
+    } else {
+      // 오목한 부분이 세로선일때 ㄷ, 역ㄷ
+      outLines.forEach((outline, index) => {
+        if (!(index % 2 === 0)) {
+          //세로라인이 케라바 라인임
+
+          if (concavePointIndices[0] !== index) {
+            //오목이가 아니면 반으로 갈라서 계산
+
+            //카라바 선의 2분할 치수를 그림
+            let halfLength = outline.length / 2
+            let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], {
+              stroke: 'red',
+              strokeWidth: 2,
+              property: 'normal',
+              fontSize: 14,
+            })
+            canvas.add(centerLine1)
+
+            let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], {
+              stroke: 'red',
+              strokeWidth: 2,
+              property: 'normal',
+              fontSize: 14,
+            })
+            canvas.add(centerLine2)
+            canvas.remove(outline) //기존 라인 삭제
+
+            halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+          }
+        }
+      })
+
+      //각 센터 라인을 그림
+      halfHoriCenterLinePoint.forEach((centerPoint) => {
+        let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, concaveLine.line.y1], centerLineOpt)
+        canvas.add(line)
+
+        line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌
+        vertCenterLine.push(line)
+      })
+
+      vertCenterLine = reSortQlineArray(vertCenterLine)
+
+      //해당라인에서 만나는점을 계산
+      vertCenterLine.forEach((vertLine) => {
+        if (parallelLinesIdx !== vertLine.arrayIndex) {
+          //평행선을 제외한 애들만 네모를 연결
+          let nearLine
+
+          if (vertLine.arrayIndex > concaveLine.index) {
+            //센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼
+            nearLine = outLines[concaveLine.index + 1]
+          } else {
+            nearLine = outLines[concaveLine.index - 1]
+          }
+
+          let nearLineY = nearLine.y1
+          if (parallelLinesIdx < concaveLine.index) {
+            //오목점 위치가 평행선보다 크면 위쪽으로 오목
+            nearLineY = nearLine.y2
+          }
+
+          let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearLine.x1, nearLineY], centerLineOpt)
+          canvas.add(centerExtendLine)
+
+          let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
+          let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearLine.x1, betweenCenterLine], dashedCenterLineOpt)
+
+          canvas.add(centerDashLine)
+          horiCenterLine.push(centerDashLine)
+          shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음
+        } else {
+          let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
+
+          let dashCenterExtendLineLength = (longDashLine.x2 - longDashLine.x1) * 2
+          let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
+
+          let centerDashLine = new QLine(
+            [longDashLine.x1, betweenCenterLine, longDashLine.x1 + dashCenterExtendLineLength, betweenCenterLine],
+            dashedCenterLineOpt,
+          )
+          canvas.add(centerDashLine)
+          horiCenterLine.push(centerDashLine)
+        }
+      })
+
+      if (parallelLinesIdx < concaveLine.index) {
+        offsetY = offsetY * -1 // 위로올린다
       }
-    })
 
-    // for (let i = 0; i < outLines.length; i++) {
+      const lastInLine = new QLine(
-    //   if (!i % 2 === 0) {
+        [shorVertCenterLine[0].x1, lines[concavePointIndices[0]].y1 + offsetY, shorVertCenterLine[1].x1, lines[concavePointIndices[0]].y2 + offsetY],
-    //     if (i === concavePointIndices[0] - 1 || i === concavePointIndices[1] + 1) {
+        centerLineOpt,
-    //       //배열 3번이나 5번일때
+      )
-    //     } else {
+      canvas.add(lastInLine)
-    //     }
+      canvas.remove(outLines[concavePointIndices[0]])
-    //   }
-    // }
-
-    let parallelLines = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기
-    if (parallelLines > outLines.length) {
-      parallelLines = outLines[concavePointIndices[0] + 4 - outLines.length - 1]
     }
 
     canvas.renderAll()
@@ -2512,6 +2631,8 @@ export function useMode() {
   }
 
   const makeRoofPatternPolygon = (roofStyle) => {
+    console.log('roofPolygonPattern', roofPolygonPattern)
+
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
       return
@@ -2561,21 +2682,12 @@ export function useMode() {
       fontSize: 15, // fontSize는 필요에 따라 조정
     }
 
-    const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption)
+    roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
-    const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
+      const drawPolygon = new QPolygon(patternPolygon, commonOption)
-    const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
+      drawPolygon.setViewLengthText(false)
-
+      drawPolygon.sendToBack()
-    bigRoof.setViewLengthText(false) //치수 필요없음
+      canvas.add(drawPolygon)
-    middleRoof.setViewLengthText(false)
+    })
-    smallRoof.setViewLengthText(false)
-
-    bigRoof.sendToBack() //객체를 가장 뒤로
-    middleRoof.sendToBack()
-    smallRoof.sendToBack()
-
-    canvas.add(bigRoof) //캔버스 객체 추가
-    canvas.add(middleRoof)
-    canvas.add(smallRoof)
     canvas.renderAll()
   }