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-09-11 09:55:53 +09:00
parent 70aeaa2957
commit 27f1191c09
4 changed files with 100 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Roof2.jsx
View File

@ -37,7 +37,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
import InitSettingsModal from './InitSettingsModal'
import GridSettingsModal from './GridSettingsModal'
import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
import ThumbnailList from '@/components/ui/ThumbnailLIst'
export default function Roof2(props) {
@ -615,6 +615,18 @@ export default function Roof2(props) {
const setDirectionStringToArrow = () => {
drawDirectionStringToArrow(canvas, globalCampass)
}
const setAllGableRoof = () => {
let offset = Number(prompt('gable roof offset', '50'))
if (!isNaN(offset) && offset > 0) {
const polygon = canvas?.getObjects()
console.log('gable roof offset : ', offset)
console.log('polygon : ', polygon)
changeAllGableRoof(polygon, canvas)
} else {
alert('offset 은 0 보다 커야 함')
}
}
return (
<>
{canvas && (
@ -741,6 +753,9 @@ export default function Roof2(props) {
</Button>
</>
)}
<Button className={'m-1 p-2'} onClick={setAllGableRoof}>
팔작지붕
</Button>
<Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
저장
</Button>

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

@ -2,15 +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,
drawDirectionArrow,
drawHippedRoof,
drawPolygonArrow,
inPolygon,
splitPolygonWithLines,
toGeoJSON,
} from '@/util/qpolygon-utils'
import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import * as turf from '@turf/turf'
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@ -724,6 +716,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.addLengthText()
},
divideLine() {
splitPolygonWithLines(this)
// splitPolygonWithLines(this)
},
})

7
src/hooks/useMode.js
View File

@ -17,16 +17,16 @@ import {
compassState,
drewRoofCellsState,
fontSizeState,
guideLineState,
horiGuideLinesState,
modeState,
roofPolygonArrayState,
roofPolygonPatternArrayState,
roofState,
sortedPolygonArray,
templateTypeState,
wallState,
guideLineState,
horiGuideLinesState,
vertGuideLinesState,
wallState,
} from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { fabric } from 'fabric'
@ -1255,6 +1255,7 @@ export function useMode() {
return { x1: point.x, y1: point.y }
}),
)
roof.name = 'roofBase'
roof.setWall(polygon)
setRoof(roof)
setWall(polygon)

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

@ -1207,7 +1207,7 @@ const drawRoofRidge = (polygon, chon) => {
const walls = polygon.wall.lines // 외벽의 라인
const roofs = polygon.lines // 지붕의 라인
const ridgeWall = []
let ridgeWall = []
walls.forEach((wall, index) => {
let currentRoof, prevWall, currentWall, nextWall
@ -1227,7 +1227,7 @@ const drawRoofRidge = (polygon, chon) => {
nextWall = walls[index + 1]
}
if (getLineDirection(prevWall) !== getLineDirection(nextWall) && currentWall.length < currentRoof.length) {
if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) {
ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length })
}
})
@ -1503,6 +1503,7 @@ const drawRoofRidge = (polygon, chon) => {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'ridgeLine',
},
)
polygon.canvas.add(ridge)
@ -1657,6 +1658,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1686,6 +1688,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1715,6 +1718,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1744,6 +1748,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1814,6 +1819,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1839,6 +1845,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1868,6 +1875,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -1897,6 +1905,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -2204,6 +2213,7 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
@ -2283,12 +2293,14 @@ const drawHips = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'red',
strokeWidth: 1,
name: 'hipLine',
})
polygon.canvas.add(hip)
polygon.hips.push(hip)
polygon.innerLines.push(hip)
}
})
console.log('polygon.hips : ', polygon.hips)
}
const getPointInPolygon = (polygon, point, isInclude = false) => {
@ -2565,20 +2577,28 @@ const connectLinePoint = (polygon) => {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'ridgeLine',
})
polygon.canvas.remove(ridge)
polygon.canvas.remove(ridge2)
polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
polygon.innerLines = polygon.innerLines.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
console.log('newRidge : ', newRidge)
if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
polygon.canvas.remove(ridge)
polygon.canvas.remove(ridge2)
polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
polygon.innerLines = polygon.innerLines.filter(
(r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2),
)
polygon.canvas.add(newRidge)
polygon.ridges.push(newRidge)
polygon.innerLines.push(newRidge)
polygon.canvas.add(newRidge)
polygon.ridges.push(newRidge)
polygon.innerLines.push(newRidge)
}
}
})
})
console.log('polygon : ', polygon)
}
/*
@ -2654,6 +2674,53 @@ const getLineDirection = (line) => {
}
}
export const changeAllGableRoof = (polygon, canvas) => {
const walls = polygon.find((p) => p.name === 'wall').lines // 외벽의 라인
const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
const roofLines = roof.lines // 지붕의 라인
const ridges = roof.ridges // 마루의 라인
const hips = roof.hips // 추녀마루의 라인
ridges.forEach((ridge) => {
console.log('ridge : ', ridge)
console.log(ridge.direction)
let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
if (ridgeHip1.length > 1) {
console.log('ridgeHip1 : ')
let x1 = ridgeHip1[0].x1,
y1 = ridgeHip1[0].y1,
x2 = ridgeHip1[1].x1,
y2 = ridgeHip1[1].y1
roofLines.filter((roofLine) => {
if (
(roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
(roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
) {
roofLine.stroke = 'blue'
canvas?.renderAll()
}
})
}
if (ridgeHip2.length > 1) {
console.log('ridgeHip2 : ')
let x1 = ridgeHip2[0].x1,
y1 = ridgeHip2[0].y1,
x2 = ridgeHip2[1].x1,
y2 = ridgeHip2[1].y1
roofLines.filter((roofLine) => {
if (
(roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
(roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
) {
roofLine.stroke = 'blue'
canvas?.renderAll()
}
})
}
})
}
function arePointsEqual(point1, point2) {
return point1.x === point2.x && point1.y === point2.y
}