refactor: Remove unused code and optimize Roof2 component

src/hooks/useMode.js

@@ -902,22 +902,403 @@ export function useMode() {
 
   /**
    * 템플릿 B 적용
-   * 1. 모드 체인지
-   * 2. 외벽선 그리기 마무리
    */
   const applyTemplateB = () => {
     changeMode(canvas, Mode.EDIT)
     const polygon = drawWallPolygon()
-    console.log('polygon', polygon)
     const params = {
       eaves: 50,
       edge: 20,
       polygon,
     }
     handleInnerLineColor(polygon)
-    handleOuterLineTemplateB(params)
+    // handleOuterLineTemplateB(params)
+    console.log(polygon.lines.length)
+    if (polygon.lines.length === 4) {
+      handleTemplateBRect(params)
+    } else if (polygon.length === 6) {
+      handleTemplateB(params)
+    }
   }
 
+  /**
+   * 4각형일때 계산 로직
+   * @param {obj} params
+   */
+  const handleTemplateBRect = (params) => {
+    const { eaves, edge, polygon } = params
+    const centerLinePoint = {}
+    const centerDashLinePoint = {}
+
+    const qlineOpt = {
+      stroke: 'blue',
+      strokeWidth: 2,
+      selectable: false,
+      fontSize: fontSize,
+    }
+    const qlineOptDash = {
+      stroke: 'black',
+      strokeWidth: 2,
+      strokeDashArray: [5, 5],
+      selectable: false,
+      fontSize: fontSize,
+    }
+    const qlineOptDashWithoutLength = {
+      ...qlineOptDash,
+      isActiveLengthText: false,
+    }
+
+    polygon.lines.forEach((line, index) => {
+      let outline
+      if (index === 0) {
+        outline = new QLine([line.x1 - edge, line.y1 - eaves, line.x2 - edge, line.y2 + eaves], qlineOpt)
+        const centeredPoint = getCenterPoint(line.y1, line.y2)
+        centerLinePoint.x1 = line.x1 - edge
+        centerLinePoint.y1 = centeredPoint
+        centerLinePoint.y2 = centeredPoint
+        centerDashLinePoint.y1 = line.y1 - eaves
+        centerDashLinePoint.y2 = line.y2 + eaves
+      } else if (index === 1) {
+        outline = new QLine([line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves], qlineOpt)
+        const centeredPoint = getCenterPoint(line.x1, line.x2)
+        centerLinePoint.x2 = line.x2 + edge
+        centerDashLinePoint.x1 = centeredPoint
+        centerDashLinePoint.x2 = centeredPoint
+      } else if (index === 2) {
+        outline = new QLine([line.x1 + edge, line.y1 + eaves, line.x2 + edge, line.y2 - eaves], qlineOpt)
+      } else if (index === 3) {
+        outline = new QLine([line.x1 + edge, line.y1 - eaves, line.x2 - edge, line.y2 - eaves], qlineOpt)
+      }
+      canvas.add(outline)
+    })
+    const centerLine = new QLine([centerLinePoint.x1, centerLinePoint.y1, centerLinePoint.x2, centerLinePoint.y2], qlineOpt)
+    canvas.add(centerLine)
+    const centerDashLine1 = new QLine(
+      [centerDashLinePoint.x1, centerDashLinePoint.y1, centerDashLinePoint.x2, getCenterPoint(centerDashLinePoint.y1, centerDashLinePoint.y2)],
+      qlineOptDashWithoutLength,
+    )
+    canvas.add(centerDashLine1)
+    const centerDashLine2 = new QLine(
+      [centerDashLinePoint.x1, getCenterPoint(centerDashLinePoint.y1, centerDashLinePoint.y2), centerDashLinePoint.x2, centerDashLinePoint.y2],
+      qlineOptDashWithoutLength,
+    )
+    canvas.add(centerDashLine2)
+
+    canvas.renderAll()
+  }
+
+  /**
+   * 6각형일때 계산 로직
+   * @param {obj} params
+   */
+  const handleTemplateB = (params) => {
+    const { eaves, edge, polygon } = params
+    // 가장 긴 라인이 첫번째일때
+    let shapeType = 0
+    console.log(polygon)
+    const odd = polygon.lines.filter((line, index) => index % 2 === 0)
+    const even = polygon.lines.filter((line, index) => index % 2 !== 0)
+    const rerangeOdd = chgLineDirectionVertical(odd)
+    const rerangeEven = chgLineDirectionHorizontal(even)
+    // 가장 긴 라인이 첫번째인지 판단
+    chkLengthIndex({ arr: odd, type: 'L' }) !== 0 ? (shapeType = 1) : null
+    // 가장 짧은 라인의 인덱스 반환
+    const shortIndex = chkLengthIndex({ arr: odd, type: 'S' })
+
+    const centralLinePoint = {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+    const centralSubLinePoint = {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+    const centralDashLinePoint = {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+    const centralSubDashLinePoint = {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+    const qlineOpt = {
+      stroke: 'blue',
+      strokeWidth: 2,
+      selectable: false,
+      fontSize: fontSize,
+    }
+    const qlineOptDash = {
+      stroke: 'black',
+      strokeWidth: 2,
+      strokeDashArray: [5, 5],
+      selectable: false,
+      fontSize: fontSize,
+    }
+
+    rerangeOdd.forEach((line, index) => {
+      const centeredPoint = getCenterPoint(line.y1, line.y2)
+      let points1 = []
+      let points2 = []
+      if (polygon.shape === 2 || polygon.shape === 3) {
+        if (index === 0) {
+          points1 = [line.x1 - edge, line.y1 - eaves, line.x1 - edge, centeredPoint]
+          points2 = [line.x2 - edge, centeredPoint, line.x2 - edge, line.y2 + eaves]
+          centralLinePoint.x1 = line.x1 - edge
+          centralLinePoint.y1 = centeredPoint
+          centralLinePoint.y2 = centeredPoint
+          centralDashLinePoint.y1 = line.y1 - eaves
+          centralDashLinePoint.y2 = line.y2 + eaves
+        } else if (index === 1) {
+          if (polygon.shape === 2) {
+            points1 = [line.x1 + edge, line.y1 - eaves, line.x1 + edge, centeredPoint]
+            points2 = [line.x1 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+            centralSubLinePoint.x2 = line.x1 + edge
+            centralSubLinePoint.y2 = centeredPoint
+          } else {
+            points1 = [line.x1 + edge, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x2 + edge, line.y2 + eaves]
+            points2 = [line.x1, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x1, line.y1 + eaves]
+            centralLinePoint.x2 = line.x1 + edge
+            centralSubLinePoint.y1 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
+            centralSubLinePoint.y2 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
+          }
+        } else if (index === 2) {
+          if (polygon.shape === 2) {
+            points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centralSubLinePoint.y2]
+            points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
+          } else {
+            points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
+            points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+          }
+        }
+      } else {
+        if (index === 0) {
+          points1 = [line.x1 - edge, line.y1 - eaves, line.x2 - edge, line.y2 + eaves]
+          centralSubLinePoint.x1 = line.x1 - edge
+          centralSubLinePoint.y1 = getCenterPoint(line.y1, line.y2)
+          centralSubLinePoint.y2 = getCenterPoint(line.y1, line.y2)
+        } else if (index === 1) {
+          if (polygon.shape === 1) {
+            points1 = [line.x1 - edge, centralSubLinePoint.y1, line.x2 - edge, line.y2 + eaves]
+            points2 = [line.x1, centralSubLinePoint.y1, line.x1, line.y1 + eaves]
+            centralLinePoint.x1 = line.x1 - edge
+            centralSubLinePoint.x2 = line.x2
+          } else {
+            points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
+            points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+            centralLinePoint.x2 = line.x1 + edge
+            centralLinePoint.y1 = centeredPoint
+            centralLinePoint.y2 = centeredPoint
+            centralDashLinePoint.y1 = line.y1 - eaves
+            centralDashLinePoint.y2 = line.y2 + eaves
+          }
+        } else {
+          if (polygon.shape === 1) {
+            points1 = [line.x1 + edge, line.y1 - eaves, line.x1 + edge, centeredPoint]
+            points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+            centralLinePoint.x2 = line.x1 + edge
+            centralLinePoint.y1 = centeredPoint
+            centralLinePoint.y2 = centeredPoint
+            centralDashLinePoint.y1 = line.y1 - eaves
+            centralDashLinePoint.y2 = line.y2 + eaves
+          } else {
+            points1 = [line.x1 - edge, line.y1 - eaves, line.x2 - edge, centralSubLinePoint.y1]
+            points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
+            centralLinePoint.x1 = line.x1 - edge
+            centralSubLinePoint.x2 = line.x2
+          }
+        }
+      }
+
+      if (points1.length > 0) {
+        const subLine1 = new QLine(points1, qlineOpt)
+        canvas.add(subLine1)
+      }
+      if (points2.length > 0) {
+        const subLine2 = new QLine(points2, qlineOpt)
+        canvas.add(subLine2)
+      }
+    })
+
+    rerangeEven.forEach((line, index) => {
+      let points = []
+      if (polygon.shape === 2 || polygon.shape === 3) {
+        if (index === 0) {
+          points = [line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves]
+          if (polygon.shape === 3) {
+            centralDashLinePoint.x1 = getCenterPoint(line.x1, line.x2)
+            centralDashLinePoint.x2 = getCenterPoint(line.x1, line.x2)
+          }
+        } else if (index === 2) {
+          points = [line.x1 - edge, line.y1 - eaves, line.x2 + edge, line.y2 - eaves]
+          if (polygon.shape === 2) {
+            centralDashLinePoint.x1 = getCenterPoint(line.x1, line.x2)
+            centralDashLinePoint.x2 = getCenterPoint(line.x1, line.x2)
+            centralLinePoint.x2 = line.x2 + edge
+          }
+        } else {
+          if (polygon.shape === 2) {
+            const subLines = [
+              [line.x1, line.y1 - eaves, line.x2 + edge, line.y2 - eaves],
+              [line.x1, centralSubLinePoint.y2, centralSubLinePoint.x2, centralSubLinePoint.y2],
+            ]
+            subLines.forEach((sLine, index) => {
+              const subLine = new QLine(sLine, qlineOpt)
+              canvas.add(subLine)
+            })
+            centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
+            centralSubDashLinePoint.x2 = getCenterPoint(line.x1, line.x2 + edge)
+            centralSubDashLinePoint.y1 = line.y1 - eaves
+            centralSubDashLinePoint.y2 = centralSubLinePoint.y2
+          } else {
+            const subLines = [
+              [line.x1, line.y1 + eaves, line.x2 + edge, line.y2 + eaves],
+              [line.x1, centralSubLinePoint.y1, line.x2 + edge, centralSubLinePoint.y2],
+            ]
+            subLines.forEach((sLine, index) => {
+              const subLine = new QLine(sLine, qlineOpt)
+              canvas.add(subLine)
+            })
+            centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
+            centralSubDashLinePoint.x2 = getCenterPoint(line.x1, line.x2 + edge)
+            centralSubDashLinePoint.y1 = centralSubLinePoint.y1
+            centralSubDashLinePoint.y2 = line.y2 + eaves
+          }
+        }
+      } else {
+        if (index === 0) {
+          if (polygon.shape === 1) {
+            const subLines = [
+              [centralSubLinePoint.x1, centralSubLinePoint.y1, centralSubLinePoint.x2, centralSubLinePoint.y2],
+              [line.x1 - edge, line.y1 + eaves, line.x2, line.y1 + eaves],
+            ]
+            subLines.forEach((sLine, index) => {
+              const subLine = new QLine(sLine, qlineOpt)
+              canvas.add(subLine)
+            })
+            centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
+            centralSubDashLinePoint.x2 = getCenterPoint(line.x1 - edge, line.x2)
+            centralSubDashLinePoint.y1 = centralSubLinePoint.y1
+            centralSubDashLinePoint.y2 = line.y2 + eaves
+          } else {
+            points = [line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves]
+          }
+        } else if (index === 1) {
+          if (polygon.shape === 1) {
+            points = [line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves]
+            centralDashLinePoint.x1 = getCenterPoint(line.x1, line.x2)
+            centralDashLinePoint.x2 = getCenterPoint(line.x1, line.x2)
+          } else {
+            points = [line.x1 - edge, line.y1 - eaves, line.x2 + edge, line.y2 - eaves]
+            centralDashLinePoint.x1 = getCenterPoint(line.x1, line.x2)
+            centralDashLinePoint.x2 = getCenterPoint(line.x1, line.x2)
+          }
+        } else {
+          if (polygon.shape === 1) {
+            points = [line.x1 - edge, line.y1 - eaves, line.x2 + edge, line.y2 - eaves]
+          } else {
+            const subLines = [
+              [centralSubLinePoint.x1, centralSubLinePoint.y1, centralSubLinePoint.x2, centralSubLinePoint.y2],
+              [line.x1 - edge, line.y1 - eaves, line.x2, line.y1 - eaves],
+            ]
+            subLines.forEach((sLine, index) => {
+              const subLine = new QLine(sLine, qlineOpt)
+              canvas.add(subLine)
+            })
+            centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
+            centralSubDashLinePoint.x2 = getCenterPoint(line.x1 - edge, line.x2)
+            centralSubDashLinePoint.y1 = line.y1 - eaves
+            centralSubDashLinePoint.y2 = centralSubLinePoint.y2
+          }
+        }
+      }
+
+      if (points.length > 0) {
+        const subLine = new QLine(points, qlineOpt)
+        canvas.add(subLine)
+      }
+    })
+
+    const centralLine = new QLine([centralLinePoint.x1, centralLinePoint.y1, centralLinePoint.x2, centralLinePoint.y2], qlineOpt)
+    canvas.add(centralLine)
+    const centralDashLine1 = new QLine([centralDashLinePoint.x1, centralDashLinePoint.y1, centralDashLinePoint.x1, centralLinePoint.y2], qlineOptDash)
+    canvas.add(centralDashLine1)
+    const centralDashLine2 = new QLine([centralDashLine1.x2, centralDashLine1.y2, centralDashLinePoint.x2, centralDashLinePoint.y2], qlineOptDash)
+    canvas.add(centralDashLine2)
+    const centralSubDashLine = new QLine(
+      [centralSubDashLinePoint.x1, centralSubDashLinePoint.y1, centralSubDashLinePoint.x2, centralSubDashLinePoint.y2],
+      qlineOptDash,
+    )
+    canvas.add(centralSubDashLine)
+
+    canvas.renderAll()
+  }
+
+  /**
+   * 세로 방샹 라인의 좌표 순서를 위에서 아래로 변경
+   * @param {array} arr
+   * @returns
+   */
+  const chgLineDirectionVertical = (arr) => {
+    const newArr = arr.map((line, index) => {
+      if (line.direction !== 'bottom') {
+        const newPoint = { x1: line.x2, y1: line.y2, x2: line.x1, y2: line.y1 }
+        return newPoint
+      } else {
+        return line
+      }
+    })
+    return newArr
+  }
+
+  /**
+   * 가로 방향 라인의 좌표 순서를 왼쪽에서 오른쪽으로 변경
+   * @param {array} arr
+   * @returns
+   */
+  const chgLineDirectionHorizontal = (arr) => {
+    const newArr = arr.map((line, index) => {
+      if (line.direction !== 'right') {
+        const newPoint = { x1: line.x2, y1: line.y2, x2: line.x1, y2: line.y1 }
+        return newPoint
+      } else {
+        return line
+      }
+    })
+    return newArr
+  }
+
+  /**
+   * 라인 배열 중 가장 긴 라인의 인덱스를 반환합니다.
+   */
+  const chkLengthIndex = (params) => {
+    const { arr, type } = params
+    let maxIndex = 0
+    for (let i = 1; i < arr.length; i++) {
+      if (type === 'L') {
+        if (arr[maxIndex].length < arr[i].length) {
+          maxIndex = i
+        }
+      } else {
+        if (arr[maxIndex].length > arr[i].length) {
+          maxIndex = i
+        }
+      }
+    }
+    return maxIndex
+  }
+
+  /**
+   * 외벽선 색깔을 변경
+   * @param {array} polygon
+   */
   const handleInnerLineColor = (polygon) => {
     polygon.lines.forEach((line, index) => {
       if (index % 2 === 0) {
@@ -931,6 +1312,7 @@ export function useMode() {
         strokeWidth: 2,
         selectable: false,
         fontSize: fontSize,
+        isActiveLengthText: false,
       })
       canvas.add(overLine)
     })