수동 셀 작업 추가
This commit is contained in:
yjnoh
parent
b6c73f8df8
commit
2e52a05f3e
@ -4871,9 +4871,11 @@ export function useMode() {
|
||||
let turfPolygon
|
||||
let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
|
||||
let direction
|
||||
|
||||
canvas.on('mouse:move', (e) => {
|
||||
//마우스 이벤트 삭제 후 재추가
|
||||
const mousePoint = canvas.getPointer(e.e)
|
||||
|
||||
for (let i = 0; i < trestlePolygons.length; i++) {
|
||||
turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
|
||||
direction = trestlePolygons[i].direction //도형의 방향
|
||||
@ -4890,27 +4892,28 @@ export function useMode() {
|
||||
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,
|
||||
selectable: false, // 선택 가능하게 설정
|
||||
lockMovementX: true, // X 축 이동 잠금
|
||||
lockMovementY: true, // Y 축 이동 잠금
|
||||
lockRotation: true, // 회전 잠금
|
||||
lockScalingX: true, // X 축 크기 조정 잠금
|
||||
lockScalingY: true, // Y 축 크기 조정 잠금
|
||||
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,
|
||||
parentId: trestlePolygons[i].parentId,
|
||||
name: 'tmpCell',
|
||||
parentId: trestlePolygons[i].parentId,
|
||||
})
|
||||
|
||||
canvas?.add(fabricPolygon) //움직여가면서 추가됨
|
||||
@ -4918,67 +4921,127 @@ export function useMode() {
|
||||
/**
|
||||
* 스냅기능
|
||||
*/
|
||||
let snapDistance = 20
|
||||
let snapDistance = 10
|
||||
let cellSnapDistance = 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 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 smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 위쪽 변에 스냅
|
||||
if (Math.abs(smallTop - bigTop) < snapDistance) {
|
||||
fabricPolygon.top = bigTop
|
||||
if (Math.abs(smallTop - trestleTop) < snapDistance) {
|
||||
fabricPolygon.top = trestleTop
|
||||
}
|
||||
|
||||
// 아래쪽 변에 스냅
|
||||
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(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (trestleTop + trestlePolygons[i].height)) < snapDistance) {
|
||||
fabricPolygon.top = trestleTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
|
||||
}
|
||||
|
||||
// 왼쪽변에 스냅
|
||||
if (Math.abs(smallLeft - bigLeft) < snapDistance) {
|
||||
fabricPolygon.left = bigLeft
|
||||
if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
|
||||
fabricPolygon.left = trestleLeft
|
||||
}
|
||||
//오른쪽 변에 스냅
|
||||
if (Math.abs(smallRight - bigRight) < snapDistance) {
|
||||
fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
|
||||
if (Math.abs(smallRight - trestleRight) < snapDistance) {
|
||||
fabricPolygon.left = trestleRight - 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(smallLeft - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
|
||||
fabricPolygon.left = trestleLeft + 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(smallCenterX - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) {
|
||||
fabricPolygon.left = trestleLeft + 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
|
||||
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 - bigCenter) < snapDistance) {
|
||||
fabricPolygon.top = bigCenter - fabricPolygon.height / 2
|
||||
if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenterY) < snapDistance) {
|
||||
fabricPolygon.top = bigCenterY - fabricPolygon.height / 2
|
||||
}
|
||||
|
||||
if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
|
||||
fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
|
||||
if (Math.abs(smallTop - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
|
||||
fabricPolygon.top = trestleTop + 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
|
||||
if (Math.abs(smallBottom - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) {
|
||||
fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
|
||||
}
|
||||
}
|
||||
|
||||
@ -4999,27 +5062,34 @@ export function useMode() {
|
||||
canvas?.on('mouse:up', (e) => {
|
||||
if (!inside) return
|
||||
if (fabricPolygon) {
|
||||
const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
|
||||
const rectPoints = [
|
||||
{ x: fabricPolygon.left + 0.1, y: fabricPolygon.top + 0.1 },
|
||||
{ x: fabricPolygon.left + 0.1 + fabricPolygon.width * fabricPolygon.scaleX, y: fabricPolygon.top + 0.1 },
|
||||
{
|
||||
x: fabricPolygon.left + fabricPolygon.width * fabricPolygon.scaleX + 0.1,
|
||||
y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.1,
|
||||
},
|
||||
{ x: fabricPolygon.left + 0.1, y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.1 },
|
||||
]
|
||||
|
||||
fabricPolygon.set({ points: rectPoints })
|
||||
const tempTurfModule = polygonToTurfPolygon(fabricPolygon)
|
||||
|
||||
fabricPolygon.setCoords() //좌표 재정렬
|
||||
if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
|
||||
if (turf.booleanWithin(tempTurfModule, 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)))
|
||||
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell)))
|
||||
if (!isOverlap) {
|
||||
//안겹치면 넣는다
|
||||
fabricPolygon.setCoords()
|
||||
fabricPolygon.set({ name: 'cell' })
|
||||
fabricPolygon.set({ name: 'cell', fill: '#BFFD9F' })
|
||||
manualDrawCells.push(fabricPolygon)
|
||||
} else {
|
||||
alert('셀끼리 겹치면 안되죠?')
|
||||
}
|
||||
// } else {
|
||||
// alert('나갔으요!!')
|
||||
} else {
|
||||
alert('나갔으요!!')
|
||||
}
|
||||
setDrewRoofCells(manualDrawCells)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user