diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 987f521c..40463296 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -1,4 +1,4 @@ -import { useRecoilState, useSetRecoilState } from 'recoil' +import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil' import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' import React, { useEffect, useState } from 'react' @@ -10,6 +10,7 @@ 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' export default function SecondOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 @@ -28,6 +29,8 @@ export default function SecondOption() { const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false) const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false) + const dimensionSettings = useRecoilValue(dimensionLineSettingsState) + // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('SecondOption useEffect 실행') @@ -139,11 +142,11 @@ export default function SecondOption() { let dimensionId = null let fontId = null let planSizeId = null - const [pixel, setPixel] = useState(1) - const [color, setColor] = useState('#FF0000') + const [pixel, setPixel] = useState(dimensionSettings.pixel) + const [color, setColor] = useState(dimensionSettings.color) const [font, setFont] = useState(null) - const [fontSize, setFontSize] = useState('#FF0000') - const [fontColor, setFontColor] = useState('#FF0000') + const [fontSize, setFontSize] = useState(dimensionSettings.fontSize) + const [fontColor, setFontColor] = useState(dimensionSettings.fontColor) useEffect(() => { dimensionId = uuidv4() diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 569a47d8..aae246dc 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -6,6 +6,9 @@ import { useEffect, useState } from 'react' import FontSetting from '@/components/common/font/FontSetting' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' +import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' +import { useRecoilState } from 'recoil' + /* color: 치수선 색 fontColor: 글꼴 색 @@ -44,6 +47,7 @@ export default function DimensionLineSetting(props) { const [showColorPickerModal, setShowColorPickerModal] = useState(false) const [showFontModal, setShowFontModal] = useState(false) const { getMessage } = useMessage() + const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) useEffect(() => { console.log(2, isShow) @@ -59,6 +63,7 @@ export default function DimensionLineSetting(props) { closePopups([fontModalId, colorModalId]) } }, [isShow]) + const colorPickerProps = { isShow: showColorPickerModal, setIsShow: setShowColorPickerModal, @@ -168,6 +173,16 @@ export default function DimensionLineSetting(props) { setPixel(originPixel.value) setColor(originColor) setFont(originFont) + setDimensionLineSettings((prev) => { + return { + ...prev, + pixel: originPixel.value, + color: originColor, + font: originFont, + fontColor: originFontColor, + fontSize: originFontSize, + } + }) setIsShow(false) closePopups([fontModalId, colorModalId, id]) }} diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index b4fb4fc8..dd92253d 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -3,10 +3,12 @@ import { useRecoilValue } from 'recoil' import { wordDisplaySelector } from '@/store/settingAtom' import { useEvent } from '@/hooks/useEvent' import { checkLineOrientation, getDistance } from '@/util/canvas-util' +import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) { const wordDisplay = useRecoilValue(wordDisplaySelector) const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent() + const dimensionSettings = useRecoilValue(dimensionLineSettingsState) useEffect(() => { initEvent() @@ -17,7 +19,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS } else if (commonFunctionState.distance) { commonDistanceMode() } - }, [commonFunctionState]) + }, [commonFunctionState, dimensionSettings]) const commonTextMode = () => { let textbox @@ -80,7 +82,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS angle: angle, width: 15, height: 15, - fill: 'black', + fill: dimensionSettings.color, selectable: false, }) } @@ -94,8 +96,8 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS } const lineOptions = { - stroke: 'black', - strokeWidth: 2, + stroke: dimensionSettings.color, + strokeWidth: dimensionSettings.pixel, selectable: false, } @@ -185,12 +187,16 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS canvas.add(arrow1) canvas.add(arrow2) + console.log(dimensionSettings) + // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성 distanceText = new fabric.Text(`${distance * 10} `, { left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15), top: (p1CenterY + p2CenterY) / 2 + (lineDirection === 'horizontal' ? +15 : 0), - fill: 'black', - fontSize: 16, + fill: dimensionSettings.fontColor, + fontSize: dimensionSettings.fontSize, + // fontFamily : dimensionSettings.font, //폰트 + // fontStyle : dimensionSettings.fontStyle, //폰트스타일 selectable: true, textAlign: 'center', originX: 'center', @@ -359,9 +365,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS } return { - commonTextMode, - commonDimensionMode, - commonDistanceMode, commonFunctions, + dimensionSettings, } } diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index d6c799ac..2bfefb98 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -128,7 +128,6 @@ export function useSurfaceShapeBatch() { setSurfaceShapePattern(obj, roofDisplay.column) closePopup(id) drawDirectionArrow(obj) - setShowPlacementSurfaceSettingModal(true) }) } } diff --git a/src/store/commonUtilsAtom.js b/src/store/commonUtilsAtom.js new file mode 100644 index 00000000..3fe8dbb7 --- /dev/null +++ b/src/store/commonUtilsAtom.js @@ -0,0 +1,13 @@ +import { atom } from 'recoil' + +export const dimensionLineSettingsState = atom({ + key: 'dimensionLineSettingsState', + default: { + pixel: 1, + color: '#000000', + font: 'Arial', + fontColor: '#000000', + fontSize: 15, + fontStyle: 'normal', + }, +})