From 2159a4b64b9374e19e6320be0fd90b52eeea3a52 Mon Sep 17 00:00:00 2001 From: Jaeyoung Lee Date: Thu, 25 Jul 2024 17:58:28 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 17 +- src/components/fabric/QPolygon.js | 461 ++++++++++++++++++++---------- src/hooks/useMode.js | 32 ++- 3 files changed, 343 insertions(+), 167 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 96d3a57e..dcd6dbba 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -6,10 +6,10 @@ import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' import RangeSlider from './ui/RangeSlider' -import { useRecoilState, useRecoilValue } from 'recoil' -import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' +import { useRecoilState } from 'recoil' +import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' -import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas' +import { getCanvasState, insertCanvasState } from '@/lib/canvas' import { calculateIntersection2 } from '@/util/canvas-util' export default function Roof2() { @@ -207,8 +207,17 @@ export default function Roof2() { { x: 897, y: 215 }, ] + const octaType1 = [ + { x: 100, y: 100 }, + { x: 100, y: 600 }, + { x: 500, y: 600 }, + { x: 500, y: 400 }, + { x: 350, y: 400 }, + { x: 350, y: 100 }, + ] + if (canvas) { - const polygon = new QPolygon(eightPoint, { + const polygon = new QPolygon(octaType1, { fill: 'transparent', stroke: 'black', strokeWidth: 1, diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index f5f1ee96..1a8c1e16 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -12,7 +12,6 @@ import { sortedPoints, } from '@/util/canvas-util' import { QLine } from '@/components/fabric/QLine' -import { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils' export default class QPolygon extends fabric.Group { type = 'QPolygon' @@ -29,9 +28,11 @@ export default class QPolygon extends fabric.Group { helpLines = [] wall - initPoints + initOption + ridges = [] + hips = [] constructor(points, options, canvas) { /*if (points.length !== 4 && points.length !== 6) { @@ -321,7 +322,6 @@ export default class QPolygon extends fabric.Group { // 보조선 그리기 drawHelpLine(chon = 4) { - console.log(chon) if (!this.isValid()) { return } @@ -537,6 +537,7 @@ export default class QPolygon extends fabric.Group { this.canvas.add(ridge) } } + drawHelpLineInHexagon2(chon) { const oneSideLines = [...this.lines].map((line) => { let newX1, newY1, newX2, newY2 @@ -753,6 +754,7 @@ export default class QPolygon extends fabric.Group { this.canvas.renderAll() }) } + drawHelpLineInHexagon(chon) { const historyLines = [] const helpPoints = [] @@ -926,9 +928,6 @@ export default class QPolygon extends fabric.Group { let startXPoint, startYPoint, endXPoint, endYPoint let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun - let maxSquare = this.getLargestSquareCoordinate() - // console.log(maxSquare) - this.lines.forEach( (value, index) => { if (index === 0) { @@ -954,82 +953,83 @@ export default class QPolygon extends fabric.Group { if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine) && currentWall.length < currentLine.length) { dVector = this.getDirectionForDegree(prevLine, currentLine) - let prevLineLength, currentLineLength, nextLineLength + let { + minLineLength, + currentLineLength, + maxLineLength, + } = this.getRoofBaseLine(prevWall, prevLine, currentWall, currentLine, nextWall, nextLine, dVector) - this.getRoofBaseLine(prevLine, currentLine, nextLine, dVector) - - - // let acrossLine = this.getAcrossLine(currentLine, dVector) - // if (acrossLine !== null) { - // console.log(currentWall.length - acrossLine.length) - // console.log('acrossLine : ' + acrossLine.length) - // console.log((currentWall.length - acrossLine.length) + '<=' + prevWall.length + '&&' + (currentWall.length - acrossLine.length) + '<=' + nextWall.length) - // } // 마루는 세개의 벽중에서 가장 길 수 없다. - /* if ((currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) - // || (acrossLine !== null && (currentWall.length - acrossLine.length <= prevWall.length || currentWall.length - acrossLine.length <= nextWall.length)) - ) { + // console.log('currentLineLength : ', currentLineLength, 'minLineLength : ', minLineLength, 'maxLineLength : ', maxLineLength) + // console.log(currentLineLength <= minLineLength && currentLineLength <= maxLineLength) + if (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) { + // console.log('currentWall.length : ' + currentWall.length) + } - console.log('currentLine.length : ' + currentLine.length) - ridgeMaxLength = Math.min(prevLine.length, nextLine.length) - ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length - ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength - console.log(ridgeMinLength, ridgeMaxLength, ridgeRun) - switch (dVector) { - case 45: - startXPoint = currentLine.x1 + (currentLine.length / 2) - startYPoint = currentLine.y1 - (currentLine.length / 2) - endXPoint = startXPoint - endYPoint = startYPoint - break - case 135: - startXPoint = currentLine.x1 + (currentLine.length / 2) - startYPoint = currentLine.y1 + (currentLine.length / 2) - endXPoint = startXPoint - endYPoint = startYPoint - break - case 225: - startXPoint = currentLine.x1 - (currentLine.length / 2) - startYPoint = currentLine.y1 + (currentLine.length / 2) - endXPoint = startXPoint - endYPoint = startYPoint - break - case 315: - startXPoint = currentLine.x1 - (currentLine.length / 2) - startYPoint = currentLine.y1 - (currentLine.length / 2) - endXPoint = startXPoint - endYPoint = startYPoint - break - } - // console.log('startXPoint, startYPoint, endXPoint, endYPoint') - // console.log(startXPoint, startYPoint, endXPoint, endYPoint) + /*if (currentLineLength <= minLineLength && currentLineLength <= maxLineLength + || (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length)) { + // console.log('currentLine.length : ' + currentLine.length) + ridgeMaxLength = Math.min(minLineLength, maxLineLength) + ridgeMinLength = Math.max(minLineLength, maxLineLength) - currentLineLength + ridgeRun = Math.min(ridgeMinLength, ridgeMaxLength) + // console.log(ridgeRun) + switch (dVector) { + case 45: + startXPoint = currentLine.x1 + (currentLineLength / 2) + startYPoint = currentLine.y1 - (currentLineLength / 2) + endXPoint = startXPoint + endYPoint = startYPoint - ridgeRun + break + case 135: + let addYLength = 0, addXLength = 0 + if (currentLineLength !== currentLine.length) { + // console.log('currentline 길이 변경') + // console.log(currentLineLength, currentLine.length) + // console.log(arrX) + if ((arrX.x1 === currentLine.x1 || arrX.x1 === currentLine.x2) + || (arrX.x2 === currentLine.x1 || arrX.x2 === currentLine.x2)) { + // console.log('arrX.y2 === currentLine.y1 || arrX.y2 === currentLine.y2') + addXLength = arrX.x1 - arrX.x2 + } + if ((arrY.y1 === currentLine.y1 || arrY.y1 === currentLine.y2) || + (arrY.y2 === currentLine.y1 || arrY.y2 === currentLine.y2)) { + // console.log('arrY.x2 === currentLine.x1 || arrY.x2 === currentLine.x2') + addYLength = arrY.y1 - arrY.y2 + } - if (this.ridges.length < this.getMaxRidge(this.lines.length)) { - const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }) - this.addWithUpdate(ridge) - this.ridges.push(ridge) + // console.log(currentLine.x1 - arrX.x1, currentLine.x1 - arrX.x2) + } + startXPoint = currentLine.x1 + (currentLineLength / 2) + startYPoint = currentLine.y1 + (currentLineLength / 2) + addYLength + endXPoint = startXPoint + ridgeRun + endYPoint = startYPoint + break + case 225: + startXPoint = currentLine.x1 - (currentLineLength / 2) + startYPoint = currentLine.y1 + (currentLineLength / 2) + endXPoint = startXPoint + endYPoint = startYPoint + ridgeRun + break + case 315: + startXPoint = currentLine.x1 - (currentLineLength / 2) + startYPoint = currentLine.y1 - (currentLineLength / 2) + endXPoint = startXPoint - ridgeRun + endYPoint = startYPoint + break + } + // console.log('startXPoint, startYPoint, endXPoint, endYPoint') + // console.log(startXPoint, startYPoint, endXPoint, endYPoint) - // 마루와 연결될 추녀마루을 그려준다. - // const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], { - // fontSize: this.fontSize, - // stroke: 'red', - // strokeWidth: 1, - // }) - // const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], { - // fontSize: this.fontSize, - // stroke: 'red', - // strokeWidth: 1, - // }) - // this.addWithUpdate(leftHip) - // this.addWithUpdate(rightHip) - // this.hips.push(leftHip) - // this.hips.push(rightHip) - } - }*/ + if (this.ridges.length < this.getMaxRidge(this.lines.length)) { + const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], { + fontSize: this.fontSize, + stroke: 'blue', + strokeWidth: 1, + }) + this.addWithUpdate(ridge) + this.ridges.push(ridge) + } + }*/ } }, ) @@ -1059,7 +1059,7 @@ export default class QPolygon extends fabric.Group { let endXPoint, endYPoint let dVector = this.getDirectionForDegree(prevLine, currentLine) let linesXCoordinate = [] - console.log('hip dVector : ' + dVector) + // console.log('hip dVector : ' + dVector) switch (dVector) { case 45: this.lines.forEach((line) => { @@ -1114,6 +1114,7 @@ export default class QPolygon extends fabric.Group { }) break } + console.log('linesXCoordinate : ', linesXCoordinate) console.log('dVector : ', dVector) console.log('currentLine.x1 : ' + currentLine.x1 + ' , linesXCoordinate :', Math.min.apply(null, linesXCoordinate)) let lineMaxHypotenuse @@ -1124,27 +1125,88 @@ export default class QPolygon extends fabric.Group { console.log('lineMaxHypotenuse : ', lineMaxHypotenuse) this.ridges.forEach(ridge => { - console.log('getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1)) : ' + Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) + ' <= lineMaxHypotenuse : ' + lineMaxHypotenuse) + switch (dVector) { + case 45: + if (currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1 + && Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) + && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { + endXPoint = ridge.x1 + endYPoint = ridge.y1 + } + if (currentLine.x1 < ridge.x2 && currentLine.y1 > ridge.y2 + && Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) + && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { + endXPoint = ridge.x2 + endYPoint = ridge.y2 + // console.log('X2') + } + break + case 135: + if (currentLine.x1 < ridge.x1 && currentLine.y1 < ridge.y1 + && Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) + && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { + endXPoint = ridge.x1 + endYPoint = ridge.y1 + } + if (currentLine.x1 < ridge.x2 && currentLine.y1 < ridge.y2 + && Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) + && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { + endXPoint = ridge.x2 + endYPoint = ridge.y2 + // console.log('X2') + } + break + case 225: + if (currentLine.x1 > ridge.x1 && currentLine.y1 < ridge.y1 + && Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) + && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { + endXPoint = ridge.x1 + endYPoint = ridge.y1 + } + if (currentLine.x1 > ridge.x2 && currentLine.y1 < ridge.y2 + && Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) + && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { + endXPoint = ridge.x2 + endYPoint = ridge.y2 + // console.log('X2') + } + break + case 315: + if (currentLine.x1 > ridge.x1 && currentLine.y1 > ridge.y1 + && Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) + && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { + endXPoint = ridge.x1 + endYPoint = ridge.y1 + } + if (currentLine.x1 > ridge.x2 && currentLine.y1 > ridge.y2 + && Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) + && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { + endXPoint = ridge.x2 + endYPoint = ridge.y2 + // console.log('X2') + } + break + } + // console.log('getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1)) : ' + Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) + ' <= lineMaxHypotenuse : ' + lineMaxHypotenuse) + /* if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { endXPoint = ridge.x1 endYPoint = ridge.y1 - console.log('X1') + // console.log('X1') } if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { endXPoint = ridge.x2 endYPoint = ridge.y2 - console.log('X2') + // console.log('X2') } + */ }) // TODO [ljyoung] : 마루와 만나지 않는 hip 계산 - console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint) + // console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint) if (endXPoint === undefined || endYPoint === undefined) { - console.log('todo') - // endXPoint = currentLine.x1 + lineMaxHypotenuse / 2 - // endYPoint = currentLine.y1 + lineMaxHypotenuse / 2 console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' + 'this.getReverseHypothenuse(lineMaxHypotenuse): ' + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) switch (dVector) { @@ -1157,6 +1219,7 @@ export default class QPolygon extends fabric.Group { endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) break case 225: + console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' + currentLine.y1 + ' , ' + this.getReverseHypotenuse(lineMaxHypotenuse)) endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2) endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) break @@ -1166,8 +1229,8 @@ export default class QPolygon extends fabric.Group { break } } - console.log(currentLine) - console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint) + // console.log(currentLine) + // console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint) const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], { fontSize: this.fontSize, @@ -1176,10 +1239,11 @@ export default class QPolygon extends fabric.Group { }) this.addWithUpdate(hip) this.hips.push(hip) + this.canvas.renderAll() } }, ) - this.canvas.renderAll() + } /* @@ -1206,85 +1270,154 @@ export default class QPolygon extends fabric.Group { 피타고라스 정리를 이용하여 빗변의 길이를 알때 나머지 변의 길이를 구한다. */ getReverseHypotenuse(line) { - return Math.sqrt(Math.pow(line, 2) / 2) + return Math.round(Math.sqrt(Math.pow(line, 2) / 2)) } - getRoofBaseLine(prevLine, currentLine, nextLine, dVector) { - let prevLineLength, currentLineLength, nextLineLength + getRoofBaseLine(prevWall, prevLine, currentWall, currentLine, nextWall, nextLine, dVector) { + let minLineLength = Math.min(prevLine.length, nextLine.length) + let currentLineLength = currentLine.length + let maxLineLength = Math.max(prevLine.length, nextLine.length) - let objectX = {} - let objectY = {} let arrLine = [] + let minX = Math.min(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2) + let maxX = Math.max(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2) + let minY = Math.min(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2) + let maxY = Math.max(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2) - let currentPolygon = [] - const testXArr = [currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2] - const testYArr = [currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2] - let minX = Math.min.apply(null, testXArr) - let maxX = Math.max.apply(null, testXArr) - let minY = Math.min.apply(null, testYArr) - let maxY = Math.max.apply(null, testYArr) - let inside = false + let nearX = [] + let nearY = [] - console.log('testXArr : ' + testXArr, 'min : ', Math.min.apply(null, testXArr), 'max : ', Math.max.apply(null, testXArr)) - console.log('testYArr : ' + testYArr, 'min : ', Math.min.apply(null, testYArr), 'max : ', Math.max.apply(null, testYArr)) + let wallCoordinate = [ + { x: minX, y: minY }, + { x: minX, y: maxY }, + { x: maxX, y: maxY }, + { x: maxX, y: minY }, + ] - console.log('currentLine.length : ' + currentLine.length, 'dVector : ' + dVector) - console.log('x1,y1 :', currentLine.x1, currentLine.y1, ', x2,y2 : ', currentLine.x2 - , currentLine.y2, ', x3,y3 : ', nextLine.x2, nextLine.y2, ', x4,y4 : ', prevLine.x1, prevLine.y1) + console.log('wallCoordinate : ', wallCoordinate) + let innerPointLine = this.lines.filter(line => { + // console.log('line.x1 : ', line.x1, 'line.y1 : ', line.y1) + if (this.getPointInPolygon(wallCoordinate, { x: line.x1, y: line.y1 })) { + return line + } + }) + console.log(innerPointLine) - //X좌표 기준점을 구한다. - objectX = { x1: currentLine.x1, x2: currentLine.x2, x3: nextLine.x2, x4: prevLine.x1 } - //Y좌표 기준점을 구한다. - objectY = { y1: currentLine.y1, y2: currentLine.y2, y3: nextLine.y2, y4: prevLine.y1 } + let coordinateLength + switch (dVector) { + case 45: - console.log('objectX : ', objectX) - console.log('objectY : ', objectY) + console.log('45 계산') + coordinateLength = Math.abs(wallCoordinate[0].x - wallCoordinate[1].x) + break + case 135: + if (innerPointLine.length > 0) { + innerPointLine = innerPointLine.reduce((a, b) => { + return a.x1 < b.x1 ? a : b + }) + console.log('innerPointLine : ', innerPointLine) + } + + console.log('135 계산') + coordinateLength = Math.abs(wallCoordinate[0].x - wallCoordinate[3].x) + console.log(currentWall.length, coordinateLength) + //계산된 x 좌표가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다. + + if (coordinateLength < currentWall.length) { + return { + minLineLength: coordinateLength, + currentLineLength: currentWall.length, + maxLineLength: coordinateLength, + } + } else { + return { + minLineLength: currentWall.length, + currentLineLength: currentWall.length, + maxLineLength: coordinateLength, + } + } + break + case 225: + break + case 315: + break + } let lineDirection = this.getLineDirection(currentLine) + console.log('currentLineLength : ', currentLineLength, 'dVector : ', dVector) + console.log('minX :', minX, 'maxX :', maxX, 'minY :', minY, 'maxY :', maxY) + // 3라인의 좌표 안에 들어있는 라인을 찾는다. arrLine = this.lines.filter((line) => { - console.log('line.length : ' + line.length) console.log(minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY) + console.log(line.x1, line.x2, line.y1, line.y2) + console.log(line.length) return minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY - /* if (dVector === 45 || dVector === 135) { - console.log('objectX.x1 < line.x1 && objectX.x1 < line.x2', objectX.x1 < line.x1, objectX.x1 < line.x2) - console.log('objectY.y1, objectY.y3, line.y1 =', objectY.y1, objectY.y3, line.y1) - console.log('objectY.y1, objectY.y4, line.y2 =', objectY.y1, objectY.y4, line.y2) - console.log('this.isBetween(objectY.y1, objectY.y3, line.y1) :', this.isBetween(objectY.y1, objectY.y3, line.y1)) - console.log('this.isBetween(objectY.y1, objectY.y4, line.y2) : ', this.isBetween(objectY.y1, objectY.y4, line.y2)) - console.log((objectX.x1 < line.x1 && objectX.x1 < line.x2) - && (this.isBetween(objectY.y1, objectY.y2, line.y1) || this.isBetween(objectY.y1, objectY.y2, line.y1))) - return (objectX.x1 < line.x1 && objectX.x1 < line.x2) - && (this.isBetween(objectY.y1, objectY.y3, line.y1) || this.isBetween(objectY.y1, objectY.y4, line.y2)) - } - if (dVector === 225 || dVector === 315) { - console.log('objectY.y1 < line.y1 && objectY.y1 < line.y2', objectY.y1 < line.y1, objectY.y1 < line.y2) - console.log('objectX.x1, objectX.x3, line.x1 =', objectX.x1, objectX.x3, line.x1) - console.log('objectX.x1, objectX.x4, line.x2 =', objectX.x1, objectX.x4, line.x2) - console.log((objectY.y1 < line.y1 && objectY.y1 < line.y2) - && (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2))) - return (objectY.y1 < line.y1 && objectY.y1 < line.y2) - && (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2)) - }*/ }) - console.log('arrLine : ' + arrLine.length) + let arrX, arrY + if (arrLine.length > 0) { + arrX = arrLine.reduce((a, b) => { + return a.x1 < b.x1 ? a : b + }) + arrY = arrLine.reduce((a, b) => { + return a.y1 < b.y1 ? a : b + }) + // console.log('arrX, arrY : ', arrX, ' ', arrY) + // console.log('currentLine.x1, arrX.x1 : ', currentLine.x1, arrX.x1, ' = ', Math.abs(currentLine.x1 - arrX.x1)) + // console.log('currentLine.y1, arrY.y1 : ', currentLine.y1, arrY.y1, ' = ', Math.abs(currentLine.y1 - arrY.y1)) + // console.log('lineDirection : ', lineDirection) + // console.log('arrLineDirection : ', this.getLineDirection(arrX), this.getLineDirection(arrY)) + // console.log('계산전 : ', minLineLength, currentLineLength, maxLineLength) + // console.log('dVector : ', dVector) - function isPointInPolygon(polygon, point) { - const [x, y] = point - let inside = false + switch (dVector) { + case 45: - for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - const [xi, yi] = polygon[i] - const [xj, yj] = polygon[j] + if (arrX.x1 !== arrX.x2 && this.isBetween(currentLine.x1, currentLine.x2, arrX.x1) && this.isBetween(currentLine.x1, currentLine.x2, arrX.x2)) { + minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2)) + maxLineLength = minLineLength + } else { - const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi) - if (intersect) inside = !inside + currentLineLength = Math.abs(currentLine.x1 - Math.min(arrX.x1, arrX.x2)) + minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2)) + } + + break + case 135: + // console.log(arrX.x1, arrX.x2, currentLine.x1, currentLine.x2) + // console.log(arrY.y1, arrY.y2, currentLine.y1, currentLine.y2) + if (arrY.y1 !== arrY.y2 && this.isBetween(currentLine.y1, currentLine.y2, arrY.y1) && this.isBetween(currentLine.y1, currentLine.y2, arrY.y2)) { + minLineLength = Math.abs(currentLine.x1 - Math.min(arrX.x1, arrX.x2)) + maxLineLength = minLineLength + } else { + // console.log('aa') + currentLineLength = Math.abs(currentLine.y1 - Math.max(arrY.y1, arrY.y2)) + minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2)) + } + break + case 225: + if (arrY.y1 !== arrY.y2 && this.isBetween(currentLine.y1, currentLine.y2, arrY.y1) && this.isBetween(currentLine.y1, currentLine.y2, arrY.y2)) { + minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2)) + maxLineLength = minLineLength + } else { + currentLineLength = Math.abs(currentLine.y1 - Math.max(arrY.y1, arrY.y2)) + minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2)) + } + break + case 315: + if (arrX.x1 !== arrX.x2 && this.isBetween(currentLine.x1, currentLine.x2, arrX.x1) && this.isBetween(currentLine.x1, currentLine.x2, arrX.x2)) { + currentLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2)) + minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrY.x2)) + } else { + currentLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2)) + minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y)) + } + break } - - return inside } - + // console.log('계산후 : ', minLineLength, currentLineLength, maxLineLength) + return { minLineLength, currentLineLength, maxLineLength, arrX, arrY } } /* @@ -1294,6 +1427,24 @@ export default class QPolygon extends fabric.Group { return (a < c && c < b) || (b < c && c < a) } + getPointInPolygon(polygon, point) { + + let inside = false + let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x), + maxX = Math.max(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x), + minY = Math.min(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y), + maxY = Math.max(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y) + + // console.log('minX, maxX, minY, maxY') + // console.log(minX, maxX, minY, maxY) + // console.log(point.x, point.y) + if (minX <= point.x && point.x <= maxX && minY <= point.y && point.y <= maxY) { + inside = true + } + + return inside + } + /* 라인과 마주하는 다른 라인과의 가장 가까운 거리를 구한다. */ @@ -1303,7 +1454,7 @@ export default class QPolygon extends fabric.Group { if (lineDirection === 't' || lineDirection === 'b') { if (dVector === 45 || dVector === 135) { - console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.') + // console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.') acrossLines = this.lines.filter(line => { if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r') && (currentLine.x1 < line.x1 || currentLine.x1 < line.x2)) { @@ -1317,7 +1468,7 @@ export default class QPolygon extends fabric.Group { } } if (dVector === 225 || dVector === 315) { - console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.') + // console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.') acrossLines = this.lines.filter(line => { if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r') && (line.x1 < currentLine.x1 || line.x2 < currentLine.x1)) { @@ -1337,7 +1488,7 @@ export default class QPolygon extends fabric.Group { acrossLines = this.lines.filter(line => { if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b') && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) { - console.log(line) + // console.log(line) return line } }) @@ -1348,7 +1499,7 @@ export default class QPolygon extends fabric.Group { } } if (dVector === 135 || dVector === 225) { - console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.') + // console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.') acrossLines = this.lines.filter(line => { if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b') && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) { @@ -1456,9 +1607,11 @@ export default class QPolygon extends fabric.Group { console.log(missedPoints) missedPoints.forEach(p1 => { + console.log('p1 : ', p1) let nearX, nearY, diffX, diffY, diffMinX, diffMinY //가장 가까운 포인트를 확인 missedPoints.forEach(p2 => { + console.log('p2 : ', p2) diffX = Math.abs(p1.x - p2.x) diffY = Math.abs(p1.y - p2.y) if (diffMinX === undefined && diffMinY === undefined && diffX > 0 && diffY > 0) { @@ -1466,7 +1619,7 @@ export default class QPolygon extends fabric.Group { diffMinY = diffY } console.log(nearX, nearY, diffX, diffY, diffMinX, diffMinY) - if (diffX !== 0 && diffY !== 0 && (diffX === diffY) + if (diffX > 0 && diffY > 0 && (diffX === diffY) && diffX <= diffMinX && diffY <= diffMinY) { nearX = p2.x nearY = p2.y @@ -1479,7 +1632,7 @@ export default class QPolygon extends fabric.Group { if (p1.x < nearX && p1.y < nearY) { missedLine.push({ x1: p1.x, y1: p1.y, x2: nearX, y2: nearY }) } else if (p1.x > nearX && p1.y < nearY) { - missedLine.push({ x1: nearX, y1: p1.y, x2: p1.x, y2: nearY }) + missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y }) } else if (p1.x > nearX && p1.y > nearY) { missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y }) } else if (p1.x < nearX && p1.y > nearY) { @@ -1491,6 +1644,8 @@ export default class QPolygon extends fabric.Group { missedLine = [ ...new Set(missedLine.map((line) => JSON.stringify(line))), ].map((line) => JSON.parse(line)) + + console.log('missedLine : ', missedLine) missedLine.forEach((p, index) => { const line = new QLine([p.x1, p.y1, p.x2, p.y2], { fontSize: this.fontSize, @@ -1508,14 +1663,14 @@ export default class QPolygon extends fabric.Group { hip의 시작은 처마꼭지점이며 끝은 마루이기 때문에 힙의 끝 좌표와 비교한다. */ findConnectionLineCount(x, y) { - console.log(this.hips) + // console.log(this.hips) let count = 0 this.hips.forEach((hip, index) => { if (x === hip.x2 && y === hip.y2) { count++ } }) - console.log(count) + // console.log(count) return count } diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index dab596c2..2148a6d2 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1,10 +1,22 @@ import { useEffect, useRef, useState } from 'react' import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' -import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util' +import { + findTopTwoIndexesByDistance, + getCenterPoint, + getDirection, + getStartIndex, + rearrangeArray, +} from '@/util/canvas-util' import { useRecoilState } from 'recoil' -import { fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom' +import { + fontSizeState, + roofPolygonPatternArrayState, + roofState, + sortedPolygonArray, + wallState, +} from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' export const Mode = { @@ -229,7 +241,7 @@ export function useMode() { } const editMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { const pointer = canvas?.getPointer(options.e) const circle = new fabric.Circle({ radius: 1, @@ -380,7 +392,7 @@ export function useMode() { } const textboxMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { if (canvas?.getActiveObject()?.type === 'textbox') return const pointer = canvas?.getPointer(options.e) @@ -395,14 +407,14 @@ export function useMode() { canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다. canvas?.renderAll() // textbox가 active가 풀린 경우 editing mode로 변경 - textbox?.on('editing:exited', function () { + textbox?.on('editing:exited', function() { changeMode(canvas, Mode.EDIT) }) }) } const drawLineMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { const pointer = canvas?.getPointer(options.e) const line = new QLine( @@ -423,7 +435,7 @@ export function useMode() { const drawRectMode = () => { let rect, isDown, origX, origY - canvas.on('mouse:down', function (o) { + canvas.on('mouse:down', function(o) { isDown = true const pointer = canvas.getPointer(o.e) origX = pointer.x @@ -443,7 +455,7 @@ export function useMode() { canvas.add(rect) }) - canvas.on('mouse:move', function (o) { + canvas.on('mouse:move', function(o) { if (!isDown) return const pointer = canvas.getPointer(o.e) if (origX > pointer.x) { @@ -457,7 +469,7 @@ export function useMode() { rect.set({ height: Math.abs(origY - pointer.y) }) }) - canvas.on('mouse:up', function (o) { + canvas.on('mouse:up', function(o) { const pointer = canvas.getPointer(o.e) const qRect = new QRect({ left: origX, @@ -556,7 +568,7 @@ export function useMode() { if (!otherLines) { // polygon.fillCell() canvas.renderAll() - polygon.setViewLengthText(false) + // polygon.setViewLengthText(false) setMode(Mode.DEFAULT) }