From fa0b1934ad8461bf1e7568dc53d51c5361697718 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 19 Jul 2024 08:33:57 +0900 Subject: [PATCH] refactor: Remove unused code and optimize Roof2 component --- src/hooks/useMode.js | 390 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 386 insertions(+), 4 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 7682d49d..6785e828 100644 --- a/src/hooks/useMode.js +++ b/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) })