diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index d9ce9cd4..bfd3c787 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -124,10 +124,7 @@ export default class QPolygon extends fabric.Group { const dy = end.y - start.y const length = Math.sqrt(dx * dx + dy * dy) - const midPoint = new fabric.Point( - (start.x + end.x) / 2, - (start.y + end.y) / 2, - ) + const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2) // Create new text object if it doesn't exist const text = new fabric.Text(length.toFixed(0), { @@ -171,16 +168,8 @@ export default class QPolygon extends fabric.Group { return } - for ( - let x = bounds.left; - x < bounds.left + bounds.width; - x += cell.width + cell.padding - ) { - for ( - let y = bounds.top; - y < bounds.top + bounds.height; - y += cell.height + cell.padding - ) { + for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) { + for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) { const rect = new fabric.Rect({ left: x, top: y, @@ -198,11 +187,7 @@ export default class QPolygon extends fabric.Group { new fabric.Point(rect.left + rect.width, rect.top + rect.height), ] - const isInside = rectPoints.every( - (rectPoint) => - this.inPolygon(rectPoint) && - this.#distanceFromEdge(rectPoint) >= cell.padding, - ) + const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.#distanceFromEdge(rectPoint) >= cell.padding) if (isInside) { this.addWithUpdate(rect) @@ -219,24 +204,13 @@ export default class QPolygon extends fabric.Group { * return {boolean} */ isValid() { - const leftLinesLengthSum = this.lines - .filter((line) => line.direction === 'left') - .reduce((sum, line) => sum + line.length, 0) - const rightLinesLengthSum = this.lines - .filter((line) => line.direction === 'right') - .reduce((sum, line) => sum + line.length, 0) + const leftLinesLengthSum = this.lines.filter((line) => line.direction === 'left').reduce((sum, line) => sum + line.length, 0) + const rightLinesLengthSum = this.lines.filter((line) => line.direction === 'right').reduce((sum, line) => sum + line.length, 0) - const topLinesLengthSum = this.lines - .filter((line) => line.direction === 'top') - .reduce((sum, line) => sum + line.length, 0) - const bottomLinesLengthSum = this.lines - .filter((line) => line.direction === 'bottom') - .reduce((sum, line) => sum + line.length, 0) + const topLinesLengthSum = this.lines.filter((line) => line.direction === 'top').reduce((sum, line) => sum + line.length, 0) + const bottomLinesLengthSum = this.lines.filter((line) => line.direction === 'bottom').reduce((sum, line) => sum + line.length, 0) - return ( - leftLinesLengthSum === rightLinesLengthSum && - topLinesLengthSum === bottomLinesLengthSum - ) + return leftLinesLengthSum === rightLinesLengthSum && topLinesLengthSum === bottomLinesLengthSum } inPolygon(point) { @@ -261,10 +235,7 @@ export default class QPolygon extends fabric.Group { continue } - let xInt = - ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) / - (vertex2.y - vertex1.y) + - vertex1.x + let xInt = ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) / (vertex2.y - vertex1.y) + vertex1.x if (xInt < point.x) { intersects++ } @@ -284,9 +255,7 @@ export default class QPolygon extends fabric.Group { const dx = vertex2.x - vertex1.x const dy = vertex2.y - vertex1.y - const t = - ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) / - (dx * dx + dy * dy) + const t = ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) / (dx * dx + dy * dy) let closestPoint if (t < 0) { @@ -366,9 +335,7 @@ export default class QPolygon extends fabric.Group { return } //외각선 기준 - const topIndex = findTopTwoIndexesByDistance(this.lines).sort( - (a, b) => a - b, - ) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨 + const topIndex = findTopTwoIndexesByDistance(this.lines).sort((a, b) => a - b) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨 //일단 배열 6개 짜리 기준의 선 번호 if (topIndex[0] === 4) { @@ -439,23 +406,15 @@ export default class QPolygon extends fabric.Group { const direction = smallestLines[0].direction if (direction === 'top' || direction === 'bottom') { - needPlusLine = - smallestLines[0].x1 < smallestLines[1].x1 - ? smallestLines[0] - : smallestLines[1] - needMinusLine = - needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0] + needPlusLine = smallestLines[0].x1 < smallestLines[1].x1 ? smallestLines[0] : smallestLines[1] + needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0] type = 1 // 가로가 긴 사각형 } if (direction === 'left' || direction === 'right') { - needPlusLine = - smallestLines[0].y1 < smallestLines[1].y1 - ? smallestLines[0] - : smallestLines[1] - needMinusLine = - needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0] + needPlusLine = smallestLines[0].y1 < smallestLines[1].y1 ? smallestLines[0] : smallestLines[1] + needMinusLine = needPlusLine === smallestLines[0] ? smallestLines[1] : smallestLines[0] type = 2 // 세로가 긴 사각형 } @@ -466,33 +425,21 @@ export default class QPolygon extends fabric.Group { if (type === 1) { point1 = { x: needPlusLine.x1 + smallestLength / 2, - y: - needPlusLine.y1 > needPlusLine.y2 - ? needPlusLine.y1 - smallestLength / 2 - : needPlusLine.y2 - smallestLength / 2, + y: needPlusLine.y1 > needPlusLine.y2 ? needPlusLine.y1 - smallestLength / 2 : needPlusLine.y2 - smallestLength / 2, } point2 = { x: needMinusLine.x1 - smallestLength / 2, - y: - needMinusLine.y1 > needMinusLine.y2 - ? needMinusLine.y1 - smallestLength / 2 - : needMinusLine.y2 - smallestLength / 2, + y: needMinusLine.y1 > needMinusLine.y2 ? needMinusLine.y1 - smallestLength / 2 : needMinusLine.y2 - smallestLength / 2, } } else if (type === 2) { point1 = { - x: - needPlusLine.x1 > needPlusLine.x2 - ? needPlusLine.x1 - smallestLength / 2 - : needPlusLine.x2 - smallestLength / 2, + x: needPlusLine.x1 > needPlusLine.x2 ? needPlusLine.x1 - smallestLength / 2 : needPlusLine.x2 - smallestLength / 2, y: needPlusLine.y1 + smallestLength / 2, } point2 = { - x: - needMinusLine.x1 > needMinusLine.x2 - ? needMinusLine.x1 - smallestLength / 2 - : needMinusLine.x2 - smallestLength / 2, + x: needMinusLine.x1 > needMinusLine.x2 ? needMinusLine.x1 - smallestLength / 2 : needMinusLine.x2 - smallestLength / 2, y: needMinusLine.y1 - smallestLength / 2, } } @@ -611,14 +558,8 @@ export default class QPolygon extends fabric.Group { lines = [this.lines[0], this.lines[3]] lines2 = [this.lines[1], this.lines[4]] - ridgeLength1 = - this.lines[1].length > this.lines[2].length - ? this.lines[5].length - this.lines[0].length - : this.lines[1].length - ridgeLength2 = - this.lines[1].length > this.lines[2].length - ? this.lines[2].length - : this.lines[4].length - this.lines[3].length + ridgeLength1 = this.lines[1].length > this.lines[2].length ? this.lines[5].length - this.lines[0].length : this.lines[1].length + ridgeLength2 = this.lines[1].length > this.lines[2].length ? this.lines[2].length : this.lines[4].length - this.lines[3].length vPoint1 = { x: lines[0].x1 + lines[0].length / 2, y: lines[0].y1 + lines[0].length / 2, @@ -636,18 +577,8 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeEndPoint1 = [ - vPoint1.x, - vPoint1.y, - vPoint1.x + ridgeLength1, - vPoint1.y, - ] - ridgeEndPoint2 = [ - vPoint2.x, - vPoint2.y, - vPoint2.x, - vPoint2.y - ridgeLength2, - ] + ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y] + ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength2] ridgeHelpLinePoint1 = ridgeLength1 > ridgeLength2 ? [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] @@ -679,44 +610,18 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeEndPoint1 = [ - vPoint1.x, - vPoint1.y, - vPoint1.x - ridgeLength1, - vPoint1.y, - ] + ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength1, vPoint1.y] - ridgeEndPoint2 = [ - vPoint2.x, - vPoint2.y, - vPoint2.x, - vPoint2.y + ridgeLength2, - ] + ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2] - ridgeHelpLinePoint1 = [ - lines2[1].x2, - lines2[1].y2, - ridgeEndPoint1[2], - ridgeEndPoint1[3], - ] - ridgeHelpLinePoint2 = [ - lines2[0].x2, - lines2[0].y2, - ridgeEndPoint2[2], - ridgeEndPoint2[3], - ] + ridgeHelpLinePoint1 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] + ridgeHelpLinePoint2 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] } else if (type === 3) { lines = [this.lines[1], this.lines[4]] lines2 = [this.lines[2], this.lines[5]] - ridgeLength1 = - this.lines[2].length > this.lines[3].length - ? this.lines[0].length - lines[0].length - : this.lines[2].length + ridgeLength1 = this.lines[2].length > this.lines[3].length ? this.lines[0].length - lines[0].length : this.lines[2].length - ridgeLength2 = - this.lines[2].length > this.lines[3].length - ? this.lines[3].length - : this.lines[5].length - lines[1].length + ridgeLength2 = this.lines[2].length > this.lines[3].length ? this.lines[3].length : this.lines[5].length - lines[1].length vPoint1 = { x: lines[0].x1 + lines[0].length / 2, y: lines[0].y1 - lines[0].length / 2, @@ -734,19 +639,9 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeEndPoint1 = [ - vPoint1.x, - vPoint1.y, - vPoint1.x, - vPoint1.y - ridgeLength1, - ] + ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength1] - ridgeEndPoint2 = [ - vPoint2.x, - vPoint2.y, - vPoint2.x - ridgeLength2, - vPoint2.y, - ] + ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength2, vPoint2.y] ridgeHelpLinePoint1 = ridgeLength1 > ridgeLength2 @@ -779,32 +674,12 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeEndPoint1 = [ - vPoint1.x, - vPoint1.y, - vPoint1.x + ridgeLength1, - vPoint1.y, - ] + ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y] - ridgeEndPoint2 = [ - vPoint2.x, - vPoint2.y, - vPoint2.x, - vPoint2.y + ridgeLength2, - ] + ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2] - ridgeHelpLinePoint1 = [ - lines2[0].x2, - lines2[0].y2, - ridgeEndPoint1[2], - ridgeEndPoint1[3], - ] - ridgeHelpLinePoint2 = [ - lines2[1].x2, - lines2[1].y2, - ridgeEndPoint2[2], - ridgeEndPoint2[3], - ] + ridgeHelpLinePoint1 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] + ridgeHelpLinePoint2 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] } const realLine1 = new QLine( @@ -870,32 +745,21 @@ export default class QPolygon extends fabric.Group { }) // 용마루 - const ridge1 = new QLine( - [vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]], - { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }, - ) + const ridge1 = new QLine([vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]], { + fontSize: this.fontSize, + stroke: 'blue', + strokeWidth: 1, + }) // 용마루 - const ridge2 = new QLine( - [vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]], - { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }, - ) + const ridge2 = new QLine([vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]], { + fontSize: this.fontSize, + stroke: 'blue', + strokeWidth: 1, + }) const ridgeEndLine = new QLine( - [ - ridgeEndPoint1[2], - ridgeEndPoint1[3], - ridgeEndPoint2[2], - ridgeEndPoint2[3], - ], + [ridgeEndPoint1[2], ridgeEndPoint1[3], ridgeEndPoint2[2], ridgeEndPoint2[3]], { fontSize: this.fontSize, stroke: 'blue', @@ -903,17 +767,7 @@ export default class QPolygon extends fabric.Group { }, Math.abs(realLine1.length - realLine3.length), ) - this.helpLines = [ - realLine1, - realLine2, - realLine3, - realLine4, - realLine5, - realLine6, - ridge1, - ridge2, - ridgeEndLine, - ] + this.helpLines = [realLine1, realLine2, realLine3, realLine4, realLine5, realLine6, ridge1, ridge2, ridgeEndLine] this.addWithUpdate(realLine1) this.addWithUpdate(realLine2) this.addWithUpdate(realLine3) @@ -933,11 +787,7 @@ export default class QPolygon extends fabric.Group { const helpPoints = [] const notInterSectionLines = [] const ridge = [] - const maxLength = this.lines.reduce( - (max, obj) => Math.max(max, obj.length), - 0, - ) - + const maxLength = this.lines.reduce((max, obj) => Math.min(max, obj.length), 999999) this.points.forEach((point, index) => { const wallPoint = this.wall.points[index] // 두 점의 좌표 @@ -951,8 +801,8 @@ export default class QPolygon extends fabric.Group { // x1, y1을 기준으로 x2, y2와의 거리를 유지한 새로운 직선 생성 const angle = Math.atan2(y2 - y1, x2 - x1) - newX2 = x1 + (maxLength / 2) * Math.cos(angle) - newY2 = y1 + (maxLength / 2) * Math.sin(angle) + newX2 = x1 + (maxLength + 50) * Math.cos(angle) + newY2 = y1 + (maxLength + 50) * Math.sin(angle) const line = new QLine([x1, y1, newX2, newY2], { fontSize: this.fontSize, @@ -969,8 +819,7 @@ export default class QPolygon extends fabric.Group { * 삼각 지붕 */ historyLines.forEach((line, index) => { - const prevLine = - historyLines[(index - 1 + historyLines.length) % historyLines.length] + const prevLine = historyLines[(index - 1 + historyLines.length) % historyLines.length] let intersectionPoint = calculateIntersection(line, prevLine) @@ -979,21 +828,15 @@ export default class QPolygon extends fabric.Group { return } - const helpLine1 = new QLine( - [prevLine.x1, prevLine.y1, intersectionPoint.x, intersectionPoint.y], - { - fontSize: this.fontSize, - stroke: 'red', - }, - ) + const helpLine1 = new QLine([prevLine.x1, prevLine.y1, intersectionPoint.x, intersectionPoint.y], { + fontSize: this.fontSize, + stroke: 'red', + }) - const helpLine2 = new QLine( - [line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], - { - fontSize: this.fontSize, - stroke: 'red', - }, - ) + const helpLine2 = new QLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], { + fontSize: this.fontSize, + stroke: 'red', + }) notInterSectionLines.pop() helpPoints.push(intersectionPoint) @@ -1001,18 +844,16 @@ export default class QPolygon extends fabric.Group { this.addWithUpdate(helpLine2) this.removeWithUpdate(prevLine) this.removeWithUpdate(line) - this.canvas.requestRenderAll() + this.canvas.renderAll() }) // 용마루 const ridgePoint = [] helpPoints.forEach((helpPoint, index) => { - const closestLine = findClosestLineToPoint( - helpPoint, - notInterSectionLines, - ) + const closestLine = findClosestLineToPoint(helpPoint, notInterSectionLines) + // 가까운 선의 중심점 const centerClosestLinePoint = { x: (closestLine.x1 + closestLine.x2) / 2, y: (closestLine.y1 + closestLine.y2) / 2, @@ -1024,58 +865,35 @@ export default class QPolygon extends fabric.Group { switch (direction) { case 'left': { - newX = - ((closestLine.x2 - closestLine.x1) * - (helpPoint.y - closestLine.y1)) / - (closestLine.y2 - closestLine.y1) + - closestLine.x1 + newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1 newY = helpPoint.y break } case 'right': { - newX = - ((closestLine.x2 - closestLine.x1) * - (helpPoint.y - closestLine.y1)) / - (closestLine.y2 - closestLine.y1) + - closestLine.x1 + newX = ((closestLine.x2 - closestLine.x1) * (helpPoint.y - closestLine.y1)) / (closestLine.y2 - closestLine.y1) + closestLine.x1 newY = helpPoint.y break } case 'top': { newX = helpPoint.x - newY = - ((closestLine.y2 - closestLine.y1) * - (helpPoint.x - closestLine.x1)) / - (closestLine.x2 - closestLine.x1) + - closestLine.y1 + newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1 break } case 'bottom': { newX = helpPoint.x - newY = - ((closestLine.y2 - closestLine.y1) * - (helpPoint.x - closestLine.x1)) / - (closestLine.x2 - closestLine.x1) + - closestLine.y1 + newY = ((closestLine.y2 - closestLine.y1) * (helpPoint.x - closestLine.x1)) / (closestLine.x2 - closestLine.x1) + closestLine.y1 break } } - const ridgeHelpLine = new QLine( - [closestLine.x1, closestLine.y1, newX, newY], - { - fontSize: this.fontSize, - stroke: 'green', - strokeWidth: 5, - }, - ) + const ridgeHelpLine = new QLine([closestLine.x1, closestLine.y1, newX, newY], { + fontSize: this.fontSize, + stroke: 'purple', + strokeWidth: 5, + }) ridgePoint.push({ x: newX, y: newY }) - this.removeWithUpdate(closestLine) - - this.addWithUpdate(ridgeHelpLine) - const ridge = new QLine([helpPoint.x, helpPoint.y, newX, newY], { fontSize: this.fontSize, stroke: 'skyblue', @@ -1083,25 +901,24 @@ export default class QPolygon extends fabric.Group { }) this.addWithUpdate(ridge) + this.canvas.renderAll() + + this.addWithUpdate(ridgeHelpLine) + this.removeWithUpdate(closestLine) + this.canvas.renderAll() }) + // 용마루 끼리 연결 for (let i = 0; i < ridgePoint.length; i = i + 2) { const currentRidgeEndPoint = ridgePoint[i] const nextRidgeEndPoint = ridgePoint[(i + 1) % ridgePoint.length] - const ridgeConnectLine = new QLine( - [ - currentRidgeEndPoint.x, - currentRidgeEndPoint.y, - nextRidgeEndPoint.x, - nextRidgeEndPoint.y, - ], - { - fontSize: this.fontSize, - stroke: 'green', - strokeWidth: 5, - }, - ) + const ridgeConnectLine = new QLine([currentRidgeEndPoint.x, currentRidgeEndPoint.y, nextRidgeEndPoint.x, nextRidgeEndPoint.y], { + fontSize: this.fontSize, + stroke: 'green', + strokeWidth: 5, + }) this.addWithUpdate(ridgeConnectLine) + this.canvas.renderAll() } this.canvas.renderAll()