qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Canvas 설정 글꼴 null 처리 수정

Browse Source
This commit is contained in:
changkyu choi 2024-11-26 18:01:53 +09:00
parent 2f18a3d560
commit cd1a32eaf9
6 changed files with 142 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/common/font/FontSetting.jsx
View File

@ -54,23 +54,6 @@ 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({
@ -131,10 +114,10 @@ export default function FontSetting(props) {
<div className="font-ex-box">
<span
style={{
fontFamily: selectedFont?.value ?? '',
fontFamily: selectedFont?.value ?? 'MS PGothic',
fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontSize: selectedFontSize?.value ?? '12px',
fontSize: selectedFontSize?.value ?? 16,
color: selectedFontColor?.value ?? 'black',
}}
>

28
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -25,11 +25,7 @@ export default function SecondOption() {
const [planSizeId, setPlanSizeId] = useState(uuidv4())
const {
//horizon, setHorizon, vertical, setVertical,
// originHorizon,
// setOriginHorizon,
// originVertical,
// setOriginVertical,
fetchSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
settingModalSecondOptions,
@ -40,12 +36,9 @@ export default function SecondOption() {
} = useCanvasSetting()
const { option3, option4 } = settingModalSecondOptions
// const [horizon, setHorizon] = useState(originHorizon)
// const [vertical, setVertical] = useState(originVertical)
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('SecondOption useEffect 실행', planSizeSettingMode)
console.log('SecondOption useEffect 실행')
}, [])
const handlePopup = (type) => {
@ -119,6 +112,7 @@ export default function SecondOption() {
case 'planSize': {
//도면크기 설정
if (!showPlanSizeSettingModal) {
fetchSettings() //화면 오픈 시 데이터 조회
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
} else {
@ -135,10 +129,14 @@ export default function SecondOption() {
return {
...prev,
[fontProps.type]: {
fontFamily: font.fontFamily.value,
fontWeight: font.fontWeight.value,
fontSize: font.fontSize.value,
fontColor: font.fontColor.value,
// 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,
}
@ -161,10 +159,6 @@ export default function SecondOption() {
const planSizeProps = {
id: planSizeId,
// horizon,
// setHorizon,
// vertical,
// setVertical,
horizon: planSizeSettingMode.originHorizon,
vertical: planSizeSettingMode.originVertical,
isShow: showPlanSizeSettingModal,

36
src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
View File

@ -77,28 +77,9 @@ export default function DimensionLineSetting(props) {
{ 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)
@ -106,7 +87,6 @@ export default function DimensionLineSetting(props) {
useEffect(() => {
if (originPixel.name) {
originPixelView = originPixel.name
setOriginPixel(originPixel)
}
}, [originPixel])
@ -142,10 +122,10 @@ export default function DimensionLineSetting(props) {
isShow: showFontModal,
setIsShow: setShowFontModal,
font: {
fontFamily: originFont?.value,
fontWeight: originFontWeight?.value,
fontSize: originFontSize?.value,
fontColor: originFontColor?.value,
fontFamily: originFont,
fontWeight: originFontWeight,
fontSize: originFontSize,
fontColor: originFontColor,
},
onSave: handleFontSave,
isConfig: true,
@ -172,10 +152,10 @@ export default function DimensionLineSetting(props) {
return {
...prev,
dimensionLineText: {
fontFamily: originFont.value,
fontWeight: originFontWeight.value,
fontSize: originFontSize.value,
fontColor: originFontColor.value,
fontFamily: originFont,
fontWeight: originFontWeight,
fontSize: originFontSize,
fontColor: originFontColor,
},
fontFlag: true,
}

15
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -13,28 +13,19 @@ export default function PlanSizeSetting(props) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
// const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon)
// const [originVertical, setOriginVertical] = useCanvasSetting(vertical)
// const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting()
const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('PlanSizeSetting useEffect 실행')
console.log('11111', planSizeSettingMode)
//setOriginHorizon({ originHorizon: horizon, flag: false })
//setOriginVertical({ originVertical: vertical, flag: false })
}, [])
const onSave = () => {
console.log('22222', planSizeSettingMode)
setPlanSizeSettingMode((prev) => {
console.log('4', prev)
return {
...prev,
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
originHorizon: Number(planSizeSettingMode.originHorizon),
originVertical: Number(planSizeSettingMode.originVertical),
flag: true,
}
})
@ -53,7 +44,7 @@ export default function PlanSizeSetting(props) {
setPlanSizeSettingMode((prev) => {
return {
...prev,
[name]: value,
[name]: Number(value),
flag: false,
}
})

8
src/hooks/common/useFont.js
View File

@ -12,7 +12,7 @@ export function useFont() {
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
useEffect(() => {
if (canvas && commonText.fontWeight?.value) {
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 && dimensionLineText.fontWeight?.value) {
if (canvas && dimensionLineText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
textObjs.forEach((obj) => {
obj.set({
@ -44,7 +44,7 @@ export function useFont() {
}, [dimensionLineText])
useEffect(() => {
if (canvas && flowText.fontWeight?.value) {
if (canvas && flowText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
textObjs.forEach((obj) => {
obj.set({
@ -60,7 +60,7 @@ export function useFont() {
}, [flowText])
useEffect(() => {
if (canvas && lengthText.fontWeight?.value) {
if (canvas && lengthText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
textObjs.forEach((obj) => {
obj.set({

239
src/hooks/option/useCanvasSetting.js
View File

@ -32,7 +32,7 @@ export function useCanvasSetting() {
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState)
//const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [selectedFont, setSelectedFont] = useState()
@ -40,13 +40,8 @@ export function useCanvasSetting() {
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) {
return
@ -97,9 +92,9 @@ export function useCanvasSetting() {
console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
frontSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
// 글꼴 변경 시
@ -114,20 +109,81 @@ export function useCanvasSetting() {
// 도명크기 변경 시
useEffect(() => {
console.log(
'useCanvasSetting useEffect 실행5',
correntObjectNo,
planSizeSettingMode.flag,
planSizeSettingMode.originHorizon,
planSizeSettingMode.originVertical,
)
console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
if (planSizeSettingMode.flag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [planSizeSettingMode.flag])
}, [planSizeSettingMode])
const getFonts = (itemValue) => {
const data = [
{ 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' },
].filter((font) => font.value === itemValue)[0]
if (data.length !== 0) {
return data
} else {
return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
}
}
const getFontSizes = (itemValue) => {
const data = [
...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 },
].filter((fontSize) => fontSize.value === itemValue)[0]
if (data.length !== 0) {
return data
} else {
return { id: 16, name: 16, value: 16 }
}
}
const getFontStyles = (itemValue) => {
const data = [
{ 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' },
].filter((fontStyle) => fontStyle.value === itemValue)[0]
if (data.length !== 0) {
return data
} else {
return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }
}
}
const getFontColors = (itemValue) => {
const data = [
{ 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' },
].filter((fontColor) => fontColor.value === itemValue)[0]
if (data.length !== 0) {
return data
} else {
return { id: 'black', name: getMessage('color.black'), value: 'black' }
}
}
const fetchSettings = async () => {
try {
@ -141,8 +197,6 @@ export function useCanvasSetting() {
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 })
@ -156,16 +210,6 @@ export function useCanvasSetting() {
originVertical: res.originVertical,
flag: false,
})
// setOriginHorizon({
// ...originHorizon,
// originHorizon: res.originHorizon,
// flag: false,
// })
// setOriginVertical({
// ...originVertical,
// originVertical: res.originVertical,
// flag: false,
// })
// 데이터 설정
setSettingModalFirstOptions({
@ -185,43 +229,43 @@ export function useCanvasSetting() {
const fontPatternData = {
commonText: {
//문자 글꼴 조회 데이터
fontFamily: res.wordFont,
fontWeight: res.wordFontStyle,
fontSize: res.wordFontSize,
fontColor: res.wordFontColor,
fontFamily: getFonts(res.wordFont),
fontWeight: getFontStyles(res.wordFontStyle),
fontSize: getFontSizes(res.wordFontSize),
fontColor: getFontColors(res.wordFontColor),
},
flowText: {
//흐름방향 글꼴 조회 데이터
fontFamily: res.flowFont,
fontWeight: res.flowFontStyle,
fontSize: res.flowFontSize,
fontColor: res.flowFontColor,
fontFamily: getFonts(res.flowFont),
fontWeight: getFontStyles(res.flowFontStyle),
fontSize: getFontSizes(res.flowFontSize),
fontColor: getFontColors(res.flowFontColor),
},
dimensionLineText: {
//치수 글꼴 조회 데이터
fontFamily: res.dimensioFont,
fontWeight: res.dimensioFontStyle,
fontSize: res.dimensioFontSize,
fontColor: res.dimensioFontColor,
fontFamily: getFonts(res.dimensioFont),
fontWeight: getFontStyles(res.dimensioFontStyle),
fontSize: getFontSizes(res.dimensioFontSize),
fontColor: getFontColors(res.dimensioFontColor),
},
circuitNumberText: {
//회로번호 글꼴 조회 데이터
fontFamily: res.circuitNumFont,
fontWeight: res.circuitNumFontStyle,
fontSize: res.circuitNumFontSize,
fontColor: res.circuitNumFontColor,
fontFamily: getFonts(res.circuitNumFont),
fontWeight: getFontStyles(res.circuitNumFontStyle),
fontSize: getFontSizes(res.circuitNumFontSize),
fontColor: getFontColors(res.circuitNumFontColor),
},
lengthText: {
//치수선 글꼴 조회 데이터
fontFamily: res.lengthFont,
fontWeight: res.lengthFontStyle,
fontSize: res.lengthFontSize,
fontColor: res.lengthFontColor,
fontFamily: getFonts(res.lengthFont),
fontWeight: getFontStyles(res.lengthFontStyle),
fontSize: getFontSizes(res.lengthFontSize),
fontColor: getFontColors(res.lengthFontColor),
},
//글꼴 설정 Flag
fontFlag: false,
}
//console.log('fontPatternData', fontPatternData)
console.log('fontPatternData', fontPatternData)
//조회된 글꼴 데이터 set
setGlobalFont(fontPatternData)
@ -239,14 +283,6 @@ export function useCanvasSetting() {
...planSizeSettingMode,
flag: false,
})
// setOriginHorizon({
// ...originHorizon,
// flag: false,
// })
// setOriginVertical({
// ...originVertical,
// flag: false,
// })
// 데이터 설정
setSettingModalFirstOptions({
@ -258,52 +294,7 @@ export function useCanvasSetting() {
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 })
setGlobalFont({ ...globalFont, fontFlag: false })
}
frontSettings()
} catch (error) {
@ -332,7 +323,7 @@ export function useCanvasSetting() {
selected: item.selected,
})),
}
// console.log('globalFont', globalFont)
const patternData = {
//견적서 번호
objectNo: correntObjectNo,
@ -366,34 +357,34 @@ export function useCanvasSetting() {
//글꼴 설정
//문자 글꼴
wordFont: globalFont.commonText.fontFamily,
wordFontStyle: globalFont.commonText.fontWeight,
wordFontSize: globalFont.commonText.fontSize,
wordFontColor: globalFont.commonText.fontColor,
wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
//흐름방향 글꼴
flowFont: globalFont.flowText.fontFamily,
flowFontStyle: globalFont.flowText.fontWeight,
flowFontSize: globalFont.flowText.fontSize,
flowFontColor: globalFont.flowText.fontColor,
flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
//치수 글꼴
dimensioFont: globalFont.dimensionLineText.fontFamily,
dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
dimensioFontSize: globalFont.dimensionLineText.fontSize,
dimensioFontColor: globalFont.dimensionLineText.fontColor,
dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
//회로번호 글꼴
circuitNumFont: globalFont.circuitNumberText.fontFamily,
circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
circuitNumFontSize: globalFont.circuitNumberText.fontSize,
circuitNumFontColor: globalFont.circuitNumberText.fontColor,
circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
//치수선 글꼴
lengthFont: globalFont.lengthText.fontFamily,
lengthFontStyle: globalFont.lengthText.fontWeight,
lengthFontSize: globalFont.lengthText.fontSize,
lengthFontColor: globalFont.lengthText.fontColor,
lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
//치수선 설정
originPixel: dimensionLineSettings.pixel,
@ -402,8 +393,6 @@ export function useCanvasSetting() {
//치수선 설정
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
// originHorizon: originHorizon.originHorizon,
// originVertical: originVertical.originVertical,
}
console.log('patternData ', patternData)