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 2025-02-26 13:23:20 +09:00
parent 1412a141f2
commit d908dea9bf
4 changed files with 82 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,6 +115,11 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
//팝업 닫기 버튼 이벤트 //팝업 닫기 버튼 이벤트
const handleClosePopup = (id) => { const handleClosePopup = (id) => {
if (tabNum == 3) {
if (isManualModuleSetup) {
setIsManualModuleSetup(false)
}
}
setIsClosePopup({ close: true, id: id }) setIsClosePopup({ close: true, id: id })
} }

10
src/hooks/module/useModule.js
View File

@ -121,11 +121,9 @@ export function useModule() {
module.setCoords() module.setCoords()
canvas.renderAll() canvas.renderAll()
if (otherModules.length > 0) { if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { isWarning = true
isWarning = true module.set({ fill: 'red' })
module.set({ fill: 'red' })
}
} }
}) })
@ -912,6 +910,8 @@ export function useModule() {
} }
const isOverlapOtherModules = (module, otherModules) => { const isOverlapOtherModules = (module, otherModules) => {
if (otherModules.length === 0) return false
return otherModules.some( return otherModules.some(
(otherModule) => (otherModule) =>
turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) || turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||

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

@ -61,6 +61,13 @@ export function useModuleBasicSetting(tabNum) {
// canvas.selection = true // canvas.selection = true
// canvas.selectionFullyContained = true // canvas.selectionFullyContained = true
} }
return () => {
//수동 설치시 초기화
removeMouseEvent('mouse:up')
removeMouseEvent('mouse:move')
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
}
}, []) }, [])
// const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext) // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
@ -168,9 +175,10 @@ export function useModuleBasicSetting(tabNum) {
case LINE_TYPE.WALLLINE.GABLE: case LINE_TYPE.WALLLINE.GABLE:
return data.kerabaIntvl / 10 return data.kerabaIntvl / 10
case LINE_TYPE.SUBLINE.RIDGE: case LINE_TYPE.SUBLINE.RIDGE:
case LINE_TYPE.WALLLINE.SHED:
return data.ridgeIntvl / 10 return data.ridgeIntvl / 10
default: default:
return 60 / 10 return 200 / 10
} }
} }
//선택 배치면 배열` //선택 배치면 배열`
@ -426,7 +434,7 @@ export function useModuleBasicSetting(tabNum) {
* trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인 * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
* 확인 후 셀을 이동시킴 * 확인 후 셀을 이동시킴
*/ */
const manualModuleSetup = () => { const manualModuleSetup = (placementRef) => {
// console.log('isManualModuleSetup', isManualModuleSetup) // console.log('isManualModuleSetup', isManualModuleSetup)
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) //모듈설치면를 가져옴
@ -495,10 +503,22 @@ export function useModuleBasicSetting(tabNum) {
: { width: tmpWidth, height: tmpHeight } : { width: tmpWidth, height: tmpHeight }
const points = [ const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 }, {
{ x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 }, x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
{ x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 }, y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 }, },
{
x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
},
{
x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
},
{
x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
},
] ]
const turfPoints = coordToTurfPolygon(points) const turfPoints = coordToTurfPolygon(points)
@ -513,10 +533,10 @@ export function useModuleBasicSetting(tabNum) {
fill: 'white', fill: 'white',
stroke: 'black', stroke: 'black',
strokeWidth: 0.3, strokeWidth: 0.3,
width: width, width: Number(width.toFixed(1)),
height: height, height: Number(height.toFixed(1)),
left: mousePoint.x - width / 2, left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))),
top: mousePoint.y - height / 2, top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))),
selectable: false, selectable: false,
lockMovementX: true, lockMovementX: true,
lockMovementY: true, lockMovementY: true,
@ -555,13 +575,13 @@ export function useModuleBasicSetting(tabNum) {
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 = Number(tempModule.left.toFixed(1))
const smallTop = tempModule.top const smallTop = Number(tempModule.top.toFixed(1))
const smallRight = smallLeft + tempModule.width * tempModule.scaleX const smallRight = smallLeft + Number(tempModule.width.toFixed(1))
const smallBottom = smallTop + tempModule.height * tempModule.scaleY const smallBottom = smallTop + Number(tempModule.height.toFixed(1))
const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2 const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1))
const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2 const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1))
/** /**
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨 * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
@ -570,10 +590,10 @@ export function useModuleBasicSetting(tabNum) {
manualDrawModules.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 + Number(cell.width.toFixed(1))
const holdCellBottom = holdCellTop + cell.height * cell.scaleY const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2 const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2 const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
//설치된 셀에 좌측에 스냅 //설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) { if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
@ -596,7 +616,7 @@ export function useModuleBasicSetting(tabNum) {
} }
//가운데 -> 가운데 //가운데 -> 가운데
if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX - width / 2 tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
} }
//왼쪽 -> 가운데 //왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) { if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
@ -608,7 +628,7 @@ export function useModuleBasicSetting(tabNum) {
} }
//세로 가운데 -> 가운데 //세로 가운데 -> 가운데
if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
tempModule.top = holdCellCenterY - height / 2 tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
} }
//위쪽 -> 가운데 //위쪽 -> 가운데
if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
@ -691,13 +711,13 @@ export function useModuleBasicSetting(tabNum) {
if (!inside) return if (!inside) return
if (tempModule) { if (tempModule) {
const rectPoints = [ const rectPoints = [
{ x: tempModule.left, y: tempModule.top }, { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
{ x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top }, { x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
{ {
x: tempModule.left + tempModule.width * tempModule.scaleX, x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)),
y: tempModule.top + tempModule.height * tempModule.scaleY, y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)),
}, },
{ x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY }, { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)) },
] ]
tempModule.set({ points: rectPoints }) tempModule.set({ points: rectPoints })
@ -729,7 +749,16 @@ export function useModuleBasicSetting(tabNum) {
// tempModule.setCoords() // tempModule.setCoords()
moduleOptions.surfaceId = trestlePolygon.id moduleOptions.surfaceId = trestlePolygon.id
let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] }) // console.log('tempModule.points', tempModule.points)
let manualModule = new QPolygon(tempModule.points, {
...moduleOptions,
moduleInfo: checkedModule[0],
left: Number(tempModule.left.toFixed(1)),
top: Number(tempModule.top.toFixed(1)),
width: Number(tempModule.width.toFixed(1)),
height: Number(tempModule.height.toFixed(1)),
})
canvas?.add(manualModule) canvas?.add(manualModule)
manualDrawModules.push(manualModule) manualDrawModules.push(manualModule)
setModuleStatisticsData() setModuleStatisticsData()
@ -984,6 +1013,8 @@ export function useModuleBasicSetting(tabNum) {
[moduleX + widthMargin + chidoriLength, moduleY - height - heightMargin], [moduleX + widthMargin + chidoriLength, moduleY - height - heightMargin],
] ]
// console.log('square', square)
let squarePolygon = turf.polygon([square]) let squarePolygon = turf.polygon([square])
let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
@ -1142,9 +1173,9 @@ export function useModuleBasicSetting(tabNum) {
installedLastHeightCoord = moduleY + height + heightMargin installedLastHeightCoord = moduleY + height + heightMargin
} else { } else {
//디버깅용 //디버깅용
tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
canvas?.add(tempModule) // canvas?.add(tempModule)
canvas.renderAll() // canvas.renderAll()
} }
} }
if (isInstall) { if (isInstall) {
@ -1281,9 +1312,9 @@ export function useModuleBasicSetting(tabNum) {
installedLastHeightCoord = moduleY + width + widthMargin installedLastHeightCoord = moduleY + width + widthMargin
} else { } else {
//디버깅용 //디버깅용
tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
canvas?.add(tempModule) // canvas?.add(tempModule)
canvas.renderAll() // canvas.renderAll()
} }
} }

17
src/hooks/module/useModuleSelection.js
View File

@ -8,6 +8,7 @@ import { isObjectNotEmpty } from '@/util/common-utils'
import { canvasState } from '@/store/canvasAtom' import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common' import { POLYGON_TYPE } from '@/common/common'
import { moduleStatisticsState } from '@/store/circuitTrestleAtom' import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
export function useModuleSelection(props) { export function useModuleSelection(props) {
const canvas = useRecoilValue(canvasState) const canvas = useRecoilValue(canvasState)
@ -28,6 +29,8 @@ export function useModuleSelection(props) {
const { findCommonCode } = useCommonCode() const { findCommonCode } = useCommonCode()
const resetStatisticsData = useResetRecoilState(moduleStatisticsState) const resetStatisticsData = useResetRecoilState(moduleStatisticsState)
const { restoreModuleInstArea } = useModuleBasicSetting()
const bindInitData = () => { const bindInitData = () => {
setInstallHeight(managementState?.installHeight) setInstallHeight(managementState?.installHeight)
setStandardWindSpeed(managementState?.standardWindSpeedId) setStandardWindSpeed(managementState?.standardWindSpeedId)
@ -91,17 +94,9 @@ export function useModuleSelection(props) {
getModuleData(roofsIds) getModuleData(roofsIds)
//해당 메뉴 이동시 배치면 삭제 //모듈설치면 초기화
const moduleSurfacesArray = canvas restoreModuleInstArea()
.getObjects() resetStatisticsData()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE || obj.name === POLYGON_TYPE.MODULE || obj.name === POLYGON_TYPE.OBJECT_SURFACE)
if (moduleSurfacesArray.length > 0) {
moduleSurfacesArray.forEach((moduleSurface) => {
canvas.remove(moduleSurface)
})
canvas.renderAll()
resetStatisticsData()
}
}, []) }, [])
const getModuleData = async (roofsIds) => { const getModuleData = async (roofsIds) => {