diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index f9f97833..8d737c2d 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 } = useCircuitTrestle() + const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle() const { handleCanvasToPng } = useImgLoader() const passivityCircuitAllocationRef = useRef() @@ -92,6 +92,17 @@ 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/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx index 6ebb14f2..ea671881 100644 --- a/src/components/floor-plan/modal/module/PanelEdit.jsx +++ b/src/components/floor-plan/modal/module/PanelEdit.jsx @@ -33,7 +33,6 @@ export default function PanelEdit(props) { const canvas = useRecoilValue(canvasState) const { swalFire } = useSwal() const { moduleMove, moduleCopy, moduleMultiMove, moduleMultiCopy, moduleMoveAll, moduleCopyAll } = useModule() - useEffect(() => { if (!canvas) { const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링 diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index 24cd9ae8..c237e146 100644 --- a/src/hooks/module/useModule.js +++ b/src/hooks/module/useModule.js @@ -108,13 +108,18 @@ export function useModule() { return } const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id) + const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) if (activeModule.circuit) { - swalFire({ - title: getMessage('can.not.move.module'), - icon: 'error', - type: 'alert', - }) - return + if (surfaces.some((surface) => surface.isComplete)) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + + removeTrestleMaterials() } const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule) const otherModules = getOtherModules(modules) @@ -224,7 +229,7 @@ export function useModule() { } modules.forEach((module) => { - const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true) + const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength) * 10, false) module.clone((obj) => { obj.set({ parentId: module.parentId, @@ -263,8 +268,12 @@ export function useModule() { canvas.renderAll() }, }) + } else { + surface.set({ modules: [...surface.modules, ...copyModules] }) } }) + + setModuleStatisticsData() } const moduleCopy = (length, direction) => { @@ -342,12 +351,17 @@ export function useModule() { } const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id) if (activeModule.circuit) { - swalFire({ - title: getMessage('can.not.copy.module'), - icon: 'error', - type: 'alert', - }) - return + const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) + if (surfaces.some((surface) => surface.isComplete)) { + swalFire({ + title: getMessage('can.not.copy.module'), + icon: 'error', + type: 'alert', + }) + return + } + + removeTrestleMaterials() } const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule) const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE) @@ -364,7 +378,7 @@ export function useModule() { } modules.forEach((module) => { - const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true) + const { top, left } = getPosotion(module, direction, Number(length), true) module.clone((obj) => { obj.set({ parentId: module.parentId, @@ -385,6 +399,7 @@ export function useModule() { canvas.add(obj) copyModules.push(obj) obj.setCoords() + console.log(obj) }) if ( isOverlapOtherModules(copyModule, otherModules) || @@ -430,6 +445,10 @@ export function useModule() { if (moduleSetupSurface.isComplete) { resetSurface() } + const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) + if (surfaces.some((surface) => surface.isComplete)) { + removeTrestleMaterials() + } canvas.discardActiveObject() moduleSetupSurface.set({ modules: otherModules }) canvas.remove(...columnModules) @@ -528,14 +547,13 @@ export function useModule() { canvas.renderAll() }, }) + } else { + surfaces.modules = surfaces.modules.filter((module) => !columnModules.map((copyModule) => copyModule.id).includes(module.id)) } setModuleStatisticsData() } const moduleRowRemove = (type) => { - // if (isFixedModule()) { - // return - // } const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id) const rowModules = getRowModules(activeModule) const otherModules = getOtherModules(rowModules) @@ -546,8 +564,9 @@ export function useModule() { let height = -1 const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId) let isWarning = false - if (moduleSetupSurface.isComplete) { - resetSurface() + const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) + if (surfaces.some((surface) => surface.isComplete)) { + removeTrestleMaterials() } canvas.discardActiveObject() moduleSetupSurface.set({ modules: otherModules }) @@ -652,9 +671,6 @@ export function useModule() { } const moduleColumnInsert = (type) => { - if (isFixedModule()) { - return - } const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id) const columnModules = getColumnModules(activeModule) let otherModules = getOtherModules(columnModules) @@ -665,25 +681,11 @@ export function useModule() { const objects = getObjects() const copyModules = [] const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId) - if (moduleSetupSurface.isComplete) { - resetSurface() - } - let width = -1 let isWarning = false const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail - if (targetModules.length === 0) { - swalFire({ - title: '마지막 모듈입니다.', - icon: 'error', - type: 'alert', - }) - return - } canvas.discardActiveObject() targetModules.forEach((module) => { - if (width === -1) - width = type === MODULE_INSERT_TYPE.LEFT ? Number(activeModule.left) - Number(module.left) : Number(module.left) - Number(activeModule.left) - const { top, left } = getPosotion(module, type, module.width, true) + const { top, left } = getPosotion(module, type, moduleIntvlHor, true) module.originPos = { left: module.left, top: module.top, @@ -700,7 +702,7 @@ export function useModule() { canvas.renderAll() otherModules = getOtherModules(columnModules) columnModules.forEach((module) => { - const { top, left } = getPosotion(module, type, module.width + moduleIntvlHor, true) + const { top, left } = getPosotion(module, type, moduleIntvlHor, true) let copyModule = null module.clone((obj) => { obj.set({ @@ -731,6 +733,7 @@ export function useModule() { isOutsideSurface(copyModule, moduleSetupSurface) ) { isWarning = true + copyModule.set({ fill: 'red' }) } module.setCoords() }) @@ -749,6 +752,8 @@ export function useModule() { canvas.renderAll() }, }) + } else { + moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules] } setModuleStatisticsData() } @@ -779,29 +784,14 @@ export function useModule() { type === MODULE_INSERT_TYPE.TOP ? otherModules.filter((module) => module.top < activeModule.top).sort((a, b) => a.top - b.top) : otherModules.filter((module) => module.top > activeModule.top).sort((a, b) => a.top - b.top) - if (targetModules.length === 0) { - swalFire({ - title: '마지막 모듈입니다.', - icon: 'error', - type: 'alert', - }) - return - } const objects = getObjects() const copyModules = [] const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId) - let height = -1 let isWarning = false const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail - - if (surface.isComplete) { - resetSurface() - } canvas.discardActiveObject() targetModules.forEach((module) => { - if (height === -1) - height = type === MODULE_INSERT_TYPE.TOP ? Number(activeModule.top) - Number(module.top) : Number(module.top) - Number(activeModule.top) - const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true) + const { top, left } = getPosotion(module, type, moduleIntvlVer, true) module.originPos = { left: module.left, top: module.top, @@ -817,7 +807,7 @@ export function useModule() { canvas.renderAll() otherModules = getOtherModules(rowModules) rowModules.forEach((module) => { - const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true) + const { top, left } = getPosotion(module, type, moduleIntvlVer, true) let copyModule = null module.clone((obj) => { obj.set({ @@ -869,6 +859,8 @@ export function useModule() { canvas.renderAll() }, }) + } else { + moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules] } setModuleStatisticsData() } @@ -931,14 +923,20 @@ export function useModule() { }) } + // 회로가 없을때만 삭제 가능 const modulesRemove = () => { const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id) const modules = canvas .getObjects() .filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id) const surface = canvas.getObjects().find((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) - if (surface.isComplete) { - resetSurface() + if (activeModule.circuit) { + swalFire({ + title: getMessage('can.not.remove.module'), + icon: 'error', + type: 'alert', + }) + return } surface.set({ modules: modules }) diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js index 9b17d5b9..8abbae3c 100644 --- a/src/hooks/module/useTrestle.js +++ b/src/hooks/module/useTrestle.js @@ -2799,5 +2799,11 @@ export const useTrestle = () => { }) } - return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete } + // 배치면 전체에 가대 설치 여부 + const isAllComplete = () => { + const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) + return surfaces.every((surface) => surface.isComplete) + } + + return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete, isAllComplete } } diff --git a/src/hooks/useCirCuitTrestle.js b/src/hooks/useCirCuitTrestle.js index 1d3a1b2e..74675ecb 100644 --- a/src/hooks/useCirCuitTrestle.js +++ b/src/hooks/useCirCuitTrestle.js @@ -176,8 +176,6 @@ export function useCircuitTrestle() { canvas.renderAll() } - const setPowerConditionerData = () => {} - const setModuleStatisticsData = () => { console.log('selectedModules', selectedModules) if (!selectedModules || !selectedModules?.itemList || selectedModules?.itemList?.length === 0) return @@ -302,6 +300,13 @@ export function useCircuitTrestle() { }) if (circuitTexts.length > 0) canvas.remove(...circuitTexts) canvas.renderAll() + + setModuleStatisticsData() + } + + const isExistCircuit = () => { + const circuits = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit) + return circuits.length > 0 } return { @@ -326,5 +331,6 @@ export function useCircuitTrestle() { removeNotAllocationModules, setModuleStatisticsData, resetCircuits, + isExistCircuit, } } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 8845d3b7..6df32c17 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -43,6 +43,8 @@ import { useRoofFn } from '@/hooks/common/useRoofFn' import { MODULE_ALIGN_TYPE, useModule } from './module/useModule' import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty' import { selectedMenuState } from '@/store/menuAtom' +import { useTrestle } from './module/useTrestle' +import { useCircuitTrestle } from './useCirCuitTrestle' export function useContextMenu() { const canvas = useRecoilValue(canvasState) @@ -73,7 +75,8 @@ export function useContextMenu() { const { alignModule, modulesRemove, moduleRoofRemove } = useModule() const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines } = useRoofFn() const selectedMenu = useRecoilValue(selectedMenuState) - + const { isAllComplete, clear: resetModule } = useTrestle() + const { isExistCircuit } = useCircuitTrestle() const currentMenuSetting = () => { switch (selectedMenu) { case 'outline': @@ -602,56 +605,154 @@ export function useContextMenu() { { id: 'move', name: getMessage('contextmenu.move'), - component: , + fn: () => { + if (currentObject.circuit) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'copy', name: getMessage('contextmenu.copy'), - component: , + fn: () => { + if (currentObject.circuit) { + swalFire({ + title: getMessage('can.not.copy.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, }, ], [ { id: 'columnMove', name: getMessage('contextmenu.column.move'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, }, { id: 'columnCopy', name: getMessage('contextmenu.column.copy'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.copy.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'columnRemove', name: getMessage('contextmenu.column.remove'), - component: , + fn: () => { + if (isExistCircuit()) { + resetModule() + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'columnInsert', name: getMessage('contextmenu.column.insert'), - component: , + fn: () => { + if (isExistCircuit()) { + resetModule() + } + + addPopup(popupId, 1, ) + }, + // component: , }, ], [ { id: 'rowMove', name: getMessage('contextmenu.row.move'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'rowCopy', name: getMessage('contextmenu.row.copy'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.copy.module'), + icon: 'error', + type: 'alert', + }) + return + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'rowRemove', name: getMessage('contextmenu.row.remove'), - component: , + fn: () => { + if (isExistCircuit()) { + resetModule() + } + + addPopup(popupId, 1, ) + }, + // component: , }, { id: 'rowInsert', name: getMessage('contextmenu.row.insert'), - component: , + fn: () => { + if (isExistCircuit()) { + resetModule() + } + + addPopup(popupId, 1, ) + }, + // component: , }, ], ]) @@ -663,32 +764,16 @@ export function useContextMenu() { id: 'moduleVerticalCenterAlign', name: getMessage('contextmenu.module.vertical.align'), fn: () => { - if (currentObject.arrayData) { - let existCircuit = false - currentObject.arrayData.forEach((surface) => { - surface.modules.forEach((module) => { - if (module.circuit) existCircuit = true - }) + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', }) - if (existCircuit) { - swalFire({ - title: getMessage('can.not.move.module'), - icon: 'error', - type: 'alert', - }) - return - } - } else { - const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null) - if (allocatedModules.length > 0) { - swalFire({ - title: getMessage('can.not.move.module'), - icon: 'error', - type: 'alert', - }) - return - } + return } + + resetModule() alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData ?? [currentObject]) }, }, @@ -696,32 +781,15 @@ export function useContextMenu() { id: 'moduleHorizonCenterAlign', name: getMessage('contextmenu.module.horizon.align'), fn: () => { - if (currentObject.arrayData) { - let existCircuit = false - currentObject.arrayData.forEach((surface) => { - surface.modules.forEach((module) => { - if (module.circuit) existCircuit = true - }) + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', }) - if (existCircuit) { - swalFire({ - title: getMessage('can.not.move.module'), - icon: 'error', - type: 'alert', - }) - return - } - } else { - const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null) - if (allocatedModules.length > 0) { - swalFire({ - title: getMessage('can.not.move.module'), - icon: 'error', - type: 'alert', - }) - return - } + return } + alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData ?? [currentObject]) }, }, @@ -740,12 +808,45 @@ export function useContextMenu() { { id: 'moduleMove', name: getMessage('contextmenu.module.move'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + resetModule() + addPopup( + popupId, + 1, + , + ) + }, + + // component: , }, { id: 'moduleCopy', name: getMessage('contextmenu.module.copy'), - component: , + fn: () => { + if (isAllComplete()) { + swalFire({ + title: getMessage('can.not.move.module'), + icon: 'error', + type: 'alert', + }) + return + } + resetModule() + addPopup( + popupId, + 1, + , + ) + }, + // component: , }, // { // id: 'moduleCircuitNumberEdit',