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

Canvas 설정 중간 Commit

Browse Source
This commit is contained in:
changkyu choi 2024-10-28 18:59:21 +09:00
parent 1dc906ed09
commit 09abb897ac
5 changed files with 602 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/floor-plan/FloorPlan.jsx
View File

@ -2,56 +2,33 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import '@/styles/contents.scss'
export default function FloorPlan({ children }) {
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
// const [menuNumber, setMenuNumber] = useState(null)
const { menuNumber, setMenuNumber } = useCanvasMenu()
const { fetchSettings } = useCanvasSetting()
const modalProps = {
menuNumber,
setMenuNumber,
}
useEffect(() => {
fetchSettings()
}, [objectNo])
// Canvas Setting 조회
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
useEffect(() => {
setMenuNumber(1)
}, [])
return (
<>

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

@ -1,210 +1,216 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { useFirstOption } from '@/hooks/option/useFirstOption'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useMessage } from '@/hooks/useMessage'
//import { useRecoilState, useRecoilValue } from 'recoil'
//import { settingModalSecondOptionsState } from '@/store/settingAtom'
//import { useAxios } from '@/hooks/useAxios'
//import { useSwal } from '@/hooks/useSwal'
//import { setSurfaceShapePattern } from '@/util/canvas-util'
//import { canvasState } from '@/store/canvasAtom'
//import { POLYGON_TYPE } from '@/common/common'
export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { getMessage } = useMessage()
const { get, post } = useAxios()
const { swalFire } = useSwal()
const canvas = useRecoilValue(canvasState)
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
//const { option1, option2, dimensionDisplay } = settingModalFirstOptions
//const { option3, option4 } = settingModalSecondOptions
//const { get, post } = useAxios()
//const { swalFire } = useSwal()
//const canvas = useRecoilValue(canvasState)
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('FirstOption useEffect 실행')
fetchSettings()
//fetchSettings()
//frontSettings()
}, [objectNo])
// Canvas Setting 조회 및 초기화
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
// // Canvas Setting 조회 및 초기화
// const fetchSettings = async () => {
// try {
// const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
// const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
// const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
// // 데이터 설정
// setSettingModalFirstOptions({
// option1: optionData1,
// option2: optionData2,
// dimensionDisplay: optionData5,
// })
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
// setSettingModalSecondOptions({
// option3: optionData3,
// option4: optionData4,
// })
// } catch (error) {
// console.error('Data fetching error:', error)
// }
// }
const onClickOption = async (option) => {
option.selected = !option.selected
// const onClickOption = async (option) => {
// option.selected = !option.selected
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
setSettingModalSecondOptions({ option3, option4 })
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// setSettingModalSecondOptions({ option3, option4 })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
// try {
// // 서버에 전송할 데이터
// const dataToSend = {
// firstOption1: option1.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption2: option2.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption3: dimensionDisplay.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// // secondOption1: secondOptions[0].option1.map((item) => ({
// // name: item.id,
// // name: item.name,
// // // 필요한 경우 데이터 항목 추가
// // })),
// secondOption2: option4.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// }
const patternData = {
objectNo,
//디스플레이 설정(다중)
allocDisplay: dataToSend.firstOption1[0].selected,
outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
lineDisplay: dataToSend.firstOption1[3].selected,
wordDisplay: dataToSend.firstOption1[4].selected,
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
//차수 표시(다건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
//흡착범위 설정(단건)
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
// const patternData = {
// objectNo,
// //디스플레이 설정(다중)
// allocDisplay: dataToSend.firstOption1[0].selected,
// outlineDisplay: dataToSend.firstOption1[1].selected,
// gridDisplay: dataToSend.firstOption1[2].selected,
// lineDisplay: dataToSend.firstOption1[3].selected,
// wordDisplay: dataToSend.firstOption1[4].selected,
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
// flowDisplay: dataToSend.firstOption1[6].selected,
// trestleDisplay: dataToSend.firstOption1[7].selected,
// totalDisplay: dataToSend.firstOption1[8].selected,
// //차수 표시(다건)
// corridorDimension: dataToSend.firstOption3[0].selected,
// realDimension: dataToSend.firstOption3[1].selected,
// noneDimension: dataToSend.firstOption3[2].selected,
// //화면 표시(다중)
// onlyBorder: dataToSend.firstOption2[0].selected,
// lineHatch: dataToSend.firstOption2[1].selected,
// allPainted: dataToSend.firstOption2[2].selected,
// //흡착범위 설정(단건)
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
// }
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
}
// // HTTP POST 요청 보내기
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// }
const onClickOnlyOne = async (item) => {
//화면 표시
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 onClickOnlyOne = async (item) => {
// //화면 표시
// 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)
// const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
polygons.forEach((polygon) => {
setSurfaceShapePattern(polygon, item.column)
})
// polygons.forEach((polygon) => {
// setSurfaceShapePattern(polygon, item.column)
// })
//치수 표시
} else {
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id
return option
})
}
// //치수 표시
// } else {
// const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
// option.selected = option.id === item.id
// return option
// })
// }
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
// try {
// // 서버에 전송할 데이터
// const dataToSend = {
// firstOption1: option1.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption2: option2.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption3: dimensionDisplay.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// // secondOption1: secondOptions[0].option1.map((item) => ({
// // name: item.id,
// // name: item.name,
// // // 필요한 경우 데이터 항목 추가
// // })),
// secondOption2: option4.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// }
const patternData = {
objectNo,
//디스플레이 설정(다중)
allocDisplay: dataToSend.firstOption1[0].selected,
outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
lineDisplay: dataToSend.firstOption1[3].selected,
wordDisplay: dataToSend.firstOption1[4].selected,
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
//차수 표시(다건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
//흡착범위 설정(단건)
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
// const patternData = {
// objectNo,
// //디스플레이 설정(다중)
// allocDisplay: dataToSend.firstOption1[0].selected,
// outlineDisplay: dataToSend.firstOption1[1].selected,
// gridDisplay: dataToSend.firstOption1[2].selected,
// lineDisplay: dataToSend.firstOption1[3].selected,
// wordDisplay: dataToSend.firstOption1[4].selected,
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
// flowDisplay: dataToSend.firstOption1[6].selected,
// trestleDisplay: dataToSend.firstOption1[7].selected,
// totalDisplay: dataToSend.firstOption1[8].selected,
// //차수 표시(다건)
// corridorDimension: dataToSend.firstOption3[0].selected,
// realDimension: dataToSend.firstOption3[1].selected,
// noneDimension: dataToSend.firstOption3[2].selected,
// //화면 표시(다중)
// onlyBorder: dataToSend.firstOption2[0].selected,
// lineHatch: dataToSend.firstOption2[1].selected,
// allPainted: dataToSend.firstOption2[2].selected,
// //흡착범위 설정(단건)
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
// }
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
}
// // HTTP POST 요청 보내기
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// }
return (
<>
@ -225,7 +231,7 @@ export default function FirstOption() {
<div className="flex-check-box for-line">
{settingModalFirstOptions &&
settingModalFirstOptions.dimensionDisplay.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
@ -237,7 +243,7 @@ export default function FirstOption() {
<div className="flex-check-box for-line">
{settingModalFirstOptions &&
settingModalFirstOptions.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>

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

@ -1,143 +1,148 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import FontSetting from '@/components/common/font/FontSetting'
import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
//import { useAxios } from '@/hooks/useAxios'
//import { useSwal } from '@/hooks/useSwal'
// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
export default function SecondOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
//const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
// const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
// const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
// const { option1, option2, dimensionDisplay } = settingModalFirstOptions
// const { option3, option4 } = settingModalSecondOptions
// const { get, post } = useAxios()
// const { swalFire } = useSwal()
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage()
const { get, post } = useAxios()
const { swalFire } = useSwal()
const { addPopup, closePopup, closePopups } = usePopup()
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('SecondOption useEffect 실행')
fetchSettings()
//fetchSettings()
}, [objectNo])
// Canvas Setting 조회 및 초기화
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
selected: res[item.column],
}))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
// const fetchSettings = async () => {
// try {
// const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
// const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
// const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
// const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
// setSettingModalFirstOptions({
// option1: optionData1,
// option2: optionData2,
// dimensionDisplay: optionData5,
// })
// setSettingModalSecondOptions({
// option3: optionData3,
// option4: optionData4,
// })
// } catch (error) {
// console.error('Data fetching error:', error)
// }
// }
const onClickOption = async (option) => {
// option4에서 한 개만 선택 가능하도록 처리
const updatedOption4 = option4.map((item) =>
item.id === option.id
? { ...item, selected: true }
: {
...item,
selected: false,
},
)
// const onClickOption = async (option) => {
// // option4에서 한 개만 선택 가능하도록 처리
// const updatedOption4 = option4.map((item) =>
// item.id === option.id
// ? { ...item, selected: true }
// : {
// ...item,
// selected: false,
// },
// )
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// setSettingModalSecondOptions({ option3, option4: updatedOption4 })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option3.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: updatedOption4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
allocDisplay: dataToSend.firstOption1[0].selected,
outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
lineDisplay: dataToSend.firstOption1[3].selected,
wordDisplay: dataToSend.firstOption1[4].selected,
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
//차수 표시(다건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
//흡착범위 설정(단건)
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
// try {
// // 서버에 전송할 데이터
// const dataToSend = {
// firstOption1: option1.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption2: option2.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// firstOption3: dimensionDisplay.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// // secondOption1: secondOptions[0].option3.map((item) => ({
// // name: item.id,
// // name: item.name,
// // // 필요한 경우 데이터 항목 추가
// // })),
// secondOption2: updatedOption4.map((item) => ({
// column: item.column,
// selected: item.selected,
// })),
// }
// const patternData = {
// objectNo,
// //디스플레이 설정(다중)
// allocDisplay: dataToSend.firstOption1[0].selected,
// outlineDisplay: dataToSend.firstOption1[1].selected,
// gridDisplay: dataToSend.firstOption1[2].selected,
// lineDisplay: dataToSend.firstOption1[3].selected,
// wordDisplay: dataToSend.firstOption1[4].selected,
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
// flowDisplay: dataToSend.firstOption1[6].selected,
// trestleDisplay: dataToSend.firstOption1[7].selected,
// totalDisplay: dataToSend.firstOption1[8].selected,
// //차수 표시(다건)
// corridorDimension: dataToSend.firstOption3[0].selected,
// realDimension: dataToSend.firstOption3[1].selected,
// noneDimension: dataToSend.firstOption3[2].selected,
// //화면 표시(다중)
// onlyBorder: dataToSend.firstOption2[0].selected,
// lineHatch: dataToSend.firstOption2[1].selected,
// allPainted: dataToSend.firstOption2[2].selected,
// //흡착범위 설정(단건)
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
// }
// // HTTP POST 요청 보내기
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// setAdsorptionRange(option.range)
// }
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
setAdsorptionRange(option.range)
}
let dimensionId = null
let fontId = null
let planSizeId = null
@ -192,16 +197,6 @@ export default function SecondOption() {
setShowFontSettingModal(false)
switch (type) {
case 'dimensionLine':
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
}
break
case 'font1': {
//문자 글꼴변경
setShowFontSettingModal(true)
@ -210,6 +205,7 @@ export default function SecondOption() {
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
break
}
case 'font2': {
//흐름 방향 글꼴 변경
setShowFontSettingModal(true)
@ -218,6 +214,7 @@ export default function SecondOption() {
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
break
}
case 'font3': {
//치수 글꼴변경
setShowFontSettingModal(true)
@ -226,17 +223,34 @@ export default function SecondOption() {
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
break
}
case 'font4': //회로번호 글꼴변경
case 'font4': {
//회로번호 글꼴변경
setShowFontSettingModal(true)
fontProps.type = 'circuitNumberText'
fontProps.id = fontId
addPopup(fontId, 2, <FontSetting {...fontProps} />)
break
case 'planSize':
setShowPlanSizeSettingModal(true)
}
case 'dimensionLine': {
//치수선 설정
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
}
break
}
case 'planSize': {
//도면크기 설정
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
break
}
}
}

268
src/hooks/option/useCanvasSetting.js Normal file
View File

@ -0,0 +1,268 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { POLYGON_TYPE } from '@/common/common'
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get, post } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
useEffect(() => {
console.log('useCanvasSetting useEffect 실행1')
fetchSettings()
}, [objectNo])
useEffect(() => {
console.log('useCanvasSetting useEffect 실행2')
//fetchSettings()
//onClickOption()
//fetchSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
// 옵션 클릭 후 저장
const onClickOption = async (item) => {
//치수 표시(단 건 선택)
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
console.log('치수 표시 ', item)
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') {
console.log('화면 표시 ', item)
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 if (
item.column === 'adsorpRangeSmall' ||
item.column === 'adsorpRangeSmallSemi' ||
item.column === 'adsorpRangeMedium' ||
item.column === 'adsorpRangeLarge'
) {
console.log('화면 표시2 ', item, option4)
// option4에서 한 개만 선택 가능하도록 처리
const updatedOption4 = option4.map((option) =>
option.id === item.id
? { ...option, selected: true }
: {
...option,
selected: false,
},
)
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
//디스플레이 설정(다 건 선택)
} else {
console.log('디스플레이 설정 ', item)
item.selected = !item.selected
}
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
allocDisplay: dataToSend.firstOption1[0].selected,
outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
lineDisplay: dataToSend.firstOption1[3].selected,
wordDisplay: dataToSend.firstOption1[4].selected,
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
//차수 표시(단 건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(단 건)
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
//흡착범위 설정(단 건)
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
console.log('patternData ', patternData)
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
// Canvas 디스플레이 설정 시 해당 옵션 적용
frontSettings()
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
setAdsorptionRange(item.range)
}
// Canvas 디스플레이 설정 시 해당 옵션 적용
const frontSettings = async () => {
const option1 = settingModalFirstOptions.option1
// 'allocDisplay' 할당 표시
// 'outlineDisplay' 외벽선 표시 'outerLine', 'wallLine'
// 'gridDisplay' 그리드 표시 'lindGrid', 'dotGrid'
// 'lineDisplay' 지붕선 표시 'roof', 'roofBase'
// 'wordDisplay' 문자 표시
// 'circuitNumDisplay' 회로번호 표시
// 'flowDisplay' 흐름방향 표시 'arrow'
// 'trestleDisplay' 가대 표시
// 'totalDisplay' 집계표 표시
let optionName //옵션명
let optionSelected //옵션상태
for (let i = 0; i < option1.length; i++) {
switch (option1[i].column) {
case 'allocDisplay': //할당 표시
optionName = ['1']
break
case 'outlineDisplay': //외벽선 표시
optionName = ['outerLine', 'wallLine']
break
case 'gridDisplay': //그리드 표시
optionName = ['lindGrid', 'dotGrid']
break
case 'lineDisplay': //지붕선 표시
optionName = ['roof', 'roofBase']
break
case 'wordDisplay': //문자 표시
optionName = ['6']
break
case 'circuitNumDisplay': //회로번호 표시
optionName = ['7']
break
case 'flowDisplay': //흐름방향 표시
optionName = ['arrow']
break
case 'trestleDisplay': //가대 표시
optionName = ['8']
break
case 'totalDisplay': //집계표 표시
optionName = ['9']
break
}
// 표시 선택 상태(true/false)
optionSelected = option1[i].selected
canvas
.getObjects()
.filter((obj) => optionName.includes(obj.name))
//.filter((obj) => obj.name === optionName)
.forEach((obj) => {
obj.set({ visible: optionSelected })
//obj.set({ visible: !obj.visible })
})
// console.log(
// 'optionName',
// optionName,
// canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
// )
}
}
return {
settingModalFirstOptions,
setSettingModalFirstOptions,
settingModalSecondOptions,
setSettingModalSecondOptions,
fetchSettings,
onClickOption,
frontSettings,
adsorptionPointMode,
setAdsorptionPointMode,
}
}

1
src/hooks/option/useCanvasSettingController.js
View File

@ -46,6 +46,7 @@ export const useCanvasSettingController = () => {
}
}
//
const onClickOption = async (option) => {
option.selected = !option.selected