Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
yoosangwook
commit
af019cceef
@ -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)
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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' },
|
||||
]
|
||||
|
||||
@ -60,16 +61,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
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 })
|
||||
}
|
||||
}, [])
|
||||
|
||||
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
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div className="pop-form-radio">
|
||||
<div className="pop-form-radio">
|
||||
{currentRoof &&
|
||||
roofSizeSetArray.map((item) => (
|
||||
<div className="d-check-radio pop" key={item.id}>
|
||||
<input type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={currentRoof?.roofSizeSet === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={currentRoof?.roofSizeSet === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
|
||||
<td>
|
||||
<div className="pop-form-radio">
|
||||
<div className="pop-form-radio">
|
||||
{currentRoof &&
|
||||
roofAngleSetArray.map((item) => (
|
||||
<div className="d-check-radio pop" key={item.id}>
|
||||
<input type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={currentRoof?.roofAngleSet === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={currentRoof?.roofAngleSet === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -47,190 +47,194 @@ export default function RoofAllocationSetting(props) {
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
<span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
value={roofMaterials[0]}
|
||||
onChange={(e) => {
|
||||
// const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
|
||||
setCurrentRoofMaterial(e)
|
||||
}}
|
||||
showKey={'roofMatlNm'}
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
/>
|
||||
{currentRoofList && (
|
||||
<>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.common.add')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select" style={{ width: '248px' }}>
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
value={roof}
|
||||
showKey={'roofMatlNm'}
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
|
||||
<div className="modal-body">
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
<span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
value={roofMaterials[0]}
|
||||
onChange={(e) => {
|
||||
// const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
|
||||
setCurrentRoofMaterial(e)
|
||||
}}
|
||||
showKey={'roofMatlNm'}
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.common.add')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('slope')}</span>
|
||||
<div className="input-grid" style={{ width: '214px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
|
||||
}}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
/>
|
||||
</div>
|
||||
<span>{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<div className="block-box">
|
||||
{roof.widAuth && (
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<div className="grid-select" style={{ width: '248px' }}>
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
value={roof}
|
||||
showKey={'roofMatlNm'}
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('slope')}</span>
|
||||
<div className="input-grid" style={{ width: '214px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.width}
|
||||
onChange={(e) => handleChangeInput(e, 'width', index)}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
|
||||
}}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
/>
|
||||
</div>
|
||||
<span>{pitchText}</span>
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
onChange={(e) => handleChangeInput(e, 'length', index)}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{(roof.raftAuth || roof.roofPchAuth) && (
|
||||
<div className="block-box">
|
||||
{roof.raftAuth && (
|
||||
</div>
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
{roof.widAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.width}
|
||||
onChange={(e) => handleChangeInput(e, 'width', index)}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
onChange={(e) => handleChangeInput(e, 'length', index)}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button
|
||||
className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
|
||||
onClick={() => {
|
||||
handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button
|
||||
className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
|
||||
onClick={() => {
|
||||
handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
{(roof.raftAuth || roof.roofPchAuth) && (
|
||||
<div className="block-box">
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button
|
||||
className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
|
||||
onClick={() => {
|
||||
handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button
|
||||
className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
|
||||
onClick={() => {
|
||||
handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) })
|
||||
})
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -244,3 +244,8 @@ export const correntObjectNoState = atom({
|
||||
key: 'correntObjectNoState',
|
||||
default: '',
|
||||
})
|
||||
|
||||
export const fetchRoofMaterialsState = atom({
|
||||
key: 'fetchRoofMaterialsState',
|
||||
default: false,
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user