qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Canvas 설정 수정

Browse Source
This commit is contained in:
changkyu choi 2024-12-06 16:02:45 +09:00
parent b07273ea86
commit 6e4082935f
6 changed files with 75 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -5,9 +5,10 @@ import { POLYGON_TYPE } from '@/common/common'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { useEvent } from '@/hooks/useEvent'
export default function FirstOption() {
export default function FirstOption(props) {
const { getMessage } = useMessage()
const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
// const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = props
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { initEvent } = useEvent()
@ -18,22 +19,26 @@ export default function FirstOption() {
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') {
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id
return option
})
setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
// setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
//화면 표시(단 건 선택)
} else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
const options = settingModalFirstOptions?.option2.map((option2) => {
option2 = settingModalFirstOptions?.option2.map((option2) => {
option2.selected = option2.id === item.id
return option2
})
setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
// setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@ -41,25 +46,18 @@ export default function FirstOption() {
setSurfaceShapePattern(polygon, item.column)
})
//디스플레이 설정 표시(단 건 선택)
} else if (item.column === 'imageDisplay') {
item.selected = !item.selected
canvas
.getObjects()
.filter((obj) => obj.name === 'backGroundImage')
.forEach((image) => (image.visible = item.selected))
canvas.renderAll()
}else {
const options = settingModalFirstOptions?.option1.map((opt) => {
} else {
option1 = settingModalFirstOptions?.option1.map((opt) => {
if (opt.id === item.id) {
opt.selected = !opt.selected
}
return opt
})
setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
// setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
}
setSettingsData({ ...settingsData, ...settingModalFirstOptions })
setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
}
// useEffect(() => {

7
src/components/floor-plan/modal/setting01/GridOption.jsx
View File

@ -11,7 +11,7 @@ import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useEvent } from '@/hooks/useEvent'
export default function GridOption() {
export default function GridOption(props) {
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@ -23,12 +23,13 @@ export default function GridOption() {
const [colorId, setColorId] = useState(uuidv4())
const [dotLineId, setDotLineId] = useState(uuidv4())
const { gridColor, setGridColor, color } = useCanvasSetting()
// const { gridColor, setGridColor, color } = useCanvasSetting()
const { gridColor, setGridColor, color } = props
const { initEvent } = useEvent()
useEffect(() => {
console.log(gridColor, color)
console.log('GridOption useEffect 실행')
setGridColor(color.hex)
}, [color])

14
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -10,7 +10,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
import { useEvent } from '@/hooks/useEvent'
export default function SecondOption() {
export default function SecondOption(props) {
const { getMessage } = useMessage()
const { addPopup, closePopup } = usePopup()
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
@ -27,6 +27,16 @@ export default function SecondOption() {
const { initEvent } = useEvent()
// const {
// fetchSettings,
// planSizeSettingMode,
// setPlanSizeSettingMode,
// settingModalSecondOptions,
// setSettingModalSecondOptions,
// adsorptionPointMode,
// setAdsorptionPointMode,
// setAdsorptionRange,
// } = useCanvasSetting()
const {
fetchSettings,
planSizeSettingMode,
@ -36,7 +46,7 @@ export default function SecondOption() {
adsorptionPointMode,
setAdsorptionPointMode,
setAdsorptionRange,
} = useCanvasSetting()
} = props
const { option3, option4 } = settingModalSecondOptions
// 데이터를 최초 한 번만 조회

38
src/components/floor-plan/modal/setting01/SettingModal01.jsx
View File

@ -9,6 +9,7 @@ import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
import { canGridOptionSeletor } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { usePopup } from '@/hooks/usePopup'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
export default function SettingModal01(props) {
const { id } = props
@ -17,6 +18,37 @@ export default function SettingModal01(props) {
const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
const { closePopup } = usePopup()
const {
canvas,
settingModalFirstOptions,
setSettingModalFirstOptions,
settingsData,
setSettingsData,
fetchSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
settingModalSecondOptions,
setSettingModalSecondOptions,
adsorptionPointMode,
setAdsorptionPointMode,
setAdsorptionRange,
gridColor,
setGridColor,
color,
} = useCanvasSetting()
const firstProps = { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData }
const secondProps = {
fetchSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
settingModalSecondOptions,
setSettingModalSecondOptions,
adsorptionPointMode,
setAdsorptionPointMode,
setAdsorptionRange,
}
const gridProps = { gridColor, setGridColor, color }
const handleBtnClick = (num) => {
setButtonAct(num)
}
@ -46,9 +78,9 @@ export default function SettingModal01(props) {
</button>
)}
</div>
{buttonAct === 1 && <FirstOption />}
{buttonAct === 2 && <SecondOption />}
{buttonAct === 3 && <GridOption />}
{buttonAct === 1 && <FirstOption {...firstProps} />}
{buttonAct === 2 && <SecondOption {...secondProps} />}
{buttonAct === 3 && <GridOption {...gridProps} />}
</div>
</div>
</WithDraggable>

12
src/hooks/option/useCanvasSetting.js
View File

@ -19,6 +19,7 @@ import {
settingModalSecondOptionsState,
settingModalGridOptionsState,
basicSettingState,
settingsState,
} from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { globalFontAtom } from '@/store/fontAtom'
@ -46,7 +47,8 @@ export function useCanvasSetting() {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions })
const [settingsData, setSettingsData] = useRecoilState(settingsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option4 } = settingModalSecondOptions
@ -120,10 +122,6 @@ export function useCanvasSetting() {
canvas?.renderAll()
}, [corridorDimension])
useEffect(() => {
console.log('🚀 ~ useCanvasSetting ~ settingsData:', settingsData)
}, [])
// 배치면 초기설정 변경 시
useEffect(() => {
//console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
@ -132,9 +130,7 @@ export function useCanvasSetting() {
}
}, [canvasSetting])
useEffect(() => {
console.log('useCanvasSetting ------------->', settingsData)
}, [settingsData])
useEffect(() => {}, [settingsData])
//흡착점 ON/OFF 변경 시
// useEffect(() => {

5
src/store/settingAtom.js
View File

@ -77,6 +77,11 @@ export const settingModalSecondOptionsState = atom({
dangerouslyAllowMutability: true,
})
export const settingsState = atom({
key: 'settingsData',
default: { ...settingModalFirstOptionsState, ...settingModalSecondOptionsState },
})
export const settingModalGridOptionsState = atom({
key: 'settingModalGridOptions',
default: [