-
-
- 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/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
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 3b956843..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,9 +161,19 @@ export function useRoofAllocationSetting(id) {
}
})
}
-
- setCurrentRoofList(selectRoofs)
- setBasicSetting({ ...basicSetting, roofsData: roofsArray })
+
+ // setCurrentRoofList(selectRoofs)
+ //setBasicSetting({ ...basicSetting, roofsData: roofsArray })
+ setBasicSetting({
+ ...basicSetting,
+ roofSizeSet: res[0].roofSizeSet,
+ roofAngleSet: res[0].roofAngleSet,
+ roofsData: roofsArray,
+ })
+ setBasicInfo({
+ roofSizeSet: '' + res[0].roofSizeSet,
+ roofAngleSet: '' + res[0].roofAngleSet,
+ })
})
} catch (error) {
console.error('Data fetching error:', error)
@@ -167,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,
@@ -184,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 = () => {
@@ -315,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 {
@@ -324,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,
+})