From 2e01d1eccfc7fa1eadb7ac086e3495e053a55411 Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Tue, 10 Dec 2024 11:33:30 +0900 Subject: [PATCH] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/color-picker/ColorPickerModal.jsx | 24 ++- .../floor-plan/modal/grid/DotLineGrid.jsx | 38 ++-- .../modal/setting01/FirstOption.jsx | 19 +- .../floor-plan/modal/setting01/GridOption.jsx | 16 +- .../modal/setting01/SecondOption.jsx | 54 ++++-- .../modal/setting01/SettingModal01.jsx | 20 +- .../dimensionLine/DimensionLineSetting.jsx | 23 ++- .../setting01/planSize/PlanSizeSetting.jsx | 11 +- src/hooks/option/useCanvasSetting.js | 183 ++++++++---------- 9 files changed, 243 insertions(+), 145 deletions(-) diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 37a5343c..62abd2e2 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -8,13 +8,28 @@ import { contextPopupPositionState } from '@/store/popupAtom' export default function ColorPickerModal(props) { const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴 - const { isShow, setIsShow, pos = contextPopupPosition, color, setColor, id, isConfig = false } = props //color = '#ff0000' + const { + isShow, + setIsShow, + pos = contextPopupPosition, + color, + setColor, + id, + name, + isConfig = false, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, + } = props //color = '#ff0000' const [originColor, setOriginColor] = useState(color) const { getMessage } = useMessage() const { closePopup } = usePopup() useEffect(() => { setOriginColor(originColor) + //치수선색설정 아닐 때만 바로 저장 실행 + if (name !== 'DimensionLineColor') setSettingsDataSave({ ...settingsData }) }, [isShow]) return ( @@ -49,6 +64,13 @@ export default function ColorPickerModal(props) { if (setColor) setColor(originColor) if (setIsShow) setIsShow(false) + //치수선색설정 아닐 때만 바로 저장 실행 + if (name !== 'DimensionLineColor') + setSettingsData({ + ...settingsData, + color: originColor, + }) + closePopup(id, isConfig) }} > diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index 3928353c..e9b5197e 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -1,6 +1,6 @@ import WithDraggable from '@/components/common/draggable/WithDraggable' import QSelectBox from '@/components/common/select/QSelectBox' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { canvasState } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' @@ -17,27 +17,26 @@ const TYPE = { export default function DotLineGrid(props) { // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state //const interval = useRecoilValue(dotLineIntervalSelector) - const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props + const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props const canvas = useRecoilValue(canvasState) const { getMessage } = useMessage() const { closePopup } = usePopup() const { swalFire } = useSwal() - const { - selectOption, - setSelectOption, - SelectOptions, - currentSetting, - setCurrentSetting, - dotLineGridSettingState, - setSettingModalGridOptions, - setDotLineGridSettingState, - } = useCanvasSetting() + const [selectOption, setSelectOption] = useState() + + const { SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, setSettingModalGridOptions, setDotLineGridSettingState } = + useCanvasSetting() // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('DotLineGrid useEffect 실행') + setSettingsDataSave({ ...settingsData }) + + // dimension 값에 맞는 옵션을 선택 + const matchedOption = SelectOptions.find((option) => option.value == currentSetting.INTERVAL.dimension) + setSelectOption(matchedOption) return () => { setSettingModalGridOptions((prev) => { @@ -84,11 +83,24 @@ export default function DotLineGrid(props) { }, DOT: currentSetting.DOT, LINE: currentSetting.LINE, - flag: true, + //flag: true, } //setDotLineGridSettingState({ ...currentSetting }) }) + setSettingsData({ + ...settingsData, + INTERVAL: { + type: currentSetting.INTERVAL.type, + horizontalInterval: currentSetting.INTERVAL.horizontalInterval, + verticalInterval: currentSetting.INTERVAL.verticalInterval, + ratioInterval: currentSetting.INTERVAL.ratioInterval, + dimension: currentSetting.INTERVAL.dimension, + }, + DOT: currentSetting.DOT, + LINE: currentSetting.LINE, + }) + setIsShow(false) closePopup(id, isConfig) } diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index f3ef9b8b..a9532efb 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -8,21 +8,22 @@ import { useEvent } from '@/hooks/useEvent' export default function FirstOption(props) { const { getMessage } = useMessage() // const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting() - let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = props + let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props const { option1, option2, dimensionDisplay } = settingModalFirstOptions const { initEvent } = useEvent() // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('FirstOption useEffect 실행') + setSettingsDataSave({ ...settingsData }) }, []) const onClickOption = async (item) => { - //치수 표시(단 건 선택) let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay let option1 = settingModalFirstOptions?.option1 let option2 = settingModalFirstOptions?.option2 + //치수 표시(단 건 선택) if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') { dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.map((option) => { option.selected = option.id === item.id @@ -33,9 +34,9 @@ export default function FirstOption(props) { //화면 표시(단 건 선택) } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') { - option2 = settingModalFirstOptions?.option2.map((option2) => { - option2.selected = option2.id === item.id - return option2 + option2 = settingModalFirstOptions?.option2.map((option) => { + option.selected = option.id === item.id + return option }) // setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] }) @@ -47,11 +48,11 @@ export default function FirstOption(props) { }) //디스플레이 설정 표시(단 건 선택) } else { - option1 = settingModalFirstOptions?.option1.map((opt) => { - if (opt.id === item.id) { - opt.selected = !opt.selected + option1 = settingModalFirstOptions?.option1.map((option) => { + if (option.id === item.id) { + option.selected = !option.selected } - return opt + return option }) // setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] }) diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index 1d40ddbc..b5b61acc 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -28,8 +28,13 @@ export default function GridOption(props) { const { initEvent } = useEvent() + const { SelectOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = useCanvasSetting() + useEffect(() => { console.log('GridOption useEffect 실행') + }, []) + + useEffect(() => { setGridColor(color.hex) }, [color]) @@ -96,7 +101,7 @@ export default function GridOption(props) { } useEffect(() => { - console.log('🚀 ~ useEffect ~ initEvent:') + //console.log('🚀 ~ useEffect ~ initEvent:') initEvent() }, [gridOptions]) @@ -108,10 +113,15 @@ export default function GridOption(props) { x: 845, y: 180, }, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } const colorPickerProps = { id: colorId, + name: 'gridOptionColor', color: gridColor, setColor: setGridColor, isShow: showColorPickerModal, @@ -121,6 +131,10 @@ export default function GridOption(props) { x: 785, y: 180, }, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } return ( diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index df60763d..5b11cd5a 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -37,6 +37,7 @@ export default function SecondOption(props) { // setAdsorptionPointMode, // setAdsorptionRange, // } = useCanvasSetting() + const { fetchSettings, planSizeSettingMode, @@ -46,12 +47,17 @@ export default function SecondOption(props) { adsorptionPointMode, setAdsorptionPointMode, setAdsorptionRange, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } = props const { option3, option4 } = settingModalSecondOptions // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('SecondOption useEffect 실행') + setSettingsDataSave({ ...settingsData }) }, []) const handlePopup = (type) => { @@ -142,18 +148,24 @@ export default function SecondOption(props) { return { ...prev, [fontProps.type]: { - // fontFamily: font.fontFamily.value, - // fontWeight: font.fontWeight.value, - // fontSize: font.fontSize.value, - // fontColor: font.fontColor.value, fontFamily: font.fontFamily, fontWeight: font.fontWeight, fontSize: font.fontSize, fontColor: font.fontColor, }, - fontFlag: true, + //fontFlag: true, } }) + + setSettingsData({ + ...settingsData, + [fontProps.type]: { + fontFamily: font.fontFamily, + fontWeight: font.fontWeight, + fontSize: font.fontSize, + fontColor: font.fontColor, + }, + }) } const fontProps = { @@ -168,6 +180,10 @@ export default function SecondOption(props) { id: dimensionId, isShow: showDimensionLineSettingModal, setIsShow: setShowDimensionLineSettingModal, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } const planSizeProps = { @@ -177,9 +193,16 @@ export default function SecondOption(props) { isShow: showPlanSizeSettingModal, setIsShow: setShowPlanSizeSettingModal, pos: { x: 1025, y: 180 }, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } const onClickOption = async (item) => { + let option4Data = settingModalSecondOptions?.option4 + let adsorpPointData = adsorptionPointMode.adsorptionPoint + //흡착범위 설정(단 건 선택) if ( item.column === 'adsorpRangeSmall' || @@ -189,21 +212,26 @@ export default function SecondOption(props) { ) { // option4에서 한 개만 선택 가능하도록 처리 //const updatedOption4 = option4.map((option) => (option.id === item.id ? { ...option, selected: true } : { ...option, selected: false })) - const options = settingModalSecondOptions?.option4.map((option4) => { - option4.selected = option4.id === item.id - return option4 + option4Data = settingModalSecondOptions?.option4.map((option) => { + option.selected = option.id === item.id + return option }) - setSettingModalSecondOptions({ ...settingModalSecondOptions, option3, option4, fontFlag: true }) + //사용여부 확인 필요 + setAdsorptionRange(item.range) + //setAdsorptionRange(50) + + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: adsorpPointData }) } else if (item === 'adsorpPoint') { - setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorptionPointMode.adsorptionPoint, fontFlag: true }) + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorpPointData }) + adsorpPointData = !adsorpPointData } - //setAdsorptionRange(item.range) //사용여부 확인 필요 - setAdsorptionRange(50) + + setSettingsData({ ...settingsData, option4: [...option4Data], adsorptionPoint: adsorpPointData }) } useEffect(() => { - console.log('🚀 ~ useEffect ~ initEvent:') + //console.log('🚀 ~ useEffect ~ initEvent:') initEvent() }, [adsorptionPointMode]) diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index 73ce8fa2..f5e6e3ca 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -24,7 +24,11 @@ export default function SettingModal01(props) { setSettingModalFirstOptions, settingsData, setSettingsData, + settingsDataSave, + setSettingsDataSave, fetchSettings, + globalFont, + setGlobalFont, planSizeSettingMode, setPlanSizeSettingMode, settingModalSecondOptions, @@ -36,9 +40,19 @@ export default function SettingModal01(props) { setGridColor, color, } = useCanvasSetting() - const firstProps = { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } + const firstProps = { + canvas, + settingModalFirstOptions, + setSettingModalFirstOptions, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, + } const secondProps = { fetchSettings, + globalFont, + setGlobalFont, planSizeSettingMode, setPlanSizeSettingMode, settingModalSecondOptions, @@ -46,6 +60,10 @@ export default function SettingModal01(props) { adsorptionPointMode, setAdsorptionPointMode, setAdsorptionRange, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } const gridProps = { gridColor, setGridColor, color } diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 63581d5d..48f3ccf0 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -33,7 +33,7 @@ const fontSizes = [ ] export default function DimensionLineSetting(props) { - const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props + const { isShow, setIsShow, id, pos = { x: 985, y: 180 }, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props const { addPopup, closePopup, closePopups } = usePopup() const pixels = Array.from({ length: 5 }).map((_, index) => { return { id: index, name: index + 1, value: index + 1 } @@ -111,11 +111,16 @@ export default function DimensionLineSetting(props) { color: originColor, setColor: setOriginColor, id: colorModalId, + name: 'DimensionLineColor', isConfig: true, pos: { x: 495, y: 180, }, + settingsData, + setSettingsData, + settingsDataSave, + setSettingsDataSave, } const fontProps = { @@ -157,9 +162,10 @@ export default function DimensionLineSetting(props) { fontSize: originFontSize, fontColor: originFontColor, }, - fontFlag: true, + //fontFlag: true, } }) + setDimensionLineSettings((prev) => { return { ...prev, @@ -167,6 +173,19 @@ export default function DimensionLineSetting(props) { color: originColor, } }) + + setSettingsData({ + ...settingsData, + dimensionLineText: { + fontFamily: originFont, + fontWeight: originFontWeight, + fontSize: originFontSize, + fontColor: originFontColor, + }, + pixel: originPixel.name, + color: originColor, + }) + setIsShow(false) closePopups([fontModalId, colorModalId, id]) } diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx index e65d28ca..8de04e1d 100644 --- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx +++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx @@ -8,7 +8,7 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' import { onlyNumberInputChange } from '@/util/input-utils' export default function PlanSizeSetting(props) { - const { setIsShow, horizon, vertical, id, pos = { x: 985, y: 180 } } = props + const { setIsShow, horizon, vertical, id, pos = { x: 985, y: 180 }, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props const { closePopup } = usePopup() const { getMessage } = useMessage() @@ -26,10 +26,15 @@ export default function PlanSizeSetting(props) { ...prev, originHorizon: Number(planSizeSettingMode.originHorizon), originVertical: Number(planSizeSettingMode.originVertical), - flag: true, } }) + setSettingsData({ + ...settingsData, + originHorizon: Number(planSizeSettingMode.originHorizon), + originVertical: Number(planSizeSettingMode.originVertical), + }) + canvas.setWidth(planSizeSettingMode.originHorizon) canvas.setHeight(planSizeSettingMode.originVertical) canvas.renderAll() @@ -40,7 +45,7 @@ export default function PlanSizeSetting(props) { const changeInput = (value, e) => { const { name } = e.target - console.log('name', name, value) + setPlanSizeSettingMode((prev) => { return { ...prev, diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 77ff8bc3..032361e0 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -48,28 +48,15 @@ export function useCanvasSetting() { const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) - // const [settingsData, setSettingsData] = useRecoilState(settingsState) - const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions }) - const { option1, option2, dimensionDisplay } = settingModalFirstOptions - const { option4 } = settingModalSecondOptions - - const corridorDimension = useRecoilValue(corridorDimensionSelector) - - const globalLocaleState = useRecoilValue(globalLocaleStore) - const { get, post } = useAxios(globalLocaleState) - const { getMessage } = useMessage() - const { swalFire } = useSwal() - - const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) - const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState) - const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState) - //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState) - const [selectedFont, setSelectedFont] = useState() const [selectedFontWeight, setSelectedFontWeight] = useState() const [selectedFontSize, setSelectedFontSize] = useState() const [selectedFontColor, setSelectedFontColor] = useState() const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) + + const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) + const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState) + const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState) const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) @@ -80,7 +67,26 @@ export function useCanvasSetting() { ) const [gridColor, setGridColor] = useRecoilState(gridColorState) const [color, setColor] = useColor(gridColor ?? '#FF0000') - const [colorTemp, setColorTemp] = useState() + + const [settingsData, setSettingsData] = useState({ + ...settingModalFirstOptions, + ...settingModalSecondOptions, + ...globalFont, + ...dotLineGridSetting, + ...planSizeSettingMode, + ...dimensionLineSettings, + ...color, + }) + const [settingsDataSave, setSettingsDataSave] = useState() + const { option1, option2, dimensionDisplay } = settingModalFirstOptions + const { option4 } = settingModalSecondOptions + + const corridorDimension = useRecoilValue(corridorDimensionSelector) + + const globalLocaleState = useRecoilValue(globalLocaleStore) + const { get, post } = useAxios(globalLocaleState) + const { getMessage } = useMessage() + const { swalFire } = useSwal() const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState) @@ -91,7 +97,6 @@ export function useCanvasSetting() { { id: 3, name: '1/4', value: 1 / 4 }, { id: 4, name: '1/10', value: 1 / 10 }, ] - const [selectOption, setSelectOption] = useState(SelectOptions[0]) useEffect(() => { if (!canvas) { @@ -132,58 +137,10 @@ export function useCanvasSetting() { }, [canvasSetting]) useEffect(() => { - console.log('🚀 ~ useEffect ~ settingsData:', settingsData) + console.log('🚀 ~ useEffect ~ settingsDataSave:', settingsDataSave) + if (settingsDataSave !== undefined) onClickOption2() }, [settingsData]) - //흡착점 ON/OFF 변경 시 - // useEffect(() => { - // //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo) - // if (adsorptionPointMode.fontFlag) { - // onClickOption2() - // } - // }, [adsorptionPointMode]) - - // 1 과 2 변경 시 - // useEffect(() => { - // //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo) - // if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) { - // onClickOption2() - // } - // }, [settingModalFirstOptions, settingModalSecondOptions]) - - // 글꼴 변경 시 - // useEffect(() => { - // //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo) - // if (globalFont.fontFlag) { - // onClickOption2() - // } - // }, [globalFont]) - - // 도명크기 변경 시 - // useEffect(() => { - // //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo) - // if (planSizeSettingMode.flag) { - // onClickOption2() - // } - // }, [planSizeSettingMode]) - - // 점/선 그리드 변경 시 - // useEffect(() => { - // //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag) - // if (dotLineGridSetting.flag) { - // onClickOption2() - // } - // }, [dotLineGridSetting]) - - // 그리드 색 설정 변경 시 - // useEffect(() => { - // console.log('useCanvasSetting 실행7', colorTemp, gridColor) - // //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행 - // if (colorTemp !== undefined && colorTemp !== gridColor) { - // onClickOption2() - // } - // }, [color]) - const getFonts = (itemValue) => { if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' } const data = [ @@ -357,18 +314,13 @@ export function useCanvasSetting() { const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item })) //흡착점 ON/OFF - setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false }) + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint }) //치수선 설정 setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor }) //도면크기 설정 - setPlanSizeSettingMode({ - ...planSizeSettingMode, - originHorizon: res.originHorizon, - originVertical: res.originVertical, - flag: false, - }) + setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical }) // 데이터 설정 setSettingModalFirstOptions({ @@ -376,13 +328,13 @@ export function useCanvasSetting() { option1: optionData1, option2: optionData2, dimensionDisplay: optionData5, - fontFlag: false, + //fontFlag: false, }) setSettingModalSecondOptions({ ...settingModalSecondOptions, option3: optionData3, option4: optionData4, - fontFlag: false, + //fontFlag: false, }) const fontPatternData = { @@ -422,7 +374,7 @@ export function useCanvasSetting() { fontColor: getFontColors(res.lengthFontColor), }, //글꼴 설정 Flag - fontFlag: false, + //fontFlag: false, } //조회된 글꼴 데이터 set @@ -439,55 +391,45 @@ export function useCanvasSetting() { }, DOT: res.dotGridDisplay, LINE: res.lineGridDisplay, - flag: false, } - const matchedOption = SelectOptions.find((option) => option.value == res.gridDimen) - - // dimension 값에 맞는 옵션을 선택 - setSelectOption(matchedOption) - setDotLineGridSettingState(patternData) //setCurrentSetting(patternData) //그리드 색 설정 setGridColor(res.gridColor) - setColorTemp(res.gridColor) } else { //조회된 글꼴 데이터가 없는 경우 //흡착점 ON/OFF - setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false, fontFlag: false }) + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false }) //치수선 설정 setDimensionLineSettings({ ...dimensionLineSettings }) //도면크기 설정 - setPlanSizeSettingMode({ - ...planSizeSettingMode, - flag: false, - }) + setPlanSizeSettingMode({ ...planSizeSettingMode }) // 데이터 설정 setSettingModalFirstOptions({ ...settingModalFirstOptions, - fontFlag: false, + //fontFlag: false, }) setSettingModalSecondOptions({ ...settingModalSecondOptions, - fontFlag: false, + //fontFlag: false, }) - setGlobalFont({ ...globalFont, fontFlag: false }) + setGlobalFont({ ...globalFont }) //점/선 그리드 - setDotLineGridSettingState({ ...defaultDotLineGridSetting, flag: false }) + setDotLineGridSettingState({ ...defaultDotLineGridSetting }) //setCurrentSetting({ ...defaultDotLineGridSetting }) //그리드 색 설정 setGridColor('#FF0000') - setColorTemp('#FF0000') } + frontSettings() } catch (error) { console.error('Data fetching error:', error) @@ -513,8 +455,31 @@ export function useCanvasSetting() { secondOption2: option4.map((item) => ({ column: item.column, selected: item.selected, + range: item.range, })), } + + // const option1Array = dataToSend.firstOption1.map((item) => ({ + // allocDisplay: item.selected, + // outlineDisplay: item.selected, + // gridDisplay: item.selected, + // lineDisplay: item.selected, + // wordDisplay: item.selected, + // circuitNumDisplay: item.selected, + // flowDisplay: item.selected, + // trestleDisplay: item.selected, + // imageDisplay: item.selected, + // totalDisplay: item.selected, + // })) + // console.log('option1Array ', option1Array) + + // const option2Array = dataToSend.firstOption2.map((item) => ({ + // corridorDimension: item.selected, + // realDimension: item.selected, + // noneDimension: item.selected, + // })) + // console.log('option2Array ', option2Array) + // console.log('globalFont', globalFont) const patternData = { //견적서 번호 @@ -543,6 +508,23 @@ export function useCanvasSetting() { adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, adsorpRangeMedium: dataToSend.secondOption2[2].selected, adsorpRangeLarge: dataToSend.secondOption2[3].selected, + + //adsorptionRange: dataToSend.secondOption2[0].range, + + // //디스플레이 설정(다중) + // option1Array, + // //차수 표시(단 건) + // option2Array, + // //화면 표시(단 건) + // 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, + //흡착점 ON/OFF adsorpPoint: adsorptionPointMode.adsorptionPoint, //??: adsorptionRange, 사용여부 확인 필요 @@ -594,14 +576,11 @@ export function useCanvasSetting() { gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10, gridDimen: dotLineGridSetting.INTERVAL.dimension, - //gridColor: gridColor.gridColor, gridColor: gridColor, } console.log('patternData ', patternData) - setColorTemp(gridColor) - // HTTP POST 요청 보내기 await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) .then((res) => { @@ -719,15 +698,13 @@ export function useCanvasSetting() { setDimensionLineSettings, planSizeSettingMode, setPlanSizeSettingMode, - selectOption, - setSelectOption, SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, - setSettingModalGridOptions, setDotLineGridSettingState, resetDotLineGridSetting, + setSettingModalGridOptions, gridColor, setGridColor, color, @@ -740,5 +717,7 @@ export function useCanvasSetting() { basicSettingSave, settingsData, setSettingsData, + settingsDataSave, + setSettingsDataSave, } }