diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index de3674db..002c9c13 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -49,7 +49,7 @@ export default function CanvasFrame() { const resetPcsCheckState = useResetRecoilState(pcsCheckState) const { handleModuleSelectionTotal } = useCanvasPopupStatusController() const { fetchBasicSettings } = useCanvasSetting() - const { setSelectedMenu } = useCanvasMenu() + const { selectedMenu, setSelectedMenu } = useCanvasMenu() const { initEvent } = useEvent() const loadCanvas = () => { @@ -69,6 +69,7 @@ export default function CanvasFrame() { initEvent() }) } + Object.keys(currentCanvasPlan).length > 0 && canvas && handleModuleSelectionTotal() } gridInit() } @@ -76,7 +77,6 @@ export default function CanvasFrame() { useEffect(() => { loadCanvas() resetRecoilData() - Object.keys(currentCanvasPlan).length > 0 && canvas && handleModuleSelectionTotal() /* 플랜번호가 있으면 베이직세팅 팝업 데이터 로드 */ if (currentCanvasPlan.planNo) { @@ -97,7 +97,7 @@ export default function CanvasFrame() { }, []) const resetRecoilData = () => { - resetModuleStatisticsState() + // resetModuleStatisticsState() resetMakersState() resetSelectedMakerState() resetSeriesState() @@ -121,12 +121,7 @@ export default function CanvasFrame() { ))} - {[ - MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING, - MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING, - MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION, - ].includes(currentMenu) && - totalDisplay && } + {selectedMenu === 'module' && totalDisplay && } {/* 이미지 로드 팝업 */} diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 8d737c2d..f9f97833 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -52,7 +52,7 @@ export default function CircuitTrestleSetting({ id }) { // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState) const [stepUpListData, setStepUpListData] = useState([]) const [seletedOption, setSeletedOption] = useState(null) - const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle() + const { setModuleStatisticsData } = useCircuitTrestle() const { handleCanvasToPng } = useImgLoader() const passivityCircuitAllocationRef = useRef() @@ -92,17 +92,6 @@ export default function CircuitTrestleSetting({ id }) { // selectedModels, // pcsCheck, // }) - - return () => { - if ( - canvas - .getObjects() - .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) - .some((surface) => !surface.isComplete) - ) { - resetCircuits() - } - } }, []) // 수동할당 시 모듈 삭제 diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx index 8cd0de0e..67b5efd0 100644 --- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx +++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx @@ -21,7 +21,7 @@ export default function PanelBatchStatistics() { }) const canvas = useRecoilValue(canvasState) const { header, rows, footer } = useRecoilValue(moduleStatisticsState) - const { setModuleStatisticsData } = useCircuitTrestle() + const { setModuleStatisticsData } = useCircuitTrestle(true) const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState) useEffect(() => { diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js index 19736e81..91d65edb 100644 --- a/src/hooks/common/useCanvasConfigInitialize.js +++ b/src/hooks/common/useCanvasConfigInitialize.js @@ -9,6 +9,7 @@ import { globalFontAtom } from '@/store/fontAtom' import { useRoof } from '@/hooks/common/useRoof' import { usePolygon } from '@/hooks/usePolygon' import { useRoofFn } from '@/hooks/common/useRoofFn' +import { POLYGON_TYPE } from '@/common/common' export function useCanvasConfigInitialize() { const canvas = useRecoilValue(canvasState) @@ -211,17 +212,20 @@ export function useCanvasConfigInitialize() { } const moduleInit = () => { - canvas - .getObjects() - .filter((obj) => obj.name === 'module') - .forEach((obj) => { - obj.set({ - selectable: true, - lockMovementX: true, - lockMovementY: true, - }) - obj.setViewLengthText(false) + const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) + const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) + roofSurfaceList.forEach((surface) => { + surface.modules = modules.filter((module) => module.surfaceId === surface.id) + }) + modules.forEach((obj) => { + console.log(obj) + obj.set({ + selectable: true, + lockMovementX: true, + lockMovementY: true, }) + obj.setViewLengthText(false) + }) } return { canvasLoadInit, gridInit } diff --git a/src/hooks/common/useCanvasPopupStatusController.js b/src/hooks/common/useCanvasPopupStatusController.js index b0c0f6f8..a31bd0ed 100644 --- a/src/hooks/common/useCanvasPopupStatusController.js +++ b/src/hooks/common/useCanvasPopupStatusController.js @@ -8,6 +8,8 @@ import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedM import { compasDegAtom } from '@/store/orientationAtom' import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom' import { POLYGON_TYPE } from '@/common/common' +import { useCircuitTrestle } from '../useCirCuitTrestle' +import { useEffect } from 'react' /** * 캔버스 팝업 상태 관리 @@ -58,13 +60,12 @@ export function useCanvasPopupStatusController(param = 1) { } else if (i === 2) { const data = JSON.parse(unescapeString(result.popupStatus)) setModuleSelectionDataStore(data) - if (data.module) setSelectedModules(data.module) - const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) roofSurfaceList.forEach((surface) => { surface.modules = modules.filter((module) => module.surfaceId === surface.id) }) + if (data.module) setSelectedModules(data.module) } } } diff --git a/src/hooks/useCirCuitTrestle.js b/src/hooks/useCirCuitTrestle.js index 74675ecb..027b965a 100644 --- a/src/hooks/useCirCuitTrestle.js +++ b/src/hooks/useCirCuitTrestle.js @@ -11,13 +11,12 @@ import { seriesState, } from '@/store/circuitTrestleAtom' import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' -import { useContext } from 'react' -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' +import { useContext, useEffect } from 'react' +import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil' import { useMessage } from './useMessage' -import { useCanvasPopupStatusController } from './common/useCanvasPopupStatusController' import Big from 'big.js' -export function useCircuitTrestle() { +export function useCircuitTrestle(executeEffect = false) { const [makers, setMakers] = useRecoilState(makersState) const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState) const [series, setSeries] = useRecoilState(seriesState) @@ -27,10 +26,14 @@ export function useCircuitTrestle() { const selectedModules = useRecoilValue(selectedModuleState) const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const canvas = useRecoilValue(canvasState) - const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2) - const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) const setModuleStatistics = useSetRecoilState(moduleStatisticsState) + const resetModuleStatistics = useResetRecoilState(moduleStatisticsState) const { getMessage } = useMessage() + + useEffect(() => { + if (Object.keys(selectedModules).length > 0 && executeEffect) setModuleStatisticsData() + }, [selectedModules]) + const getOptYn = () => { return { maxConnYn: pcsCheck.max ? 'Y' : 'N', @@ -178,7 +181,15 @@ export function useCircuitTrestle() { const setModuleStatisticsData = () => { console.log('selectedModules', selectedModules) - if (!selectedModules || !selectedModules?.itemList || selectedModules?.itemList?.length === 0) return + if ( + !selectedModules || + !selectedModules?.itemList || + selectedModules?.itemList?.length === 0 || + canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length === 0 + ) { + resetModuleStatistics() + return + } const tempHeader = [ { name: getMessage('simulator.table.sub1'), prop: 'name' }, { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' }, diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index ee3f0aa8..99435d3e 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -282,12 +282,6 @@ export function usePlan(params = {}) { /** 리코일 세팅 */ setModuleSelectionDataStore(copyData) if (copyData.module) setSelectedModules(copyData.module) - const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) - const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) - roofSurfaceList.forEach((surface) => { - surface.modules = modules.filter((module) => module.surfaceId === surface.id) - }) - setSelectedMenu(currentSelectedMenu) } else { setSelectedMenu('placement')