diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index b48f3882..4ebdcfeb 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -1,10 +1,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable' import QSelectBox from '@/components/common/select/QSelectBox' import { usePopup } from '@/hooks/usePopup' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { useRecoilValue } from 'recoil' import { contextPopupPositionState } from '@/store/popupAtom' +import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' const fonts = [ { id: 1, name: 'MS PGothic', value: 'MS PGothic' }, @@ -12,7 +13,6 @@ const fonts = [ { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' }, { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' }, { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' }, - 3, ] const fontSizes = [ @@ -36,14 +36,11 @@ export default function FontSetting(props) { const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight) const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize) const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor) + const fontOptions = [ { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }, { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' }, - { - id: 'bold', - name: getMessage('font.style.bold'), - value: 'bold', - }, + { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' }, { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, ] const fontColors = [ @@ -57,12 +54,30 @@ export default function FontSetting(props) { { id: 'gold', name: getMessage('color.gold'), value: 'gold' }, { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, ] + useEffect(() => { + if (font.fontFamily) { + setSelectedFont(fonts.filter((data) => data.value === font.fontFamily)[0]) + } + + if (font.fontWeight) { + setSelectedFontWeight(fontOptions.filter((data) => data.value === font.fontWeight)[0]) + } + + if (font.fontSize) { + setSelectedFontSize(fontSizes.filter((data) => data.value === font.fontSize)[0]) + } + + if (font.fontColor) { + setSelectedFontColor(fontColors.filter((data) => data.value === font.fontColor)[0]) + } + }, []) + const handleSaveBtn = () => { onSave({ fontFamily: selectedFont, + fontWeight: selectedFontWeight, fontSize: selectedFontSize, fontColor: selectedFontColor, - fontWeight: selectedFontWeight, }) if (setIsShow) setIsShow(false) closePopup(id, isConfig) @@ -117,9 +132,9 @@ export default function FontSetting(props) { diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index ac2e141c..e2c53668 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -1,22 +1,20 @@ 'use client' -import { useEffect, useState } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' -import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' +import { useContext, useEffect } from 'react' +//import { useRecoilState } from 'recoil' import CanvasMenu from '@/components/floor-plan/CanvasMenu' import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' import { usePopup } from '@/hooks/usePopup' +//import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider' +//import { correntObjectNoState } from '@/store/settingAtom' import '@/styles/contents.scss' export default function FloorPlan({ children }) { - const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) - const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) - const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 + //const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext) + //const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState) const { closeAll } = usePopup() - const { menuNumber, setMenuNumber } = useCanvasMenu() - const { fetchSettings } = useCanvasSetting() const modalProps = { @@ -25,11 +23,13 @@ export default function FloorPlan({ children }) { } useEffect(() => { + ///setCorrentObjectNo(floorPlanState.objectNo) + //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo) fetchSettings() return () => { closeAll() } - }, [objectNo]) + }, []) return ( <> diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index cb3253b3..1f70f21f 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -1,19 +1,46 @@ import React, { useEffect, useState } from 'react' import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' import { useMessage } from '@/hooks/useMessage' +import { POLYGON_TYPE } from '@/common/common' +import { setSurfaceShapePattern } from '@/util/canvas-util' export default function FirstOption() { - const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting() - const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting() const { getMessage } = useMessage() - - const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting() + const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting() + const { option1, option2, dimensionDisplay } = settingModalFirstOptions // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('FirstOption useEffect 실행') - }, [objectNo]) + }, []) + + const onClickOption = async (item) => { + //치수 표시(단 건 선택) + if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') { + 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') { + 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 { + item.selected = !item.selected + } + + setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true }) + } return ( <> diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 91156ef3..7dbb2673 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -16,32 +16,40 @@ export default function SecondOption() { const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false) const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false) const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) - const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting() - const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting() - const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting() const commonFont = useRecoilValue(fontSelector('commonText')) const flowFont = useRecoilValue(fontSelector('flowText')) const lengthFont = useRecoilValue(fontSelector('lengthText')) const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText')) - const [dimensionId, setDimensionId] = useState(uuidv4()) const [fontId, setFontId] = useState(uuidv4()) const [planSizeId, setPlanSizeId] = useState(uuidv4()) + + const { + //horizon, setHorizon, vertical, setVertical, + // originHorizon, + // setOriginHorizon, + // originVertical, + // setOriginVertical, + planSizeSettingMode, + setPlanSizeSettingMode, + settingModalSecondOptions, + setSettingModalSecondOptions, + adsorptionPointMode, + setAdsorptionPointMode, + setAdsorptionRange, + } = useCanvasSetting() + const { option3, option4 } = settingModalSecondOptions + + // const [horizon, setHorizon] = useState(originHorizon) + // const [vertical, setVertical] = useState(originVertical) + // 데이터를 최초 한 번만 조회 useEffect(() => { - //fetchSettings() - }, [objectNo]) + console.log('SecondOption useEffect 실행', planSizeSettingMode) + }, []) - const dimensionProps = { - id: dimensionId, - isShow: showDimensionLineSettingModal, - setIsShow: setShowDimensionLineSettingModal, - } - - const [horizon, setHorizon] = useState(1600) - const [vertical, setVertical] = useState(1600) const handlePopup = (type) => { + setShowDimensionLineSettingModal(false) setShowPlanSizeSettingModal(false) setShowFontSettingModal(false) @@ -51,8 +59,8 @@ export default function SecondOption() { setShowFontSettingModal(true) setShowDimensionLineSettingModal(false) fontProps.type = 'commonText' - fontProps.id = fontId + 1 fontProps.font = commonFont + fontProps.id = fontId + 1 addPopup(fontId + 1, 2, , true) break } @@ -96,9 +104,9 @@ export default function SecondOption() { setShowDimensionLineSettingModal(true) fontProps.font = { fontFamily: '', - fontColor: '', - fontSize: '', fontWeight: '', + fontSize: '', + fontColor: '', } addPopup(dimensionId, 2, , true) } else { @@ -110,9 +118,13 @@ export default function SecondOption() { case 'planSize': { //도면크기 설정 - setShowPlanSizeSettingModal(true) - setShowDimensionLineSettingModal(false) - addPopup(planSizeId, 2, , true) + if (!showPlanSizeSettingModal) { + setShowPlanSizeSettingModal(true) + addPopup(planSizeId, 2, , true) + } else { + setShowPlanSizeSettingModal(false) + closePopup(planSizeId, true) + } break } } @@ -123,11 +135,12 @@ export default function SecondOption() { return { ...prev, [fontProps.type]: { - fontFamily: font.fontFamily, - fontWeight: font.fontWeight, - fontSize: font.fontSize, - fontColor: font.fontColor, + fontFamily: font.fontFamily.value, + fontWeight: font.fontWeight.value, + fontSize: font.fontSize.value, + fontColor: font.fontColor.value, }, + fontFlag: true, } }) } @@ -140,16 +153,48 @@ export default function SecondOption() { isConfig: true, } + const dimensionProps = { + id: dimensionId, + isShow: showDimensionLineSettingModal, + setIsShow: setShowDimensionLineSettingModal, + } + const planSizeProps = { id: planSizeId, - horizon, - setHorizon, - vertical, - setVertical, + // horizon, + // setHorizon, + // vertical, + // setVertical, + horizon: planSizeSettingMode.originHorizon, + vertical: planSizeSettingMode.originVertical, + isShow: showPlanSizeSettingModal, setIsShow: setShowPlanSizeSettingModal, pos: { x: 1025, y: 180 }, } + const onClickOption = async (item) => { + //흡착범위 설정(단 건 선택) + if ( + item.column === 'adsorpRangeSmall' || + item.column === 'adsorpRangeSmallSemi' || + item.column === 'adsorpRangeMedium' || + item.column === 'adsorpRangeLarge' + ) { + // 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 + }) + + setSettingModalSecondOptions({ ...settingModalSecondOptions, option3, option4, fontFlag: true }) + } else if (item === 'adsorpPoint') { + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorptionPointMode.adsorptionPoint, fontFlag: true }) + } + //setAdsorptionRange(item.range) //사용여부 확인 필요 + setAdsorptionRange(50) + } + return ( <>
@@ -184,12 +229,12 @@ export default function SecondOption() {
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 65fc2d28..f5753965 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -9,6 +9,28 @@ import { useMessage } from '@/hooks/useMessage' import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' import { useRecoilState } from 'recoil' import { globalFontAtom } from '@/store/fontAtom' +import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' + +const fonts = [ + { id: 1, name: 'MS PGothic', value: 'MS PGothic' }, + { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' }, + { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' }, + { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' }, + { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' }, + //3, +] + +const fontSizes = [ + ...Array.from({ length: 4 }).map((_, index) => { + return { id: index + 8, name: index + 8, value: index + 8 } + }), + ...Array.from({ length: 9 }).map((_, index) => { + return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 } + }), + { id: 36, name: 36, value: 36 }, + { id: 48, name: 48, value: 48 }, + { id: 72, name: 72, value: 72 }, +] export default function DimensionLineSetting(props) { const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props @@ -16,28 +38,79 @@ export default function DimensionLineSetting(props) { const pixels = Array.from({ length: 5 }).map((_, index) => { return { id: index, name: index + 1, value: index + 1 } }) - const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) - const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) - const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel) - const [originColor, setOriginColor] = useState(dimensionLineSettings.color) - const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily) - const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor) - const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize) - const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight) - const [fontModalId, setFontModalId] = useState(uuidv4()) + //const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) + //const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel) + //const [originColor, setOriginColor] = useState(dimensionLineSettings.color) + //const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) + const [fontModalId, setFontModalId] = useState(uuidv4()) const [colorModalId, setColorModalId] = useState(uuidv4()) const [showColorPickerModal, setShowColorPickerModal] = useState(false) const [showFontModal, setShowFontModal] = useState(false) const { getMessage } = useMessage() + const { globalFont, setGlobalFont, dimensionLineSettings, setDimensionLineSettings } = useCanvasSetting() + + const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily) + const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight) + const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize) + const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor) + + const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel) + const [originColor, setOriginColor] = useState(dimensionLineSettings.color) + + const fontOptions = [ + { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }, + { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' }, + { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' }, + { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, + ] + const fontColors = [ + { id: 'black', name: getMessage('color.black'), value: 'black' }, + { id: 'red', name: getMessage('color.red'), value: 'red' }, + { id: 'blue', name: getMessage('color.blue'), value: 'blue' }, + { id: 'gray', name: getMessage('color.gray'), value: 'gray' }, + { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' }, + { id: 'green', name: getMessage('color.green'), value: 'green' }, + { id: 'pink', name: getMessage('color.pink'), value: 'pink' }, + { id: 'gold', name: getMessage('color.gold'), value: 'gold' }, + { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, + ] + + let originPixelView + useEffect(() => { if (originPixel) { setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0]) + originPixelView = originPixel } + + if (globalFont.dimensionLineText.fontFamily) { + setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0]) + } + + if (globalFont.dimensionLineText.fontWeight) { + setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0]) + } + + if (globalFont.dimensionLineText.fontSize) { + setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0]) + } + + if (globalFont.dimensionLineText.fontColor) { + setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0]) + } + setIsShow(true) }, []) + useEffect(() => { + if (originPixel.name) { + originPixelView = originPixel.name + setOriginPixel(originPixel) + } + }, [originPixel]) + useEffect(() => { if (!isShow) { closePopups([fontModalId, colorModalId]) @@ -46,9 +119,9 @@ export default function DimensionLineSetting(props) { const handleFontSave = (font) => { setOriginFont(font.fontFamily) + setOriginFontWeight(font.fontWeight) setOriginFontSize(font.fontSize) setOriginFontColor(font.fontColor) - setOriginFontWeight(font.fontWeight) } const handleColorSave = () => {} @@ -69,10 +142,10 @@ export default function DimensionLineSetting(props) { isShow: showFontModal, setIsShow: setShowFontModal, font: { - fontFamily: originFont, - fontSize: originFontSize, - fontColor: originFontColor, - fontWeight: originFontWeight, + fontFamily: originFont?.value, + fontWeight: originFontWeight?.value, + fontSize: originFontSize?.value, + fontColor: originFontColor?.value, }, onSave: handleFontSave, isConfig: true, @@ -99,17 +172,18 @@ export default function DimensionLineSetting(props) { return { ...prev, dimensionLineText: { - fontFamily: originFont, - fontWeight: originFontWeight, - fontSize: originFontSize, - fontColor: originFontColor, + fontFamily: originFont.value, + fontWeight: originFontWeight.value, + fontSize: originFontSize.value, + fontColor: originFontColor.value, }, + fontFlag: true, } }) setDimensionLineSettings((prev) => { return { ...prev, - pixel: originPixel?.value, + pixel: originPixel.name, color: originColor, } }) @@ -125,8 +199,8 @@ export default function DimensionLineSetting(props) { diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js index e6decd1a..bdcdaa4e 100644 --- a/src/hooks/common/useFont.js +++ b/src/hooks/common/useFont.js @@ -12,7 +12,7 @@ export function useFont() { const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText')) useEffect(() => { - if (canvas) { + if (canvas && commonText.fontWeight?.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText') textObjs.forEach((obj) => { obj.set({ @@ -28,7 +28,7 @@ export function useFont() { }, [commonText]) useEffect(() => { - if (canvas) { + if (canvas && dimensionLineText.fontWeight?.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText') textObjs.forEach((obj) => { obj.set({ @@ -44,8 +44,8 @@ export function useFont() { }, [dimensionLineText]) useEffect(() => { - if (canvas) { - const textObjs = canvas.getObjects().filter((obj) => obj.name === 'flowText') + if (canvas && flowText.fontWeight?.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText') textObjs.forEach((obj) => { obj.set({ fontFamily: flowText.fontFamily.value, @@ -60,8 +60,8 @@ export function useFont() { }, [flowText]) useEffect(() => { - if (canvas) { - const textObjs = canvas.getObjects().filter((obj) => obj.name === 'lengthText') + if (canvas && lengthText.fontWeight?.value) { + const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') textObjs.forEach((obj) => { obj.set({ fontFamily: lengthText.fontFamily.value, diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 6cb1d09c..ac03e054 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -1,16 +1,22 @@ -import { useEffect, useState } from 'react' -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' -import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom' +import { useCallback, useEffect, useState } from 'react' +import { useRecoilState, useRecoilValue } from 'recoil' +import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom' import { globalLocaleStore } from '@/store/localeAtom' import { useMessage } from '@/hooks/useMessage' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' -import { corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' -import { setSurfaceShapePattern } from '@/util/canvas-util' +import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { POLYGON_TYPE } from '@/common/common' +import { fontSelector, globalFontAtom } from '@/store/fontAtom' +import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' + +let objectNo export function useCanvasSetting() { const canvas = useRecoilValue(canvasState) + // canvas가 null이 아닐 때에만 getObjects 호출 + const canvasObjects = canvas ? canvas.getObjects() : [] + const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState) const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) @@ -25,9 +31,21 @@ export function useCanvasSetting() { const { swalFire } = useSwal() const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) - const setAdsorptionRange = useSetRecoilState(adsorptionRangeState) + const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState) + const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState) + //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState) - const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 + const [selectedFont, setSelectedFont] = useState() + const [selectedFontWeight, setSelectedFontWeight] = useState() + const [selectedFontSize, setSelectedFontSize] = useState() + const [selectedFontColor, setSelectedFontColor] = useState() + const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) + //const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 + + const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) + + //const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false }) + //const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false }) useEffect(() => { if (!canvas) { @@ -56,199 +74,354 @@ export function useCanvasSetting() { }) break } - canvas.renderAll() + canvas?.renderAll() }, [corridorDimension]) useEffect(() => { - console.log('useCanvasSetting useEffect 실행1') - fetchSettings() - }, [objectNo]) + console.log('useCanvasSetting useEffect 실행1', correntObjectNo) + }, []) + //흡착점 ON/OFF 변경 시 useEffect(() => { - console.log('useCanvasSetting useEffect 실행2') - //fetchSettings() - //onClickOption() - //fetchSettings() + console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo) + + if (adsorptionPointMode.fontFlag) { + onClickOption2() + frontSettings() + fetchSettings() + } }, [adsorptionPointMode]) + // 1 과 2 변경 시 useEffect(() => { - console.log('useCanvasSetting useEffect 실행3') - //fetchSettings() - //onClickOption() - //fetchSettings() + console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo) + if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) { + onClickOption2() + fetchSettings() + } + frontSettings() }, [settingModalFirstOptions, settingModalSecondOptions]) + // 글꼴 변경 시 + useEffect(() => { + console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo) + if (globalFont.fontFlag) { + onClickOption2() + frontSettings() + fetchSettings() + } + }, [globalFont]) + + // 도명크기 변경 시 + useEffect(() => { + console.log( + 'useCanvasSetting useEffect 실행5', + correntObjectNo, + planSizeSettingMode.flag, + planSizeSettingMode.originHorizon, + planSizeSettingMode.originVertical, + ) + + if (planSizeSettingMode.flag) { + onClickOption2() + frontSettings() + fetchSettings() + } + }, [planSizeSettingMode.flag]) + const fetchSettings = async () => { 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/${correntObjectNo}` }) console.log('res', res) - 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 })) - const patternData = { - adsorpPoint: res.adsorpPoint, + if (res) { + 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 })) + + //setObjectNo(floorPlanState.objectNo) + + //흡착점 ON/OFF + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false }) + + //치수선 설정 + setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor }) + + //도면크기 설정 + setPlanSizeSettingMode({ + ...planSizeSettingMode, + originHorizon: res.originHorizon, + originVertical: res.originVertical, + flag: false, + }) + // setOriginHorizon({ + // ...originHorizon, + // originHorizon: res.originHorizon, + // flag: false, + // }) + // setOriginVertical({ + // ...originVertical, + // originVertical: res.originVertical, + // flag: false, + // }) + + // 데이터 설정 + setSettingModalFirstOptions({ + ...settingModalFirstOptions, + option1: optionData1, + option2: optionData2, + dimensionDisplay: optionData5, + fontFlag: false, + }) + setSettingModalSecondOptions({ + ...settingModalSecondOptions, + option3: optionData3, + option4: optionData4, + fontFlag: false, + }) + + const fontPatternData = { + commonText: { + //문자 글꼴 조회 데이터 + fontFamily: res.wordFont, + fontWeight: res.wordFontStyle, + fontSize: res.wordFontSize, + fontColor: res.wordFontColor, + }, + flowText: { + //흐름방향 글꼴 조회 데이터 + fontFamily: res.flowFont, + fontWeight: res.flowFontStyle, + fontSize: res.flowFontSize, + fontColor: res.flowFontColor, + }, + dimensionLineText: { + //치수 글꼴 조회 데이터 + fontFamily: res.dimensioFont, + fontWeight: res.dimensioFontStyle, + fontSize: res.dimensioFontSize, + fontColor: res.dimensioFontColor, + }, + circuitNumberText: { + //회로번호 글꼴 조회 데이터 + fontFamily: res.circuitNumFont, + fontWeight: res.circuitNumFontStyle, + fontSize: res.circuitNumFontSize, + fontColor: res.circuitNumFontColor, + }, + lengthText: { + //치수선 글꼴 조회 데이터 + fontFamily: res.lengthFont, + fontWeight: res.lengthFontStyle, + fontSize: res.lengthFontSize, + fontColor: res.lengthFontColor, + }, + //글꼴 설정 Flag + fontFlag: false, + } + //console.log('fontPatternData', fontPatternData) + + //조회된 글꼴 데이터 set + setGlobalFont(fontPatternData) + } else { + //조회된 글꼴 데이터가 없는 경우 + + //흡착점 ON/OFF + setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false, fontFlag: false }) + + //치수선 설정 + setDimensionLineSettings({ ...dimensionLineSettings }) + + //도면크기 설정 + setPlanSizeSettingMode({ + ...planSizeSettingMode, + flag: false, + }) + // setOriginHorizon({ + // ...originHorizon, + // flag: false, + // }) + // setOriginVertical({ + // ...originVertical, + // flag: false, + // }) + + // 데이터 설정 + setSettingModalFirstOptions({ + ...settingModalFirstOptions, + fontFlag: false, + }) + setSettingModalSecondOptions({ + ...settingModalSecondOptions, + fontFlag: false, + }) + + //console.log('globalFont2', globalFont) + const fontPatternData = { + commonText: { + //문자 글꼴 + fontFamily: globalFont.commonText.fontFamily.value, + fontWeight: globalFont.commonText.fontWeight.value, + fontSize: globalFont.commonText.fontSize.value, + fontColor: globalFont.commonText.fontColor.value, + }, + flowText: { + //흐름방향 글꼴 + fontFamily: globalFont.flowText.fontFamily.value, + fontWeight: globalFont.flowText.fontWeight.value, + fontSize: globalFont.flowText.fontSize.value, + fontColor: globalFont.flowText.fontColor.value, + }, + dimensionLineText: { + //치수 글꼴 + fontFamily: globalFont.dimensionLineText.fontFamily.value, + fontWeight: globalFont.dimensionLineText.fontWeight.value, + fontSize: globalFont.dimensionLineText.fontSize.value, + fontColor: globalFont.dimensionLineText.fontColor.value, + }, + circuitNumberText: { + //회로번호 글꼴 + fontFamily: globalFont.circuitNumberText.fontFamily.value, + fontWeight: globalFont.circuitNumberText.fontWeight.value, + fontSize: globalFont.circuitNumberText.fontSize.value, + fontColor: globalFont.circuitNumberText.fontColor.value, + }, + lengthText: { + //치수선 글꼴 + fontFamily: globalFont.lengthText.fontFamily.value, + fontWeight: globalFont.lengthText.fontWeight.value, + fontSize: globalFont.lengthText.fontSize.value, + fontColor: globalFont.lengthText.fontColor.value, + }, + //글꼴 설정 Flag + fontFlag: false, + } + + //console.log('fontPatternData', fontPatternData) + + setGlobalFont(fontPatternData) + + //setGlobalFont({ ...globalFont, fontFlag: false }) } - - // 데이터 설정 - setSettingModalFirstOptions({ - option1: optionData1, - option2: optionData2, - dimensionDisplay: optionData5, - }) - setSettingModalSecondOptions({ - option3: optionData3, - option4: optionData4, - }) - - setAdsorptionPointMode(patternData.adsorpPoint) - - console.log('adsorptionPointMode', adsorptionPointMode) + frontSettings() } 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 }) - - //흡착점 ON / OFF - } else if (item === 'adsorpPoint') { - console.log('흡착점 ON / OFF ', 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 { - //console.log('디스플레이 설정1 ', item.column) - console.log('디스플레이 설정 ', item) - item.selected = !item.selected + const onClickOption2 = useCallback(async () => { + // 서버에 전송할 데이터 + 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, + })), + secondOption2: option4.map((item) => ({ + column: item.column, + selected: item.selected, + })), } - setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) + const patternData = { + //견적서 번호 + objectNo: correntObjectNo, + //디스플레이 설정(다중) + 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, + imageDisplay: dataToSend.firstOption1[8].selected, + totalDisplay: dataToSend.firstOption1[9].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, + //흡착점 ON/OFF + adsorpPoint: adsorptionPointMode.adsorptionPoint, + //??: adsorptionRange, 사용여부 확인 필요 - 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, - })), - } + //글꼴 설정 + //문자 글꼴 + wordFont: globalFont.commonText.fontFamily, + wordFontStyle: globalFont.commonText.fontWeight, + wordFontSize: globalFont.commonText.fontSize, + wordFontColor: globalFont.commonText.fontColor, - 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, - imageDisplay: dataToSend.firstOption1[8].selected, - totalDisplay: dataToSend.firstOption1[9].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, - //흡착점 ON/OFF - adsorpPoint: adsorptionPointMode, - } + //흐름방향 글꼴 + flowFont: globalFont.flowText.fontFamily, + flowFontStyle: globalFont.flowText.fontWeight, + flowFontSize: globalFont.flowText.fontSize, + flowFontColor: globalFont.flowText.fontColor, - console.log('patternData ', patternData) + //치수 글꼴 + dimensioFont: globalFont.dimensionLineText.fontFamily, + dimensioFontStyle: globalFont.dimensionLineText.fontWeight, + dimensioFontSize: globalFont.dimensionLineText.fontSize, + dimensioFontColor: globalFont.dimensionLineText.fontColor, - // HTTP POST 요청 보내기 - await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => { + //회로번호 글꼴 + circuitNumFont: globalFont.circuitNumberText.fontFamily, + circuitNumFontStyle: globalFont.circuitNumberText.fontWeight, + circuitNumFontSize: globalFont.circuitNumberText.fontSize, + circuitNumFontColor: globalFont.circuitNumberText.fontColor, + + //치수선 글꼴 + lengthFont: globalFont.lengthText.fontFamily, + lengthFontStyle: globalFont.lengthText.fontWeight, + lengthFontSize: globalFont.lengthText.fontSize, + lengthFontColor: globalFont.lengthText.fontColor, + + //치수선 설정 + originPixel: dimensionLineSettings.pixel, + originColor: dimensionLineSettings.color, + + //치수선 설정 + originHorizon: planSizeSettingMode.originHorizon, + originVertical: planSizeSettingMode.originVertical, + // originHorizon: originHorizon.originHorizon, + // originVertical: originVertical.originVertical, + } + + 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' }) - } + .catch((error) => { + swalFire({ text: getMessage(res.returnMessage), icon: 'error' }) + }) - setAdsorptionRange(item.range) - } + //setAdsorptionRange(item.range) + }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode]) // Canvas 디스플레이 설정 시 해당 옵션 적용 const frontSettings = async () => { @@ -260,7 +433,7 @@ export function useCanvasSetting() { // 'lineDisplay' 지붕선 표시 'roof', POLYGON_TYPE.ROOF // 'wordDisplay' 문자 표시 // 'circuitNumDisplay' 회로번호 표시 - // 'flowDisplay' 흐름방향 표시 'arrow' + // 'flowDisplay' 흐름방향 표시 'arrow', 'flowText' // 'trestleDisplay' 가대 표시 // 'imageDisplay' 이미지 표시 // 'totalDisplay' 집계표 표시 @@ -304,8 +477,8 @@ export function useCanvasSetting() { // 표시 선택 상태(true/false) optionSelected = option1[i].selected - canvas - .getObjects() + //canvas.getObjects() >> canvasObjects + canvasObjects .filter((obj) => optionName.includes(obj.name)) //.filter((obj) => obj.name === optionName) .forEach((obj) => { @@ -313,7 +486,7 @@ export function useCanvasSetting() { //obj.set({ visible: !obj.visible }) }) - canvas.renderAll() + canvas?.renderAll() // console.log( // 'optionName', @@ -324,14 +497,31 @@ export function useCanvasSetting() { } return { + canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingModalSecondOptions, setSettingModalSecondOptions, adsorptionPointMode, setAdsorptionPointMode, + adsorptionRange, + setAdsorptionRange, fetchSettings, - onClickOption, + //onClickOption, frontSettings, + globalFont, + setGlobalFont, + selectedFont, + setSelectedFont, + selectedFontWeight, + setSelectedFontWeight, + selectedFontSize, + setSelectedFontSize, + selectedFontColor, + setSelectedFontColor, + dimensionLineSettings, + setDimensionLineSettings, + planSizeSettingMode, + setPlanSizeSettingMode, } } diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 588808b1..9be9f402 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -222,6 +222,12 @@ export const adsorptionRangeState = atom({ default: 50, }) +// 도면크기 설정 +export const planSizeSettingState = atom({ + key: 'planSizeSettingMode', + default: { originHorizon: 1600, originVertical: 1600 }, +}) + // 점,선 그리드 설정 export const dotLineGridSettingState = atom({ key: 'gridSettingState', diff --git a/src/store/fontAtom.js b/src/store/fontAtom.js index 1bf0df80..3cc4396c 100644 --- a/src/store/fontAtom.js +++ b/src/store/fontAtom.js @@ -1,10 +1,10 @@ import { atom, selectorFamily } from 'recoil' const defaultFont = { - fontFamily: { name: 'MS PGothic', value: 'MS PGothic' }, - fontWeight: { name: '보통', value: 'normal' }, - fontSize: { name: '16', value: '16' }, - fontColor: { name: '검정색', value: 'black' }, + fontFamily: { id: 1, name: 'MS PGothic', value: 'MS PGothic' }, + fontWeight: { id: 'normal', name: '보통', value: 'normal' }, + fontSize: { id: 16, name: 16, value: 16 }, + fontColor: { id: 'black', name: '검정색', value: 'black' }, } export const globalFontAtom = atom({