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-11-07 13:40:39 +09:00
parent 287f7f9c39
commit 78a6ba1ed7
4 changed files with 109 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Roof2.jsx
View File

@ -431,7 +431,7 @@ export default function Roof2(props) {
{ x: 450, y: 850 },
]
const polygon = new QPolygon(rectangleType2, {
const polygon = new QPolygon(type2, {
fill: 'transparent',
stroke: 'green',
strokeWidth: 1,

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

@ -2,7 +2,7 @@ import { fabric } from 'fabric'
import { v4 as uuidv4 } from 'uuid'
import { QLine } from '@/components/fabric/QLine'
import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
import { calculateAngle, drawRidgeRoof, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import { calculateAngle, drawRidgeRoof, drawShedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import * as turf from '@turf/turf'
import { LINE_TYPE } from '@/common/common'
@ -187,7 +187,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
const eavesType = [LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.HIPANDGABLE]
const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
const isEaves = types.every((type) => eavesType.includes(type))
// const isEaves = types.every((type) => eavesType.includes(type))
const gableOdd = types.filter((type, i) => i % 2 === 0)
const gableEven = types.filter((type, i) => i % 2 === 1)
const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
@ -199,18 +199,41 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
) {
console.log('박공 지붕')
} else if (hasShed) {
//편류지붕
let shedIndex = 0
types.forEach((type, i) => {
if (type === LINE_TYPE.WALLLINE.SHED) {
shedIndex = i
}
const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
const areLinesParallel = function (line1, line2) {
const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
return angle1 === angle2
}
let isShedRoof = true
sheds.forEach((shed, i) => {
isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
})
const shedOdd = types.filter((type, i) => i % 2 === shedIndex % 2).filter((type) => type !== LINE_TYPE.WALLLINE.SHED)
const shedEven = types.filter((type, i) => i % 2 !== shedIndex % 2)
types.forEach((type, i) => console.log(type, i, i % 2, shedIndex % 2, i % 2 === shedIndex % 2))
if (shedOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && shedEven.every((type) => type === LINE_TYPE.WALLLINE.GABLE)) {
console.log('편류지붕')
if (isShedRoof) {
const eaves = this.lines
.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
.filter((line) => {
const angle1 = calculateAngle(sheds[0].startPoint, sheds[0].endPoint)
const angle2 = calculateAngle(line.startPoint, line.endPoint)
if (Math.abs(angle1 - angle2) === 180) {
return line
}
})
if (eaves.length > 0) {
const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
const isGable = gables.every((line) => gableType.includes(line.attributes.type))
console.log('isGable : ', isGable)
if (isGable) {
drawShedRoof(this.id, this.canvas)
} else {
drawRidgeRoof(this.id, this.canvas)
}
} else {
drawRidgeRoof(this.id, this.canvas)
}
} else {
drawRidgeRoof(this.id, this.canvas)
}
} else {
drawRidgeRoof(this.id, this.canvas)

26
src/hooks/useMode.js
View File

@ -36,7 +36,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
import offsetPolygon from '@/util/qpolygon-utils'
import { isObjectNotEmpty } from '@/util/common-utils'
import * as turf from '@turf/turf'
import { INPUT_TYPE, LINE_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
import { INPUT_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
export function useMode() {
const [mode, setMode] = useRecoilState(modeState)
@ -1515,9 +1515,17 @@ export function useMode() {
pitch: 4,
sleeve: true,
}
/*if (index === 1 || index === 3) {
/*if (index === 1) {
line.attributes = {
type: LINE_TYPE.WALLLINE.WALL,
type: LINE_TYPE.WALLLINE.SHED,
offset: 30, //출폭
width: 30, //폭
pitch: 4, //구배
sleeve: true, //소매
}
} else if (index === 5 || index === 3) {
line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset: 50, //출폭
width: 30, //폭
pitch: 4, //구배
@ -1525,8 +1533,8 @@ export function useMode() {
}
} else {
line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset: 40,
type: LINE_TYPE.WALLLINE.GABLE,
offset: 20,
width: 50,
pitch: 4,
sleeve: true,
@ -1750,8 +1758,13 @@ export function useMode() {
roof.setWall(wall)
roof.lines.forEach((line, index) => {
const lineLength = Math.sqrt(
Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
)
line.attributes = {
roofId: roof.id,
planeSize: lineLength,
actualSize: lineLength,
wallLine: wall.lines[index].id,
type: wall.lines[index].attributes.type,
offset: wall.lines[index].attributes.offset,
@ -1770,9 +1783,6 @@ export function useMode() {
line.attributes.currentRoof = roof.lines[index].id
})
console.log('drawRoofPolygon roof : ', roof)
console.log('drawRoofPolygon wall : ', wall)
setRoof(roof)
setWall(wall)

56
src/util/qpolygon-utils.js
View File

@ -1477,6 +1477,42 @@ function calculateAngleBetweenLines(line1, line2) {
return (angleInRadians * 180) / Math.PI
}
/**
* 한쪽흐름 지붕
* @param roofId
* @param canvas
*/
export const drawShedRoof = (roofId, canvas) => {
const roof = canvas?.getObjects().find((object) => object.id === roofId)
const hasNonParallelLines = roof.lines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
if (hasNonParallelLines.length > 0) {
alert('대각선이 존재합니다.')
return
}
const sheds = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
const eaves = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
const gables = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.GABLE)
console.log('gable', gables)
let shedDegree = sheds[0].attributes.degree || 0
const shedChon = sheds[0].attributes.pitch || 0
if (shedDegree === 0) {
shedDegree = getDegreeByChon(shedChon)
}
const getHeight = function (adjust, degree) {
return Math.tan(degree * (Math.PI / 180)) * adjust
}
gables.forEach((gable) => {
const adjust = gable.attributes.planeSize
const height = getHeight(adjust, shedDegree)
gable.attributes.actualSize = Math.round(Math.sqrt(Math.pow(adjust, 2) + Math.pow(height, 2)))
})
}
export const drawRidgeRoof = (roofId, canvas) => {
const roof = canvas?.getObjects().find((object) => object.id === roofId)
const hasNonParallelLines = roof.lines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
@ -1904,8 +1940,6 @@ const drawHips = (roof, canvas) => {
attributes: {
roofId: roof.id,
currentRoof: currentRoof.id,
planeSize: currentRoof.length,
actualSize: currentRoof.length,
},
})
canvas.add(hip2)
@ -3505,8 +3539,13 @@ export const changeCurrentRoof = (currentRoof, canvas) => {
newRoof.setWall(wall)
newRoof.lines.forEach((line, index) => {
const lineLength = Math.sqrt(
Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
)
line.attributes = {
roofId: newRoof.id,
planeSize: lineLength,
actualSize: lineLength,
wallLine: wall.lines[index].id,
type: wall.lines[index].attributes.type,
offset: wall.lines[index].attributes.offset,
@ -3561,6 +3600,19 @@ const reDrawPolygon = (polygon, canvas) => {
line.attributes = l.attributes
}
})
const lineLength = Math.sqrt(
Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
)
if (line.attributes !== undefined) {
line.attributes.planeSize = lineLength
line.attributes.actualSize = line
} else {
line.attributes = {
roofId: newPolygon.id,
planeSize: lineLength,
actualSize: lineLength,
}
}
})
canvas?.add(newPolygon)