qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테스트중

Browse Source
This commit is contained in:
Jaeyoung Lee 2024-07-25 17:58:28 +09:00
parent 1704efc9d5
commit 2159a4b64b
3 changed files with 343 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Roof2.jsx
View File

@ -6,10 +6,10 @@ import QRect from '@/components/fabric/QRect'
import QPolygon from '@/components/fabric/QPolygon' import QPolygon from '@/components/fabric/QPolygon'
import RangeSlider from './ui/RangeSlider' import RangeSlider from './ui/RangeSlider'
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState } from 'recoil'
import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine' 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' import { calculateIntersection2 } from '@/util/canvas-util'
export default function Roof2() { export default function Roof2() {
@ -207,8 +207,17 @@ export default function Roof2() {
{ x: 897, y: 215 }, { 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) { if (canvas) {
const polygon = new QPolygon(eightPoint, { const polygon = new QPolygon(octaType1, {
fill: 'transparent', fill: 'transparent',
stroke: 'black', stroke: 'black',
strokeWidth: 1, strokeWidth: 1,

461
src/components/fabric/QPolygon.js
View File

@ -12,7 +12,6 @@ import {
sortedPoints, sortedPoints,
} from '@/util/canvas-util' } from '@/util/canvas-util'
import { QLine } from '@/components/fabric/QLine' import { QLine } from '@/components/fabric/QLine'
import { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils'
export default class QPolygon extends fabric.Group { export default class QPolygon extends fabric.Group {
type = 'QPolygon' type = 'QPolygon'
@ -29,9 +28,11 @@ export default class QPolygon extends fabric.Group {
helpLines = [] helpLines = []
wall wall
initPoints initPoints
initOption initOption
ridges = []
hips = []
constructor(points, options, canvas) { constructor(points, options, canvas) {
/*if (points.length !== 4 && points.length !== 6) { /*if (points.length !== 4 && points.length !== 6) {
@ -321,7 +322,6 @@ export default class QPolygon extends fabric.Group {
// 보조선 그리기 // 보조선 그리기
drawHelpLine(chon = 4) { drawHelpLine(chon = 4) {
console.log(chon)
if (!this.isValid()) { if (!this.isValid()) {
return return
} }
@ -537,6 +537,7 @@ export default class QPolygon extends fabric.Group {
this.canvas.add(ridge) this.canvas.add(ridge)
} }
} }
drawHelpLineInHexagon2(chon) { drawHelpLineInHexagon2(chon) {
const oneSideLines = [...this.lines].map((line) => { const oneSideLines = [...this.lines].map((line) => {
let newX1, newY1, newX2, newY2 let newX1, newY1, newX2, newY2
@ -753,6 +754,7 @@ export default class QPolygon extends fabric.Group {
this.canvas.renderAll() this.canvas.renderAll()
}) })
} }
drawHelpLineInHexagon(chon) { drawHelpLineInHexagon(chon) {
const historyLines = [] const historyLines = []
const helpPoints = [] const helpPoints = []
@ -926,9 +928,6 @@ export default class QPolygon extends fabric.Group {
let startXPoint, startYPoint, endXPoint, endYPoint let startXPoint, startYPoint, endXPoint, endYPoint
let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun
let maxSquare = this.getLargestSquareCoordinate()
// console.log(maxSquare)
this.lines.forEach( this.lines.forEach(
(value, index) => { (value, index) => {
if (index === 0) { 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) { if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine) && currentWall.length < currentLine.length) {
dVector = this.getDirectionForDegree(prevLine, currentLine) 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) // console.log('currentLineLength : ', currentLineLength, 'minLineLength : ', minLineLength, 'maxLineLength : ', maxLineLength)
// || (acrossLine !== null && (currentWall.length - acrossLine.length <= prevWall.length || currentWall.length - acrossLine.length <= nextWall.length)) // 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) /*if (currentLineLength <= minLineLength && currentLineLength <= maxLineLength
ridgeMaxLength = Math.min(prevLine.length, nextLine.length) || (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length)) {
ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length // console.log('currentLine.length : ' + currentLine.length)
ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength ridgeMaxLength = Math.min(minLineLength, maxLineLength)
console.log(ridgeMinLength, ridgeMaxLength, ridgeRun) ridgeMinLength = Math.max(minLineLength, maxLineLength) - currentLineLength
switch (dVector) { ridgeRun = Math.min(ridgeMinLength, ridgeMaxLength)
case 45: // console.log(ridgeRun)
startXPoint = currentLine.x1 + (currentLine.length / 2) switch (dVector) {
startYPoint = currentLine.y1 - (currentLine.length / 2) case 45:
endXPoint = startXPoint startXPoint = currentLine.x1 + (currentLineLength / 2)
endYPoint = startYPoint startYPoint = currentLine.y1 - (currentLineLength / 2)
break endXPoint = startXPoint
case 135: endYPoint = startYPoint - ridgeRun
startXPoint = currentLine.x1 + (currentLine.length / 2) break
startYPoint = currentLine.y1 + (currentLine.length / 2) case 135:
endXPoint = startXPoint let addYLength = 0, addXLength = 0
endYPoint = startYPoint if (currentLineLength !== currentLine.length) {
break // console.log('currentline 길이 변경')
case 225: // console.log(currentLineLength, currentLine.length)
startXPoint = currentLine.x1 - (currentLine.length / 2) // console.log(arrX)
startYPoint = currentLine.y1 + (currentLine.length / 2) if ((arrX.x1 === currentLine.x1 || arrX.x1 === currentLine.x2)
endXPoint = startXPoint || (arrX.x2 === currentLine.x1 || arrX.x2 === currentLine.x2)) {
endYPoint = startYPoint // console.log('arrX.y2 === currentLine.y1 || arrX.y2 === currentLine.y2')
break addXLength = arrX.x1 - arrX.x2
case 315: }
startXPoint = currentLine.x1 - (currentLine.length / 2) if ((arrY.y1 === currentLine.y1 || arrY.y1 === currentLine.y2) ||
startYPoint = currentLine.y1 - (currentLine.length / 2) (arrY.y2 === currentLine.y1 || arrY.y2 === currentLine.y2)) {
endXPoint = startXPoint // console.log('arrY.x2 === currentLine.x1 || arrY.x2 === currentLine.x2')
endYPoint = startYPoint addYLength = arrY.y1 - arrY.y2
break }
}
// console.log('startXPoint, startYPoint, endXPoint, endYPoint')
// console.log(startXPoint, startYPoint, endXPoint, endYPoint)
if (this.ridges.length < this.getMaxRidge(this.lines.length)) { // console.log(currentLine.x1 - arrX.x1, currentLine.x1 - arrX.x2)
const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], { }
fontSize: this.fontSize, startXPoint = currentLine.x1 + (currentLineLength / 2)
stroke: 'blue', startYPoint = currentLine.y1 + (currentLineLength / 2) + addYLength
strokeWidth: 1, endXPoint = startXPoint + ridgeRun
}) endYPoint = startYPoint
this.addWithUpdate(ridge) break
this.ridges.push(ridge) 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)
// 마루와 연결될 추녀마루을 그려준다. if (this.ridges.length < this.getMaxRidge(this.lines.length)) {
// const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], { const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
// fontSize: this.fontSize, fontSize: this.fontSize,
// stroke: 'red', stroke: 'blue',
// strokeWidth: 1, strokeWidth: 1,
// }) })
// const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], { this.addWithUpdate(ridge)
// fontSize: this.fontSize, this.ridges.push(ridge)
// stroke: 'red', }
// strokeWidth: 1, }*/
// })
// this.addWithUpdate(leftHip)
// this.addWithUpdate(rightHip)
// this.hips.push(leftHip)
// this.hips.push(rightHip)
}
}*/
} }
}, },
) )
@ -1059,7 +1059,7 @@ export default class QPolygon extends fabric.Group {
let endXPoint, endYPoint let endXPoint, endYPoint
let dVector = this.getDirectionForDegree(prevLine, currentLine) let dVector = this.getDirectionForDegree(prevLine, currentLine)
let linesXCoordinate = [] let linesXCoordinate = []
console.log('hip dVector : ' + dVector) // console.log('hip dVector : ' + dVector)
switch (dVector) { switch (dVector) {
case 45: case 45:
this.lines.forEach((line) => { this.lines.forEach((line) => {
@ -1114,6 +1114,7 @@ export default class QPolygon extends fabric.Group {
}) })
break break
} }
console.log('linesXCoordinate : ', linesXCoordinate)
console.log('dVector : ', dVector) console.log('dVector : ', dVector)
console.log('currentLine.x1 : ' + currentLine.x1 + ' , linesXCoordinate :', Math.min.apply(null, linesXCoordinate)) console.log('currentLine.x1 : ' + currentLine.x1 + ' , linesXCoordinate :', Math.min.apply(null, linesXCoordinate))
let lineMaxHypotenuse let lineMaxHypotenuse
@ -1124,27 +1125,88 @@ export default class QPolygon extends fabric.Group {
console.log('lineMaxHypotenuse : ', lineMaxHypotenuse) console.log('lineMaxHypotenuse : ', lineMaxHypotenuse)
this.ridges.forEach(ridge => { 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) if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) { && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
endXPoint = ridge.x1 endXPoint = ridge.x1
endYPoint = ridge.y1 endYPoint = ridge.y1
console.log('X1') // console.log('X1')
} }
if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2) if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) { && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
endXPoint = ridge.x2 endXPoint = ridge.x2
endYPoint = ridge.y2 endYPoint = ridge.y2
console.log('X2') // console.log('X2')
} }
*/
}) })
// TODO [ljyoung] : 마루와 만나지 않는 hip 계산 // TODO [ljyoung] : 마루와 만나지 않는 hip 계산
console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint) // console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint)
if (endXPoint === undefined || endYPoint === undefined) { if (endXPoint === undefined || endYPoint === undefined) {
console.log('todo')
// endXPoint = currentLine.x1 + lineMaxHypotenuse / 2
// endYPoint = currentLine.y1 + lineMaxHypotenuse / 2
console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' + console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' +
'this.getReverseHypothenuse(lineMaxHypotenuse): ' + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) 'this.getReverseHypothenuse(lineMaxHypotenuse): ' + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
switch (dVector) { switch (dVector) {
@ -1157,6 +1219,7 @@ export default class QPolygon extends fabric.Group {
endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
break break
case 225: case 225:
console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' + currentLine.y1 + ' , ' + this.getReverseHypotenuse(lineMaxHypotenuse))
endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2) endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2) endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
break break
@ -1166,8 +1229,8 @@ export default class QPolygon extends fabric.Group {
break break
} }
} }
console.log(currentLine) // console.log(currentLine)
console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint) // console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint)
const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], { const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
fontSize: this.fontSize, fontSize: this.fontSize,
@ -1176,10 +1239,11 @@ export default class QPolygon extends fabric.Group {
}) })
this.addWithUpdate(hip) this.addWithUpdate(hip)
this.hips.push(hip) this.hips.push(hip)
this.canvas.renderAll()
} }
}, },
) )
this.canvas.renderAll()
} }
/* /*
@ -1206,85 +1270,154 @@ export default class QPolygon extends fabric.Group {
피타고라스 정리를 이용하여 빗변의 길이를 알때 나머지 변의 길이를 구한다. 피타고라스 정리를 이용하여 빗변의 길이를 알때 나머지 변의 길이를 구한다.
*/ */
getReverseHypotenuse(line) { 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) { getRoofBaseLine(prevWall, prevLine, currentWall, currentLine, nextWall, nextLine, dVector) {
let prevLineLength, currentLineLength, nextLineLength 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 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 = [] let nearX = []
const testXArr = [currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2] let nearY = []
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
console.log('testXArr : ' + testXArr, 'min : ', Math.min.apply(null, testXArr), 'max : ', Math.max.apply(null, testXArr)) let wallCoordinate = [
console.log('testYArr : ' + testYArr, 'min : ', Math.min.apply(null, testYArr), 'max : ', Math.max.apply(null, testYArr)) { 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('wallCoordinate : ', wallCoordinate)
console.log('x1,y1 :', currentLine.x1, currentLine.y1, ', x2,y2 : ', currentLine.x2 let innerPointLine = this.lines.filter(line => {
, currentLine.y2, ', x3,y3 : ', nextLine.x2, nextLine.y2, ', x4,y4 : ', prevLine.x1, prevLine.y1) // 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좌표 기준점을 구한다. let coordinateLength
objectX = { x1: currentLine.x1, x2: currentLine.x2, x3: nextLine.x2, x4: prevLine.x1 } switch (dVector) {
//Y좌표 기준점을 구한다. case 45:
objectY = { y1: currentLine.y1, y2: currentLine.y2, y3: nextLine.y2, y4: prevLine.y1 }
console.log('objectX : ', objectX) console.log('45 계산')
console.log('objectY : ', objectY) 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) 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) => { 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(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 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) 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) { switch (dVector) {
const [x, y] = point case 45:
let inside = false
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { if (arrX.x1 !== arrX.x2 && this.isBetween(currentLine.x1, currentLine.x2, arrX.x1) && this.isBetween(currentLine.x1, currentLine.x2, arrX.x2)) {
const [xi, yi] = polygon[i] minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2))
const [xj, yj] = polygon[j] maxLineLength = minLineLength
} else {
const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi) currentLineLength = Math.abs(currentLine.x1 - Math.min(arrX.x1, arrX.x2))
if (intersect) inside = !inside 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) 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 (lineDirection === 't' || lineDirection === 'b') {
if (dVector === 45 || dVector === 135) { if (dVector === 45 || dVector === 135) {
console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.') // console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.')
acrossLines = this.lines.filter(line => { acrossLines = this.lines.filter(line => {
if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r') if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
&& (currentLine.x1 < line.x1 || currentLine.x1 < line.x2)) { && (currentLine.x1 < line.x1 || currentLine.x1 < line.x2)) {
@ -1317,7 +1468,7 @@ export default class QPolygon extends fabric.Group {
} }
} }
if (dVector === 225 || dVector === 315) { if (dVector === 225 || dVector === 315) {
console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.') // console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.')
acrossLines = this.lines.filter(line => { acrossLines = this.lines.filter(line => {
if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r') if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
&& (line.x1 < currentLine.x1 || line.x2 < currentLine.x1)) { && (line.x1 < currentLine.x1 || line.x2 < currentLine.x1)) {
@ -1337,7 +1488,7 @@ export default class QPolygon extends fabric.Group {
acrossLines = this.lines.filter(line => { acrossLines = this.lines.filter(line => {
if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b') if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
&& (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) { && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
console.log(line) // console.log(line)
return line return line
} }
}) })
@ -1348,7 +1499,7 @@ export default class QPolygon extends fabric.Group {
} }
} }
if (dVector === 135 || dVector === 225) { if (dVector === 135 || dVector === 225) {
console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.') // console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.')
acrossLines = this.lines.filter(line => { acrossLines = this.lines.filter(line => {
if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b') if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
&& (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) { && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
@ -1456,9 +1607,11 @@ export default class QPolygon extends fabric.Group {
console.log(missedPoints) console.log(missedPoints)
missedPoints.forEach(p1 => { missedPoints.forEach(p1 => {
console.log('p1 : ', p1)
let nearX, nearY, diffX, diffY, diffMinX, diffMinY let nearX, nearY, diffX, diffY, diffMinX, diffMinY
//가장 가까운 포인트를 확인 //가장 가까운 포인트를 확인
missedPoints.forEach(p2 => { missedPoints.forEach(p2 => {
console.log('p2 : ', p2)
diffX = Math.abs(p1.x - p2.x) diffX = Math.abs(p1.x - p2.x)
diffY = Math.abs(p1.y - p2.y) diffY = Math.abs(p1.y - p2.y)
if (diffMinX === undefined && diffMinY === undefined && diffX > 0 && diffY > 0) { if (diffMinX === undefined && diffMinY === undefined && diffX > 0 && diffY > 0) {
@ -1466,7 +1619,7 @@ export default class QPolygon extends fabric.Group {
diffMinY = diffY diffMinY = diffY
} }
console.log(nearX, nearY, diffX, diffY, diffMinX, diffMinY) 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) { && diffX <= diffMinX && diffY <= diffMinY) {
nearX = p2.x nearX = p2.x
nearY = p2.y nearY = p2.y
@ -1479,7 +1632,7 @@ export default class QPolygon extends fabric.Group {
if (p1.x < nearX && p1.y < nearY) { if (p1.x < nearX && p1.y < nearY) {
missedLine.push({ x1: p1.x, y1: p1.y, x2: nearX, y2: nearY }) missedLine.push({ x1: p1.x, y1: p1.y, x2: nearX, y2: nearY })
} else if (p1.x > nearX && p1.y < 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) { } else if (p1.x > nearX && p1.y > nearY) {
missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y }) missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y })
} else if (p1.x < nearX && p1.y > nearY) { } else if (p1.x < nearX && p1.y > nearY) {
@ -1491,6 +1644,8 @@ export default class QPolygon extends fabric.Group {
missedLine = [ missedLine = [
...new Set(missedLine.map((line) => JSON.stringify(line))), ...new Set(missedLine.map((line) => JSON.stringify(line))),
].map((line) => JSON.parse(line)) ].map((line) => JSON.parse(line))
console.log('missedLine : ', missedLine)
missedLine.forEach((p, index) => { missedLine.forEach((p, index) => {
const line = new QLine([p.x1, p.y1, p.x2, p.y2], { const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
fontSize: this.fontSize, fontSize: this.fontSize,
@ -1508,14 +1663,14 @@ export default class QPolygon extends fabric.Group {
hip의 시작은 처마꼭지점이며 끝은 마루이기 때문에 힙의 끝 좌표와 비교한다. hip의 시작은 처마꼭지점이며 끝은 마루이기 때문에 힙의 끝 좌표와 비교한다.
*/ */
findConnectionLineCount(x, y) { findConnectionLineCount(x, y) {
console.log(this.hips) // console.log(this.hips)
let count = 0 let count = 0
this.hips.forEach((hip, index) => { this.hips.forEach((hip, index) => {
if (x === hip.x2 && y === hip.y2) { if (x === hip.x2 && y === hip.y2) {
count++ count++
} }
}) })
console.log(count) // console.log(count)
return count return count
} }

32
src/hooks/useMode.js
View File

@ -1,10 +1,22 @@
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import QRect from '@/components/fabric/QRect' import QRect from '@/components/fabric/QRect'
import QPolygon from '@/components/fabric/QPolygon' 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 { 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' import { QLine } from '@/components/fabric/QLine'
export const Mode = { export const Mode = {
@ -229,7 +241,7 @@ export function useMode() {
} }
const editMode = () => { const editMode = () => {
canvas?.on('mouse:down', function (options) { canvas?.on('mouse:down', function(options) {
const pointer = canvas?.getPointer(options.e) const pointer = canvas?.getPointer(options.e)
const circle = new fabric.Circle({ const circle = new fabric.Circle({
radius: 1, radius: 1,
@ -380,7 +392,7 @@ export function useMode() {
} }
const textboxMode = () => { const textboxMode = () => {
canvas?.on('mouse:down', function (options) { canvas?.on('mouse:down', function(options) {
if (canvas?.getActiveObject()?.type === 'textbox') return if (canvas?.getActiveObject()?.type === 'textbox') return
const pointer = canvas?.getPointer(options.e) const pointer = canvas?.getPointer(options.e)
@ -395,14 +407,14 @@ export function useMode() {
canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다. canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
canvas?.renderAll() canvas?.renderAll()
// textbox가 active가 풀린 경우 editing mode로 변경 // textbox가 active가 풀린 경우 editing mode로 변경
textbox?.on('editing:exited', function () { textbox?.on('editing:exited', function() {
changeMode(canvas, Mode.EDIT) changeMode(canvas, Mode.EDIT)
}) })
}) })
} }
const drawLineMode = () => { const drawLineMode = () => {
canvas?.on('mouse:down', function (options) { canvas?.on('mouse:down', function(options) {
const pointer = canvas?.getPointer(options.e) const pointer = canvas?.getPointer(options.e)
const line = new QLine( const line = new QLine(
@ -423,7 +435,7 @@ export function useMode() {
const drawRectMode = () => { const drawRectMode = () => {
let rect, isDown, origX, origY let rect, isDown, origX, origY
canvas.on('mouse:down', function (o) { canvas.on('mouse:down', function(o) {
isDown = true isDown = true
const pointer = canvas.getPointer(o.e) const pointer = canvas.getPointer(o.e)
origX = pointer.x origX = pointer.x
@ -443,7 +455,7 @@ export function useMode() {
canvas.add(rect) canvas.add(rect)
}) })
canvas.on('mouse:move', function (o) { canvas.on('mouse:move', function(o) {
if (!isDown) return if (!isDown) return
const pointer = canvas.getPointer(o.e) const pointer = canvas.getPointer(o.e)
if (origX > pointer.x) { if (origX > pointer.x) {
@ -457,7 +469,7 @@ export function useMode() {
rect.set({ height: Math.abs(origY - pointer.y) }) 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 pointer = canvas.getPointer(o.e)
const qRect = new QRect({ const qRect = new QRect({
left: origX, left: origX,
@ -556,7 +568,7 @@ export function useMode() {
if (!otherLines) { if (!otherLines) {
// polygon.fillCell() // polygon.fillCell()
canvas.renderAll() canvas.renderAll()
polygon.setViewLengthText(false) // polygon.setViewLengthText(false)
setMode(Mode.DEFAULT) setMode(Mode.DEFAULT)
} }