From 09abb897ac2e4b28b610b334ddaafa7f1833f25c Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Mon, 28 Oct 2024 18:59:21 +0900 Subject: [PATCH] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=EC=A4=91?= =?UTF-8?q?=EA=B0=84=20Commit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/FloorPlan.jsx | 37 +- .../modal/setting01/FirstOption.jsx | 372 +++++++++--------- .../modal/setting01/SecondOption.jsx | 260 ++++++------ src/hooks/option/useCanvasSetting.js | 268 +++++++++++++ .../option/useCanvasSettingController.js | 1 + 5 files changed, 602 insertions(+), 336 deletions(-) create mode 100644 src/hooks/option/useCanvasSetting.js diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index a2a5abc3..5639b93f 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -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 ( <> diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 6373d8a8..db721dd5 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -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() {
{settingModalFirstOptions && settingModalFirstOptions.dimensionDisplay.map((item) => ( - @@ -237,7 +243,7 @@ export default function FirstOption() {
{settingModalFirstOptions && settingModalFirstOptions.option2.map((item) => ( - diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index ceccce5e..ff8d61db 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -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, ) - } else { - setShowDimensionLineSettingModal(false) - closePopup(dimensionId) - } - - break case 'font1': { //문자 글꼴변경 setShowFontSettingModal(true) @@ -210,6 +205,7 @@ export default function SecondOption() { addPopup(fontId + 1, 2, ) break } + case 'font2': { //흐름 방향 글꼴 변경 setShowFontSettingModal(true) @@ -218,6 +214,7 @@ export default function SecondOption() { addPopup(fontId + 2, 2, ) break } + case 'font3': { //치수 글꼴변경 setShowFontSettingModal(true) @@ -226,17 +223,34 @@ export default function SecondOption() { addPopup(fontId + 3, 2, ) break } - case 'font4': //회로번호 글꼴변경 + + case 'font4': { + //회로번호 글꼴변경 setShowFontSettingModal(true) fontProps.type = 'circuitNumberText' fontProps.id = fontId addPopup(fontId, 2, ) break - case 'planSize': - setShowPlanSizeSettingModal(true) + } + case 'dimensionLine': { + //치수선 설정 + if (!showDimensionLineSettingModal) { + setShowDimensionLineSettingModal(true) + addPopup(dimensionId, 2, ) + } else { + setShowDimensionLineSettingModal(false) + closePopup(dimensionId) + } + break + } + + case 'planSize': { + //도면크기 설정 + setShowPlanSizeSettingModal(true) addPopup(planSizeId, 2, ) break + } } } diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js new file mode 100644 index 00000000..2856b5c2 --- /dev/null +++ b/src/hooks/option/useCanvasSetting.js @@ -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, + } +} diff --git a/src/hooks/option/useCanvasSettingController.js b/src/hooks/option/useCanvasSettingController.js index 72a590eb..48db6c08 100644 --- a/src/hooks/option/useCanvasSettingController.js +++ b/src/hooks/option/useCanvasSettingController.js @@ -46,6 +46,7 @@ export const useCanvasSettingController = () => { } } + // const onClickOption = async (option) => { option.selected = !option.selected