From 6dc9d0c717ed9d232f7a93fedea9d3696c47ef0a Mon Sep 17 00:00:00 2001 From: yjnoh Date: Wed, 5 Feb 2025 14:48:53 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=9D=BC=EA=B4=84=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC,=20=EC=9D=BC=EA=B4=84=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModule.js | 113 +++++++++++++--------- src/hooks/module/useModuleBasicSetting.js | 8 +- src/hooks/useContextMenu.js | 18 ++-- 3 files changed, 81 insertions(+), 58 deletions(-) diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index 80aa17d7..7f7c981c 100644 --- a/src/hooks/module/useModule.js +++ b/src/hooks/module/useModule.js @@ -800,60 +800,65 @@ export function useModule() { } } - const alignModule = (type) => { - const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0] - const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE) - const objects = getObjects() - let [top, bottom, left, right] = [0, 0, 0, 0] + const alignModule = (type, surfaceArray) => { + surfaceArray.forEach((surface) => { + const modules = canvas + .getObjects() + .filter((module) => module.name === POLYGON_TYPE.MODULE) + .filter((module) => module.surfaceId === surface.id) - top = Math.min(...modules.map((module) => module.top)) - bottom = Math.max(...modules.map((module) => module.top + module.height)) - left = Math.min(...modules.map((module) => module.left)) - right = Math.max(...modules.map((module) => module.left + module.width)) - const moduleSurfacePos = { - top: Math.min(...moduleSetupSurface.points.map((point) => point.y)), - left: Math.min(...moduleSetupSurface.points.map((point) => point.x)), - } - const [height, width] = [bottom - top, right - left] - const verticalCenterLength = moduleSurfacePos.top + moduleSetupSurface.height / 2 - (top + height / 2) - const horizontalCenterLength = moduleSurfacePos.left + moduleSetupSurface.width / 2 - (left + width / 2) - let isWarning = false + const objects = getObjects() + let [top, bottom, left, right] = [0, 0, 0, 0] - canvas.discardActiveObject() - modules.forEach((module) => { - module.originPos = { - left: module.left, - top: module.top, - fill: module.fill, - } - if (type === MODULE_ALIGN_TYPE.VERTICAL) { - module.set({ top: module.top + verticalCenterLength }) - } else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) { - module.set({ left: module.left + horizontalCenterLength }) + top = Math.min(...modules.map((module) => module.top)) + bottom = Math.max(...modules.map((module) => module.top + module.height)) + left = Math.min(...modules.map((module) => module.left)) + right = Math.max(...modules.map((module) => module.left + module.width)) + const moduleSurfacePos = { + top: Math.min(...surface.points.map((point) => point.y)), + left: Math.min(...surface.points.map((point) => point.x)), } + const [height, width] = [bottom - top, right - left] + const verticalCenterLength = moduleSurfacePos.top + surface.height / 2 - (top + height / 2) + const horizontalCenterLength = moduleSurfacePos.left + surface.width / 2 - (left + width / 2) + let isWarning = false + canvas.discardActiveObject() + modules.forEach((module) => { + module.originPos = { + left: module.left, + top: module.top, + fill: module.fill, + } + if (type === MODULE_ALIGN_TYPE.VERTICAL) { + module.set({ top: module.top + verticalCenterLength }) + } else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) { + module.set({ left: module.left + horizontalCenterLength }) + } + + canvas.renderAll() + module.setCoords() + if (isOverlapObjects(module, objects) || isOutsideSurface(module, surface)) { + isWarning = true + module.set({ fill: 'red' }) + } + }) canvas.renderAll() - module.setCoords() - if (isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { - isWarning = true - module.set({ fill: 'red' }) + if (isWarning) { + swalFire({ + title: getMessage('can.not.align.module'), + icon: 'error', + type: 'alert', + confirmFn: () => { + modules.forEach((module) => { + module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill }) + module.setCoords() + }) + canvas.renderAll() + }, + }) } }) - canvas.renderAll() - if (isWarning) { - swalFire({ - title: getMessage('can.not.align.module'), - icon: 'error', - type: 'alert', - confirmFn: () => { - modules.forEach((module) => { - module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill }) - module.setCoords() - }) - canvas.renderAll() - }, - }) - } } const modulesRemove = () => { @@ -867,6 +872,19 @@ export function useModule() { canvas.renderAll() } + const moduleRoofRemove = (surfaceArray) => { + surfaceArray.forEach((surface) => { + surface.modules = [] + canvas + .getObjects() + .filter((module) => module.name === POLYGON_TYPE.MODULE && module.surfaceId === surface.id) + .forEach((module) => { + canvas.remove(module) + }) + }) + setModuleStatisticsData() + } + const isOverlapOtherModules = (module, otherModules) => { return otherModules.some( (otherModule) => @@ -1031,6 +1049,7 @@ export function useModule() { moduleColumnInsert, muduleRowInsert, modulesRemove, + moduleRoofRemove, alignModule, setModuleStatisticsData, } diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index cd8ef6a7..29f7f308 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -1,6 +1,6 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' -import { canvasSettingState, canvasState, checkedModuleState, isManualModuleSetupState } from '@/store/canvasAtom' +import { canvasSettingState, canvasState, checkedModuleState, currentObjectState, isManualModuleSetupState } from '@/store/canvasAtom' import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util' import { addedRoofsState, basicSettingState, roofDisplaySelector } from '@/store/settingAtom' import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils' @@ -45,6 +45,8 @@ export function useModuleBasicSetting(tabNum) { const { getTrestleDetailList } = useMasterController() const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false) + const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) + useEffect(() => { // console.log('basicSetting', basicSetting) if (canvas) { @@ -256,8 +258,6 @@ export function useModuleBasicSetting(tabNum) { //설치 범위 지정 클릭 이벤트 const toggleSelection = (setupSurface) => { - console.log('setupSurface', setupSurface) - const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId) //최초 선택일때 if (!isExist) { @@ -279,6 +279,7 @@ export function useModuleBasicSetting(tabNum) { canvas?.renderAll() selectedModuleInstSurfaceArray.push(setupSurface) + setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] }) } else { //선택후 재선택하면 선택안됨으로 변경 setupSurface.set({ @@ -293,6 +294,7 @@ export function useModuleBasicSetting(tabNum) { const removeIndex = setupSurface.parentId const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex) selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1) + setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] }) } canvas?.renderAll() diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index a0b42438..4235d8db 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -67,7 +67,7 @@ export function useContextMenu() { const commonTextFont = useRecoilValue(fontSelector('commonText')) const { settingsData, setSettingsDataSave } = useCanvasSetting() const { swalFire } = useSwal() - const { alignModule, modulesRemove } = useModule() + const { alignModule, modulesRemove, moduleRoofRemove } = useModule() const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial } = useRoofFn() const currentMenuSetting = () => { @@ -332,8 +332,8 @@ export function useContextMenu() { }, [currentContextMenu]) useEffect(() => { + console.log('currentObject', currentObject) if (currentObject?.name) { - console.log('object', currentObject) switch (currentObject.name) { case 'triangleDormer': case 'pentagonDormer': @@ -725,21 +725,23 @@ export function useContextMenu() { { id: 'moduleVerticalCenterAlign', name: getMessage('contextmenu.module.vertical.align'), - fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL), + fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData), }, { id: 'moduleHorizonCenterAlign', name: getMessage('contextmenu.module.horizon.align'), - fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL), + fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData), }, { id: 'moduleRemove', name: getMessage('contextmenu.module.remove'), fn: () => { - const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0] - const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE) - canvas.remove(...modules) - canvas.renderAll() + moduleRoofRemove(currentObject.arrayData) + + // const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0] + // const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE) + // canvas.remove(...modules) + // canvas.renderAll() }, }, {