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

모듈 배치 수동, 자동 작업중

Browse Source
This commit is contained in:
yjnoh 2024-11-14 15:17:48 +09:00
parent 08cced00e8
commit 01495d734a
1 changed files with 139 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/hooks/module/useModuleBasicSetting.js
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom' import { canvasState } from '@/store/canvasAtom'
import { setSurfaceShapePattern } from '@/util/canvas-util' import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { roofDisplaySelector } from '@/store/settingAtom' import { roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon from '@/util/qpolygon-utils' import offsetPolygon from '@/util/qpolygon-utils'
import { QPolygon } from '@/components/fabric/QPolygon' import { QPolygon } from '@/components/fabric/QPolygon'
@ -13,7 +13,7 @@ import * as turf from '@turf/turf'
export function useModuleBasicSetting() { export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState) const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector) const roofDisplay = useRecoilValue(roofDisplaySelector)
const setModuleInstSurface = useSetRecoilState(moduleSetupSurfaceState) const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState) const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent() const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
let selectedModuleInstSurfaceArray = [] let selectedModuleInstSurfaceArray = []
@ -61,9 +61,7 @@ export function useModuleBasicSetting() {
//설치 범위 지정 클릭 이벤트 //설치 범위 지정 클릭 이벤트
const toggleSelection = (setupSurface) => { const toggleSelection = (setupSurface) => {
console.log('polygon', setupSurface) const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === polygon.parentId)
//최초 선택일때 //최초 선택일때
if (!isExist) { if (!isExist) {
//기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄 //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
@ -95,7 +93,7 @@ export function useModuleBasicSetting() {
} }
canvas?.renderAll() canvas?.renderAll()
setModuleInstSurface([...selectedModuleInstSurfaceArray]) setModuleSetupSurface([...selectedModuleInstSurfaceArray])
} }
/** /**
@ -330,7 +328,16 @@ export function useModuleBasicSetting() {
//도머 객체를 가져옴 //도머 객체를 가져옴
if (batchObjects) { if (batchObjects) {
batchObjects.forEach((object) => { batchObjects.forEach((object) => {
const dormerTurfPolygon = polygonToTurfPolygon(object) //turf객체로 변환 let dormerTurfPolygon
if (object.type === 'group') {
//도머는 그룹형태임
dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
} else {
//개구, 그림자
dormerTurfPolygon = polygonToTurfPolygon(rectToPolygon(object))
}
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인 const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
//겹치면 안됨 //겹치면 안됨
if (intersection) { if (intersection) {
@ -346,7 +353,7 @@ export function useModuleBasicSetting() {
if (turf.booleanWithin(tempTurfModule, turfPolygon)) { if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음 //마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawModules.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell))) //겹치는지 확인 const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
if (!isOverlap) { if (!isOverlap) {
//안겹치면 넣는다 //안겹치면 넣는다
tempModule.setCoords() tempModule.setCoords()
@ -367,73 +374,86 @@ export function useModuleBasicSetting() {
} }
} }
const coordToTurfPolygon = (points) => {
const coordinates = points.map((point) => [point.x, point.y])
coordinates.push(coordinates[0])
return turf.polygon([coordinates])
}
const polygonToTurfPolygon = (polygon) => {
const coordinates = polygon.points.map((point) => [point.x, point.y])
coordinates.push(coordinates[0])
return turf.polygon(
[coordinates],
{},
{
parentId: polygon.parentId,
},
)
}
const autoModuleSetup = () => { const autoModuleSetup = () => {
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && obj.selected) initEvent()
const notSelectedTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && !obj.selected) const moduleSetupSurfaces = moduleSetupSurface
const notSelectedTrestlePolygons = canvas
?.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && !moduleSetupSurfaces.includes(obj))
const dormerTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'dormerTrestle') //도머 객체 const batchObjects = canvas
?.getObjects()
.filter(
(obj) =>
obj.name === BATCH_TYPE.OPENING ||
obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
obj.name === BATCH_TYPE.PENTAGON_DORMER ||
obj.name === BATCH_TYPE.SHADOW,
) //도머s 객체
if (moduleSetupSurfaces.length === 0) { if (moduleSetupSurfaces.length === 0) {
alert('가대가 없습니다.') alert('선택된 모듈 설치면이 없습니다.')
return return
} }
if (drewRoofCells.length > 0) { if (moduleIsSetup.length > 0) {
alert('기존 셀은 제거됩니다.') alert('기존 모듈은 제거됩니다.')
} }
notSelectedTrestlePolygons.forEach((trestle) => { notSelectedTrestlePolygons.forEach((obj) => {
trestle.cells.forEach((cell) => { if (obj.modules) {
canvas?.remove(cell) obj.modules.forEach((module) => {
}) canvas?.remove(module)
trestle.cells = [] })
obj.modules = []
}
}) })
const drawCellsArray = [] const moduleSetupArray = []
moduleSetupSurfaces.forEach((trestle, index) => { moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
trestle.fire('mousedown') moduleSetupSurface.fire('mousedown')
let maxLengthLine = trestle.lines.reduce((acc, cur) => {
let maxLengthLine = moduleSetupSurface.lines.reduce((acc, cur) => {
return acc.length > cur.length ? acc : cur return acc.length > cur.length ? acc : cur
}) })
const turfTrestlePolygon = polygonToTurfPolygon(trestle) //폴리곤을 turf 객체로 변환 const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
const containsBatchObjects = batchObjects.filter((batchObject) => {
let convertBatchObject
if (batchObject.type === 'group') {
//도머는 그룹형태임
convertBatchObject = batchObjectGroupToTurfPolygon(batchObject)
} else {
//개구, 그림자
batchObject.set({
points: rectToPolygon(batchObject),
})
convertBatchObject = polygonToTurfPolygon(batchObject)
}
const containsDormerTrestlePolygons = dormerTrestlePolygons.filter((dormerTrestle) => {
// 폴리곤 안에 도머 폴리곤이 포함되어있는지 확인해서 반환하는 로직 // 폴리곤 안에 도머 폴리곤이 포함되어있는지 확인해서 반환하는 로직
return ( return turf.booleanContains(turfModuleSetupSurface, convertBatchObject) || turf.booleanWithin(convertBatchObject, turfModuleSetupSurface)
turf.booleanContains(turfTrestlePolygon, polygonToTurfPolygon(dormerTrestle)) ||
turf.booleanWithin(polygonToTurfPolygon(dormerTrestle), turfTrestlePolygon)
)
}) })
let difference = turfTrestlePolygon //기본 객체(면형상) let difference = turfModuleSetupSurface //기본 객체(면형상)
if (containsDormerTrestlePolygons.length > 0) { if (containsBatchObjects.length > 0) {
//turf로 도머를 제외시키는 로직 //turf로 도머를 제외시키는 로직
for (let i = 0; i < containsDormerTrestlePolygons.length; i++) { for (let i = 0; i < containsBatchObjects.length; i++) {
let convertBatchObject
if (containsBatchObjects[i].type === 'group') {
convertBatchObject = batchObjectGroupToTurfPolygon(containsBatchObjects[i])
} else {
convertBatchObject = polygonToTurfPolygon(containsBatchObjects[i])
}
if (i === 0) { if (i === 0) {
difference = turf.difference(turf.featureCollection([turfTrestlePolygon, polygonToTurfPolygon(containsDormerTrestlePolygons[i])])) //한 면에 도머가 1개일때 difference = turf.difference(turf.featureCollection([turfModuleSetupSurface, convertBatchObject])) //한 면에 도머가 1개일때
} else { } else {
if (difference) { if (difference) {
difference = turf.difference(turf.featureCollection([difference, polygonToTurfPolygon(containsDormerTrestlePolygons[i])])) //한면에 도머가 여러개일때 계속 제외시킴 difference = turf.difference(turf.featureCollection([difference, convertBatchObject])) //한면에 도머가 여러개일때 계속 제외시킴
} }
} }
} }
@ -444,9 +464,9 @@ export function useModuleBasicSetting() {
let height = maxLengthLine.flowDirection === 'right' || maxLengthLine.flowDirection === 'left' ? 113.4 : 172.2 let height = maxLengthLine.flowDirection === 'right' || maxLengthLine.flowDirection === 'left' ? 113.4 : 172.2
//배치면때는 방향쪽으로 패널이 넓게 누워져야함 //배치면때는 방향쪽으로 패널이 넓게 누워져야함
if (trestle.flowDirection !== undefined) { if (moduleSetupSurface.flowDirection !== undefined) {
width = trestle.flowDirection === 'south' || trestle.flowDirection === 'north' ? 172.2 : 113.4 width = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 172.2 : 113.4
height = trestle.flowDirection === 'south' || trestle.flowDirection === 'north' ? 113.4 : 172.2 height = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 113.4 : 172.2
} }
const cols = Math.floor((bbox[2] - bbox[0]) / width) const cols = Math.floor((bbox[2] - bbox[0]) / width)
const rows = Math.floor((bbox[3] - bbox[1]) / height) const rows = Math.floor((bbox[3] - bbox[1]) / height)
@ -458,30 +478,30 @@ export function useModuleBasicSetting() {
square = [], square = [],
margin = 0 margin = 0
if (trestle.flowDirection !== undefined) { if (moduleSetupSurface.flowDirection !== undefined) {
//배치면 처림 방향이 정해져있는 경우 //배치면 처림 방향이 정해져있는 경우
if (trestle.flowDirection === 'south' || trestle.flowDirection === 'north') { if (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north') {
//남,북 //남,북
margin = (bbox[2] - bbox[0] - cols * width) / 2 //박스 끝에서 박스 시작값을 빼고 width와 계산된 cols를 곱한값을 뺀뒤 나누기 2 하면 가운데 배치됨 margin = (bbox[2] - bbox[0] - cols * width) / 2 //박스 끝에서 박스 시작값을 빼고 width와 계산된 cols를 곱한값을 뺀뒤 나누기 2 하면 가운데 배치됨
if (trestle.flowDirection === 'south') { if (moduleSetupSurface.flowDirection === 'south') {
//남쪽 //남쪽
x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin //상하 위치 기준이면 좌우 가운데 정렬한다 x = col === 0 ? moduleSetupSurface.left + margin : bbox[0] + col * width + margin //상하 위치 기준이면 좌우 가운데 정렬한다
y = bbox[3] - row * height y = bbox[3] - row * height
} else { } else {
//북쪽 //북쪽
x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin x = col === 0 ? moduleSetupSurface.left + margin : bbox[0] + col * width + margin
y = bbox[1] + row * height y = bbox[1] + row * height
} }
} else if (trestle.flowDirection === 'east' || trestle.flowDirection === 'west') { } else if (moduleSetupSurface.flowDirection === 'east' || moduleSetupSurface.flowDirection === 'west') {
//동쪽 //동쪽
margin = (bbox[3] - bbox[1] - rows * height) / 2 margin = (bbox[3] - bbox[1] - rows * height) / 2
if (trestle.flowDirection === 'east') { if (moduleSetupSurface.flowDirection === 'east') {
x = bbox[2] - col * width x = bbox[2] - col * width
y = rows === 0 ? trestle.top + margin : bbox[1] + row * height + margin //좌우 위치 기준이면 상하 가운데 정렬한다 y = rows === 0 ? moduleSetupSurface.top + margin : bbox[1] + row * height + margin //좌우 위치 기준이면 상하 가운데 정렬한다
} else { } else {
x = bbox[0] + col * width x = bbox[0] + col * width
y = rows === 0 ? trestle.top + margin : bbox[1] + row * height + margin y = rows === 0 ? moduleSetupSurface.top + margin : bbox[1] + row * height + margin
} }
} }
} else { } else {
@ -500,17 +520,29 @@ export function useModuleBasicSetting() {
const squarePolygon = turf.polygon([square]) const squarePolygon = turf.polygon([square])
const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon) const disjointFromTrestle =
turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
if (disjointFromTrestle) { if (disjointFromTrestle) {
let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
const points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) const points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
if (containsDormerTrestlePolygons.length > 0) { if (containsBatchObjects.length > 0) {
let convertBatchObject
//도머가 있으면 적용되는 로직 //도머가 있으면 적용되는 로직
const isDisjoint = containsDormerTrestlePolygons.some((dormerTrestle) => { const isDisjoint = containsBatchObjects.some((batchObject) => {
return turf.booleanDisjoint(squarePolygon, polygonToTurfPolygon(dormerTrestle)) //도머가 여러개일수있으므로 겹치는게 있다면... if (batchObject.type === 'group') {
convertBatchObject = batchObjectGroupToTurfPolygon(batchObject)
} else {
convertBatchObject = polygonToTurfPolygon(batchObject)
}
return turf.booleanDisjoint(squarePolygon, convertBatchObject) //도머가 여러개일수있으므로 겹치는게 있다면...
}) })
console.log('isDisjoint', isDisjoint)
if (isDisjoint) { if (isDisjoint) {
const tempModule = new QPolygon(points, { const tempModule = new QPolygon(points, {
fill: '#BFFD9F', fill: '#BFFD9F',
@ -522,10 +554,10 @@ export function useModuleBasicSetting() {
lockScalingX: false, // X 축 크기 조정 잠금 lockScalingX: false, // X 축 크기 조정 잠금
lockScalingY: false, // Y 축 크기 조정 잠금 lockScalingY: false, // Y 축 크기 조정 잠금
opacity: 0.8, opacity: 0.8,
parentId: trestle.parentId, parentId: moduleSetupSurface.parentId,
}) })
canvas?.add(tempModule) canvas?.add(tempModule)
drawCellsArray.push(tempModule) moduleSetupArray.push(tempModule)
} }
} else { } else {
//도머가 없을땐 그냥 그림 //도머가 없을땐 그냥 그림
@ -539,12 +571,12 @@ export function useModuleBasicSetting() {
lockScalingX: true, // X 축 크기 조정 잠금 lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금 lockScalingY: true, // Y 축 크기 조정 잠금
opacity: 0.8, opacity: 0.8,
parentId: trestle.parentId, parentId: moduleSetupSurface.parentId,
lineCol: col, lineCol: col,
lineRow: row, lineRow: row,
}) })
canvas?.add(tempModule) canvas?.add(tempModule)
drawCellsArray.push(tempModule) moduleSetupArray.push(tempModule)
} }
} }
} }
@ -560,7 +592,7 @@ export function useModuleBasicSetting() {
// } // }
// drawRoofCells.forEach((cell) => { // drawRoofCells.forEach((cell) => {
// drawCellsArray.push(cell) // moduleSetupArray.push(cell)
// }) // })
/** /**
@ -585,9 +617,42 @@ export function useModuleBasicSetting() {
// originY: 'center', // originY: 'center',
// }), // }),
// ) // )
moduleSetupSurface.set({ modules: moduleSetupArray })
}) })
setDrewRoofCells(drawCellsArray) setModuleIsSetup(moduleSetupArray)
}
const coordToTurfPolygon = (points) => {
const coordinates = points.map((point) => [point.x, point.y])
coordinates.push(coordinates[0])
return turf.polygon([coordinates])
}
const polygonToTurfPolygon = (object) => {
let coordinates
coordinates = object.points.map((point) => [point.x, point.y])
coordinates.push(coordinates[0])
return turf.polygon(
[coordinates],
{},
{
parentId: object.parentId,
},
)
}
function batchObjectGroupToTurfPolygon(group) {
const polygons = group.getObjects().filter((obj) => obj.type === 'QPolygon')
let allPoints = []
polygons.forEach((obj) => allPoints.push(...obj.get('points')))
const points = turf.featureCollection(allPoints.map((point) => turf.point([point.x, point.y])))
const hull = turf.concave(points, { tolerance: 0.1 })
return hull
} }
return { return {