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-12-13 13:24:48 +09:00
parent 3f97239d88
commit 5bfee81dec
2 changed files with 330 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
View File

@ -9,16 +9,17 @@ import { useEvent } from '@/hooks/useEvent'
const PitchPlacement = forwardRef((props, refs) => { const PitchPlacement = forwardRef((props, refs) => {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [setupLocation, setSetupLocation] = useState('south') const [setupLocation, setSetupLocation] = useState('south')
const { makeModuleInstArea } = useModuleBasicSetting() const { flatRoofMakeModuleInstArea } = useModuleBasicSetting()
const canvas = useRecoilValue(canvasState) const canvas = useRecoilValue(canvasState)
const { initEvent } = useEvent() const { initEvent } = useEvent()
useEffect(() => { useEffect(() => {
makeModuleInstArea() flatRoofMakeModuleInstArea(setupLocation)
}, []) }, [])
useEffect(() => { useEffect(() => {
handleChangeSetupLocation() handleChangeSetupLocation()
flatRoofMakeModuleInstArea(setupLocation)
}, [setupLocation]) }, [setupLocation])
const moduleData = { const moduleData = {
@ -56,11 +57,9 @@ const PitchPlacement = forwardRef((props, refs) => {
return null return null
} else { } else {
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
moduleSetupSurfaces.forEach((surface, index) => { moduleSetupSurfaces.forEach((surface, index) => {
console.log(`surface ${index} : `, surface)
const excretaLine = surface.lines const excretaLine = surface.lines
excretaLine.forEach((line) => { excretaLine.forEach((line) => {
line.set({ line.set({
stroke: '#642EFB', stroke: '#642EFB',
@ -74,6 +73,7 @@ const PitchPlacement = forwardRef((props, refs) => {
excretaLine.forEach((obj) => obj.set({ stroke: '#642EFB', isSelected: false })) excretaLine.forEach((obj) => obj.set({ stroke: '#642EFB', isSelected: false }))
if (!line.isSelected) { if (!line.isSelected) {
line.set({ stroke: 'red', isSelected: true }) line.set({ stroke: 'red', isSelected: true })
surface.fire('mousedown')
} else { } else {
line.set({ stroke: '#642EFB', isSelected: false }) line.set({ stroke: '#642EFB', isSelected: false })
} }

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

@ -52,7 +52,7 @@ export function useModuleBasicSetting() {
const makeModuleInstArea = () => { const makeModuleInstArea = () => {
//지붕 객체 반환 //지붕 객체 반환
const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
let offsetLength = canvasSetting.roofSizeSet === 3 ? -90 : -20 let offsetLength = -20
if (!roofs) { if (!roofs) {
return return
@ -105,7 +105,116 @@ export function useModuleBasicSetting() {
} }
setupSurface.set({ flowLines: flowLines }) setupSurface.set({ flowLines: flowLines })
flatRoofMakeSurface(roof, setupSurface)
//지붕면 선택 금지
roof.set({
selectable: false,
})
//모듈설치면 클릭이벤트
addTargetMouseEventListener('mousedown', setupSurface, function () {
toggleSelection(setupSurface)
})
})
}
const flatRoofMakeModuleInstArea = (flatBatchType) => {
//지붕 객체 반환
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
let offsetLength = -90
if (!roofs) {
return
}
roofs.forEach((roof) => {
const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
if (isExistSurface) {
return
}
setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
//모듈설치영역?? 생성
const surfaceId = uuidv4()
let setupSurface = new QPolygon(offsetPoints, {
stroke: 'red',
fill: 'transparent',
strokeDashArray: [10, 4],
strokeWidth: 1,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
selectable: true,
parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
flowDirection: roof.direction,
direction: roof.direction,
flipX: roof.flipX,
flipY: roof.flipY,
surfaceId: surfaceId,
originX: 'center',
originY: 'center',
modules: [],
})
setupSurface.setViewLengthText(false)
canvas.add(setupSurface) //모듈설치면 만들기
//남쪽 선택
if (flatBatchType === 'excreta') {
//변별로 선택
const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine')
excretaLines.forEach((obj) => {
if (obj.isSelected === true) {
const points1 = { x: obj.x1, y: obj.y1 }
const points2 = { x: obj.x2, y: obj.y2 }
const angle = calculateAngle(points1, points2)
roof.angle = -angle
setupSurface.angle = -angle
roof.fire('modified')
setupSurface.fire('modified')
}
canvas.remove(obj)
})
} else {
roof.angle = -compasDeg
setupSurface.angle = -compasDeg
}
canvas.renderAll()
let currentPoints = setupSurface.getCurrentPoints()
let lines = []
for (let i = 0; i < currentPoints.length; i++) {
const start = currentPoints[i]
const end = currentPoints[(i + 1) % currentPoints.length]
const line = new QLine([start.x, start.y, end.x, end.y], {})
lines.push(line)
}
setupSurface.lines.forEach((targetLine, index) => {
targetLine.x1 = lines[index].x1
targetLine.y1 = lines[index].line.y1
targetLine.x2 = lines[index].line.x2
targetLine.y2 = lines[index].line.y2
})
const flowLines = {
bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'),
top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'),
left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'),
right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'),
}
setupSurface.set({ flowLines: flowLines })
//지붕면 선택 금지 //지붕면 선택 금지
roof.set({ roof.set({
@ -1306,13 +1415,13 @@ export function useModuleBasicSetting() {
const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x) const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x)
const pointY2 = top const pointY2 = top
// const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
// stroke: 'red', stroke: 'red',
// strokeWidth: 1, strokeWidth: 1,
// selectable: true, selectable: true,
// }) })
// canvas?.add(finalLine) canvas?.add(finalLine)
// canvas?.renderAll() canvas?.renderAll()
let rtnObj let rtnObj
//평평하면 //평평하면
@ -1429,13 +1538,13 @@ export function useModuleBasicSetting() {
const pointX2 = top const pointX2 = top
const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y) const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y)
// const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
// stroke: 'red', stroke: 'red',
// strokeWidth: 1, strokeWidth: 1,
// selectable: true, selectable: true,
// }) })
// canvas?.add(finalLine) canvas?.add(finalLine)
// canvas?.renderAll() canvas?.renderAll()
let rtnObj let rtnObj
//평평하면 //평평하면
@ -1526,27 +1635,8 @@ export function useModuleBasicSetting() {
} }
const manualFlatroofModuleSetup = (placementFlatRef) => { const manualFlatroofModuleSetup = (placementFlatRef) => {
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
let applyAngle
let flatBatchType = placementFlatRef.setupLocation.current.value let flatBatchType = placementFlatRef.setupLocation.current.value
let excretaLinesAngle = []
if (flatBatchType === 'excreta') {
const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine')
excretaLines.forEach((obj) => {
if (obj.isSelected) {
const points1 = { x: obj.x1, y: obj.y1 }
const points2 = { x: obj.x2, y: obj.y2 }
excretaLinesAngle.push({
surfaceId: obj.surfaceId,
angle: calculateAngle(points1, points2),
})
}
canvas.remove(obj)
})
}
//calculateAngle
const batchObjects = canvas const batchObjects = canvas
?.getObjects() ?.getObjects()
@ -1573,29 +1663,29 @@ export function useModuleBasicSetting() {
name: 'module', name: 'module',
} }
function getRotatedCorners(rect) { // function getRotatedCorners(rect) {
// 사각형의 중심점 // // 사각형의 중심점
const center = rect.getCenterPoint() // const center = rect.getCenterPoint()
// 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준) // // 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준)
const halfWidth = (rect.width / 2) * rect.scaleX // const halfWidth = (rect.width / 2) * rect.scaleX
const halfHeight = (rect.height / 2) * rect.scaleY // const halfHeight = (rect.height / 2) * rect.scaleY
const corners = [ // const corners = [
{ x: -halfWidth, y: -halfHeight }, // 좌상단 // { x: -halfWidth, y: -halfHeight }, // 좌상단
{ x: halfWidth, y: -halfHeight }, // 우상단 // { x: halfWidth, y: -halfHeight }, // 우상단
{ x: halfWidth, y: halfHeight }, // 우하단 // { x: halfWidth, y: halfHeight }, // 우하단
{ x: -halfWidth, y: halfHeight }, // 좌하단 // { x: -halfWidth, y: halfHeight }, // 좌하단
] // ]
// 각 꼭짓점 좌표를 캔버스 좌표로 변환 // // 각 꼭짓점 좌표를 캔버스 좌표로 변환
const transformedCorners = corners.map((corner) => { // const transformedCorners = corners.map((corner) => {
const point = new fabric.Point(corner.x, corner.y) // const point = new fabric.Point(corner.x, corner.y)
return fabric.util.transformPoint(point, rect.calcTransformMatrix()) // return fabric.util.transformPoint(point, rect.calcTransformMatrix())
}) // })
return transformedCorners // return transformedCorners
} // }
if (moduleSetupSurfaces.length !== 0) { if (moduleSetupSurfaces.length !== 0) {
let tempModule let tempModule
@ -1613,35 +1703,19 @@ export function useModuleBasicSetting() {
turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true) turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true)
trestlePolygon = moduleSetupSurfaces[i] trestlePolygon = moduleSetupSurfaces[i]
manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향 flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
if (flatBatchType === 'excreta') {
const tempLine = excretaLinesAngle.find((obj) => obj.surfaceId === trestlePolygon.surfaceId)
if (tempLine) {
applyAngle = tempLine.angle
} else {
//혹시나 두개의 지붕을 그리고 한쪽면만 선택했을때 한면은 그냥 기본 기울기를 준다
applyAngle = compasDeg
}
}
let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113 let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172 let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
const angledModule = new fabric.Rect({ const points = [
width: width, { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
height: height, { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
left: mousePoint.x - width / 2, { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
top: mousePoint.y - height / 2, { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
}) ]
const center = angledModule.getCenterPoint()
angledModule.set('angle', applyAngle)
angledModule.setPositionByOrigin(center, 'center', 'center')
const points = getRotatedCorners(angledModule) //
const turfPoints = coordToTurfPolygon(points) const turfPoints = coordToTurfPolygon(points)
if (turf.booleanWithin(turfPoints, turfPolygon)) { if (turf.booleanWithin(turfPoints, turfPolygon)) {
let isDrawing = false let isDrawing = false
@ -1651,139 +1725,153 @@ export function useModuleBasicSetting() {
tempModule = new QPolygon(points, { tempModule = new QPolygon(points, {
fill: 'white', fill: 'white',
stroke: 'black', stroke: 'black',
strokeWidth: 0.3, 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: 'tempModule', name: 'tempModule',
parentId: moduleSetupSurfaces[i].parentId,
}) })
canvas?.add(tempModule) //움직여가면서 추가됨 canvas?.add(tempModule) //움직여가면서 추가됨
canvas?.renderAll()
/** /**
* 스냅기능 * 스냅기능
*/ */
let snapDistance = 10 // let snapDistance = 10
let cellSnapDistance = 20 // let cellSnapDistance = 20
// if (applyAngle === 90 || applyAngle === 180 || applyAngle === 270 || applyAngle === 0) { // const trestleLeft = moduleSetupSurfaces[i].left
// const trestleLeft = moduleSetupSurfaces[i].left // const trestleTop = moduleSetupSurfaces[i].top
// const trestleTop = moduleSetupSurfaces[i].top // const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
// const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX // const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
// const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY // const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
// const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
// // 작은 폴리곤의 경계 좌표 계산 // // 작은 폴리곤의 경계 좌표 계산
// const smallLeft = tempModule.left // const smallLeft = tempModule.left
// const smallTop = tempModule.top // const smallTop = tempModule.top
// const smallRight = smallLeft + tempModule.width * tempModule.scaleX // const smallRight = smallLeft + tempModule.width * tempModule.scaleX
// const smallBottom = smallTop + tempModule.height * tempModule.scaleY // const smallBottom = smallTop + tempModule.height * tempModule.scaleY
// const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2 // const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
// const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2 // const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
// if (manualDrawModules) { // /**
// manualDrawModules.forEach((cell) => { // * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
// const holdCellLeft = cell.left // */
// const holdCellTop = cell.top // if (manualDrawModules) {
// const holdCellRight = holdCellLeft + cell.width * cell.scaleX // manualDrawModules.forEach((cell) => {
// const holdCellBottom = holdCellTop + cell.height * cell.scaleY // const holdCellLeft = cell.left
// const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2 // const holdCellTop = cell.top
// const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2 // 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) { // if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
// tempModule.left = holdCellLeft - width - 0.5 // tempModule.left = holdCellLeft - width - 0.5
// } // }
// //설치된 셀에 우측에 스냅 // //설치된 셀에 우측에 스냅
// if (Math.abs(smallLeft - holdCellRight) < snapDistance) { // if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
// tempModule.left = holdCellRight + 0.5 // tempModule.left = holdCellRight + 0.5
// } // }
// //설치된 셀에 위쪽에 스냅 // //설치된 셀에 위쪽에 스냅
// if (Math.abs(smallBottom - holdCellTop) < snapDistance) { // if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
// tempModule.top = holdCellTop - height - 0.5 // tempModule.top = holdCellTop - height - 0.5
// } // }
// //설치된 셀에 밑쪽에 스냅 // //설치된 셀에 밑쪽에 스냅
// if (Math.abs(smallTop - holdCellBottom) < snapDistance) { // if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
// tempModule.top = holdCellBottom + 0.5 // tempModule.top = holdCellBottom + 0.5
// } // }
// //가운데 -> 가운데 // //가운데 -> 가운데
// if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { // if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
// tempModule.left = holdCellCenterX - width / 2 // tempModule.left = holdCellCenterX - width / 2
// } // }
// //왼쪽 -> 가운데 // //왼쪽 -> 가운데
// if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) { // if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
// tempModule.left = holdCellCenterX // tempModule.left = holdCellCenterX
// } // }
// // 오른쪽 -> 가운데 // // 오른쪽 -> 가운데
// if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) { // if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
// tempModule.left = holdCellCenterX - width // tempModule.left = holdCellCenterX - width
// } // }
// //세로 가운데 -> 가운데 // //세로 가운데 -> 가운데
// if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { // if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
// tempModule.top = holdCellCenterY - height / 2 // tempModule.top = holdCellCenterY - height / 2
// } // }
// //위쪽 -> 가운데 // //위쪽 -> 가운데
// if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
// tempModule.top = holdCellCenterY // tempModule.top = holdCellCenterY
// } // }
// //아랫쪽 -> 가운데 // //아랫쪽 -> 가운데
// if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
// tempModule.top = holdCellCenterY - height // tempModule.top = holdCellCenterY - height
// } // }
// }) // })
// }
// // 위쪽 변에 스냅
// if (Math.abs(smallTop - trestleTop) < snapDistance) {
// tempModule.top = trestleTop
// }
// // 아래쪽 변에 스냅
// if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
// tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
// }
// // 왼쪽변에 스냅
// if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
// tempModule.left = trestleLeft
// }
// //오른쪽 변에 스냅
// if (Math.abs(smallRight - trestleRight) < snapDistance) {
// tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
// }
// if (flowDirection === 'south' || flowDirection === 'north') {
// // 모듈왼쪽이 세로중앙선에 붙게 스냅
// if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
// } // }
// // 위쪽 변에 스냅 // // 모듈이 가운데가 세로중앙선에 붙게 스냅
// if (Math.abs(smallTop - trestleTop) < snapDistance) { // if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.top = trestleTop // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
// } // }
// // 아래쪽 변에 스냅 // // 모듈오른쪽이 세로중앙선에 붙게 스냅
// if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) { // if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
// }
// } else {
// // 모듈이 가로중앙선에 스냅
// if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
// tempModule.top = bigCenterY - tempModule.height / 2
// } // }
// // 왼쪽변에 스냅 // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
// if (Math.abs(smallLeft - trestleLeft) < snapDistance) { // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
// tempModule.left = trestleLeft
// } // }
// //오른쪽 변에 스냅 // // 모듈 밑면이 가로중앙선에 스냅
// if (Math.abs(smallRight - trestleRight) < snapDistance) { // if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
// tempModule.left = trestleRight - tempModule.width * tempModule.scaleX // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
// }
// if (flowDirection === 'south' || flowDirection === 'north') {
// // 모듈왼쪽이 세로중앙선에 붙게 스냅
// if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
// }
// // 모듈이 가운데가 세로중앙선에 붙게 스냅
// if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
// }
// // 모듈오른쪽이 세로중앙선에 붙게 스냅
// if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
// tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
// }
// } else {
// // 모듈이 가로중앙선에 스냅
// if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
// tempModule.top = bigCenterY - tempModule.height / 2
// }
// if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
// tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
// }
// // 모듈 밑면이 가로중앙선에 스냅
// if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
// tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
// }
// } // }
// } // }
tempModule.setCoords()
canvas?.renderAll()
inside = true inside = true
break break
} else { } else {
@ -1849,9 +1937,7 @@ export function useModuleBasicSetting() {
const autoFlatroofModuleSetup = (placementFlatRef) => { const autoFlatroofModuleSetup = (placementFlatRef) => {
initEvent() //마우스 이벤트 초기화 initEvent() //마우스 이벤트 초기화
let flatBatchType = placementFlatRef.setupLocation.current.value
const moduleSetupSurfaces = moduleSetupSurface //선택 설치면 const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
const notSelectedTrestlePolygons = canvas const notSelectedTrestlePolygons = canvas
?.getObjects() ?.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && !moduleSetupSurfaces.includes(obj)) //설치면이 아닌것 .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && !moduleSetupSurfaces.includes(obj)) //설치면이 아닌것
@ -1887,6 +1973,38 @@ export function useModuleBasicSetting() {
} }
}) })
const flatBatchType = placementFlatRef.setupLocation.current.value
//남쪽 선택
// if (flatBatchType === 'excreta') {
// //변별로 선택
// const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine')
// excretaLines.forEach((obj) => {
// if (obj.isSelected === true) {
// const points1 = { x: obj.x1, y: obj.y1 }
// const points2 = { x: obj.x2, y: obj.y2 }
// const angle = calculateAngle(points1, points2)
// const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0]
// const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0]
// targetRoof.angle = -angle
// targetdSurface.angle = -angle
// targetRoof.fire('modified')
// targetdSurface.fire('modified')
// }
// canvas.remove(obj)
// })
// } else {
// moduleSetupSurfaces.forEach((surface) => {
// const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0]
// if (targetRoof) targetRoof.angle = -compasDeg
// surface.angle = -compasDeg
// })
// }
// canvas.renderAll()
const moduleOptions = { const moduleOptions = {
fill: '#BFFD9F', fill: '#BFFD9F',
stroke: 'black', stroke: 'black',
@ -1902,7 +2020,7 @@ export function useModuleBasicSetting() {
name: 'module', name: 'module',
} }
let leftMargin, bottomMargin, square, chidoriLength let leftMargin, bottomMargin, square
//선택된 지붕안에 오브젝트(도머, 개구등)이 있는지 확인하는 로직 포함되면 배열 반환 //선택된 지붕안에 오브젝트(도머, 개구등)이 있는지 확인하는 로직 포함되면 배열 반환
const objectsIncludeSurface = (turfModuleSetupSurface) => { const objectsIncludeSurface = (turfModuleSetupSurface) => {
@ -2151,8 +2269,8 @@ export function useModuleBasicSetting() {
} }
const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface) const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
const marginWidth = 0 const marginWidth = 1
const marginHeight = 0 const marginHeight = 1
canvas.renderAll() canvas.renderAll()
@ -2181,21 +2299,21 @@ export function useModuleBasicSetting() {
canvas?.renderAll() canvas?.renderAll()
//나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기 // 나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기
// setupedModules.forEach((module, index) => { setupedModules.forEach((module, index) => {
// if (isMaxSetup && index > 0) { if (index > 0) {
// const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module)) const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module))
// //겹치는지 확인 //겹치는지 확인
// if (isOverlap) { if (isOverlap) {
// //겹쳐있으면 삭제 //겹쳐있으면 삭제
// // canvas?.remove(module) // canvas?.remove(module)
// module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 }) module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 })
// canvas.renderAll() canvas.renderAll()
// setupedModules.splice(index, 1) setupedModules.splice(index, 1)
// return false return false
// } }
// } }
// }) })
moduleSetupSurface.set({ modules: setupedModules }) moduleSetupSurface.set({ modules: setupedModules })
@ -2209,49 +2327,6 @@ export function useModuleBasicSetting() {
// console.log(calculateForApi()) // console.log(calculateForApi())
} }
const flatRoofMakeSurface = (roof, setupSurface) => {
setupSurface.angle = -compasDeg
roof.angle = -compasDeg
const roofPoints = roof.getCurrentPoints()
const roofLines = roofPoints.map((point, index) => {
const nextIndex = (index + 1) % roofPoints.length
const nextPoint = roofPoints[nextIndex]
return {
x1: point.x,
y1: point.y,
x2: nextPoint.x,
y2: nextPoint.y,
}
})
roof.set({ lines: roofLines })
roof.fire('modified')
const surfacePoints = setupSurface.getCurrentPoints()
const surfaceLines = surfacePoints.map((point, index) => {
const nextIndex = (index + 1) % surfacePoints.length
const nextPoint = surfacePoints[nextIndex]
return {
x1: point.x,
y1: point.y,
x2: nextPoint.x,
y2: nextPoint.y,
}
})
setupSurface.set({ lines: surfaceLines })
const flowLines = {
bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'),
top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'),
left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'),
right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'),
}
setupSurface.set({ flowLines: flowLines })
setupSurface.fire('modified')
}
return { return {
makeModuleInstArea, makeModuleInstArea,
manualModuleSetup, manualModuleSetup,
@ -2259,5 +2334,6 @@ export function useModuleBasicSetting() {
restoreModuleInstArea, restoreModuleInstArea,
manualFlatroofModuleSetup, manualFlatroofModuleSetup,
autoFlatroofModuleSetup, autoFlatroofModuleSetup,
flatRoofMakeModuleInstArea,
} }
} }