diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 58cf29b5..51620935 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -72,7 +72,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const placementRef = { isChidori: useRef('false'), - setupLocation: useRef('center'), + setupLocation: useRef('eaves'), isMaxSetup: useRef('false'), } diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 8be25f9a..1f65e88f 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -1538,7 +1538,6 @@ export default function StuffDetail() { setFloorPlanObjectNo({ floorPlanObjectNo: '' }) del({ url: `/api/object/${objectNo}?${queryStringFormatter(delParams)}` }) .then(() => { - console.log('트루555') setIsGlobalLoading(true) setFloorPlanObjectNo({ floorPlanObjectNo: '' }) if (session.storeId === 'T01') { @@ -1661,9 +1660,6 @@ export default function StuffDetail() { ) } - console.log('물건등로고하면::', otherSaleStoreList) - console.log('물건등로고하면::', otherSaleStoreList.length) - //"201X584" return ( <> {(editMode === 'NEW' && ( 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 1462fef5..29f7f308 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -1,8 +1,8 @@ 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 { basicSettingState, roofDisplaySelector } from '@/store/settingAtom' +import { addedRoofsState, basicSettingState, roofDisplaySelector } from '@/store/settingAtom' import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils' import { QPolygon } from '@/components/fabric/QPolygon' import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom' @@ -45,14 +45,14 @@ export function useModuleBasicSetting(tabNum) { const { getTrestleDetailList } = useMasterController() const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false) + const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) + useEffect(() => { // console.log('basicSetting', basicSetting) if (canvas) { - canvas.selection = true - canvas.selectionFullyContained = true - // canvas.on('selection:created', (e) => { - // console.log('selection:created', e.selected) - // }) + //드래그 여부 + // canvas.selection = true + // canvas.selectionFullyContained = true } }, []) @@ -191,7 +191,7 @@ export function useModuleBasicSetting(tabNum) { return } - let offsetLength = canvasSetting.roofSizeSet === 3 ? -90 : (trestleDetail.eaveIntvl / 10) * -1 + let offsetLength = canvasSetting.roofSizeSet === '3' ? -90 : (trestleDetail.eaveIntvl / 10) * -1 setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경 const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset //모듈설치영역?? 생성 @@ -258,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) { @@ -281,6 +279,7 @@ export function useModuleBasicSetting(tabNum) { canvas?.renderAll() selectedModuleInstSurfaceArray.push(setupSurface) + setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] }) } else { //선택후 재선택하면 선택안됨으로 변경 setupSurface.set({ @@ -295,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() @@ -401,12 +401,11 @@ export function useModuleBasicSetting(tabNum) { const moduleHeight = Number(checkedModule[0].shortAxis) / 10 let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth - let { width, height } = calculateVisibleModuleHeight( - tmpWidth, - tmpHeight, - getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), - flowDirection, - ) //각도 적용 + + let { width, height } = + canvasSetting.roofSizeSet === '1' + ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection) + : { width: tmpWidth, height: tmpHeight } const points = [ { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 }, @@ -823,17 +822,16 @@ export function useModuleBasicSetting(tabNum) { : Number(module.longAxis)) / 10 } - return calculateVisibleModuleHeight( - tmpWidth, - tmpHeight, - getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), - moduleSetupSurface.flowDirection, - ) //각도 적 + console.log(canvasSetting) + + return canvasSetting.roofSizeSet === '1' + ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), moduleSetupSurface.flowDirection) + : { width: tmpWidth, height: tmpHeight } } const getFlowLines = (moduleSetupSurface, module) => { let flowLines = {} - if (canvasSetting.roofSizeSet !== 3) { + if (canvasSetting.roofSizeSet !== '3') { flowLines = { bottom: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'bottom'), top: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'top'), diff --git a/src/hooks/module/useModuleTabContents.js b/src/hooks/module/useModuleTabContents.js index 63ab7722..2c3e16d4 100644 --- a/src/hooks/module/useModuleTabContents.js +++ b/src/hooks/module/useModuleTabContents.js @@ -5,10 +5,8 @@ import { useMasterController } from '@/hooks/common/useMasterController' import { useCommonCode } from '@/hooks/common/useCommonCode' import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions' import { isObjectNotEmpty, isEqualObjects } from '@/util/common-utils' -import { addedRoofsState } from '@/store/settingAtom' export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) { - const addRoofsArray = useRecoilValue(addedRoofsState) const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트 const { findCommonCode } = useCommonCode() 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() }, }, {