diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index c508ad37..fa11309c 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -42,7 +42,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set // 데이터를 최초 한 번만 조회 useEffect(() => { - fetchBasicSettings() + // fetchBasicSettings() const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) }, []) @@ -50,6 +50,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set // Function to update the roofType and corresponding values const handleRoofTypeChange = (value) => { const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value) + setRoofLayout(selectedRoofMaterial.layout) setCurrentRoofMaterial(selectedRoofMaterial) } diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx new file mode 100644 index 00000000..cba18953 --- /dev/null +++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx @@ -0,0 +1,198 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import QSelectBox from '@/components/common/select/QSelectBox' +import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilState, useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import { useEffect, useState } from 'react' +import { basicSettingState } from '@/store/settingAtom' +import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' +import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' +import { useCommonCode } from '@/hooks/common/useCommonCode' + +export default function ContextRoofAllocationSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + const { + handleSave, + onAddRoofMaterial, + onDeleteRoofMaterial, + roofMaterials, + setCurrentRoofMaterial, + roofList, + handleDefaultRoofMaterial, + handleChangeRoofMaterial, + handleChangeRaft, + handleChangeLayout, + handleSaveContext, + } = useRoofAllocationSetting(id) + + const { findCommonCode } = useCommonCode() + const [raftCodes, setRaftCodes] = useState([]) + useEffect(() => { + const raftCodeList = findCommonCode('203800') + setRaftCodes(raftCodeList.map((raft) => ({ ...raft, value: raft.clCode, name: raft.clCodeNm }))) + }, []) + + 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(selected) + }} + /> +
+ +
+
+ {roofList.map((roof, index) => { + return ( +
+
+ + +
+
+
+
+
+ r.id === roof.id)} + onChange={(e) => handleChangeRoofMaterial(e, index)} + /> +
+ {index === 0 && 基本屋根材} + {index !== 0 && } +
+
+
+ {roof.widAuth && ( +
+ W +
+ +
+ {/*
+ +
*/} +
+ )} + {roof.lenAuth && ( +
+ L +
+ +
+ {/*
+ +
*/} +
+ )} + {roof.raftAuth && ( +
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ {raftCodes.length > 0 && ( + ({ name: raft.clCodeNm, value: raft.clCode }))} + onChange={(e) => handleChangeRaft(e, index)} + value={raftCodes.find((r) => r.value === roof.raft)} + /> + )} + {/* */} +
+
+ )} + {roof.roofPchAuth && ( +
+ {getMessage('hajebichi')} +
+ +
+ {/*
+ +
*/} +
+ )} +
+
+
+ + +
+
+
+
+ ) + })} +
+
+ +
+
+
+ + ) +} diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js index 681f7266..56b6a543 100644 --- a/src/hooks/common/useRoofFn.js +++ b/src/hooks/common/useRoofFn.js @@ -1,17 +1,20 @@ import { useRecoilValue } from 'recoil' import { canvasState } from '@/store/canvasAtom' import { selectedRoofMaterialSelector } from '@/store/settingAtom' +import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' export function useRoofFn() { const canvas = useRecoilValue(canvasState) const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) //면형상 선택 클릭시 지붕 패턴 입히기 - function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) { + function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) { + console.log('selectedRoofMaterial', selectedRoofMaterial) const ratio = window.devicePixelRatio || 1 + const layout = roofMaterial.layout - let width = selectedRoofMaterial.width / 10 - let height = selectedRoofMaterial.length / 10 + let width = roofMaterial.width / 10 + let height = roofMaterial.length / 10 let roofStyle = 2 const inputPatternSize = { width: width, height: height } //임시 사이즈 const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 @@ -31,7 +34,7 @@ export function useRoofFn() { const rows = Math.floor(patternSourceCanvas.height / patternSize.height) const cols = Math.floor(patternSourceCanvas.width / patternSize.width) - ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green' + ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'blue' ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4 ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white' @@ -58,7 +61,7 @@ export function useRoofFn() { } for (let row = 0; row <= rows; row++) { - const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset) + const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height const xStart = col * patternSize.width const xEnd = xStart + patternSize.width ctx.beginPath() @@ -83,7 +86,7 @@ export function useRoofFn() { } for (let col = 0; col <= cols; col++) { - const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset) + const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width const yStart = row * patternSize.height const yEnd = yStart + patternSize.height diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 59cb4eef..8515517c 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -129,6 +129,7 @@ export function useCanvasSetting() { return } const { data } = await getRoofMaterialList() + const roofLists = data.map((item, idx) => ({ ...item, id: item.roofMatlCd, @@ -138,7 +139,7 @@ export function useCanvasSetting() { length: item.lenBase && parseInt(item.lenBase), width: item.widBase && parseInt(item.widBase), raft: item.raftBase && parseInt(item.raftBase), - layout: ROOF_MATERIAL_LAYOUT.PARALLEL, + layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL, hajebichi: item.roofPchBase && parseInt(item.roofPchBase), })) setRoofMaterials(roofLists) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index d2215131..635a3559 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -100,6 +100,13 @@ export function useRoofAllocationSetting(id) { } } + // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우 + const handleSaveContext = () => { + const selectedRoofMaterial = roofList.find((roof) => roof.selected) + setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial) + closeAll() + } + const handleAlloc = () => { if (!checkInnerLines()) { apply() @@ -161,6 +168,7 @@ export function useRoofAllocationSetting(id) { return { ...prev, roofs: roofList, + selectedRoofMaterial: roofList.find((roof) => roof.selected), } }) @@ -203,9 +211,6 @@ export function useRoofAllocationSetting(id) { canvas?.renderAll() } - //roof input값 변경 - const handleChangeInput = (type, value, index) => {} - // 지붕재 변경 const handleChangeRoofMaterial = (value, index) => { if (isFirstRef.current === 0) { @@ -275,5 +280,6 @@ export function useRoofAllocationSetting(id) { handleChangeRoofMaterial, handleChangeRaft, handleChangeLayout, + handleSaveContext, } } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 46a0a38f..cc0cabd4 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -35,6 +35,7 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch' import { fontSelector, globalFontAtom } from '@/store/fontAtom' import { useLine } from '@/hooks/useLine' import { useSwal } from '@/hooks/useSwal' +import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting' export function useContextMenu() { const canvas = useRecoilValue(canvasState) @@ -377,7 +378,7 @@ export function useContextMenu() { { id: 'roofMaterialEdit', name: getMessage('contextmenu.roof.material.edit'), - component: , + component: , }, { id: 'linePropertyEdit', diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 8ad558f7..02c8d0c8 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -220,7 +220,11 @@ export const selectedRoofMaterialSelector = selector({ key: 'selectedRoofMaterialSelector', get: ({ get }) => { const basicSetting = get(basicSettingState) - return basicSetting.selectedRoofMaterial + const addedRoofs = get(addedRoofsSelector) + // addedRoofs에서 selectedRoofMaterial을 찾아 index를 반환 + const index = addedRoofs.findIndex((roof) => roof === basicSetting.selectedRoofMaterial) + + return { ...basicSetting.selectedRoofMaterial, index } }, })