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-10-25 10:52:54 +09:00
parent 78d27e9bef
commit 637c7a75d5
7 changed files with 935 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/dictionary.txt
View File

@ -18,6 +18,7 @@
출폭: offset
폭: width
경사(구배): pitch
각도: degree
이구배: doublePitch
소매: sleeve
개구: openSpace

1
src/common/common.js
View File

@ -115,5 +115,6 @@ export const INPUT_TYPE = {
export const POLYGON_TYPE = {
ROOF: 'roof',
WALL: 'wall',
TRESTLE: 'trestle',
}

56
src/components/Roof2.jsx
View File

@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
import InitSettingsModal from './InitSettingsModal'
import GridSettingsModal from './GridSettingsModal'
import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
import { changeHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
import { changeCurrentRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
import ThumbnailList from '@/components/ui/ThumbnailLIst'
import ObjectPlacement from '@/components/ui/ObjectPlacement'
import { globalLocaleStore } from '@/store/localeAtom'
@ -431,7 +431,7 @@ export default function Roof2(props) {
{ x: 450, y: 850 },
]
const polygon = new QPolygon(rectangleType1, {
const polygon = new QPolygon(rectangleType2, {
fill: 'transparent',
stroke: 'green',
strokeWidth: 1,
@ -672,18 +672,52 @@ export default function Roof2(props) {
canvas?.renderAll()
}
const setHipRoof = () => {
const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
const currentRoof = polygon.lines[2]
currentRoof.attributes.type = LINE_TYPE.WALLLINE.EAVES
currentRoof.attributes.offset = 50
changeCurrentRoof(currentRoof, canvas)
}
const setGableRoof = () => {
let offset = Number(prompt('gable roof offset', '50'))
const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
const currentRoof = polygon.lines[2]
currentRoof.attributes.type = LINE_TYPE.WALLLINE.GABLE
currentRoof.attributes.offset = 30
changeCurrentRoof(currentRoof, canvas)
}
const setHipAndGableRoof = () => {
let offset = Number(prompt('팔작지붕 폭', '50'))
if (!isNaN(offset) && offset > 0) {
const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
const currentRoof = polygon.lines[3]
const currentRoof = polygon.lines[2]
currentRoof.attributes.type = LINE_TYPE.WALLLINE.HIPANDGABLE
currentRoof.attributes.width = offset
changeHipAndGableRoof(currentRoof, canvas)
changeCurrentRoof(currentRoof, canvas)
} else {
alert('offset 은 0 보다 커야 함')
alert('폭은 0 보다 커야 함')
}
}
const setJerkInHeadRoof = () => {
let offset = Number(prompt('팔작지붕 폭', '50'))
if (!isNaN(offset) && offset > 0) {
const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
const currentRoof = polygon.lines[2]
currentRoof.attributes.type = LINE_TYPE.WALLLINE.JERKINHEAD
currentRoof.attributes.width = offset
changeCurrentRoof(currentRoof, canvas)
} else {
alert('폭은 0 보다 커야 함')
}
}
const setWallRoof = () => {
let offset = Number(prompt('소매 폭', '0'))
const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
const currentRoof = polygon.lines[2]
currentRoof.attributes.type = LINE_TYPE.WALLLINE.WALL
currentRoof.attributes.width = offset
changeCurrentRoof(currentRoof, canvas)
}
return (
<>
{canvas && (
@ -810,19 +844,19 @@ export default function Roof2(props) {
</Button>
{/* </>*/}
{/*)}*/}
<Button className={'m-1 p-2'} onClick={null}>
<Button className={'m-1 p-2'} onClick={setHipRoof}>
용마루지붕
</Button>
<Button className={'m-1 p-2'} onClick={setGableRoof}>
<Button className={'m-1 p-2'} onClick={setHipAndGableRoof}>
팔작지붕
</Button>
<Button className={'m-1 p-2'} onClick={null}>
<Button className={'m-1 p-2'} onClick={setGableRoof}>
박공지붕
</Button>
<Button className={'m-1 p-2'} onClick={null}>
<Button className={'m-1 p-2'} onClick={setJerkInHeadRoof}>
반절처지붕
</Button>
<Button className={'m-1 p-2'} onClick={null}>
<Button className={'m-1 p-2'} onClick={setWallRoof}>
벽지붕
</Button>
<Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>

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

@ -2,26 +2,36 @@ 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, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import { calculateAngle, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import * as turf from '@turf/turf'
import { LINE_TYPE } from '@/common/common'
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
type: 'QPolygon',
lines: [],
texts: [],
// lines: [],
// texts: [],
id: null,
length: 0,
hips: [],
ridges: [],
connectRidges: [],
cells: [],
// hips: [],
// ridges: [],
// connectRidges: [],
// cells: [],
parentId: null,
innerLines: [],
children: [],
// innerLines: [],
// children: [],
initOptions: null,
direction: null,
arrow: null,
initialize: function (points, options, canvas) {
this.lines = []
this.texts = []
this.hips = []
this.ridges = []
this.connectRidges = []
this.cells = []
this.innerLines = []
this.children = []
// 소수점 전부 제거
points.forEach((point) => {
point.x = Math.round(point.x)
@ -180,10 +190,42 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
},
// 보조선 그리기
drawHelpLine(pitch = 4) {
drawHelpLine() {
// drawHelpLineInHexagon(this, pitch)
console.log('drawHelpLine roofId : ', this.id)
drawRidgeRoof(this.id, pitch, this.canvas)
const types = []
this.lines.forEach((line) => types.push(line.attributes.type))
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 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)
// A형, B형 박공 지붕
if (
(gableOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableEven.every((type) => gableType.includes(type))) ||
(gableEven.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableOdd.every((type) => gableType.includes(type)))
) {
console.log('박공 지붕')
} else if (hasShed) {
//편류지붕
let shedIndex = 0
types.forEach((type, i) => {
if (type === LINE_TYPE.WALLLINE.SHED) {
shedIndex = i
}
})
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('편류지붕')
}
} else {
drawRidgeRoof(this.id, this.canvas)
}
},
addLengthText() {

53
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 } from '@/common/common'
import { INPUT_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
export function useMode() {
const [mode, setMode] = useRecoilState(modeState)
@ -1506,32 +1506,23 @@ export function useMode() {
*벽 지붕 외곽선 생성 polygon을 입력받아 만들기
*/
const handleOuterlinesTest2 = (polygon, offset = 50) => {
console.log('polygon : ', polygon)
// TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
polygon.lines.forEach((line, index) => {
line.attributes = {
/*line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset: 40,
width: 50,
pitch: 4,
sleeve: true,
}
}*/
/*if (index === 1 || index === 3) {
line.attributes = {
type: LINE_TYPE.WALLLINE.WALL,
offset: 0, //출폭
offset: 50, //출폭
width: 30, //폭
pitch: 4, //구배
sleeve: true, //소매
}
} else if (index === 0) {
line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset: 0,
width: 50,
pitch: 4,
sleeve: true,
}
} else {
line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
@ -1541,6 +1532,31 @@ export function useMode() {
sleeve: true,
}
}*/
/* if (index === 1) {
line.attributes = {
type: LINE_TYPE.WALLLINE.SHED,
offset: 20, //출폭
width: 30, //폭
pitch: 4, //구배
sleeve: true, //소매
}
} else if (index === 3) {
line.attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset: 50, //출폭
width: 30, //폭
pitch: 4, //구배
sleeve: true, //소매
}
} else {
line.attributes = {
type: LINE_TYPE.WALLLINE.GABLE,
offset: 30,
width: 50,
pitch: 4,
sleeve: true,
}
}*/
})
const roof = drawRoofPolygon(polygon) //지붕 그리기
@ -1730,7 +1746,7 @@ export function useMode() {
return { x1: point.x, y1: point.y }
}),
)
roof.name = 'roof'
roof.name = POLYGON_TYPE.ROOF
roof.setWall(wall)
roof.lines.forEach((line, index) => {
@ -1750,13 +1766,12 @@ export function useMode() {
}
wall.lines.forEach((line, index) => {
line.attributes = {
roofId: roof.id,
}
line.attributes.roofId = roof.id
line.attributes.currentRoof = roof.lines[index].id
})
console.log('roof : ', roof)
console.log('wall : ', wall)
console.log('drawRoofPolygon roof : ', roof)
console.log('drawRoofPolygon wall : ', wall)
setRoof(roof)
setWall(wall)

10
src/util/canvas-util.js
View File

@ -1,5 +1,6 @@
import { intersect } from 'mathjs'
import * as turf from '@turf/turf'
/**
* Collection of function to use on canvas
*/
@ -261,6 +262,15 @@ export const getDegreeByChon = (chon) => {
return Number((radians * (180 / Math.PI)).toFixed(2))
}
/**
* 각도를 입력받아 촌을 반환
* @param degree
* @returns {number}
*/
export const getChonByDegree = (degree) => {
return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(2))
}
/**
* 두 점 사이의 방향을 반환합니다.
* @param a {fabric.Object}

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

File diff suppressed because it is too large Load Diff