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-13 18:05:39 +09:00
parent bb67e68b95
commit 732ea8bb47
3 changed files with 111 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -28,10 +28,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
} }
useEffect(() => { useEffect(() => {
makeModuleInstArea() makeModuleInstArea() //기붕 모듈설치면 생성
return () => { return () => {
initEvent() initEvent() //모듈설치면 선택 이벤트 삭제
} }
}, []) }, [])
@ -79,7 +79,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.module.basic.setting.passivity.placement')} {getMessage('modal.module.basic.setting.passivity.placement')}
</button> </button>
<button className="btn-frame modal act" onClick={autoModuleSetup}> <button className="btn-frame modal act" onClick={autoModuleSetup}>
{getMessage('modal.module.basic.setting.auto.placement')}{' '} {getMessage('modal.module.basic.setting.auto.placement')}
</button> </button>
</> </>
)} )}

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

@ -30,7 +30,7 @@ export function useModuleBasicSetting() {
setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경 setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
const offsetPoints = offsetPolygon(roof.points, -20) //안쪽 offset const offsetPoints = offsetPolygon(roof.points, -20) //안쪽 offset
//모듈설치영역?? 생성 //모듈설치영역?? 생성
const trestle = new QPolygon(offsetPoints, { const setupSurface = new QPolygon(offsetPoints, {
stroke: 'red', stroke: 'red',
fill: 'transparent', fill: 'transparent',
strokeDashArray: [10, 4], strokeDashArray: [10, 4],
@ -43,29 +43,32 @@ export function useModuleBasicSetting() {
selectable: true, selectable: true,
parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌 parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
name: POLYGON_TYPE.MODULE_SETUP_SURFACE, name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
flowDirection: roof.direction,
}) })
canvas.add(trestle) canvas.add(setupSurface)
//지붕면 선택 금지 //지붕면 선택 금지
roof.set({ roof.set({
selectable: false, selectable: false,
}) })
//모듈설치면 클릭이벤트 //모듈설치면 클릭이벤트
addTargetMouseEventListener('mousedown', trestle, function () { addTargetMouseEventListener('mousedown', setupSurface, function () {
toggleSelection(trestle) toggleSelection(setupSurface)
}) })
}) })
} }
//설치 범위 지정 클릭 이벤트 //설치 범위 지정 클릭 이벤트
const toggleSelection = (polygon) => { const toggleSelection = (setupSurface) => {
console.log('polygon', setupSurface)
const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === polygon.parentId) const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === polygon.parentId)
//최초 선택일때 //최초 선택일때
if (!isExist) { if (!isExist) {
//기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄 //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
polygon.set({ setupSurface.set({
...polygon, ...setupSurface,
strokeWidth: 3, strokeWidth: 3,
strokeDashArray: [0], strokeDashArray: [0],
fill: 'transparent', fill: 'transparent',
@ -74,11 +77,11 @@ export function useModuleBasicSetting() {
//중복으로 들어가는걸 방지하기 위한 코드 //중복으로 들어가는걸 방지하기 위한 코드
canvas?.renderAll() canvas?.renderAll()
selectedModuleInstSurfaceArray.push(polygon) selectedModuleInstSurfaceArray.push(setupSurface)
} else { } else {
//선택후 재선택하면 선택안됨으로 변경 //선택후 재선택하면 선택안됨으로 변경
polygon.set({ setupSurface.set({
...polygon, ...setupSurface,
fill: 'transparent', fill: 'transparent',
strokeDashArray: [10, 4], strokeDashArray: [10, 4],
strokeWidth: 1, strokeWidth: 1,
@ -86,7 +89,7 @@ export function useModuleBasicSetting() {
canvas.discardActiveObject() // 객체의 활성 상태 해제 canvas.discardActiveObject() // 객체의 활성 상태 해제
//폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함 //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
const removeIndex = polygon.parentId const removeIndex = setupSurface.parentId
const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex) const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1) selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
} }
@ -100,7 +103,7 @@ export function useModuleBasicSetting() {
* 확인 후 셀을 이동시킴 * 확인 후 셀을 이동시킴
*/ */
const manualModuleSetup = () => { const manualModuleSetup = () => {
const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //가대를 가져옴 const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const batchObjects = canvas const batchObjects = canvas
?.getObjects() ?.getObjects()
.filter( .filter(
@ -111,23 +114,23 @@ export function useModuleBasicSetting() {
obj.name === BATCH_TYPE.SHADOW, obj.name === BATCH_TYPE.SHADOW,
) //도머s 객체 ) //도머s 객체
if (trestlePolygons.length !== 0) { if (moduleSetupSurfaces.length !== 0) {
let fabricPolygon = null let tempModule
let manualDrawModules = moduleIsSetup // 앞에서 자동으로 했을때 추가됨
let inside = false let inside = false
let turfPolygon let turfPolygon
let manualDrawCells = moduleIsSetup // 앞에서 자동으로 했을때 추가됨 let flowDirection
let direction
let trestlePolygon let trestlePolygon
addCanvasMouseEventListener('mouse:move', (e) => { addCanvasMouseEventListener('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가 //마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e) const mousePoint = canvas.getPointer(e.e)
for (let i = 0; i < trestlePolygons.length; i++) { for (let i = 0; i < moduleSetupSurfaces.length; i++) {
turfPolygon = polygonToTurfPolygon(trestlePolygons[i]) turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
trestlePolygon = trestlePolygons[i] trestlePolygon = moduleSetupSurfaces[i]
direction = trestlePolygons[i].direction //도형의 방향 flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
let width = direction === 'south' || direction === 'north' ? 172 : 113 let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
let height = direction === 'south' || direction === 'north' ? 113 : 172 let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
const points = [ const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 }, { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
@ -144,7 +147,7 @@ export function useModuleBasicSetting() {
if (isDrawing) return if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임 canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
fabricPolygon = new fabric.Rect({ tempModule = new fabric.Rect({
fill: 'white', fill: 'white',
stroke: 'black', stroke: 'black',
strokeWidth: 1, strokeWidth: 1,
@ -160,10 +163,10 @@ export function useModuleBasicSetting() {
lockScalingY: true, lockScalingY: true,
opacity: 0.8, opacity: 0.8,
name: 'tempModule', name: 'tempModule',
parentId: trestlePolygons[i].parentId, parentId: moduleSetupSurfaces[i].parentId,
}) })
canvas?.add(fabricPolygon) //움직여가면서 추가됨 canvas?.add(tempModule) //움직여가면서 추가됨
/** /**
* 스냅기능 * 스냅기능
@ -171,25 +174,25 @@ export function useModuleBasicSetting() {
let snapDistance = 10 let snapDistance = 10
let cellSnapDistance = 20 let cellSnapDistance = 20
const trestleLeft = trestlePolygons[i].left const trestleLeft = moduleSetupSurfaces[i].left
const trestleTop = trestlePolygons[i].top const trestleTop = moduleSetupSurfaces[i].top
const trestleRight = trestleLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
const trestleBottom = trestleTop + trestlePolygons[i].height * trestlePolygons[i].scaleY const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
const bigCenterY = (trestleTop + trestleTop + trestlePolygons[i].height) / 2 const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
// 작은 폴리곤의 경계 좌표 계산 // 작은 폴리곤의 경계 좌표 계산
const smallLeft = fabricPolygon.left const smallLeft = tempModule.left
const smallTop = fabricPolygon.top const smallTop = tempModule.top
const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX const smallRight = smallLeft + tempModule.width * tempModule.scaleX
const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY const smallBottom = smallTop + tempModule.height * tempModule.scaleY
const smallCenterX = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2 const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
const smallCenterY = smallTop + (fabricPolygon.height * fabricPolygon.scaleX) / 2 const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
/** /**
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨 * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
*/ */
if (manualDrawCells) { if (manualDrawModules) {
manualDrawCells.forEach((cell) => { manualDrawModules.forEach((cell) => {
const holdCellLeft = cell.left const holdCellLeft = cell.left
const holdCellTop = cell.top const holdCellTop = cell.top
const holdCellRight = holdCellLeft + cell.width * cell.scaleX const holdCellRight = holdCellLeft + cell.width * cell.scaleX
@ -199,100 +202,100 @@ export function useModuleBasicSetting() {
//설치된 셀에 좌측에 스냅 //설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) { if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
fabricPolygon.left = holdCellLeft - width - 0.5 tempModule.left = holdCellLeft - width - 0.5
} }
//설치된 셀에 우측에 스냅 //설치된 셀에 우측에 스냅
if (Math.abs(smallLeft - holdCellRight) < snapDistance) { if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
fabricPolygon.left = holdCellRight + 0.5 tempModule.left = holdCellRight + 0.5
} }
//설치된 셀에 위쪽에 스냅 //설치된 셀에 위쪽에 스냅
if (Math.abs(smallBottom - holdCellTop) < snapDistance) { if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
fabricPolygon.top = holdCellTop - height - 0.5 tempModule.top = holdCellTop - height - 0.5
} }
//설치된 셀에 밑쪽에 스냅 //설치된 셀에 밑쪽에 스냅
if (Math.abs(smallTop - holdCellBottom) < snapDistance) { if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
fabricPolygon.top = holdCellBottom + 0.5 tempModule.top = holdCellBottom + 0.5
} }
//가운데 -> 가운데 //가운데 -> 가운데
if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX - width / 2 tempModule.left = holdCellCenterX - width / 2
} }
//왼쪽 -> 가운데 //왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) { if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX tempModule.left = holdCellCenterX
} }
// 오른쪽 -> 가운데 // 오른쪽 -> 가운데
if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) { if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
fabricPolygon.left = holdCellCenterX - width tempModule.left = holdCellCenterX - width
} }
//세로 가운데 -> 가운데 //세로 가운데 -> 가운데
if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY - height / 2 tempModule.top = holdCellCenterY - height / 2
} }
//위쪽 -> 가운데 //위쪽 -> 가운데
if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY tempModule.top = holdCellCenterY
} }
//아랫쪽 -> 가운데 //아랫쪽 -> 가운데
if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
fabricPolygon.top = holdCellCenterY - height tempModule.top = holdCellCenterY - height
} }
}) })
} }
// 위쪽 변에 스냅 // 위쪽 변에 스냅
if (Math.abs(smallTop - trestleTop) < snapDistance) { if (Math.abs(smallTop - trestleTop) < snapDistance) {
fabricPolygon.top = trestleTop tempModule.top = trestleTop
} }
// 아래쪽 변에 스냅 // 아래쪽 변에 스냅
if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (trestleTop + trestlePolygons[i].height)) < snapDistance) { if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
} }
// 왼쪽변에 스냅 // 왼쪽변에 스냅
if (Math.abs(smallLeft - trestleLeft) < snapDistance) { if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
fabricPolygon.left = trestleLeft tempModule.left = trestleLeft
} }
//오른쪽 변에 스냅 //오른쪽 변에 스냅
if (Math.abs(smallRight - trestleRight) < snapDistance) { if (Math.abs(smallRight - trestleRight) < snapDistance) {
fabricPolygon.left = trestleRight - fabricPolygon.width * fabricPolygon.scaleX tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
} }
if (direction === 'south' || direction === 'north') { if (flowDirection === 'south' || flowDirection === 'north') {
// 모듈왼쪽이 세로중앙선에 붙게 스냅 // 모듈왼쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallLeft - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) { if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
} }
// 모듈이 가운데가 세로중앙선에 붙게 스냅 // 모듈이 가운데가 세로중앙선에 붙게 스냅
if (Math.abs(smallCenterX - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) { if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2 tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
} }
// 모듈오른쪽이 세로중앙선에 붙게 스냅 // 모듈오른쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallRight - (trestleLeft + trestlePolygons[i].width / 2)) < snapDistance) { if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
fabricPolygon.left = trestleLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
} }
} else { } else {
// 모듈이 가로중앙선에 스냅 // 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenterY) < snapDistance) { if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
fabricPolygon.top = bigCenterY - fabricPolygon.height / 2 tempModule.top = bigCenterY - tempModule.height / 2
} }
if (Math.abs(smallTop - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) { if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2 tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
} }
// 모듈 밑면이 가로중앙선에 스냅 // 모듈 밑면이 가로중앙선에 스냅
if (Math.abs(smallBottom - (trestleTop + trestlePolygons[i].height / 2)) < snapDistance) { if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
fabricPolygon.top = trestleTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
} }
} }
fabricPolygon.setCoords() tempModule.setCoords()
canvas?.renderAll() canvas?.renderAll()
inside = true inside = true
break break
@ -310,19 +313,19 @@ export function useModuleBasicSetting() {
addCanvasMouseEventListener('mouse:up', (e) => { addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true let isIntersection = true
if (!inside) return if (!inside) return
if (fabricPolygon) { if (tempModule) {
const rectPoints = [ const rectPoints = [
{ x: fabricPolygon.left + 0.5, y: fabricPolygon.top + 0.5 }, { x: tempModule.left + 0.5, y: tempModule.top + 0.5 },
{ x: fabricPolygon.left + 0.5 + fabricPolygon.width * fabricPolygon.scaleX, y: fabricPolygon.top + 0.5 }, { x: tempModule.left + 0.5 + tempModule.width * tempModule.scaleX, y: tempModule.top + 0.5 },
{ {
x: fabricPolygon.left + fabricPolygon.width * fabricPolygon.scaleX + 0.5, x: tempModule.left + tempModule.width * tempModule.scaleX + 0.5,
y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.5, y: tempModule.top + tempModule.height * tempModule.scaleY + 0.5,
}, },
{ x: fabricPolygon.left + 0.5, y: fabricPolygon.top + fabricPolygon.height * fabricPolygon.scaleY + 0.5 }, { x: tempModule.left + 0.5, y: tempModule.top + tempModule.height * tempModule.scaleY + 0.5 },
] ]
fabricPolygon.set({ points: rectPoints }) tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(fabricPolygon) const tempTurfModule = polygonToTurfPolygon(tempModule)
//도머 객체를 가져옴 //도머 객체를 가져옴
if (batchObjects) { if (batchObjects) {
@ -339,19 +342,19 @@ export function useModuleBasicSetting() {
if (!isIntersection) return if (!isIntersection) return
fabricPolygon.setCoords() //좌표 재정렬 tempModule.setCoords() //좌표 재정렬
if (turf.booleanWithin(tempTurfModule, turfPolygon)) { if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음 //마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell))) //겹치는지 확인 const isOverlap = manualDrawModules.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell))) //겹치는지 확인
if (!isOverlap) { if (!isOverlap) {
//안겹치면 넣는다 //안겹치면 넣는다
fabricPolygon.setCoords() tempModule.setCoords()
fabricPolygon.set({ name: 'cell', fill: '#BFFD9F' }) tempModule.set({ name: 'module', fill: '#BFFD9F' })
manualDrawCells.push(fabricPolygon) //모듈배열에 추가 manualDrawModules.push(tempModule) //모듈배열에 추가
//해당 모듈에 프로퍼티로 넣는다 //해당 모듈에 프로퍼티로 넣는다
trestlePolygon.set({ trestlePolygon.set({
modules: manualDrawCells, modules: manualDrawModules,
}) })
} else { } else {
alert('셀끼리 겹치면 안되죠?') alert('셀끼리 겹치면 안되죠?')
@ -383,12 +386,12 @@ export function useModuleBasicSetting() {
} }
const autoModuleSetup = () => { const autoModuleSetup = () => {
const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && obj.selected) const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && obj.selected)
const notSelectedTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && !obj.selected) const notSelectedTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && !obj.selected)
const dormerTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'dormerTrestle') //도머 객체 const dormerTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'dormerTrestle') //도머 객체
if (trestlePolygons.length === 0) { if (moduleSetupSurfaces.length === 0) {
alert('가대가 없습니다.') alert('가대가 없습니다.')
return return
} }
@ -405,7 +408,7 @@ export function useModuleBasicSetting() {
}) })
const drawCellsArray = [] const drawCellsArray = []
trestlePolygons.forEach((trestle, index) => { moduleSetupSurfaces.forEach((trestle, index) => {
trestle.fire('mousedown') trestle.fire('mousedown')
let maxLengthLine = trestle.lines.reduce((acc, cur) => { let maxLengthLine = trestle.lines.reduce((acc, cur) => {
return acc.length > cur.length ? acc : cur return acc.length > cur.length ? acc : cur
@ -437,13 +440,13 @@ export function useModuleBasicSetting() {
} }
const bbox = turf.bbox(difference) const bbox = turf.bbox(difference)
let width = maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left' ? 172.2 : 113.4 let width = maxLengthLine.flowDirection === 'right' || maxLengthLine.flowDirection === 'left' ? 172.2 : 113.4
let height = maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left' ? 113.4 : 172.2 let height = maxLengthLine.flowDirection === 'right' || maxLengthLine.flowDirection === 'left' ? 113.4 : 172.2
//배치면때는 방향쪽으로 패널이 넓게 누워져야함 //배치면때는 방향쪽으로 패널이 넓게 누워져야함
if (trestle.direction !== undefined) { if (trestle.flowDirection !== undefined) {
width = trestle.direction === 'south' || trestle.direction === 'north' ? 172.2 : 113.4 width = trestle.flowDirection === 'south' || trestle.flowDirection === 'north' ? 172.2 : 113.4
height = trestle.direction === 'south' || trestle.direction === 'north' ? 113.4 : 172.2 height = trestle.flowDirection === 'south' || trestle.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)
@ -455,13 +458,13 @@ export function useModuleBasicSetting() {
square = [], square = [],
margin = 0 margin = 0
if (trestle.direction !== undefined) { if (trestle.flowDirection !== undefined) {
//배치면 처림 방향이 정해져있는 경우 //배치면 처림 방향이 정해져있는 경우
if (trestle.direction === 'south' || trestle.direction === 'north') { if (trestle.flowDirection === 'south' || trestle.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.direction === 'south') { if (trestle.flowDirection === 'south') {
//남쪽 //남쪽
x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin //상하 위치 기준이면 좌우 가운데 정렬한다 x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin //상하 위치 기준이면 좌우 가운데 정렬한다
y = bbox[3] - row * height y = bbox[3] - row * height
@ -470,10 +473,10 @@ export function useModuleBasicSetting() {
x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin
y = bbox[1] + row * height y = bbox[1] + row * height
} }
} else if (trestle.direction === 'east' || trestle.direction === 'west') { } else if (trestle.flowDirection === 'east' || trestle.flowDirection === 'west') {
//동쪽 //동쪽
margin = (bbox[3] - bbox[1] - rows * height) / 2 margin = (bbox[3] - bbox[1] - rows * height) / 2
if (trestle.direction === 'east') { if (trestle.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 ? trestle.top + margin : bbox[1] + row * height + margin //좌우 위치 기준이면 상하 가운데 정렬한다
} else { } else {
@ -509,7 +512,7 @@ export function useModuleBasicSetting() {
return turf.booleanDisjoint(squarePolygon, polygonToTurfPolygon(dormerTrestle)) //도머가 여러개일수있으므로 겹치는게 있다면... return turf.booleanDisjoint(squarePolygon, polygonToTurfPolygon(dormerTrestle)) //도머가 여러개일수있으므로 겹치는게 있다면...
}) })
if (isDisjoint) { if (isDisjoint) {
const fabricPolygon = new QPolygon(points, { const tempModule = new QPolygon(points, {
fill: '#BFFD9F', fill: '#BFFD9F',
stroke: 'black', stroke: 'black',
selectable: true, // 선택 가능하게 설정 selectable: true, // 선택 가능하게 설정
@ -521,12 +524,12 @@ export function useModuleBasicSetting() {
opacity: 0.8, opacity: 0.8,
parentId: trestle.parentId, parentId: trestle.parentId,
}) })
canvas?.add(fabricPolygon) canvas?.add(tempModule)
drawCellsArray.push(fabricPolygon) drawCellsArray.push(tempModule)
} }
} else { } else {
//도머가 없을땐 그냥 그림 //도머가 없을땐 그냥 그림
const fabricPolygon = new QPolygon(points, { const tempModule = new QPolygon(points, {
fill: '#BFFD9F', fill: '#BFFD9F',
stroke: 'black', stroke: 'black',
selectable: true, // 선택 가능하게 설정 selectable: true, // 선택 가능하게 설정
@ -540,20 +543,20 @@ export function useModuleBasicSetting() {
lineCol: col, lineCol: col,
lineRow: row, lineRow: row,
}) })
canvas?.add(fabricPolygon) canvas?.add(tempModule)
drawCellsArray.push(fabricPolygon) drawCellsArray.push(tempModule)
} }
} }
} }
} }
// let drawRoofCells // let drawRoofCells
// if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') { // if (maxLengthLine.flowDirection === 'right' || maxLengthLine.flowDirection === 'left') {
// drawRoofCells = trestle.fillCell({ width: 113.4, height: 172.2, padding: 0 }) // drawRoofCells = trestle.fillCell({ width: 113.4, height: 172.2, padding: 0 })
// trestle.direction = 'south' // trestle.flowDirection = 'south'
// } else { // } else {
// drawRoofCells = trestle.fillCell({ width: 172.2, height: 113.4, padding: 0 }) // drawRoofCells = trestle.fillCell({ width: 172.2, height: 113.4, padding: 0 })
// trestle.direction = 'east' // trestle.flowDirection = 'east'
// } // }
// drawRoofCells.forEach((cell) => { // drawRoofCells.forEach((cell) => {
@ -570,7 +573,7 @@ export function useModuleBasicSetting() {
// obj?.parentId === trestle.parentId || // obj?.parentId === trestle.parentId ||
// obj?.id === trestle.parentId || // obj?.id === trestle.parentId ||
// (obj?.name === 'arrow' && obj?.parent.id === trestle.parentId) || // (obj?.name === 'arrow' && obj?.parent.id === trestle.parentId) ||
// (obj?.name === 'directionText' && obj?.parent.parent.id === trestle.parentId), // (obj?.name === 'flowDirectionText' && obj?.parent.parent.id === trestle.parentId),
// ) // )
// console.log('groupCellObj', groupCellObj) // console.log('groupCellObj', groupCellObj)

2
src/hooks/useCanvasEvent.js
View File

@ -225,7 +225,7 @@ export function useCanvasEvent() {
if (deselected?.length > 0) { if (deselected?.length > 0) {
deselected.forEach((obj) => { deselected.forEach((obj) => {
if (obj.type === 'QPolygon') { if (obj.type === 'QPolygon') {
if (obj.name !== 'moduleInstSurface') { if (obj.name !== 'moduleSetupSurface') {
obj.set({ stroke: 'black' }) obj.set({ stroke: 'black' })
} }
} }