86 lines
3.6 KiB
JavaScript
86 lines
3.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import { setSurfaceShapePattern } from '@/util/canvas-util'
|
|
|
|
export default function FirstOption() {
|
|
const { getMessage } = useMessage()
|
|
const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
|
|
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
|
|
// 데이터를 최초 한 번만 조회
|
|
useEffect(() => {
|
|
console.log('FirstOption useEffect 실행')
|
|
}, [])
|
|
|
|
const onClickOption = async (item) => {
|
|
//치수 표시(단 건 선택)
|
|
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
|
|
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
|
option.selected = option.id === item.id
|
|
return option
|
|
})
|
|
|
|
//화면 표시(단 건 선택)
|
|
} else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
|
|
const options2 = settingModalFirstOptions?.option2.map((option2) => {
|
|
option2.selected = option2.id === item.id
|
|
return option2
|
|
})
|
|
|
|
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
|
|
polygons.forEach((polygon) => {
|
|
setSurfaceShapePattern(polygon, item.column)
|
|
})
|
|
//디스플레이 설정 표시(단 건 선택)
|
|
} else {
|
|
item.selected = !item.selected
|
|
}
|
|
|
|
setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
|
|
}
|
|
|
|
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>
|
|
</>
|
|
)
|
|
}
|