110 lines
4.6 KiB
JavaScript
110 lines
4.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { useRoofFn } from '@/hooks/common/useRoofFn'
|
|
|
|
export default function FirstOption(props) {
|
|
const { getMessage } = useMessage()
|
|
// const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
|
|
let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
|
|
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
const { initEvent } = useEvent()
|
|
const { setSurfaceShapePattern } = useRoofFn()
|
|
|
|
// 데이터를 최초 한 번만 조회
|
|
useEffect(() => {
|
|
console.log('FirstOption useEffect 실행')
|
|
setSettingsDataSave({ ...settingsData })
|
|
}, [])
|
|
|
|
const onClickOption = async (item) => {
|
|
let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay
|
|
let option1 = settingModalFirstOptions?.option1
|
|
let option2 = settingModalFirstOptions?.option2
|
|
|
|
//치수 표시(단 건 선택)
|
|
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
|
|
dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
|
option.selected = option.id === item.id
|
|
return option
|
|
})
|
|
|
|
// setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
|
|
|
|
//화면 표시(단 건 선택)
|
|
} else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
|
|
option2 = settingModalFirstOptions?.option2.map((option) => {
|
|
option.selected = option.id === item.id
|
|
return option
|
|
})
|
|
|
|
// setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
|
|
|
|
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
|
|
polygons.forEach((polygon) => {
|
|
setSurfaceShapePattern(polygon, item.column, false, polygon.roofMaterial, true, true)
|
|
})
|
|
//디스플레이 설정 표시(단 건 선택)
|
|
} else {
|
|
option1 = settingModalFirstOptions?.option1.map((option) => {
|
|
if (option.id === item.id) {
|
|
option.selected = !option.selected
|
|
}
|
|
return option
|
|
})
|
|
|
|
// setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
|
|
}
|
|
|
|
setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
|
|
}
|
|
|
|
// useEffect(() => {
|
|
// console.log('🚀 ~ useEffect ~ initEvent:')
|
|
// initEvent()
|
|
// }, [onClickOption])
|
|
|
|
return (
|
|
<>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
|
|
<div className="flex-check-box for2">
|
|
{settingModalFirstOptions &&
|
|
settingModalFirstOptions.option1.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
|
|
<div className="flex-check-box for-line">
|
|
{settingModalFirstOptions &&
|
|
settingModalFirstOptions.dimensionDisplay.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
|
|
<div className="flex-check-box for-line">
|
|
{settingModalFirstOptions &&
|
|
settingModalFirstOptions.option2.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|