From b5f702b74b8bea42eca3006aa36976ab0d4883ae Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Wed, 15 Jan 2025 18:14:57 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EC=A7=80=EB=B6=95=EC=9E=AC=ED=95=A0?= =?UTF-8?q?=EB=8B=B9=20=EC=88=98=EC=A0=95=20=ED=9B=84=20=EB=B0=B0=EC=B9=98?= =?UTF-8?q?=EB=A9=B4=EC=B4=88=EA=B8=B0=EC=84=A4=EC=A0=95=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/placementShape/PlacementShapeSetting.jsx | 10 +++++----- src/hooks/roofcover/useRoofAllocationSetting.js | 8 +++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 9235ee8d..f2bb0103 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -59,11 +59,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - - if (addedRoofs.length > 0) { - setCurrentRoof({ ...currentRoof, roofSizeSet: addedRoofs[0].roofSizeSet, roofAngleSet: addedRoofs[0].roofAngleSet }) - } else if (basicSetting.roofSizeSet.length > 0) { - setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofSizeSet, roofAngleSet: basicSetting.roofAngleSet }) + + if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { + setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) + } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { + setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet }) } }, []) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 3b956843..39487361 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -156,7 +156,13 @@ export function useRoofAllocationSetting(id) { } setCurrentRoofList(selectRoofs) - setBasicSetting({ ...basicSetting, roofsData: roofsArray }) + //setBasicSetting({ ...basicSetting, roofsData: roofsArray }) + setBasicSetting({ + ...basicSetting, + roofSizeSet: res[0].roofSizeSet, + roofAngleSet: res[0].roofAngleSet, + roofsData: roofsArray, + }) }) } catch (error) { console.error('Data fetching error:', error) From 980492583d41f7e46b6f7570efd958da79afe1c0 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 15 Jan 2025 18:46:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EA=B0=80=EB=8C=80=20=EC=84=A4=EC=B9=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useTrestle.js | 392 +++++++++++++++++++++++++++------ 1 file changed, 320 insertions(+), 72 deletions(-) diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js index 4c3e9718..24541d22 100644 --- a/src/hooks/module/useTrestle.js +++ b/src/hooks/module/useTrestle.js @@ -9,12 +9,6 @@ export const useTrestle = () => { const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터 const apply = () => { - // rack은 맵 형태의 객체인데 key value 형태로 되어있다. - // 이때 이 형태를 [{key, value}, ...] 형태로 바꿔야 함. - /*const rackInfos = Object.keys(rack).map((key) => { - return { key, value: rack[key] } - })*/ - //처마력바가 체크되어 있는 경우 exposedBottomPoints를 이용해 처마력바 그려줘야함. // exposedBottomPoints는 노출 최하면 들의 centerPoint 배열. @@ -32,9 +26,11 @@ export const useTrestle = () => { const construction = moduleSelectionData.roofConstructions.find((construction) => construction.roofIndex === roofMaterialIndex).construction let isEaveBar = construction.setupCover let isSnowGuard = construction.setupSnowCover + const direction = parent.direction const rack = surface.trestleDetail.rack - const { rackQty, rackIntvlPct } = surface.trestleDetail + let { rackQty, rackIntvlPct } = surface.trestleDetail + const rackInfos = Object.keys(rack).map((key) => { return { key, value: rack[key] } }) @@ -73,7 +69,7 @@ export const useTrestle = () => { // 처마력바설치 true인 경우 설치 exposedBottomModules.forEach((module) => { //TODO : 방향별로 처마력바 설치해야함 - const bottomPoints = findTopTwoPoints([...module.points]) + const bottomPoints = findTopTwoPoints([...module.points], direction) if (!bottomPoints) return const eaveBar = new fabric.Line([bottomPoints[0].x, bottomPoints[0].y, bottomPoints[1].x, bottomPoints[1].y], { name: 'eaveBar', @@ -85,14 +81,12 @@ export const useTrestle = () => { canvas.renderAll() }) } - // 가대 설치를 위한 가장 아래 모듈로부터 위로 몇단인지 계산 // 오른쪽,왼쪽 둘 다 아래에 아무것도 없는, 처마 커버를 필요로 하는 모듈 exposedBottomModules.forEach((module) => { const { width, height } = module let { x: startX, y: startY } = { ...module.getCenterPoint() } let { x, y } = { ...module.getCenterPoint() } - const direction = 'south' //TODO : 방향별로 가대 설치해야함 let leftRows = 1 @@ -105,9 +99,7 @@ export const useTrestle = () => { //우선 절반을 나눈 뒤 왼쪽부터 찾는다. while (hasNextModule) { //바로 위에 있는지 확인한다. - let nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2 - }) + let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction) if (nextModule) { // 바로 위 모듈을 찾는다. @@ -117,16 +109,10 @@ export const useTrestle = () => { } else { // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다. if (findLeft) { - const topLeftPoint = { x: x - width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2 - }) + nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction) findLeft = false } else { - const topRightPoint = { x: x + width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2 - }) + nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction) findLeft = true } @@ -148,9 +134,7 @@ export const useTrestle = () => { // 오른쪽 찾는다. while (hasNextModule) { //바로 위에 있는지 확인한다. - let nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2 - }) + let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction) if (nextModule) { // 바로 위 모듈을 찾는다. @@ -160,16 +144,10 @@ export const useTrestle = () => { } else { // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다. if (findRight) { - const topRightPoint = { x: x + width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2 - }) + nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction) findRight = false } else { - const topLeftPoint = { x: x - width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2 - }) + nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction) findRight = true } @@ -191,9 +169,7 @@ export const useTrestle = () => { // 센터 찾는다. while (hasNextModule) { //바로 위에 있는지 확인한다. - let nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2 - }) + let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction) if (nextModule) { // 바로 위 모듈을 찾는다. @@ -233,7 +209,6 @@ export const useTrestle = () => { const { width, height } = module let { x: startX, y: startY } = { ...module.getCenterPoint() } let { x, y } = { ...module.getCenterPoint() } - const direction = 'south' //TODO : 방향별로 가대 설치해야함 let leftRows = 1 @@ -243,9 +218,7 @@ export const useTrestle = () => { //우선 절반을 나눈 뒤 왼쪽부터 찾는다. while (hasNextModule) { //바로 위에 있는지 확인한다. - let nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2 - }) + let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction) if (nextModule) { // 바로 위 모듈을 찾는다. @@ -255,16 +228,10 @@ export const useTrestle = () => { } else { // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다. if (findLeft) { - const topLeftPoint = { x: x - width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2 - }) + nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction) findLeft = false } else { - const topRightPoint = { x: x + width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2 - }) + nextModule = nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction) findLeft = true } @@ -291,7 +258,6 @@ export const useTrestle = () => { const { width, height } = module let { x: startX, y: startY } = { ...module.getCenterPoint() } let { x, y } = { ...module.getCenterPoint() } - const direction = 'south' //TODO : 방향별로 가대 설치해야함 let rightRows = 1 @@ -301,9 +267,7 @@ export const useTrestle = () => { // 오른쪽 찾는다. while (hasNextModule) { //바로 위에 있는지 확인한다. - let nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2 - }) + let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction) if (nextModule) { // 바로 위 모듈을 찾는다. @@ -313,16 +277,10 @@ export const useTrestle = () => { } else { // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다. if (findRight) { - const topRightPoint = { x: x + width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2 - }) + nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction) findRight = false } else { - const topLeftPoint = { x: x - width / 2, y: y - height } - nextModule = centerPoints.find((centerPoint) => { - return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2 - }) + nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction) findRight = true } @@ -361,7 +319,92 @@ export const useTrestle = () => { installBracket() } - const drawRacks = (rackInfos, rackQty, rackIntvlPct, module, direction = 'south', l) => { + const findNextModule = (currentPoint, centerPoints, direction) => { + let { x, y, width, height } = currentPoint + width = Math.floor(width) + height = Math.floor(height) + + let result + switch (direction) { + case 'south': { + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2) + break + } + case 'north': { + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y + height)) < 2) + break + } + case 'east': { + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2) + break + } + case 'west': { + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2) + break + } + } + + return result + } + + const findNextLeftModule = (currentPoint, centerPoints, direction) => { + const { x, y, width, height } = currentPoint + let result + let topLeftPoint + + switch (direction) { + case 'south': { + topLeftPoint = { x: x - width / 2, y: y - height } + break + } + case 'north': { + topLeftPoint = { x: x + width / 2, y: y + height } + break + } + case 'east': { + topLeftPoint = { x: x - width, y: y + height / 2 } + break + } + case 'west': { + topLeftPoint = { x: x + width, y: y - height / 2 } + break + } + } + + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2) + + return result + } + const findNextRightModule = (currentPoint, centerPoints, direction) => { + const { x, y, width, height } = currentPoint + let result + let topRightPoint + + switch (direction) { + case 'south': { + topRightPoint = { x: x + width / 2, y: y - height } + break + } + case 'north': { + topRightPoint = { x: x - width / 2, y: y + height } + break + } + case 'east': { + topRightPoint = { x: x - width, y: y - height / 2 } + break + } + case 'west': { + topRightPoint = { x: x + width, y: y + height / 2 } + break + } + } + + result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2) + + return result + } + + const drawRacks = (rackInfos, rackQty, rackIntvlPct, module, direction, l) => { const { width, height } = module let startPointX, startPointY @@ -370,10 +413,20 @@ export const useTrestle = () => { case 'L': { // 왼쪽부분 시작 점 if (direction === 'south') { - const x = module.left - const y = module.top + module.height / 2 - startPointX = x + width / rackIntvlPct - startPointY = y + height / 2 + startPointX = module.left + width / rackIntvlPct + startPointY = module.top + module.height + break + } else if (direction === 'east') { + startPointX = module.left + width + startPointY = module.top + height - height / rackIntvlPct + break + } else if (direction === 'west') { + startPointX = module.left + startPointY = module.top + height / rackIntvlPct + break + } else if (direction === 'north') { + startPointX = module.left + width - width / rackIntvlPct + startPointY = module.top break } } @@ -381,19 +434,49 @@ export const useTrestle = () => { case 'R': { // 오른쪽부분 시작 점 if (direction === 'south') { - const x = module.left + module.width - const y = module.top + module.height / 2 - startPointX = x - width / rackIntvlPct - startPointY = y + height / 2 + startPointX = module.left + module.width - width / rackIntvlPct + startPointY = module.top + module.height / 2 + height / 2 + break + } else if (direction === 'east') { + startPointX = module.left + width + startPointY = module.top + height / rackIntvlPct + break + } else if (direction === 'west') { + startPointX = module.left + startPointY = module.top + height - height / rackIntvlPct + break + } else if (direction === 'north') { + startPointX = module.left + width / rackIntvlPct + startPointY = module.top break } } case 'C': { // 중간부분 시작점 if (direction === 'south') { + const x = module.left + module.width / 2 + const y = module.top + module.height / 2 startPointX = x startPointY = y + height / 2 break + } else if (direction === 'east') { + const x = module.left + width + const y = module.top + module.height / 2 + startPointX = x + startPointY = y + break + } else if (direction === 'west') { + const x = module.left + const y = module.top + module.height / 2 + startPointX = x + startPointY = y + break + } else if (direction === 'north') { + const x = module.left + module.width / 2 + const y = module.top + startPointX = x + startPointY = y + break } } } @@ -410,6 +493,13 @@ export const useTrestle = () => { stroke: 'red', strokeWidth: 4, selectable: false, + fill: 'red', + shadow: { + color: 'black', // Outline color + blur: 10, + offsetX: 0, + offsetY: 0, + }, supFitQty, supFitIntvlPct, rackLen, @@ -425,6 +515,100 @@ export const useTrestle = () => { break } + case 'east': { + rackInfos.forEach((rackInfo) => { + const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo + + const rackLength = rackLen / 10 + + const rack = new fabric.Line([startPointX, startPointY, startPointX - rackLength, startPointY], { + name: 'rack', + stroke: 'red', + shadow: { + color: 'black', // Outline color + blur: 10, + offsetX: 0, + offsetY: 0, + }, + strokeWidth: 4, + selectable: false, + supFitQty, + supFitIntvlPct, + rackLen, + rackId: itemId, + direction: 'left', + }) + + canvas.add(rack) + canvas.renderAll() + + startPointX -= rackLength + 3 + }) + break + } + + case 'west': { + rackInfos.forEach((rackInfo) => { + const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo + + const rackLength = rackLen / 10 + + const rack = new fabric.Line([startPointX, startPointY, startPointX + rackLength, startPointY], { + name: 'rack', + stroke: 'red', + shadow: { + color: 'black', // Outline color + blur: 10, + offsetX: 0, + offsetY: 0, + }, + strokeWidth: 4, + selectable: false, + supFitQty, + supFitIntvlPct, + rackLen, + rackId: itemId, + direction: 'right', + }) + + canvas.add(rack) + canvas.renderAll() + + startPointX += rackLength + 3 + }) + break + } + case 'north': { + rackInfos.forEach((rackInfo) => { + const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo + + const rackLength = rackLen / 10 + + const rack = new fabric.Line([startPointX, startPointY, startPointX, startPointY + rackLength], { + name: 'rack', + stroke: 'red', + shadow: { + color: 'black', // Outline color + blur: 10, + offsetX: 0, + offsetY: 0, + }, + strokeWidth: 4, + selectable: false, + supFitQty, + supFitIntvlPct, + rackLen, + rackId: itemId, + direction: 'bottom', + }) + + canvas.add(rack) + canvas.renderAll() + + startPointY += rackLength + 3 + }) + break + } } } @@ -460,6 +644,57 @@ export const useTrestle = () => { canvas.add(bracket) }) canvas.renderAll() + } else if (direction === 'left') { + const result = getBracketPoints(supFitQty, supFitIntvlPct) + + result.forEach((percent) => { + const bracket = new fabric.Rect({ + left: x2 + (rackLen / 10) * percent, + top: y2 - moduleLength / 3, + fill: 'green', + name: 'bracket', + width: moduleLength, + height: moduleLength, + selectable: false, + }) + + canvas.add(bracket) + }) + canvas.renderAll() + } else if (direction === 'right') { + const result = getBracketPoints(supFitQty, supFitIntvlPct) + + result.forEach((percent) => { + const bracket = new fabric.Rect({ + left: x2 - (rackLen / 10) * percent, + top: y2 - moduleLength / 3, + fill: 'green', + name: 'bracket', + width: moduleLength, + height: moduleLength, + selectable: false, + }) + + canvas.add(bracket) + }) + canvas.renderAll() + } else if (direction === 'bottom') { + const result = getBracketPoints(supFitQty, supFitIntvlPct) + + result.forEach((percent) => { + const bracket = new fabric.Rect({ + left: x2 - moduleLength / 3, + top: y2 - (rackLen / 10) * percent, + fill: 'green', + name: 'bracket', + width: moduleLength, + height: moduleLength, + selectable: false, + }) + + canvas.add(bracket) + }) + canvas.renderAll() } }) } @@ -488,8 +723,21 @@ export const useTrestle = () => { return points } - function findTopTwoPoints(points) { - points.sort((a, b) => b.y - a.y) + function findTopTwoPoints(points, direction) { + switch (direction) { + case 'south': + points.sort((a, b) => b.y - a.y) + break + case 'north': + points.sort((a, b) => a.y - b.y) + break + case 'east': + points.sort((a, b) => b.x - a.x) + break + case 'west': + points.sort((a, b) => a.x - b.x) + break + } return points.slice(0, 2) } @@ -549,12 +797,12 @@ export const useTrestle = () => { bottomRightPoint = { x: x - width / 2, y: y - height } break case 'east': - bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2) + bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2) bottomLeftPoint = { x: x + width, y: y + height / 2 } bottomRightPoint = { x: x + width, y: y - height / 2 } break case 'west': - bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2) + bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2) bottomLeftPoint = { x: x - width, y: y - height / 2 } bottomRightPoint = { x: x - width, y: y + height / 2 } break From de282fd9691df0052ff413051b2293d956c624a0 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 15 Jan 2025 20:17:07 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=EC=84=A4=EC=A0=95=20=EC=9A=B0=EC=84=A0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 11 +- src/components/floor-plan/FloorPlan.jsx | 1 + .../placementShape/PlacementShapeSetting.jsx | 65 ++-- .../roofAllocation/RoofAllocationSetting.jsx | 336 +++++++++--------- src/hooks/option/useCanvasSetting.js | 14 +- .../roofcover/useRoofAllocationSetting.js | 49 ++- src/store/settingAtom.js | 5 + 7 files changed, 256 insertions(+), 225 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index c314dd2a..13cfd956 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -308,9 +308,10 @@ export default function CanvasMenu(props) { } }, [type, globalLocale]) - useEffect(() => { - if (!selectedRoofMaterial) return - //if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return + /*useEffect(() => { + if (menuNumber === 1) { + return + } setMenuNumber(1) // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) { // setMenuNumber(3) @@ -321,8 +322,8 @@ export default function CanvasMenu(props) { // setType('outline') // setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) // } - }, [selectedRoofMaterial]) - + }, [basicSetting])*/ + const checkMenuState = (menu) => { return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2) } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index fe95d46b..0769af0a 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -25,6 +25,7 @@ export default function FloorPlan({ children }) { useEffect(() => { ///setCorrentObjectNo(floorPlanState.objectNo) //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo) + setMenuNumber(1) fetchSettings() return () => { closeAll() diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index f2bb0103..0a539ac2 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -8,8 +8,8 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material import WithDraggable from '@/components/common/draggable/WithDraggable' import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' -import { useRecoilValue } from 'recoil' -import { roofMaterialsAtom } from '@/store/settingAtom' +import { useRecoilState, useRecoilValue } from 'recoil' +import { addedRoofsState, roofMaterialsAtom } from '@/store/settingAtom' import { useCommonCode } from '@/hooks/common/useCommonCode' import QSelectBox from '@/components/common/select/QSelectBox' import { globalLocaleStore } from '@/store/localeAtom' @@ -28,10 +28,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set const roofMaterials = useRecoilValue(roofMaterialsAtom) const globalLocale = useRecoilValue(globalLocaleStore) - const { basicSetting, setBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting() + const { basicSetting, setBasicSettings, basicSettingSave } = useCanvasSetting() + const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) const { findCommonCode } = useCommonCode() const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보 - const [currentRoof, setCurrentRoof] = useState(addedRoofs[0]) // 현재 선택된 지붕재 정보 + const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보 const roofRef = { roofCd: useRef(null), @@ -50,7 +51,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set //지붕각도 설정(경사/각도) const roofAngleSetArray = [ - { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch'}, + { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch' }, { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' }, ] @@ -59,7 +60,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - + if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { @@ -67,9 +68,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set } }, []) + useEffect(() => { + if (addedRoofs.length > 0) { + setCurrentRoof({ ...addedRoofs[0] }) + } + }, [addedRoofs]) + useEffect(() => { console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof) - if(!currentRoof) return + if (!currentRoof) return setBasicSettings({ ...basicSetting, roofSizeSet: String(currentRoof.roofSizeSet), @@ -196,42 +203,42 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set -
+
{currentRoof && roofSizeSetArray.map((item) => (
- setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} - /> - + setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} + /> +
- )) - } + ))}
{getMessage('modal.placement.initial.setting.roof.angle.setting')} -
+
{currentRoof && roofAngleSetArray.map((item) => (
- setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} - /> - + setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} + /> +
- )) - } + ))}
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index eabe825b..4118db79 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -47,190 +47,194 @@ export default function RoofAllocationSetting(props) { return (
-
-

{getMessage('plan.menu.estimate.roof.alloc')}

- -
-
-
{getMessage('modal.roof.alloc.info')}
-
- {getMessage('modal.roof.alloc.select.roof.material')} -
- { - // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id) - setCurrentRoofMaterial(e) - }} - showKey={'roofMatlNm'} - sourceKey={'roofMatlCd'} - targetKey={'roofMatlCd'} - /> + {currentRoofList && ( + <> +
+

{getMessage('plan.menu.estimate.roof.alloc')}

+
- -
-
-
- {currentRoofList.map((roof, index) => { - return ( -
-
- - -
-
-
-
-
- handleChangeRoofMaterial(e, index)} - /> -
- {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} - {index !== 0 && } +
+
{getMessage('modal.roof.alloc.info')}
+
+ {getMessage('modal.roof.alloc.select.roof.material')} +
+ { + // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id) + setCurrentRoofMaterial(e) + }} + showKey={'roofMatlNm'} + sourceKey={'roofMatlCd'} + targetKey={'roofMatlCd'} + /> +
+ +
+
+
+ {currentRoofList.map((roof, index) => { + return ( +
+
+ +
-
-
-
- {getMessage('slope')} -
- { - handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) - }} - defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} - /> -
- {pitchText} -
-
- {(roof.widAuth || roof.lenAuth) && ( -
- {roof.widAuth && ( +
+
- W -
+
+ handleChangeRoofMaterial(e, index)} + /> +
+ {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} + {index !== 0 && } +
+
+
+
+ {getMessage('slope')} +
handleChangeInput(e, 'width', index)} - readOnly={roof.widAuth === 'R'} + onChange={(e) => { + handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) + }} + defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} />
+ {pitchText}
- )} - {roof.lenAuth && ( -
- L -
- handleChangeInput(e, 'length', index)} - readOnly={roof.lenAuth === 'R'} - /> -
-
- )} -
- )} - {(roof.raftAuth || roof.roofPchAuth) && ( -
- {roof.raftAuth && ( +
+ {(roof.widAuth || roof.lenAuth) && (
-
- {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( -
- handleChangeRaft(e, index)} + {roof.widAuth && ( +
+ W +
+ handleChangeInput(e, 'width', index)} + readOnly={roof.widAuth === 'R'} />
- )} -
-
- )} - {roof.roofPchAuth && ( -
-
- {getMessage('hajebichi')} -
- handleChangeInput(e, 'hajebichi', index)} - value={parseInt(roof.hajebichi)} - readOnly={roof.roofPchAuth === 'R'} - />
-
+ )} + {roof.lenAuth && ( +
+ L +
+ handleChangeInput(e, 'length', index)} + readOnly={roof.lenAuth === 'R'} + /> +
+
+ )}
)} -
- )} -
-
- - + {(roof.raftAuth || roof.roofPchAuth) && ( +
+ {roof.raftAuth && ( +
+
+ {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && ( +
+ handleChangeRaft(e, index)} + /> +
+ )} +
+
+ )} + {roof.roofPchAuth && ( +
+
+ {getMessage('hajebichi')} +
+ handleChangeInput(e, 'hajebichi', index)} + value={parseInt(roof.hajebichi)} + readOnly={roof.roofPchAuth === 'R'} + /> +
+
+
+ )} +
+ )} +
+
+ + +
+
-
-
- ) - })} + ) + })} +
+
+
+ +
-
-
- -
-
+ + )}
) diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 8594bd4e..6d576a30 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -23,6 +23,7 @@ import { roofMaterialsAtom, selectedRoofMaterialSelector, addedRoofsState, + fetchRoofMaterialsState, } from '@/store/settingAtom' import { MENU, POLYGON_TYPE } from '@/common/common' import { globalFontAtom } from '@/store/fontAtom' @@ -77,6 +78,7 @@ export function useCanvasSetting() { const [gridColor, setGridColor] = useRecoilState(gridColorState) const [color, setColor] = useColor(gridColor ?? '#FF0000') const { menuNumber, setMenuNumber } = useCanvasMenu() + const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions, @@ -102,6 +104,7 @@ export function useCanvasSetting() { const { getRoofMaterialList, getModuleTypeItemList } = useMasterController() const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom) const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) + const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState) const [type, setType] = useRecoilState(menuTypeState) const setCurrentMenu = useSetRecoilState(currentMenuState) const SelectOptions = [ @@ -114,10 +117,10 @@ export function useCanvasSetting() { const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) useEffect(() => { - if (roofMaterials.length !== 0) { - return + setFetchRoofMaterials(!fetchRoofMaterials) + if (fetchRoofMaterials) { + addRoofMaterials() } - addRoofMaterials() }, []) //지붕재 초기세팅 @@ -326,7 +329,7 @@ export function useCanvasSetting() { ] } - // 데이터 설정 + // 데이터 설정 const addRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -344,7 +347,7 @@ export function useCanvasSetting() { roofAngleSet: roofsRow[i].roofAngleSet, pitch: roofsArray[i].roofPitch, angle: roofsArray[i].roofAngle, - }) + }) } }) } @@ -404,7 +407,6 @@ export function useCanvasSetting() { ], } - await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { swalFire({ text: getMessage(res.returnMessage) }) }) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 39487361..546ebe0b 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -33,7 +33,7 @@ export function useRoofAllocationSetting(id) { const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon() const [popupId, setPopupId] = useState(uuidv4()) const { addPopup, closePopup, closeAll } = usePopup() - const currentObject = useRecoilValue(currentObjectState) + const currentObject = useRecoilValue(currentObjectState) const { setMenuNumber } = useCanvasMenu() const setMenuType = useSetRecoilState(menuTypeState) const roofMaterials = useRecoilValue(roofMaterialsSelector) @@ -42,15 +42,20 @@ export function useRoofAllocationSetting(id) { const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재 const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열 const [editingLines, setEditingLines] = useState([]) - const [currentRoofList, setCurrentRoofList] = useState(roofList) + const [currentRoofList, setCurrentRoofList] = useState(null) const currentAngleType = useRecoilValue(currentAngleTypeSelector) const globalLocaleState = useRecoilValue(globalLocaleStore) + const [basicInfo, setBasicInfo] = useState(null) const { get, post } = useAxios(globalLocaleState) const { getMessage } = useMessage() const { swalFire } = useSwal() const { setSurfaceShapePattern } = useRoofFn() + useEffect(() => { + setCurrentRoofList(roofList) + }, []) + useEffect(() => { const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines @@ -133,6 +138,8 @@ export function useRoofAllocationSetting(id) { console.log('fetchBasicSettings roofsArray', roofsArray) + console.log(roofsArray) + // 데이터 설정 const selectRoofs = [] for (let i = 0; i < roofsArray.length; i++) { @@ -154,8 +161,8 @@ export function useRoofAllocationSetting(id) { } }) } - - setCurrentRoofList(selectRoofs) + + // setCurrentRoofList(selectRoofs) //setBasicSetting({ ...basicSetting, roofsData: roofsArray }) setBasicSetting({ ...basicSetting, @@ -163,6 +170,10 @@ export function useRoofAllocationSetting(id) { roofAngleSet: res[0].roofAngleSet, roofsData: roofsArray, }) + setBasicInfo({ + roofSizeSet: '' + res[0].roofSizeSet, + roofAngleSet: '' + res[0].roofAngleSet, + }) }) } catch (error) { console.error('Data fetching error:', error) @@ -173,10 +184,10 @@ export function useRoofAllocationSetting(id) { const basicSettingSave = async () => { try { const patternData = { - objectNo: correntObjectNo, + objectNo: correntObjectNo, roofSizeSet: Number(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet, - roofAllocationList: currentRoofList.map((item, index) => ({ + roofAllocationList: currentRoofList.map((item, index) => ({ roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected, roofSeq: index, roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd, @@ -190,19 +201,19 @@ export function useRoofAllocationSetting(id) { })), } - console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) + console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) - await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { - console.log('roof-allocation-settings res ', res) - swalFire({ text: getMessage(res.returnMessage) }) - }) + await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { + console.log('roof-allocation-settings res ', res) + swalFire({ text: getMessage(res.returnMessage) }) + }) - //Recoil 설정 - //setCanvasSetting({ ...basicSetting }) - fetchBasicSettings() - } catch (error) { - swalFire({ text: error.message, icon: 'error' }) - } + //Recoil 설정 + //setCanvasSetting({ ...basicSetting }) + fetchBasicSettings() + } catch (error) { + swalFire({ text: error.message, icon: 'error' }) + } } const onAddRoofMaterial = () => { @@ -321,8 +332,9 @@ export function useRoofAllocationSetting(id) { }) const newRoofList = currentRoofList.map((roof, idx) => { - return { ...roof, index: idx } + return { ...roof, index: idx, ...basicInfo } }) + console.log('basicInfo', newRoofList) setBasicSetting((prev) => { return { @@ -330,7 +342,6 @@ export function useRoofAllocationSetting(id) { selectedRoofMaterial: newRoofList.find((roof) => roof.selected), } }) - setRoofList(newRoofList) const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 305bcb57..023458b4 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -244,3 +244,8 @@ export const correntObjectNoState = atom({ key: 'correntObjectNoState', default: '', }) + +export const fetchRoofMaterialsState = atom({ + key: 'fetchRoofMaterialsState', + default: false, +})