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

dev merge 처리 중

Browse Source
This commit is contained in:
Jaeyoung Lee 2024-10-14 17:23:24 +09:00
parent f76c4551bf
commit 5064ff627c
1 changed files with 219 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

316
src/hooks/useMode.js
View File

@ -36,7 +36,10 @@ 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 } from '@/common/common'
import { m } from 'framer-motion'
import { set } from 'react-hook-form'
import { FaWineGlassEmpty } from 'react-icons/fa6'
export function useMode() {
const [mode, setMode] = useRecoilState(modeState)
@ -1506,25 +1509,6 @@ 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()
@ -4873,6 +4857,12 @@ 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 로 진입여부를 확인
* 확인 후 셀을 이동시킴
@ -4880,56 +4870,190 @@ export function useMode() {
const drawCellManualInTrestle = () => {
const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
const dormerTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'dormerTrestle') //도머 객체
if (trestlePolygons.length !== 0) {
let lastPointPosition = { x: 0, y: 0 }
let fabricPolygon = null
let inside = false
let turfPolygon
let manualDrawCells = drewRoofCells //
let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
let direction
let trestlePolygon
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])
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
trestlePolygon = trestlePolygons[i]
direction = trestlePolygons[i].direction //도형의 방향
let width = direction === 'south' || direction === 'north' ? 172 : 113
let height = direction === 'south' || direction === 'north' ? 113 : 172
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
]
const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
]
const turfPoints = coordToTurfPolygon(points)
fabricPolygon = new QPolygon(points, {
fill: '#BFFD9F',
stroke: 'black',
selectable: false, // 선택 가능하게 설정
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
opacity: 0.8,
parentId: trestlePolygons[i].parentId,
name: 'tmpCell',
if (turf.booleanWithin(turfPoints, turfPolygon)) {
let isDrawing = false
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
fabricPolygon = new fabric.Rect({
fill: 'white',
stroke: 'black',
strokeWidth: 1,
width: width,
height: height,
left: mousePoint.x - width / 2,
top: mousePoint.y - height / 2,
selectable: false,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
opacity: 0.8,
name: 'tmpCell',
parentId: trestlePolygons[i].parentId,
})
canvas?.add(fabricPolygon) //움직여가면서 추가됨
/**
* 스냅기능
*/
let snapDistance = 10
let cellSnapDistance = 20
const trestleLeft = trestlePolygons[i].left
const trestleTop = trestlePolygons[i].top
const trestleRight = trestleLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
const trestleBottom = trestleTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
const bigCenterY = (trestleTop + trestleTop + 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 smallCenterX = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
const smallCenterY = smallTop + (fabricPolygon.height * fabricPolygon.scaleX) / 2
/**
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨
*/
if (manualDrawCells) {
manualDrawCells.forEach((cell) => {
const holdCellLeft = cell.left
const holdCellTop = cell.top
const holdCellRight = holdCellLeft + cell.width * cell.scaleX
const holdCellBottom = holdCellTop + cell.height * cell.scaleY
const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
//설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
fabricPolygon.left = holdCellLeft - width - 0.5
}
//설치된 셀에 우측에 스냅
if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
fabricPolygon.left = holdCellRight + 0.5
}
//설치된 셀에 위쪽에 스냅
if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
fabricPolygon.top = holdCellTop - height - 0.5
}
//설치된 셀에 밑쪽에 스냅
if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
fabricPolygon.top = holdCellBottom + 0.5
}
//가운데 -> 가운데
if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX - width / 2
}
//왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX
}
// 오른쪽 -> 가운데
if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX - width
}
//세로 가운데 -> 가운데
if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY - height / 2
}
//위쪽 -> 가운데
if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY
}
//아랫쪽 -> 가운데
if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY - height
}
})
canvas?.add(fabricPolygon) //움직여가면서 추가됨
lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
}
// 위쪽 변에 스냅
if (Math.abs(smallTop - trestleTop) < snapDistance) {
fabricPolygon.top = trestleTop
}
// 아래쪽 변에 스냅
if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (trestleTop + trestlePolygons[i].height)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
}
// 왼쪽변에 스냅
if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
fabricPolygon.left = trestleLeft
}
//오른쪽 변에 스냅
if (Math.abs(smallRight - trestleRight) < snapDistance) {
fabricPolygon.left = trestleRight - fabricPolygon.width * fabricPolygon.scaleX
}
if (direction === 'south' || direction === 'north') {
// 모듈왼쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallLeft - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2
}
// 모듈이 가운데가 세로중앙선에 붙게 스냅
if (Math.abs(smallCenterX - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
}
// 모듈오른쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallRight - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
}
} else {
// 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenterY) < snapDistance) {
fabricPolygon.top = bigCenterY - fabricPolygon.height / 2
}
if (Math.abs(smallTop - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2
}
// 모듈 밑면이 가로중앙선에 스냅
if (Math.abs(smallBottom - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
}
}
fabricPolygon.setCoords()
canvas?.renderAll()
inside = true
break
@ -4945,23 +5069,56 @@ export function useMode() {
})
canvas?.on('mouse:up', (e) => {
let isIntersection = true
if (!inside) return
if (fabricPolygon) {
const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
const rectPoints = [
{ x: fabricPolygon.left + 0.5, y: fabricPolygon.top + 0.5 },
{ x: fabricPolygon.left + 0.5 + fabricPolygon.width * fabricPolygon.scaleX, y: fabricPolygon.top + 0.5 },
{
x: fabricPolygon.left + fabricPolygon.width * fabricPolygon.scaleX + 0.5,
y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.5,
},
{ x: fabricPolygon.left + 0.5, y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.5 },
]
if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
fabricPolygon.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(fabricPolygon)
//도머 객체를 가져옴
if (dormerTrestlePolygons) {
dormerTrestlePolygons.forEach((dormerTrestle) => {
const dormerTurfPolygon = polygonToTurfPolygon(dormerTrestle) //turf객체로 변환
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
//겹치면 안됨
if (intersection) {
alert('도머위에 모듈을 올릴 수 없습니다.')
isIntersection = false
}
})
}
if (!isIntersection) return
fabricPolygon.setCoords() //좌표 재정렬
if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell))) //겹치는지 확인
if (!isOverlap) {
//안겹치면 넣는다
fabricPolygon.set({ name: 'cell' })
fabricPolygon.setCoords()
manualDrawCells.push(fabricPolygon)
fabricPolygon.set({ name: 'cell', fill: '#BFFD9F' })
manualDrawCells.push(fabricPolygon) //모듈배열에 추가
//해당 모듈에 프로퍼티로 넣는다
trestlePolygon.set({
modules: manualDrawCells,
})
} else {
alert('셀끼리 겹치면 안되죠?')
}
} else {
alert('나갔으요!!')
alert('나갔죠?!!')
}
setDrewRoofCells(manualDrawCells)
}
@ -5036,29 +5193,6 @@ export function useMode() {
const cols = Math.floor((bbox[2] - bbox[0]) / width)
const rows = Math.floor((bbox[3] - bbox[1]) / height)
// 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,
@ -5108,20 +5242,6 @@ 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) {
@ -5162,6 +5282,8 @@ export function useMode() {
lockScalingY: true, // Y 축 크기 조정 잠금
opacity: 0.8,
parentId: trestle.parentId,
lineCol: col,
lineRow: row,
})
canvas?.add(fabricPolygon)
drawCellsArray.push(fabricPolygon)