From 4f745a1177ff54eea4bd9597d714cd30fb89b8cd Mon Sep 17 00:00:00 2001 From: yjnoh Date: Thu, 27 Feb 2025 16:49:17 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8F=84=ED=98=95=20=EC=99=B8=EA=B0=81=20?= =?UTF-8?q?=ED=9D=A1=EC=B0=A9=EC=A0=90=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModuleBasicSetting.js | 302 +++++----------------- 1 file changed, 65 insertions(+), 237 deletions(-) diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index d901dcf1..3deee779 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -2,7 +2,7 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' 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 { basicSettingState, roofDisplaySelector } from '@/store/settingAtom' import offsetPolygon, { calculateAngle, createLinesFromPolygon } from '@/util/qpolygon-utils' import { QPolygon } from '@/components/fabric/QPolygon' import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom' @@ -19,7 +19,6 @@ import { moduleStatisticsState } from '@/store/circuitTrestleAtom' import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' import { useMasterController } from '@/hooks/common/useMasterController' import { v4 as uuidv4 } from 'uuid' -// import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' import { isObjectNotEmpty } from '@/util/common-utils' import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' import { useMode } from '@/hooks/useMode' @@ -30,12 +29,10 @@ export function useModuleBasicSetting(tabNum) { const roofDisplay = useRecoilValue(roofDisplaySelector) const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState) const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent() - // const { setModuleStatisticsData } = useCircuitTrestle() const { swalFire } = useSwal() const compasDeg = useRecoilValue(compasDegAtom) const { setSurfaceShapePattern } = useRoofFn() - const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState) const checkedModule = useRecoilValue(checkedModuleState) const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState) const setModuleStatistics = useSetRecoilState(moduleStatisticsState) @@ -79,13 +76,10 @@ export function useModuleBasicSetting(tabNum) { const common = moduleSelectionData.common const roofConstructions = moduleSelectionData.roofConstructions - // console.log('roofConstructions', roofConstructions) - if (roofConstructions && roofConstructions.length > 0) { const listParams = roofConstructions.map((item) => { return { ...common, - // moduleTpCd: selectedModules.itemTp, roofMatlCd: item.trestle.roofMatlCd, trestleMkrCd: item.trestle.trestleMkrCd, constMthdCd: item.trestle.constMthdCd, @@ -117,9 +111,6 @@ export function useModuleBasicSetting(tabNum) { } } } - // console.log('moduleSelectionData', moduleSelectionData) - - // console.log('canvasSetting.roofSizeSet', canvasSetting.roofSizeSet) //가대 상세 데이터 조회 const getTrestleDetailListData = async () => { @@ -374,8 +365,6 @@ export function useModuleBasicSetting(tabNum) { canvas?.renderAll() selectedModuleInstSurfaceArray.push(setupSurface) - // console.log('selectedModuleInstSurfaceArray', selectedModuleInstSurfaceArray) - setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] }) } else { //선택후 재선택하면 선택안됨으로 변경 @@ -435,8 +424,6 @@ export function useModuleBasicSetting(tabNum) { * 확인 후 셀을 이동시킴 */ const manualModuleSetup = (placementRef) => { - // console.log('isManualModuleSetup', isManualModuleSetup) - const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 if (isManualModuleSetup) { @@ -461,6 +448,7 @@ export function useModuleBasicSetting(tabNum) { }) }) + //모듈 기본 옵션 const moduleOptions = { fill: checkedModule[0].color, stroke: 'black', @@ -487,6 +475,7 @@ export function useModuleBasicSetting(tabNum) { const mousePoint = canvas.getPointer(e.e) for (let i = 0; i < moduleSetupSurfaces.length; i++) { + //배치면이 여러개 일때 옮겨가면서 동작해야함 turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i]) trestlePolygon = moduleSetupSurfaces[i] manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 @@ -557,8 +546,8 @@ export function useModuleBasicSetting(tabNum) { /** * 스냅기능 */ - let snapDistance = 80 - let cellSnapDistance = 20 + let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40 + let trestleSnapDistance = 15 let intvHor = flowDirection === 'south' || flowDirection === 'north' @@ -569,10 +558,10 @@ export function useModuleBasicSetting(tabNum) { ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer / 10 : moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor / 10 - const trestleLeft = moduleSetupSurfaces[i].left - const trestleTop = moduleSetupSurfaces[i].top - const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX - const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY + const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) + const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) + const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) + const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2 // 이동하는 모듈의 경계 좌표 @@ -615,80 +604,80 @@ export function useModuleBasicSetting(tabNum) { tempModule.top = holdCellBottom + intvVer } //가운데 -> 가운데 - if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { + if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1)) } //왼쪽 -> 가운데 - if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) { + if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { tempModule.left = holdCellCenterX } // 오른쪽 -> 가운데 - if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) { + if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { tempModule.left = holdCellCenterX - width } //세로 가운데 -> 가운데 - if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { + if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1)) } - //위쪽 -> 가운데 - if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - } - //아랫쪽 -> 가운데 - if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - height - } + // //위쪽 -> 가운데 + // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY + // } + // //아랫쪽 -> 가운데 + // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY - height + // } }) } - // // 위쪽 변에 스냅 - // if (Math.abs(smallTop - trestleTop) < snapDistance) { - // tempModule.top = trestleTop - // } + // 위쪽 변에 스냅 + if (Math.abs(smallTop - trestleTop) < trestleSnapDistance) { + tempModule.top = trestleTop + 1 + } - // // 아래쪽 변에 스냅 - // if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY - // } + // 아래쪽 변에 스냅 + if (Math.abs(smallBottom - trestleBottom) < trestleSnapDistance) { + tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height - 1 + } - // // 왼쪽변에 스냅 - // if (Math.abs(smallLeft - trestleLeft) < snapDistance) { - // tempModule.left = trestleLeft - // } - // //오른쪽 변에 스냅 - // if (Math.abs(smallRight - trestleRight) < snapDistance) { - // tempModule.left = trestleRight - tempModule.width * tempModule.scaleX - // } + // 왼쪽변에 스냅 + if (Math.abs(smallLeft - trestleLeft) < trestleSnapDistance) { + tempModule.left = trestleLeft + 1 + } + //오른쪽 변에 스냅 + if (Math.abs(smallRight - trestleRight) < trestleSnapDistance) { + tempModule.left = trestleRight - tempModule.width - 1 + } - // if (flowDirection === 'south' || flowDirection === 'north') { - // // 모듈왼쪽이 세로중앙선에 붙게 스냅 - // if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - // } + if (flowDirection === 'south' || flowDirection === 'north') { + // 모듈왼쪽이 세로중앙선에 붙게 스냅 + // if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { + // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 + // } - // // 모듈이 가운데가 세로중앙선에 붙게 스냅 - // if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2 - // } + // 모듈이 가운데가 세로중앙선에 붙게 스냅 + if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) { + tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width / 2 + } - // // 모듈오른쪽이 세로중앙선에 붙게 스냅 - // if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX - // } - // } else { - // // 모듈이 가로중앙선에 스냅 - // if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) { - // tempModule.top = bigCenterY - tempModule.height / 2 - // } + // 모듈오른쪽이 세로중앙선에 붙게 스냅 + // if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) { + // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX + // } + } else { + // 모듈이 가로중앙선에 스냅 + if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < trestleSnapDistance) { + tempModule.top = bigCenterY - tempModule.height / 2 + } - // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - // } - // // 모듈 밑면이 가로중앙선에 스냅 - // if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY - // } - // } + // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) { + // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 + // } + // 모듈 밑면이 가로중앙선에 스냅 + // if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) { + // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY + // } + } tempModule.setCoords() canvas?.renderAll() @@ -953,7 +942,7 @@ export function useModuleBasicSetting(tabNum) { //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음 const moduleArray = [] - let calcAreaWidth = flowLines.right.x1 - flowLines.left.x1 //오른쪽 x에서 왼쪽 x를 뺀 가운데를 찾는 로직 + let calcAreaWidth = Math.abs(flowLines.right.x1 - flowLines.left.x1) //오른쪽 x에서 왼쪽 x를 뺀 가운데를 찾는 로직 let calcModuleWidthCount = calcAreaWidth / (width + intvHor) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직 let calcMaxModuleWidthCount = calcModuleWidthCount > moduleMaxCols ? moduleMaxCols : calcModuleWidthCount //최대 모듈 단수가 있기 때문에 최대 단수보다 카운트가 크면 최대 단수로 씀씀 @@ -967,7 +956,7 @@ export function useModuleBasicSetting(tabNum) { //근데 양변이 곡선이면 중앙에 맞추기 위해 아래와 위의 길이를 재서 모듈의 길이를 나눠서 들어갈수 있는 갯수가 동일하면 가운데로 정렬 시킨다 if (flowLines.left.type === 'curve' && flowLines.right.type === 'curve') { - startPointX = flowLines.left.x1 + (calcAreaWidth - totalModuleWidthCount * width) / 2 + startPointX = isChidori ? flowLines.left.x1 + 1 : flowLines.left.x1 + (calcAreaWidth - totalModuleWidthCount * width) / 2 } let heightMargin = 0 @@ -2536,167 +2525,6 @@ export function useModuleBasicSetting(tabNum) { }) } - const flatRoofLeftFlowSetupModule = ( - surfaceMaxLines, - maxLengthLine, - moduleSetupArray, - moduleSetupSurface, - intvHor, - intvVer, - containsBatchObjects, - ) => { - checkedModule.forEach((module, index) => { - const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) - const flowLines = getFlowLines(moduleSetupSurface, width) - let startPoint = flowLines.left - - const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 - const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 - const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 - - let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌 - let diffTopEndPoint = Math.abs(totalTopEndPoint / height) - let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height) - let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width - let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - let tempMaxHeight = height //최대배치인지 확인하려고 넣음 - - for (let i = 0; i <= totalWidth; i++) { - bottomMargin = marginHeight * i - for (let j = 0; j < totalHeight; j++) { - leftMargin = marginWidth * j - - square = [ - [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin], - [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin], - [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - ] - - let squarePolygon = turf.polygon([square]) - let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) - let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) - - // if (disjointFromTrestle && isDisjoint) { - moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module } - let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon }) - canvas?.add(tempModule) - moduleSetupArray.push(tempModule) - moduleGroup.push(tempModule) - } - } - }) - } - - const flatRoofTopFlowSetupModule = ( - surfaceMaxLines, - maxLengthLine, - moduleSetupArray, - moduleSetupSurface, - intvHor, - intvVer, - containsBatchObjects, - ) => { - checkedModule.forEach((module, index) => { - const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) - const flowLines = getFlowLines(moduleSetupSurface, height) - let startPoint = flowLines.top - - const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 - const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 - const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 - - let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1 - let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint - let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1 - let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width) - let diffRightEndPoint = Math.ceil(Math.abs(totalRightEndPoint / width)) - let diffBottomEndPoint = Math.ceil(Math.abs(totalBottomEndPoint / height)) - let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1) - let tempMaxWidth = width //최대배치인지 확인하려고 넣음 - - for (let j = 0; j < diffBottomEndPoint; j++) { - bottomMargin = marginHeight * j - for (let i = 0; i < diffRightEndPoint; i++) { - leftMargin = marginWidth * i - - square = [ - [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin], - [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + height + bottomMargin], - [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + height + bottomMargin], - [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + bottomMargin], - [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin], - ] - - let squarePolygon = turf.polygon([square]) - let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) - let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) - - // if (disjointFromTrestle && isDisjoint) { - moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module } - let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon }) - canvas?.add(tempModule) - moduleSetupArray.push(tempModule) - moduleGroup.push(tempModule) - } - } - }) - } - - const flatRoofRightFlowSetupModule = ( - surfaceMaxLines, - maxLengthLine, - moduleSetupArray, - moduleSetupSurface, - intvHor, - intvVer, - containsBatchObjects, - ) => { - checkedModule.forEach((module, index) => { - const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) - const flowLines = getFlowLines(moduleSetupSurface, width) - let startPoint = flowLines.right - - const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 - const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 - const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 - - let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌 - let diffTopEndPoint = Math.abs(totalTopEndPoint / height) - let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height) - let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width - let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정 - let tempMaxHeight = height //최대배치인지 확인하려고 넣음 - - for (let i = 0; i <= totalWidth; i++) { - bottomMargin = marginHeight * i - for (let j = 0; j < totalHeight; j++) { - leftMargin = marginWidth * j - - square = [ - [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin], - [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin], - [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin], - ] - - let squarePolygon = turf.polygon([square]) - let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) - let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) - - // if (disjointFromTrestle && isDisjoint) { - moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module } - let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon }) - canvas?.add(tempModule) - moduleSetupArray.push(tempModule) - moduleGroup.push(tempModule) - } - } - }) - } - moduleSetupSurfaces.forEach((moduleSetupSurface, index) => { moduleSetupSurface.fire('mousedown') const moduleSetupArray = []