From 529d5b551bb863d89c0683bea6eedfb6422870a6 Mon Sep 17 00:00:00 2001 From: minsik Date: Tue, 12 Nov 2024 16:22:43 +0900 Subject: [PATCH] =?UTF-8?q?Canvas=20setting=20font=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/font/FontSetting.jsx | 82 ++++++------ .../modal/setting01/SecondOption.jsx | 103 ++++++++------- .../dimensionLine/DimensionLineSetting.jsx | 123 +++++++++--------- src/hooks/common/useCommonUtils.js | 13 +- src/hooks/common/useFont.js | 12 +- src/store/commonUtilsAtom.js | 4 - 6 files changed, 162 insertions(+), 175 deletions(-) diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index a658871d..b48f3882 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -3,76 +3,69 @@ import QSelectBox from '@/components/common/select/QSelectBox' import { usePopup } from '@/hooks/usePopup' import { useState } from 'react' import { useMessage } from '@/hooks/useMessage' -import { useRecoilState, useRecoilValue } from 'recoil' -import { fontSelector, globalFontAtom } from '@/store/fontAtom' +import { useRecoilValue } from 'recoil' import { contextPopupPositionState } from '@/store/popupAtom' const fonts = [ - { name: 'MS PGothic', value: 'MS PGothic' }, - { name: '@Yu Gothic', value: '@Yu Gothic' }, - { name: 'Yu Gothic', value: 'Yu Gothic' }, - { name: '@Yu Gothic UI', value: '@Yu Gothic UI' }, - { name: 'Yu Gothic UI', value: 'Yu Gothic UI' }, + { 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 { name: index + 8, value: index + 8 } + return { id: index + 8, name: index + 8, value: index + 8 } }), ...Array.from({ length: 9 }).map((_, index) => { - return { name: (index + 6) * 2, value: (index + 6) * 2 } + return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 } }), - { name: 36, value: 36 }, - { name: 48, value: 48 }, - { name: 72, value: 72 }, + { id: 36, name: 36, value: 36 }, + { id: 48, name: 48, value: 48 }, + { id: 72, name: 72, value: 72 }, ] export default function FontSetting(props) { const contextPopupPosition = useRecoilValue(contextPopupPositionState) - const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props + const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false, onSave, font } = props const { getMessage } = useMessage() const { closePopup } = usePopup() - const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) - const currentFont = useRecoilValue(fontSelector(type)) - - const [selectedFont, setSelectedFont] = useState(currentFont.fontFamily) - const [selectedFontWeight, setSelectedFontWeight] = useState(currentFont.fontWeight) - const [selectedFontSize, setSelectedFontSize] = useState(currentFont.fontSize) - const [selectedFontColor, setSelectedFontColor] = useState(currentFont.fontColor) + const [selectedFont, setSelectedFont] = useState(font.fontFamily) + const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight) + const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize) + const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor) const fontOptions = [ - { name: getMessage('font.style.normal'), value: 'normal' }, - { name: getMessage('font.style.italic'), value: 'italic' }, + { 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', }, - { name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, + { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, ] const fontColors = [ - { name: getMessage('color.black'), value: 'black' }, - { name: getMessage('color.red'), value: 'red' }, - { name: getMessage('color.blue'), value: 'blue' }, - { name: getMessage('color.gray'), value: 'gray' }, - { name: getMessage('color.yellow'), value: 'yellow' }, - { name: getMessage('color.green'), value: 'green' }, - { name: getMessage('color.pink'), value: 'pink' }, - { name: getMessage('color.gold'), value: 'gold' }, - { name: getMessage('color.darkblue'), value: 'darkblue' }, + { 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' }, ] const handleSaveBtn = () => { - setGlobalFont((prev) => { - return { - ...prev, - [type]: { - fontFamily: selectedFont, - fontSize: selectedFontSize, - fontColor: selectedFontColor, - fontWeight: selectedFontWeight, - }, - } + onSave({ + fontFamily: selectedFont, + fontSize: selectedFontSize, + fontColor: selectedFontColor, + fontWeight: selectedFontWeight, }) if (setIsShow) setIsShow(false) - closePopup(id) + closePopup(id, isConfig) } return ( @@ -125,7 +118,8 @@ export default function FontSetting(props) { style={{ fontFamily: selectedFont?.value ?? '', fontSize: selectedFontSize?.value ?? '12px', - fontWeight: '400', + fontStyle: selectedFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: selectedFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal', color: selectedFontColor?.value ?? 'black', }} > diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 385c7bef..91156ef3 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -1,4 +1,3 @@ -import { useRecoilValue } from 'recoil' import { useMessage } from '@/hooks/useMessage' import React, { useEffect, useState } from 'react' import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting' @@ -6,55 +5,35 @@ 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 { useRecoilState, useRecoilValue } from 'recoil' +import { fontSelector, globalFontAtom } from '@/store/fontAtom' export default function SecondOption() { const { getMessage } = useMessage() - const { addPopup, closePopup, closePopups } = usePopup() + const { addPopup, closePopup } = usePopup() const [showFontSettingModal, setShowFontSettingModal] = useState(false) const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false) const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false) - const dimensionSettings = useRecoilValue(dimensionLineSettingsState) - + const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting() 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()) // 데이터를 최초 한 번만 조회 useEffect(() => { - console.log('SecondOption useEffect 실행') //fetchSettings() }, [objectNo]) - let dimensionId = null - let fontId = null - let planSizeId = null - const [pixel, setPixel] = useState(dimensionSettings.pixel) - const [color, setColor] = useState(dimensionSettings.color) - const [font, setFont] = useState(null) - const [fontSize, setFontSize] = useState(dimensionSettings.fontSize) - const [fontColor, setFontColor] = useState(dimensionSettings.fontColor) - - useEffect(() => { - dimensionId = uuidv4() - fontId = uuidv4() - planSizeId = uuidv4() - }, []) - const dimensionProps = { - color, - setColor, - pixel, - setPixel, - font, - setFont, - fontSize, - setFontSize, - fontColor, - setFontColor, id: dimensionId, isShow: showDimensionLineSettingModal, setIsShow: setShowDimensionLineSettingModal, @@ -62,23 +41,6 @@ export default function SecondOption() { const [horizon, setHorizon] = useState(1600) const [vertical, setVertical] = useState(1600) - - const fontProps = { - id: fontId, - pos: { x: 745, y: 180 }, - setIsShow: setShowFontSettingModal, - isConfig: true, - } - const planSizeProps = { - id: planSizeId, - horizon, - setHorizon, - vertical, - setVertical, - setIsShow: setShowPlanSizeSettingModal, - pos: { x: 1025, y: 180 }, - } - const handlePopup = (type) => { setShowPlanSizeSettingModal(false) setShowFontSettingModal(false) @@ -90,6 +52,7 @@ export default function SecondOption() { setShowDimensionLineSettingModal(false) fontProps.type = 'commonText' fontProps.id = fontId + 1 + fontProps.font = commonFont addPopup(fontId + 1, 2, , true) break } @@ -99,6 +62,7 @@ export default function SecondOption() { setShowFontSettingModal(true) setShowDimensionLineSettingModal(false) fontProps.type = 'flowText' + fontProps.font = flowFont fontProps.id = fontId + 2 addPopup(fontId + 2, 2, , true) break @@ -107,9 +71,9 @@ export default function SecondOption() { case 'font3': { //치수 글꼴변경 setShowFontSettingModal(true) - setShowDimensionLineSettingModal(false) fontProps.type = 'lengthText' + fontProps.font = lengthFont fontProps.id = fontId + 3 addPopup(fontId + 3, 2, , true) break @@ -120,6 +84,7 @@ export default function SecondOption() { setShowFontSettingModal(true) setShowDimensionLineSettingModal(false) fontProps.type = 'circuitNumberText' + fontProps.font = circuitNumberTextFont fontProps.id = fontId addPopup(fontId, 2, , true) break @@ -129,6 +94,12 @@ export default function SecondOption() { //치수선 설정 if (!showDimensionLineSettingModal) { setShowDimensionLineSettingModal(true) + fontProps.font = { + fontFamily: '', + fontColor: '', + fontSize: '', + fontWeight: '', + } addPopup(dimensionId, 2, , true) } else { setShowDimensionLineSettingModal(false) @@ -147,6 +118,38 @@ export default function SecondOption() { } } + const handleFontSave = (font) => { + setGlobalFont((prev) => { + return { + ...prev, + [fontProps.type]: { + fontFamily: font.fontFamily, + fontWeight: font.fontWeight, + fontSize: font.fontSize, + fontColor: font.fontColor, + }, + } + }) + } + + const fontProps = { + id: fontId, + pos: { x: 745, y: 180 }, + setIsShow: setShowFontSettingModal, + onSave: handleFontSave, + isConfig: true, + } + + const planSizeProps = { + id: planSizeId, + horizon, + setHorizon, + vertical, + setVertical, + setIsShow: setShowPlanSizeSettingModal, + pos: { x: 1025, y: 180 }, + } + return ( <>
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 1aa39e74..65fc2d28 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -8,68 +8,57 @@ import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' import { useRecoilState } from 'recoil' +import { globalFontAtom } from '@/store/fontAtom' -/* - color: 치수선 색 - fontColor: 글꼴 색 - fontSize: 치수선 치수 색 - pixel: 치수선 두깨 -*/ export default function DimensionLineSetting(props) { - const { - color, - setColor, - font, - setFont, - fontColor, - setFontColor, - fontSize, - setFontSize, - pixel, - setPixel, - isShow, - setIsShow, - id, - pos = { x: 985, y: 180 }, - } = props + const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props const { addPopup, closePopup, closePopups } = usePopup() const pixels = Array.from({ length: 5 }).map((_, index) => { - return { name: index + 1, value: index + 1 } + return { id: index, name: index + 1, value: index + 1 } }) - const [originColor, setOriginColor] = useState(color) - const [originFont, setOriginFont] = useState(font) - const [originFontColor, setOriginFontColor] = useState(fontColor) - const [originFontSize, setOriginFontSize] = useState(fontSize) - const [originPixel, setOriginPixel] = useState(pixel) + 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 [colorModalId, setColorModalId] = useState(uuidv4()) + const [colorModalId, setColorModalId] = useState(uuidv4()) const [showColorPickerModal, setShowColorPickerModal] = useState(false) const [showFontModal, setShowFontModal] = useState(false) const { getMessage } = useMessage() - const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) useEffect(() => { - console.log(2, isShow) - if (pixel) { - setOriginPixel(pixels?.filter((data) => data.value === pixel)[0]) + if (originPixel) { + setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0]) } setIsShow(true) }, []) useEffect(() => { - console.log(1, isShow) if (!isShow) { closePopups([fontModalId, colorModalId]) } }, [isShow]) + const handleFontSave = (font) => { + setOriginFont(font.fontFamily) + setOriginFontSize(font.fontSize) + setOriginFontColor(font.fontColor) + setOriginFontWeight(font.fontWeight) + } + const handleColorSave = () => {} + const colorPickerProps = { isShow: showColorPickerModal, setIsShow: setShowColorPickerModal, color: originColor, setColor: setOriginColor, id: colorModalId, + isConfig: true, pos: { x: 495, y: 180, @@ -79,14 +68,13 @@ export default function DimensionLineSetting(props) { const fontProps = { isShow: showFontModal, setIsShow: setShowFontModal, - color: originColor, - setColor: setOriginColor, - font: originFont, - setFont: setOriginFont, - fontColor: 'black', - setFontColor: setOriginFontColor, - fontSize: originFontSize, - setFontSize: setOriginFontSize, + font: { + fontFamily: originFont, + fontSize: originFontSize, + fontColor: originFontColor, + fontWeight: originFontWeight, + }, + onSave: handleFontSave, isConfig: true, id: fontModalId, pos: { @@ -106,6 +94,29 @@ export default function DimensionLineSetting(props) { } } + const onSave = () => { + setGlobalFont((prev) => { + return { + ...prev, + dimensionLineText: { + fontFamily: originFont, + fontWeight: originFontWeight, + fontSize: originFontSize, + fontColor: originFontColor, + }, + } + }) + setDimensionLineSettings((prev) => { + return { + ...prev, + pixel: originPixel?.value, + color: originColor, + } + }) + setIsShow(false) + closePopups([fontModalId, colorModalId, id]) + } + return (
@@ -149,9 +160,10 @@ export default function DimensionLineSetting(props) { className="font" style={{ fontFamily: originFont?.value ?? '', - color: originFontColor?.value ?? 'black', + color: originFontColor.value ?? 'black', fontSize: originFontSize?.value ?? '12px', - fontWeight: '400', + fontStyle: originFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: originFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal', }} > 9,999 @@ -161,7 +173,7 @@ export default function DimensionLineSetting(props) { style={{ backgroundColor: originColor, borderColor: originColor, - height: originPixel.value, + height: originPixel?.value, }} >
@@ -169,26 +181,7 @@ export default function DimensionLineSetting(props) {
-
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index 2902e0c3..bb6a11cd 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -1,16 +1,14 @@ import { useEffect } from 'react' -import { useRecoilValue, useRecoilState } from 'recoil' +import { useRecoilState, 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' +import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom' import { fontSelector } from '@/store/fontAtom' import { canvasState } from '@/store/canvasAtom' import { v4 as uuidv4 } from 'uuid' import { usePopup } from '@/hooks/usePopup' import Distance from '@/components/floor-plan/modal/distance/Distance' -import { commonUtilsState } from '@/store/commonUtilsAtom' -import { center, point } from '@turf/turf' export function useCommonUtils() { const canvas = useRecoilValue(canvasState) @@ -39,6 +37,7 @@ export function useCommonUtils() { commonTextKeyEvent() addCanvasMouseEventListener('mouse:down', (event) => { const pointer = canvas?.getPointer(event.e) + textbox = new fabric.Textbox('', { left: pointer.x, top: pointer.y, @@ -49,7 +48,8 @@ export function useCommonUtils() { fill: commonTextFont.fontColor.value, fontFamily: commonTextFont.fontFamily.value, fontSize: commonTextFont.fontSize.value, - fontStyle: commonTextFont.fontWeight.value, + fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', selectable: true, lockMovementX: true, lockMovementY: true, @@ -262,7 +262,8 @@ export function useCommonUtils() { fill: dimensionLineTextFont.fontColor.value, fontSize: dimensionLineTextFont.fontSize.value, fontFamily: dimensionLineTextFont.fontFamily.value, - fontStyle: dimensionLineTextFont.fontWeight.value, + fontStyle: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', selectable: true, textAlign: 'center', originX: 'center', diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js index 595ec74c..e6decd1a 100644 --- a/src/hooks/common/useFont.js +++ b/src/hooks/common/useFont.js @@ -17,8 +17,8 @@ export function useFont() { textObjs.forEach((obj) => { obj.set({ fontFamily: commonText.fontFamily.value, - fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', fontSize: commonText.fontSize.value, fill: commonText.fontColor.value, }) @@ -33,8 +33,8 @@ export function useFont() { textObjs.forEach((obj) => { obj.set({ fontFamily: dimensionLineText.fontFamily.value, - fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', fontSize: dimensionLineText.fontSize.value, fill: dimensionLineText.fontColor.value, }) @@ -49,8 +49,8 @@ export function useFont() { textObjs.forEach((obj) => { obj.set({ fontFamily: flowText.fontFamily.value, - fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', fontSize: flowText.fontSize.value, fill: flowText.fontColor.value, }) diff --git a/src/store/commonUtilsAtom.js b/src/store/commonUtilsAtom.js index 545f8196..29ef7982 100644 --- a/src/store/commonUtilsAtom.js +++ b/src/store/commonUtilsAtom.js @@ -11,10 +11,6 @@ export const dimensionLineSettingsState = atom({ default: { pixel: 1, color: '#000000', - font: 'Arial', - fontColor: '#000000', - fontSize: 15, - fontStyle: 'normal', }, })