diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index e2a38de8..33b0c65f 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -6,7 +6,7 @@ import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchMod import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement' import Placement from '@/components/floor-plan/modal/basic/step/Placement' import { useRecoilValue, useRecoilState } from 'recoil' -import { canvasSettingState, canvasState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom' +import { canvasSettingState, canvasState, checkedModuleState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom' import { usePopup } from '@/hooks/usePopup' import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' @@ -107,7 +107,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { } const handleManualModuleLayoutSetup = () => { - console.log('asdfasdkljfhaskjdhfakjsdhkfjh') setManualSetupMode(`manualLayoutSetup_${!isManualModuleLayoutSetup}`) setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup) } @@ -142,8 +141,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { } useEffect(() => { - console.log('asdfasdf', manualSetupMode) - if (basicSetting.roofSizeSet !== '3') { if (manualSetupMode.indexOf('manualSetup') > -1) { manualModuleSetup(placementRef) @@ -211,47 +208,33 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { )} -
- {tabNum !== 1 && ( - - )} - {/*{tabNum !== 3 && }*/} - {tabNum !== 3 && ( - - )} - - {tabNum === 3 && ( - <> - {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && ( - <> - - - - - )} - {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && ( - <> - - - - )} - - )} -
+ {tabNum === 3 && ( + <> + {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && ( + <> + + + + + )} + {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && ( + <> + + + + )} + + )} diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx index f2c3c83f..582f291c 100644 --- a/src/components/floor-plan/modal/basic/step/Placement.jsx +++ b/src/components/floor-plan/modal/basic/step/Placement.jsx @@ -175,7 +175,7 @@ const Placement = forwardRef((props, refs) => { className="input-origin block mr10" name="col" value={props.layoutSetup[index]?.col ?? 1} - defaultValue={1} + defaultValue={0} onChange={(e) => handleLayoutSetup(e, item.itemId, index)} />{' '} × @@ -184,7 +184,7 @@ const Placement = forwardRef((props, refs) => { className="input-origin block" name="row" value={props.layoutSetup[index]?.row ?? 1} - defaultValue={1} + defaultValue={0} onChange={(e) => handleLayoutSetup(e, item.itemId, index)} /> diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 44f7d21e..c7b9ec38 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -1146,43 +1146,43 @@ export function useModuleBasicSetting(tabNum) { if (!inside) { // tempModule.set({ fill: 'red' }) - canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) - canvas?.renderAll() + // canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) + // canvas?.renderAll() } }) addCanvasMouseEventListener('mouse:up', (e) => { - let isIntersection = true if (!inside) return if (tempModule) { let startX, startY let installedLastHeightCoord = 0 //마지막으로 설치된 모듈의 좌표 - //그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다 - if (flowDirection === 'south') { - startX = toFixedWithoutRounding(tempModule.left, 1) - startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1) + checkedModule.forEach((module, index) => { + //모듈 사이즈 + const moduleWidth = toFixedWithoutRounding(module.longAxis / 10, 1) + const moduleHeight = toFixedWithoutRounding(module.shortAxis / 10, 1) - console.log('checkedModule', checkedModule) + //흐름 방향에 따른 모듈 사이즈 + let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight + let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth + + //복시도, 실치수에 따른 모듈 높이 조정 + width = + canvasSetting.roofSizeSet == '1' + ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(trestlePolygon.roofMaterial.pitch), flowDirection).width + : tmpWidth + height = + canvasSetting.roofSizeSet == '1' + ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(trestlePolygon.roofMaterial.pitch), flowDirection).height + : tmpHeight + + //그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다 + if (flowDirection === 'south') { + //남 + startX = toFixedWithoutRounding(tempModule.left, 1) + startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1) - checkedModule.forEach((module, index) => { moduleOptions.fill = module.color - const moduleWidth = Number(module.longAxis) / 10 - const moduleHeight = Number(module.shortAxis) / 10 - - let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight - let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth - - width = - canvasSetting.roofSizeSet == '1' - ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection) - .width - : tmpWidth - height = - canvasSetting.roofSizeSet == '1' - ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection) - .height - : tmpHeight const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row @@ -1206,7 +1206,6 @@ export function useModuleBasicSetting(tabNum) { { x: tempX + width + tempWidthMargin, y: tempY - tempHeightMargin }, { x: tempX + width + tempWidthMargin, y: tempY - height - tempHeightMargin }, ] - // console.log('🚀 ~ addCanvasMouseEventListener ~ rectPoints:', rectPoints) tempModule.set({ points: rectPoints }) const tempTurfModule = polygonToTurfPolygon(tempModule) @@ -1215,34 +1214,39 @@ export function useModuleBasicSetting(tabNum) { if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) { //마우스 클릭시 set으로 해당 위치에 셀을 넣음 const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 - // if (!isOverlap) { - canvas?.remove(tempModule) + if (!isOverlap) { + canvas?.remove(tempModule) - //안겹치면 넣는다 - // tempModule.setCoords() - moduleOptions.surfaceId = trestlePolygon.id + //안겹치면 넣는다 + // tempModule.setCoords() + moduleOptions.surfaceId = trestlePolygon.id - let manualModule = new QPolygon(tempModule.points, { - ...moduleOptions, - moduleInfo: module, - // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), - // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), - width: toFixedWithoutRounding(width, 1), - height: toFixedWithoutRounding(height, 1), - }) + let manualModule = new QPolygon(tempModule.points, { + ...moduleOptions, + moduleInfo: module, + // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), + // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), + width: toFixedWithoutRounding(width, 1), + height: toFixedWithoutRounding(height, 1), + }) - let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects) + let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects) - //오브젝트와 겹치지 않으면 넣는다 - if (isDisjoint) { - canvas?.add(manualModule) - manualDrawModules.push(manualModule) - setModuleStatisticsData() - installedLastHeightCoord = tempY - height - tempHeightMargin + //오브젝트와 겹치지 않으면 넣는다 + if (isDisjoint) { + canvas?.add(manualModule) + manualDrawModules.push(manualModule) + setModuleStatisticsData() + installedLastHeightCoord = tempY - height - tempHeightMargin + } else { + //디버깅용 + // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(manualModule) + // canvas.renderAll() + } } else { - manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - canvas?.add(manualModule) - canvas.renderAll() + swalFire({ text: getMessage('module.place.overlab') }) + return } // getModuleStatistics() // } else { @@ -1255,18 +1259,252 @@ export function useModuleBasicSetting(tabNum) { } } } - }) - } else if (flowDirection === 'north') { - startX = tempModule.points[3].x - startY = tempModule.points[3].y - } else if (flowDirection === 'east') { - startX = tempModule.points[2].x - startY = tempModule.points[2].y - } else { - startX = tempModule.points[0].x - startY = tempModule.points[0].y - } + } else if (flowDirection === 'north') { + //북북 + startX = toFixedWithoutRounding(tempModule.left + tempModule.width, 1) + startY = toFixedWithoutRounding(tempModule.top, 1) + moduleOptions.fill = module.color + + const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + for (let i = 0; i < row; i++) { + let tempY = startY + i * height + + if (index > 0) { + //두번째 모듈일때 마지막 설치 지점 + tempY = index > 0 && i === 0 ? installedLastHeightCoord + intvVer : installedLastHeightCoord + } + + let tempHeightMargin = i === 0 ? 0 : i * intvVer + + for (let j = 0; j < col; j++) { + let tempX = startX - j * width + let tempWidthMargin = j === 0 ? 0 : j * intvHor + + let rectPoints = [ + { x: tempX - tempWidthMargin, y: tempY + height + tempHeightMargin }, + { x: tempX - tempWidthMargin, y: tempY + tempHeightMargin }, + { x: tempX - width - tempWidthMargin, y: tempY + tempHeightMargin }, + { x: tempX - width - tempWidthMargin, y: tempY + height + tempHeightMargin }, + ] + + tempModule.set({ points: rectPoints }) + const tempTurfModule = polygonToTurfPolygon(tempModule) + tempModule.setCoords() //좌표 재정렬 + + if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) { + //마우스 클릭시 set으로 해당 위치에 셀을 넣음 + const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 + if (!isOverlap) { + canvas?.remove(tempModule) + + //안겹치면 넣는다 + // tempModule.setCoords() + moduleOptions.surfaceId = trestlePolygon.id + + let manualModule = new QPolygon(tempModule.points, { + ...moduleOptions, + moduleInfo: module, + // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), + // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), + width: toFixedWithoutRounding(width, 1), + height: toFixedWithoutRounding(height, 1), + }) + + let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects) + + //오브젝트와 겹치지 않으면 넣는다 + if (isDisjoint) { + canvas?.add(manualModule) + manualDrawModules.push(manualModule) + setModuleStatisticsData() + installedLastHeightCoord = tempY + height + tempHeightMargin + } else { + //디버깅용 + // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(manualModule) + // canvas.renderAll() + } + } else { + swalFire({ text: getMessage('module.place.overlab') }) + return + } + // getModuleStatistics() + // } else { + // swalFire({ text: getMessage('module.place.overlab') }) + // return + // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(tempModule) + // canvas.renderAll() + // } + } + } + } + } else if (flowDirection === 'west') { + startX = toFixedWithoutRounding(tempModule.left, 1) + startY = toFixedWithoutRounding(tempModule.top, 1) + moduleOptions.fill = module.color + + const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + + for (let i = 0; i < row; i++) { + //옆으로 올라가는거라 height가 아니고 width로 변경 + let tempX = startX + i * width + let tempWidthMargin = i === 0 ? 0 : i * intvHor + + if (index > 0) { + //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다 + tempX = index > 0 && i === 0 ? installedLastHeightCoord + intvHor : installedLastHeightCoord + } + + for (let j = 0; j < col; j++) { + let tempY = startY + j * height + let tempHeightMargin = j === 0 ? 0 : j * intvVer + + let rectPoints = [ + { x: tempX + tempWidthMargin, y: tempY + tempHeightMargin }, + { x: tempX + tempWidthMargin, y: tempY + height + tempHeightMargin }, + { x: tempX + width + tempWidthMargin, y: tempY + height + tempHeightMargin }, + { x: tempX + width + tempWidthMargin, y: tempY + tempHeightMargin }, + ] + + tempModule.set({ points: rectPoints }) + const tempTurfModule = polygonToTurfPolygon(tempModule) + tempModule.setCoords() //좌표 재정렬 + + if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) { + //마우스 클릭시 set으로 해당 위치에 셀을 넣음 + const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 + if (!isOverlap) { + canvas?.remove(tempModule) + + //안겹치면 넣는다 + // tempModule.setCoords() + moduleOptions.surfaceId = trestlePolygon.id + + let manualModule = new QPolygon(tempModule.points, { + ...moduleOptions, + moduleInfo: module, + // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), + // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), + width: toFixedWithoutRounding(width, 1), + height: toFixedWithoutRounding(height, 1), + }) + + let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects) + + //오브젝트와 겹치지 않으면 넣는다 + if (isDisjoint) { + canvas?.add(manualModule) + manualDrawModules.push(manualModule) + setModuleStatisticsData() + installedLastHeightCoord = tempX + width + tempWidthMargin + } else { + //디버깅용 + // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(manualModule) + // canvas.renderAll() + } + } else { + swalFire({ text: getMessage('module.place.overlab') }) + return + } + // getModuleStatistics() + // } else { + // swalFire({ text: getMessage('module.place.overlab') }) + // return + // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(tempModule) + // canvas.renderAll() + // } + } + } + } + } else { + startX = toFixedWithoutRounding(tempModule.left + width, 1) + startY = toFixedWithoutRounding(tempModule.top + height, 1) + moduleOptions.fill = module.color + + const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + + for (let i = 0; i < row; i++) { + //옆으로 올라가는거라 height가 아니고 width로 변경 + let tempX = startX - i * width + let tempWidthMargin = i === 0 ? 0 : i * intvHor + + if (index > 0) { + //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다 + tempX = index > 0 && i === 0 ? installedLastHeightCoord - intvHor : installedLastHeightCoord + } + + for (let j = 0; j < col; j++) { + let tempY = startY - j * height + let tempHeightMargin = j === 0 ? 0 : j * intvVer + + let rectPoints = [ + { x: tempX - tempWidthMargin, y: tempY - tempHeightMargin }, + { x: tempX - tempWidthMargin, y: tempY - height - tempHeightMargin }, + { x: tempX - width - tempWidthMargin, y: tempY - height - tempHeightMargin }, + { x: tempX - width - tempWidthMargin, y: tempY - tempHeightMargin }, + ] + + tempModule.set({ points: rectPoints }) + const tempTurfModule = polygonToTurfPolygon(tempModule) + tempModule.setCoords() //좌표 재정렬 + + if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) { + //마우스 클릭시 set으로 해당 위치에 셀을 넣음 + const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 + if (!isOverlap) { + canvas?.remove(tempModule) + + //안겹치면 넣는다 + // tempModule.setCoords() + moduleOptions.surfaceId = trestlePolygon.id + + let manualModule = new QPolygon(tempModule.points, { + ...moduleOptions, + moduleInfo: module, + // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), + // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), + width: toFixedWithoutRounding(width, 1), + height: toFixedWithoutRounding(height, 1), + }) + + let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects) + + //오브젝트와 겹치지 않으면 넣는다 + if (isDisjoint) { + canvas?.add(manualModule) + manualDrawModules.push(manualModule) + setModuleStatisticsData() + installedLastHeightCoord = tempX - width - tempWidthMargin + } else { + //디버깅용 + // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(manualModule) + // canvas.renderAll() + } + } else { + swalFire({ text: getMessage('module.place.overlab') }) + return + } + // getModuleStatistics() + // } else { + // swalFire({ text: getMessage('module.place.overlab') }) + // return + // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) + // canvas?.add(tempModule) + // canvas.renderAll() + // } + } + } + } + } + }) //도머 객체를 가져옴 // if (batchObjects) { // batchObjects.forEach((object) => {