지붕 모양 변경 작업 중
This commit is contained in:
Jaeyoung Lee
parent
b1c4338a73
commit
f76c4551bf
@ -23,4 +23,5 @@
|
||||
개구: openSpace
|
||||
도머: dormer
|
||||
그림자: shadow
|
||||
|
||||
복도치수: planeSize
|
||||
실제치수: actualSize
|
||||
|
||||
@ -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 { changeAllHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
|
||||
import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
|
||||
import ThumbnailList from '@/components/ui/ThumbnailLIst'
|
||||
import ObjectPlacement from '@/components/ui/ObjectPlacement'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
@ -409,6 +409,20 @@ export default function Roof2(props) {
|
||||
{ x: 600, y: 100 },
|
||||
]
|
||||
|
||||
const rectangleType1 = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 100, y: 600 },
|
||||
{ x: 300, y: 600 },
|
||||
{ x: 300, y: 100 },
|
||||
]
|
||||
|
||||
const rectangleType2 = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 100, y: 300 },
|
||||
{ x: 600, y: 300 },
|
||||
{ x: 600, y: 100 },
|
||||
]
|
||||
|
||||
const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
|
||||
const newP = [
|
||||
{ x: 450, y: 450 },
|
||||
@ -417,7 +431,7 @@ export default function Roof2(props) {
|
||||
{ x: 450, y: 850 },
|
||||
]
|
||||
|
||||
const polygon = new QPolygon(twelvePoint, {
|
||||
const polygon = new QPolygon(rectangleType2, {
|
||||
fill: 'transparent',
|
||||
stroke: 'green',
|
||||
strokeWidth: 1,
|
||||
|
||||
@ -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, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
|
||||
import { calculateAngle, drawDirectionArrow, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
@ -174,9 +174,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
},
|
||||
|
||||
// 보조선 그리기
|
||||
drawHelpLine(chon = 4) {
|
||||
// drawHelpLineInHexagon(this, chon)
|
||||
drawHippedRoof(this, chon)
|
||||
drawHelpLine(pitch = 4) {
|
||||
// drawHelpLineInHexagon(this, pitch)
|
||||
console.log('drawHelpLine roofId : ', this.id)
|
||||
drawRidgeRoof(this.id, pitch, this.canvas)
|
||||
},
|
||||
|
||||
addLengthText() {
|
||||
|
||||
@ -36,10 +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, Mode } from '@/common/common'
|
||||
import { m } from 'framer-motion'
|
||||
import { set } from 'react-hook-form'
|
||||
import { FaWineGlassEmpty } from 'react-icons/fa6'
|
||||
import { INPUT_TYPE, LINE_TYPE, Mode } from '@/common/common'
|
||||
|
||||
export function useMode() {
|
||||
const [mode, setMode] = useRecoilState(modeState)
|
||||
@ -1509,6 +1506,25 @@ export function useMode() {
|
||||
*벽 지붕 외곽선 생성 polygon을 입력받아 만들기
|
||||
*/
|
||||
const handleOuterlinesTest2 = (polygon, offset = 50) => {
|
||||
console.log('polygon : ', polygon)
|
||||
// TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
|
||||
polygon.lines.forEach((line, index) => {
|
||||
if (index === 1 || index === 3) {
|
||||
line.attributes = {
|
||||
type: LINE_TYPE.WALLLINE.WALL,
|
||||
offset: 50,
|
||||
width: 100,
|
||||
pitch: 4,
|
||||
}
|
||||
} else {
|
||||
line.attributes = {
|
||||
type: LINE_TYPE.WALLLINE.WALL,
|
||||
offset: 50,
|
||||
width: 100,
|
||||
pitch: 4,
|
||||
}
|
||||
}
|
||||
})
|
||||
const roof = drawRoofPolygon(polygon) //지붕 그리기
|
||||
roof.drawHelpLine()
|
||||
// roof.divideLine()
|
||||
@ -1677,21 +1693,6 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const drawRoofPolygon = (wall) => {
|
||||
// TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
|
||||
wall.lines.forEach((line, index) => {
|
||||
if (index === wall.lines.length - 1 || index === 3) {
|
||||
line.attributes = {
|
||||
type: 'gable',
|
||||
offset: 30,
|
||||
}
|
||||
} else {
|
||||
line.attributes = {
|
||||
type: 'hip',
|
||||
offset: 50,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const polygon = createRoofPolygon(wall.points)
|
||||
const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
|
||||
let offsetPolygon
|
||||
@ -1710,13 +1711,33 @@ export function useMode() {
|
||||
return { x1: point.x, y1: point.y }
|
||||
}),
|
||||
)
|
||||
roof.name = 'roofBase'
|
||||
roof.name = 'roof'
|
||||
roof.setWall(wall)
|
||||
|
||||
roof.lines.forEach((line, index) => {
|
||||
line.attributes = { type: wall.lines[index].attributes.type }
|
||||
line.attributes = {
|
||||
roofId: roof.id,
|
||||
wallLine: wall.lines[index].id,
|
||||
type: wall.lines[index].attributes.type,
|
||||
offset: wall.lines[index].attributes.offset,
|
||||
width: wall.lines[index].attributes.width,
|
||||
pitch: wall.lines[index].attributes.pitch,
|
||||
}
|
||||
})
|
||||
|
||||
wall.attributes = {
|
||||
roofId: roof.id,
|
||||
}
|
||||
|
||||
wall.lines.forEach((line, index) => {
|
||||
line.attributes = {
|
||||
roofId: roof.id,
|
||||
}
|
||||
})
|
||||
|
||||
console.log('roof : ', roof)
|
||||
console.log('wall : ', wall)
|
||||
|
||||
setRoof(roof)
|
||||
setWall(wall)
|
||||
|
||||
@ -4852,12 +4873,6 @@ export function useMode() {
|
||||
)
|
||||
}
|
||||
|
||||
const coordToTurfPolygon = (points) => {
|
||||
const coordinates = points.map((point) => [point.x, point.y])
|
||||
coordinates.push(coordinates[0])
|
||||
return turf.polygon([coordinates])
|
||||
}
|
||||
|
||||
/**
|
||||
* trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
|
||||
* 확인 후 셀을 이동시킴
|
||||
@ -4866,19 +4881,29 @@ export function useMode() {
|
||||
const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
|
||||
|
||||
if (trestlePolygons.length !== 0) {
|
||||
let lastPointPosition = { x: 0, y: 0 }
|
||||
let fabricPolygon = null
|
||||
let inside = false
|
||||
let turfPolygon
|
||||
let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
|
||||
let direction
|
||||
let manualDrawCells = drewRoofCells //
|
||||
|
||||
canvas.on('mouse:move', (e) => {
|
||||
//마우스 이벤트 삭제 후 재추가
|
||||
const mousePoint = canvas.getPointer(e.e)
|
||||
const turfPoint = turf.point([mousePoint.x, mousePoint.y])
|
||||
|
||||
for (let i = 0; i < trestlePolygons.length; i++) {
|
||||
turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
|
||||
direction = trestlePolygons[i].direction //도형의 방향
|
||||
let width = direction === 'south' || direction === 'north' ? 172 : 113
|
||||
let height = direction === 'south' || direction === 'north' ? 113 : 172
|
||||
if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) {
|
||||
//turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
|
||||
const direction = trestlePolygons[i].direction //도형의 방향
|
||||
let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4
|
||||
let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2
|
||||
if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
|
||||
let isDrawing = false
|
||||
|
||||
if (isDrawing) return
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
|
||||
|
||||
const points = [
|
||||
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
|
||||
@ -4887,21 +4912,9 @@ export function useMode() {
|
||||
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
|
||||
]
|
||||
|
||||
const turfPoints = coordToTurfPolygon(points)
|
||||
|
||||
if (turf.booleanWithin(turfPoints, turfPolygon)) {
|
||||
//turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
|
||||
|
||||
// if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
|
||||
let isDrawing = false
|
||||
|
||||
if (isDrawing) return
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
|
||||
|
||||
fabricPolygon = new QPolygon(points, {
|
||||
fill: '#BFFD9F',
|
||||
// stroke: 'black',
|
||||
// strokeWidth: 1,
|
||||
stroke: 'black',
|
||||
selectable: false, // 선택 가능하게 설정
|
||||
lockMovementX: true, // X 축 이동 잠금
|
||||
lockMovementY: true, // Y 축 이동 잠금
|
||||
@ -4914,77 +4927,12 @@ export function useMode() {
|
||||
})
|
||||
|
||||
canvas?.add(fabricPolygon) //움직여가면서 추가됨
|
||||
|
||||
/**
|
||||
* 스냅기능
|
||||
*/
|
||||
let snapDistance = 20
|
||||
|
||||
const bigLeft = trestlePolygons[i].left
|
||||
const bigTop = trestlePolygons[i].top
|
||||
const bigRight = bigLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
|
||||
const bigBottom = bigTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
|
||||
const bigCenter = (bigTop + bigTop + trestlePolygons[i].height) / 2
|
||||
|
||||
// 작은 폴리곤의 경계 좌표 계산
|
||||
const smallLeft = fabricPolygon.left
|
||||
const smallTop = fabricPolygon.top
|
||||
const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX
|
||||
const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY
|
||||
const smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
|
||||
|
||||
// 위쪽 변에 스냅
|
||||
if (Math.abs(smallTop - bigTop) < snapDistance) {
|
||||
fabricPolygon.top = bigTop
|
||||
lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
|
||||
}
|
||||
|
||||
// 아래쪽 변에 스냅
|
||||
if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (bigTop + trestlePolygons[i].height)) < snapDistance) {
|
||||
fabricPolygon.top = bigTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
|
||||
}
|
||||
|
||||
// 왼쪽변에 스냅
|
||||
if (Math.abs(smallLeft - bigLeft) < snapDistance) {
|
||||
fabricPolygon.left = bigLeft
|
||||
}
|
||||
//오른쪽 변에 스냅
|
||||
if (Math.abs(smallRight - bigRight) < snapDistance) {
|
||||
fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
|
||||
}
|
||||
|
||||
if (direction === 'south' || direction === 'north') {
|
||||
// 모듈왼쪽이 세로중앙선에 붙게 스냅
|
||||
if (Math.abs(smallLeft - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
|
||||
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2
|
||||
}
|
||||
|
||||
// 모듈이 가운데가 세로중앙선에 붙게 스냅
|
||||
if (Math.abs(smallCenter - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
|
||||
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
|
||||
}
|
||||
|
||||
// 모듈오른쪽이 세로중앙선에 붙게 스냅
|
||||
if (Math.abs(smallRight - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
|
||||
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
|
||||
}
|
||||
} else {
|
||||
// 모듈이 가로중앙선에 스냅
|
||||
if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenter) < snapDistance) {
|
||||
fabricPolygon.top = bigCenter - fabricPolygon.height / 2
|
||||
}
|
||||
|
||||
if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
|
||||
fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
|
||||
}
|
||||
// 모듈 밑면이 가로중앙선에 스냅
|
||||
if (Math.abs(smallBottom - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
|
||||
fabricPolygon.top = bigTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
|
||||
}
|
||||
}
|
||||
|
||||
fabricPolygon.setCoords()
|
||||
canvas?.renderAll()
|
||||
inside = true
|
||||
break
|
||||
} else {
|
||||
inside = false
|
||||
}
|
||||
@ -5000,26 +4948,20 @@ export function useMode() {
|
||||
if (!inside) return
|
||||
if (fabricPolygon) {
|
||||
const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
|
||||
fabricPolygon.setCoords() //좌표 재정렬
|
||||
|
||||
if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
|
||||
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
|
||||
|
||||
manualDrawCells.forEach((cell) => {
|
||||
console.log('cells', cell.points)
|
||||
})
|
||||
console.log('turfCellPolygon', turfCellPolygon.geometry.coordinates)
|
||||
|
||||
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
|
||||
if (!isOverlap) {
|
||||
//안겹치면 넣는다
|
||||
fabricPolygon.setCoords()
|
||||
fabricPolygon.set({ name: 'cell' })
|
||||
fabricPolygon.setCoords()
|
||||
manualDrawCells.push(fabricPolygon)
|
||||
} else {
|
||||
alert('셀끼리 겹치면 안되죠?')
|
||||
}
|
||||
// } else {
|
||||
// alert('나갔으요!!')
|
||||
} else {
|
||||
alert('나갔으요!!')
|
||||
}
|
||||
setDrewRoofCells(manualDrawCells)
|
||||
}
|
||||
@ -5096,6 +5038,27 @@ export function useMode() {
|
||||
|
||||
// console.log('bbox', bbox)
|
||||
|
||||
const boxes = []
|
||||
const installedCellsArray = []
|
||||
|
||||
for (let x = bbox[0]; x < bbox[2]; x += width) {
|
||||
for (let y = bbox[1]; y < bbox[3]; y += height) {
|
||||
const box = turf.polygon([
|
||||
[
|
||||
[x, y],
|
||||
[x + width, y],
|
||||
[x + width, y + height],
|
||||
[x, y + height],
|
||||
[x, y],
|
||||
],
|
||||
])
|
||||
|
||||
if (turf.booleanWithin(box, turfTrestlePolygon)) {
|
||||
boxes.push(box)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let col = 0; col <= cols; col++) {
|
||||
for (let row = 0; row <= rows; row++) {
|
||||
let x = 0,
|
||||
@ -5145,6 +5108,20 @@ export function useMode() {
|
||||
|
||||
const squarePolygon = turf.polygon([square])
|
||||
|
||||
// console.log('turfTrestlePolygon', turfTrestlePolygon)
|
||||
// console.log('squarePolygon', squarePolygon)
|
||||
|
||||
const areaSize = turf.area(turfTrestlePolygon)
|
||||
|
||||
// console.log('areaSize', areaSize)
|
||||
const objSize = turf.area(squarePolygon)
|
||||
|
||||
// console.log('objSize', objSize)
|
||||
|
||||
const maxObject = Math.floor(areaSize / objSize)
|
||||
|
||||
// console.log('maxObjectSize', maxObject)
|
||||
|
||||
const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon)
|
||||
|
||||
if (disjointFromTrestle) {
|
||||
@ -5185,8 +5162,6 @@ export function useMode() {
|
||||
lockScalingY: true, // Y 축 크기 조정 잠금
|
||||
opacity: 0.8,
|
||||
parentId: trestle.parentId,
|
||||
lineCol: col,
|
||||
lineRow: row,
|
||||
})
|
||||
canvas?.add(fabricPolygon)
|
||||
drawCellsArray.push(fabricPolygon)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user