diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index e7ead904..291ef086 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -115,6 +115,11 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { //팝업 닫기 버튼 이벤트 const handleClosePopup = (id) => { + if (tabNum == 3) { + if (isManualModuleSetup) { + setIsManualModuleSetup(false) + } + } setIsClosePopup({ close: true, id: id }) } diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index 0c884608..94b3bbc5 100644 --- a/src/hooks/module/useModule.js +++ b/src/hooks/module/useModule.js @@ -121,11 +121,9 @@ export function useModule() { module.setCoords() canvas.renderAll() - if (otherModules.length > 0) { - if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { - isWarning = true - module.set({ fill: 'red' }) - } + if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { + isWarning = true + module.set({ fill: 'red' }) } }) @@ -912,6 +910,8 @@ export function useModule() { } const isOverlapOtherModules = (module, otherModules) => { + if (otherModules.length === 0) return false + return otherModules.some( (otherModule) => turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) || diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index d0b0bf36..d901dcf1 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -61,6 +61,13 @@ export function useModuleBasicSetting(tabNum) { // canvas.selection = 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) @@ -168,9 +175,10 @@ export function useModuleBasicSetting(tabNum) { case LINE_TYPE.WALLLINE.GABLE: return data.kerabaIntvl / 10 case LINE_TYPE.SUBLINE.RIDGE: + case LINE_TYPE.WALLLINE.SHED: return data.ridgeIntvl / 10 default: - return 60 / 10 + return 200 / 10 } } //선택 배치면 배열` @@ -426,7 +434,7 @@ export function useModuleBasicSetting(tabNum) { * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인 * 확인 후 셀을 이동시킴 */ - const manualModuleSetup = () => { + const manualModuleSetup = (placementRef) => { // console.log('isManualModuleSetup', isManualModuleSetup) 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 } 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 }, + { + 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)), + }, + { + 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) @@ -513,10 +533,10 @@ export function useModuleBasicSetting(tabNum) { fill: 'white', stroke: 'black', strokeWidth: 0.3, - width: width, - height: height, - left: mousePoint.x - width / 2, - top: mousePoint.y - height / 2, + width: Number(width.toFixed(1)), + height: Number(height.toFixed(1)), + left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), + top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), selectable: false, lockMovementX: true, lockMovementY: true, @@ -555,13 +575,13 @@ export function useModuleBasicSetting(tabNum) { const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2 - // 작은 폴리곤의 경계 좌표 계산 - const smallLeft = tempModule.left - const smallTop = tempModule.top - const smallRight = smallLeft + tempModule.width * tempModule.scaleX - const smallBottom = smallTop + tempModule.height * tempModule.scaleY - const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2 - const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2 + // 이동하는 모듈의 경계 좌표 + const smallLeft = Number(tempModule.left.toFixed(1)) + const smallTop = Number(tempModule.top.toFixed(1)) + const smallRight = smallLeft + Number(tempModule.width.toFixed(1)) + const smallBottom = smallTop + Number(tempModule.height.toFixed(1)) + const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1)) + const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1)) /** * 미리 깔아놓은 셀이 있을때 셀에 흡착됨 @@ -570,10 +590,10 @@ export function useModuleBasicSetting(tabNum) { manualDrawModules.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 + const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1)) + const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1)) + const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1)) + const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1)) //설치된 셀에 좌측에 스냅 if (Math.abs(smallRight - holdCellLeft) < snapDistance) { @@ -596,7 +616,7 @@ export function useModuleBasicSetting(tabNum) { } //가운데 -> 가운데 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) { @@ -608,7 +628,7 @@ export function useModuleBasicSetting(tabNum) { } //세로 가운데 -> 가운데 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) { @@ -691,13 +711,13 @@ export function useModuleBasicSetting(tabNum) { if (!inside) return if (tempModule) { const rectPoints = [ - { x: tempModule.left, y: tempModule.top }, - { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top }, + { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) }, + { x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), y: Number(tempModule.top.toFixed(1)) }, { - x: tempModule.left + tempModule.width * tempModule.scaleX, - y: tempModule.top + tempModule.height * tempModule.scaleY, + x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), + 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 }) @@ -729,7 +749,16 @@ export function useModuleBasicSetting(tabNum) { // tempModule.setCoords() 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) manualDrawModules.push(manualModule) setModuleStatisticsData() @@ -984,6 +1013,8 @@ export function useModuleBasicSetting(tabNum) { [moduleX + widthMargin + chidoriLength, moduleY - height - heightMargin], ] + // console.log('square', square) + let squarePolygon = turf.polygon([square]) let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) @@ -1142,9 +1173,9 @@ export function useModuleBasicSetting(tabNum) { installedLastHeightCoord = moduleY + height + heightMargin } else { //디버깅용 - tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - canvas?.add(tempModule) - canvas.renderAll() + // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(tempModule) + // canvas.renderAll() } } if (isInstall) { @@ -1281,9 +1312,9 @@ export function useModuleBasicSetting(tabNum) { installedLastHeightCoord = moduleY + width + widthMargin } else { //디버깅용 - tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - canvas?.add(tempModule) - canvas.renderAll() + // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(tempModule) + // canvas.renderAll() } } diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js index 23c201b0..8fa274a4 100644 --- a/src/hooks/module/useModuleSelection.js +++ b/src/hooks/module/useModuleSelection.js @@ -8,6 +8,7 @@ import { isObjectNotEmpty } from '@/util/common-utils' import { canvasState } from '@/store/canvasAtom' import { POLYGON_TYPE } from '@/common/common' import { moduleStatisticsState } from '@/store/circuitTrestleAtom' +import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' export function useModuleSelection(props) { const canvas = useRecoilValue(canvasState) @@ -28,6 +29,8 @@ export function useModuleSelection(props) { const { findCommonCode } = useCommonCode() const resetStatisticsData = useResetRecoilState(moduleStatisticsState) + const { restoreModuleInstArea } = useModuleBasicSetting() + const bindInitData = () => { setInstallHeight(managementState?.installHeight) setStandardWindSpeed(managementState?.standardWindSpeedId) @@ -91,17 +94,9 @@ export function useModuleSelection(props) { getModuleData(roofsIds) - //해당 메뉴 이동시 배치면 삭제 - const moduleSurfacesArray = canvas - .getObjects() - .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() - } + //모듈설치면 초기화 + restoreModuleInstArea() + resetStatisticsData() }, []) const getModuleData = async (roofsIds) => {