115 lines
4.0 KiB
JavaScript
115 lines
4.0 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { useRecoilState, useSetRecoilState } from 'recoil'
|
|
import { settingModalGridOptionsState } from '@/store/settingAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
|
|
import { useTempGrid } from '@/hooks/useTempGrid'
|
|
import { gridColorState } from '@/store/gridAtom'
|
|
import { useColor } from 'react-color-palette'
|
|
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
|
|
|
|
export default function GridOption() {
|
|
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
|
|
const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
|
|
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
|
|
const { getMessage } = useMessage()
|
|
const { tempGridMode, setTempGridMode } = useTempGrid()
|
|
const [gridColor, setGridColor] = useRecoilState(gridColorState)
|
|
const [color, setColor] = useColor(gridColor)
|
|
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
|
|
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
|
|
const { addPopup, closePopup } = usePopup()
|
|
let [colorId, dotLineId] = ''
|
|
|
|
useEffect(() => {
|
|
setGridColor(color.hex)
|
|
}, [color])
|
|
|
|
useEffect(() => {
|
|
console.log(showColorPickerModal)
|
|
gridOptions[3].selected = showColorPickerModal
|
|
setGridOptions([...gridOptions])
|
|
}, [showColorPickerModal])
|
|
|
|
useEffect(() => {
|
|
colorId = uuidv4()
|
|
dotLineId = uuidv4()
|
|
return () => {
|
|
setSettingModalGridOptions((prev) => {
|
|
const newSettingOptions = [...prev]
|
|
newSettingOptions[3].selected = false
|
|
return [...newSettingOptions]
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
const onClickOption = (option) => {
|
|
const { id, name, selected } = option
|
|
|
|
const newGridOptions = [...gridOptions]
|
|
|
|
// 초기화
|
|
setShowColorPickerModal(false)
|
|
setShowDotLineGridModal(false)
|
|
setTempGridMode(false)
|
|
setAdsorptionPointAddMode(false)
|
|
closePopup(dotLineId)
|
|
closePopup(colorId)
|
|
//
|
|
|
|
newGridOptions.forEach((item) => {
|
|
if (item.id === id) {
|
|
item.selected = !item.selected
|
|
} else {
|
|
item.selected = false
|
|
}
|
|
})
|
|
|
|
const selectedOption = newGridOptions.find((item) => item.id === option.id)
|
|
if (selectedOption.id === 1) {
|
|
// 임의 그리드 모드
|
|
setTempGridMode(selectedOption.selected)
|
|
} else if (selectedOption.id === 2) {
|
|
// 점 선 그리드 설정 모달
|
|
setShowDotLineGridModal(selectedOption.selected)
|
|
addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
|
|
} else if (selectedOption.id === 3) {
|
|
// 흡착점 모드
|
|
setAdsorptionPointAddMode(selectedOption.selected)
|
|
} else if (selectedOption.id === 4) {
|
|
// 그리드 색 설정 모달
|
|
setShowColorPickerModal(selectedOption.selected)
|
|
addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
|
|
}
|
|
|
|
setGridOptions(newGridOptions)
|
|
}
|
|
|
|
const colorPickerProps = {
|
|
color: gridColor,
|
|
setColor: setGridColor,
|
|
isShow: showColorPickerModal,
|
|
setIsShow: setShowColorPickerModal,
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.grid')}</h3>
|
|
<div className="flex-check-box for2">
|
|
{gridOptions?.map((option) => (
|
|
<button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(option.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/*<ColorPickerModal {...colorPickerProps} />*/}
|
|
</>
|
|
)
|
|
}
|