diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 8b7192f0..46fe5810 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -199,6 +199,8 @@ export default function CanvasMenu(props) { return }, }) + } else { + setType('surface') } } else { setType('surface') diff --git a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx index 660d3717..14d27df7 100644 --- a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx +++ b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx @@ -17,6 +17,13 @@ const PitchPlacement = forwardRef((props, refs) => { const setCheckedModules = useSetRecoilState(checkedModuleState) const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터 const [selectedItems, setSelectedItems] = useState({}) + const { makeModuleInitArea } = useModuleBasicSetting(3) + + useEffect(() => { + if (moduleSelectionData) { + makeModuleInitArea(moduleSelectionData) + } + }, []) useEffect(() => { handleChangeSetupLocation() diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 3197f5ad..cc37ac8e 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -440,7 +440,7 @@ export function useModuleBasicSetting(tabNum) { turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i]) trestlePolygon = moduleSetupSurfaces[i] manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 - flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향 + flowDirection = moduleSetupSurfaces[i].direction //도형의 방향 const moduleWidth = Number(checkedModule[0].longAxis) / 10 const moduleHeight = Number(checkedModule[0].shortAxis) / 10 @@ -878,9 +878,9 @@ export function useModuleBasicSetting(tabNum) { } } //밑에가 평면이면 좌측으로 붙여서 배치 - if (flowLines.bottom.type === 'flat' && flowLines.left.type === 'curve') { - startPoint = flowLines.left - } + // if (flowLines.bottom.type === 'flat' && flowLines.left.type === 'curve') { + // startPoint = flowLines.left + // } const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 @@ -968,11 +968,20 @@ export function useModuleBasicSetting(tabNum) { checkedModule.forEach((module, index) => { const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) - const flowLines = getFlowLines(moduleSetupSurface, width) + let flowLines = getFlowLines(moduleSetupSurface, width) //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음 let startPoint = flowLines.left const moduleArray = [] + // if (flowLines.left.type === 'flat') { + // const tempPoint = { ...flowLines.top } + // startPoint = { ...flowLines.top, x1: tempPoint.x2, x2: tempPoint.x1 } + // } else { + // flowLines = getFlowLines(moduleSetupSurface, height) + // const tempPoint = { ...flowLines.left } + // startPoint = { ...flowLines.left, x1: tempPoint.x1 + 5, x2: tempPoint.x2, y1: tempPoint.y1 - 5 } + // } + //중앙배치일 경우에는 계산한다 if (isCenter) { if (flowLines.left.type === 'flat' && flowLines.bottom.type === 'flat' && flowLines.top.type === 'flat') { @@ -989,12 +998,6 @@ export function useModuleBasicSetting(tabNum) { } } - console.log('flowLines.top', flowLines.top) - - if (flowLines.left.type === 'flat') { - startPoint = flowLines.top - } - const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 @@ -1082,6 +1085,11 @@ export function useModuleBasicSetting(tabNum) { const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) const flowLines = getFlowLines(moduleSetupSurface, height) let startPoint = flowLines.top + + // if (flowLines.top.type === 'flat' && flowLines.right.type === 'curve') { + // startPoint = flowLines.right + // } + const moduleArray = [] if (isCenter) { @@ -1199,8 +1207,20 @@ export function useModuleBasicSetting(tabNum) { checkedModule.forEach((module, index) => { const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) - const flowLines = getFlowLines(moduleSetupSurface, width) + let flowLines = getFlowLines(moduleSetupSurface, width) let startPoint = flowLines.right + + // if (flowLines.right.type === 'flat') { + // const tempPoint = { ...flowLines.bottom } + // startPoint = { ...flowLines.bottom, x1: tempPoint.x2, x2: tempPoint.x1 } + // } else { + // flowLines = getFlowLines(moduleSetupSurface, height) + // const tempPoint = { ...flowLines.right } + // startPoint = { ...flowLines.right, x1: tempPoint.x1 - 5, x2: tempPoint.x2, y1: tempPoint.y1 + 5 } + // } + + // console.log('startPoint', startPoint) + const moduleArray = [] if (isCenter) { @@ -1227,7 +1247,9 @@ export function useModuleBasicSetting(tabNum) { let diffTopEndPoint = Math.abs(totalTopEndPoint / height) let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height) let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width - let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정 + let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) // -3으로 위치살짝 보정1 + + console.log('startRowPoint', startRowPoint) let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음 if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사 @@ -1303,7 +1325,7 @@ export function useModuleBasicSetting(tabNum) { return acc.length > cur.length ? acc : cur }) - const flowDirection = moduleSetupSurface.flowDirection + const flowDirection = moduleSetupSurface.direction let intvHor = flowDirection === 'south' || flowDirection === 'north' @@ -1317,44 +1339,44 @@ export function useModuleBasicSetting(tabNum) { //처마면 배치 if (setupLocation === 'eaves') { // 흐름방향이 남쪽일때 - if (moduleSetupSurface.flowDirection === 'south') { + if (moduleSetupSurface.direction === 'south') { downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'west') { + if (moduleSetupSurface.direction === 'west') { leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'east') { + if (moduleSetupSurface.direction === 'east') { rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'north') { + if (moduleSetupSurface.direction === 'north') { topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } } else if (setupLocation === 'ridge') { //용마루 - if (moduleSetupSurface.flowDirection === 'south') { + if (moduleSetupSurface.direction === 'south') { topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'west') { + if (moduleSetupSurface.direction === 'west') { rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'east') { + if (moduleSetupSurface.direction === 'east') { leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'north') { + if (moduleSetupSurface.direction === 'north') { downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer) } } else if (setupLocation === 'center') { //중가면 - if (moduleSetupSurface.flowDirection === 'south') { + if (moduleSetupSurface.direction === 'south') { downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'west') { + if (moduleSetupSurface.direction === 'west') { leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'east') { + if (moduleSetupSurface.direction === 'east') { rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer) } - if (moduleSetupSurface.flowDirection === 'north') { + if (moduleSetupSurface.direction === 'north') { topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer) } } @@ -1802,7 +1824,7 @@ export function useModuleBasicSetting(tabNum) { turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true) trestlePolygon = moduleSetupSurfaces[i] manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 - flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향 + flowDirection = moduleSetupSurfaces[i].direction //도형의 방향 const moduleWidth = Number(checkedModule[0].longAxis) / 10 const moduleHeight = Number(checkedModule[0].shortAxis) / 10 @@ -2588,19 +2610,17 @@ export function useModuleBasicSetting(tabNum) { (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10 //배치면때는 방향쪽으로 패널이 넓게 누워져야함 - if (moduleSetupSurface.flowDirection !== undefined) { + if (moduleSetupSurface.direction !== undefined) { tmpWidth = - (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' - ? Number(module.longAxis) - : Number(module.shortAxis)) / 10 + (moduleSetupSurface.direction === 'south' || moduleSetupSurface.direction === 'north' ? Number(module.longAxis) : Number(module.shortAxis)) / + 10 tmpHeight = - (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' - ? Number(module.shortAxis) - : Number(module.longAxis)) / 10 + (moduleSetupSurface.direction === 'south' || moduleSetupSurface.direction === 'north' ? Number(module.shortAxis) : Number(module.longAxis)) / + 10 } return canvasSetting.roofSizeSet === '1' - ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), moduleSetupSurface.flowDirection) + ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), moduleSetupSurface.direction) : { width: tmpWidth, height: tmpHeight } } diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js index 0f609eeb..26bac8e8 100644 --- a/src/hooks/module/useModuleSelection.js +++ b/src/hooks/module/useModuleSelection.js @@ -92,7 +92,7 @@ export function useModuleSelection(props) { //해당 메뉴 이동시 배치면 삭제 const moduleSurfacesArray = canvas .getObjects() - .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE || obj.name === POLYGON_TYPE.MODULE) + .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) diff --git a/src/hooks/module/useModuleTabContents.js b/src/hooks/module/useModuleTabContents.js index 43e3845e..a7516cf1 100644 --- a/src/hooks/module/useModuleTabContents.js +++ b/src/hooks/module/useModuleTabContents.js @@ -57,12 +57,12 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab //서까래간격 변경 const handleChangeRaftBase = (option) => { - setSelectedRaftBase(option) + setSelectedRaftBase({ raftBaseCd: option.clCode, clCode: option.clCode }) + resetSelected(1) setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커 // setConstMthdList([]) //공법 초기화 // setRoofBaseList([]) //지붕밑바탕 초기화 // setConstructionList([]) //공법 초기화 - resetSelected(1) } //처마력바 체크 @@ -78,7 +78,15 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab } const getConstructionListData = async (params) => { - if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) { + if ( + params.trestleMkrCd && + params.constMthdCd && + params.roofBaseCd && + params.illuminationTp && + params.stdWindSpeed && + params.instHt && + params.stdSnowLd + ) { const optionsList = await getConstructionList(params) setConstructionList(optionsList.data) } @@ -97,13 +105,24 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab }) setRaftCodes(raftCodeList) - if (addRoof.raft) { + // if (addRoof.raft) { + if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd) { + //서까래 선택 데이터가 있으면 선택된걸로 setSelectedRaftBase({ ...selectedRaftBase, - raftBaseCd: addRoof.raft, - clCode: addRoof.raft, + raftBaseCd: moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd, + clCode: moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd, }) + } else { + //없으면 기본값으로 넣는다 + if (addRoof.raft) { + setSelectedRaftBase({ + raftBaseCd: addRoof.raft, + clCode: addRoof.raft, + }) + } } + // } }, []) //리코일에 데이터가 담기는 시점에 시작 @@ -131,7 +150,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab setTrestleParams({ moduleTpCd: selectedModules.itemTp, roofMatlCd: addRoof.roofMatlCd, - raftBaseCd: selectedRaftBase.raftBaseCd ? selectedRaftBase.raftBaseCd : '', + raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '', workingWidth: lengthBase, }) } @@ -140,12 +159,12 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab useEffect(() => { if (isExistData) { setConstructionListParams({ - ...moduleSelectionInitParams, + ...moduleSelectionData.common, ...roofBaseParams, roofBaseCd: selectedRoofBase.roofBaseCd, inclCd: addRoof.pitch, roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0, - raftBaseCd: selectedRaftBase.raftBaseCd ? selectedRaftBase.raftBaseCd : '', + raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '', }) } }, [selectedRoofBase]) @@ -175,7 +194,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab setTrestleParams({ moduleTpCd: selectedModules.itemTp, roofMatlCd: addRoof.roofMatlCd, - raftBaseCd: selectedRaftBase.raftBaseCd ? selectedRaftBase.raftBaseCd : '', + raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '', workingWidth: lengthBase, }) } @@ -191,7 +210,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab //가대메이커 변경 함수 const handleChangeTrestle = (option) => { if (isObjectNotEmpty(option)) { - option.raftBaseCd = selectedRaftBase.raftBaseCd + option.raftBaseCd = selectedRaftBase.clCode setSelectedTrestle(option) //선택값 저장 setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' }) } @@ -234,6 +253,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '', roofMatlCd: addRoof.roofMatlCd, }) + option.raftBaseCd = selectedRaftBase.raftBaseCd setSelectedRoofBase(option) } } @@ -412,10 +432,12 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab construction: {}, }) + const tempRoofConstructions = tempModuleSelectionData.roofConstructions.filter((item) => item.roofIndex !== tabIndex) + //임시 데이터 초기화 setTempModuleSelectionData({ ...moduleSelectionData, - roofConstructions: [], + roofConstructions: tempRoofConstructions, }) //처마커버 해제 diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index 311708d2..e93d4ff8 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -3,7 +3,7 @@ import { useEffect } from 'react' import { useMessage } from '@/hooks/useMessage' import { useRecoilValue } from 'recoil' import { canvasState } from '@/store/canvasAtom' -import { BATCH_TYPE, INPUT_TYPE } from '@/common/common' +import { BATCH_TYPE, INPUT_TYPE, POLYGON_TYPE } from '@/common/common' import { useEvent } from '@/hooks/useEvent' import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon } from '@/util/canvas-util' import { useSwal } from '@/hooks/useSwal' @@ -955,8 +955,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }) reGroupObjects.push(newObj) canvas.remove(obj) - if (obj.direction) { - drawDirectionArrow(obj) + if (newObj.direction) { + drawDirectionArrow(newObj) } newObj.fire('modified') }) @@ -977,6 +977,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { const moveObjectBatch = () => { const obj = canvas.getActiveObject() + const parentSurface = canvas?.getObjects().filter((item) => item.name === POLYGON_TYPE.ROOF && item.id === obj.parentId)[0] if (obj) { obj.set({ @@ -984,14 +985,42 @@ export function useObjectBatch({ isHidden, setIsHidden }) { lockMovementY: false, }) + const originObj = { ...obj } addCanvasMouseEventListener('mouse:up', (e) => { - obj.set({ - lockMovementX: true, - lockMovementY: true, - }) + //개구, 그림자 타입일 경우 폴리곤 타입 변경 + if (BATCH_TYPE.OPENING === obj.name || BATCH_TYPE.SHADOW === obj.name) { + obj.set({ + points: rectToPolygon(obj), + }) + + const turfSurface = pointsToTurfPolygon(parentSurface.points) + const turfObject = pointsToTurfPolygon(obj.points) + + if (turf.booleanWithin(turfObject, turfSurface)) { + obj.set({ + lockMovementX: true, + lockMovementY: true, + }) + + obj.setCoords() + } else { + swalFire({ + title: getMessage('batch.object.outside.roof'), + icon: 'warning', + }) + obj.set({ ...originObj, lockMovementX: true, lockMovementY: true }) + } + } else { + obj.set({ + lockMovementX: true, + lockMovementY: true, + }) + + if (obj.type === 'group') reGroupObject(obj) + obj.setCoords() + } + canvas.discardActiveObject() initEvent() - obj.setCoords() - if (obj.type === 'group') reGroupObject(obj) }) } } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 184a3aea..460676fa 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -464,7 +464,7 @@ export function useContextMenu() { id: 'openingMove', shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, - fn: () => moveObject(), + fn: () => moveObjectBatch(), }, { id: 'openingCopy', @@ -667,7 +667,7 @@ export function useContextMenu() { id: 'move', shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, - fn: () => moveObject(), + fn: () => moveObjectBatch(), }, { id: 'copy',