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

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

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