Custom template font #790
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import axios from 'axios'; | ||
| import { logger } from '@/Core/util/logger'; | ||
| import { WebGAL } from '@/Core/WebGAL'; | ||
| import { TemplateFontDescriptor, WebgalTemplate } from '@/types/template'; | ||
| import { buildFontOptionsFromTemplate } from '@/Core/util/fonts/fontOptions'; | ||
| import { webgalStore } from '@/store/store'; | ||
| import { setFontOptions } from '@/store/GUIReducer'; | ||
| import { setOptionData } from '@/store/userDataReducer'; | ||
|
|
||
| const TEMPLATE_PATH = './game/template/template.json'; | ||
| const TEMPLATE_FONT_STYLE_SELECTOR = 'style[data-webgal-template-fonts]'; | ||
|
|
||
| export async function loadTemplate(): Promise<WebgalTemplate | null> { | ||
| try { | ||
| const { data } = await axios.get<WebgalTemplate>(TEMPLATE_PATH); | ||
| WebGAL.template = data; | ||
| const fonts = data.fonts ?? []; | ||
| injectTemplateFonts(fonts); | ||
| updateFontOptions(fonts); | ||
| return data; | ||
| } catch (error) { | ||
| logger.warn('加载模板文件失败', error); | ||
| updateFontOptions([]); | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| function updateFontOptions(fonts: TemplateFontDescriptor[]): void { | ||
| const options = buildFontOptionsFromTemplate(fonts); | ||
| webgalStore.dispatch(setFontOptions(options)); | ||
| const currentIndex = webgalStore.getState().userData.optionData.textboxFont ?? 0; | ||
| if (options.length === 0) return; | ||
| if (currentIndex >= options.length) { | ||
| webgalStore.dispatch(setOptionData({ key: 'textboxFont', value: 0 })); | ||
| } | ||
| } | ||
|
|
||
| function injectTemplateFonts(fonts: TemplateFontDescriptor[]): void { | ||
| if (!fonts.length) return; | ||
| const rules = fonts.map((font) => generateFontFaceRule(font)).filter((rule): rule is string => Boolean(rule)); | ||
|
|
||
| if (!rules.length) return; | ||
|
|
||
| const styleElement = document.createElement('style'); | ||
| styleElement.setAttribute('data-webgal-template-fonts', 'true'); | ||
| styleElement.appendChild(document.createTextNode(rules.join('\n'))); | ||
|
|
||
| const head = document.head; | ||
| if (!head) return; | ||
|
|
||
| const existing = head.querySelector<HTMLStyleElement>(TEMPLATE_FONT_STYLE_SELECTOR); | ||
| existing?.remove(); | ||
|
|
||
| head.appendChild(styleElement); | ||
| } | ||
|
|
||
| function generateFontFaceRule(font: TemplateFontDescriptor): string | null { | ||
| const fontFamily = font['font-family']; | ||
| if (!fontFamily || !font.url || !font.type) { | ||
| logger.warn('忽略无效的模板字体配置', font); | ||
| return null; | ||
| } | ||
|
|
||
| const src = resolveTemplateAssetPath(font.url); | ||
| const weight = font.weight !== undefined ? `font-weight: ${font.weight};` : ''; | ||
| const style = font.style ? `font-style: ${font.style};` : ''; | ||
| const display = `font-display: ${font.display ?? 'swap'};`; | ||
|
|
||
| return `@font-face { font-family: '${fontFamily}'; src: url('${src}') format('${font.type}'); ${weight} ${style} ${display} }`; | ||
| } | ||
|
|
||
| function resolveTemplateAssetPath(path: string): string { | ||
| if (/^(https?:)?\/\//i.test(path) || path.startsWith('data:')) { | ||
| return path; | ||
| } | ||
| const normalized = path.replace(/^[./]+/, ''); | ||
|
There was a problem hiding this comment.
|
||
| return `./game/template/${normalized}`; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { FontOption } from '@/store/guiInterface'; | ||
| import { TemplateFontDescriptor } from '@/types/template'; | ||
|
|
||
| export const DEFAULT_FONT_OPTIONS: FontOption[] = [ | ||
| { | ||
| family: `'思源宋体', serif`, | ||
| source: 'default', | ||
| labelKey: 'textFont.options.siYuanSimSun', | ||
| }, | ||
| { | ||
| family: `'WebgalUI', serif`, | ||
| source: 'default', | ||
| labelKey: 'textFont.options.SimHei', | ||
| }, | ||
| { | ||
| family: `'LXGW', serif`, | ||
| source: 'default', | ||
| labelKey: 'textFont.options.lxgw', | ||
| }, | ||
| ]; | ||
|
|
||
| export const FALLBACK_FONT_FAMILY = DEFAULT_FONT_OPTIONS[1].family; | ||
|
|
||
| export function buildFontOptionsFromTemplate(fonts: TemplateFontDescriptor[]): FontOption[] { | ||
| const templateOptions: FontOption[] = fonts.map((font) => ({ | ||
| family: formatFontFamily(font['font-family']), | ||
| source: 'template', | ||
| label: font['font-family'], | ||
| })); | ||
|
|
||
| const combined = [...templateOptions, ...DEFAULT_FONT_OPTIONS]; | ||
|
|
||
| const seen = new Set<string>(); | ||
| return combined.filter((option) => { | ||
| if (seen.has(option.family)) return false; | ||
| seen.add(option.family); | ||
| return true; | ||
| }); | ||
| } | ||
|
|
||
| export function formatFontFamily(fontFamily: string): string { | ||
| const trimmed = fontFamily.trim(); | ||
| const needsQuote = /\s/.test(trimmed); | ||
| const normalized = needsQuote ? `'${trimmed}'` : trimmed; | ||
| return `${normalized}, serif`; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,23 @@ | ||
| import { useSelector } from 'react-redux'; | ||
| import { RootState, webgalStore } from '@/store/store'; | ||
| import { FALLBACK_FONT_FAMILY } from '@/Core/util/fonts/fontOptions'; | ||
|
|
||
| export function useFontFamily(): string { | ||
| return useSelector(selectFontFamily); | ||
| } | ||
|
|
||
| export function getCurrentFontFamily(): string { | ||
| return selectFontFamily(webgalStore.getState()); | ||
| } | ||
|
|
||
| export function selectFontFamily(state: RootState): string { | ||
| const index = state.userData.optionData.textboxFont ?? 0; | ||
| const fonts = state.GUI.fontOptions; | ||
| if (fonts[index]) { | ||
| return fonts[index].family; | ||
| } | ||
| if (fonts.length > 0) { | ||
| return fonts[0].family; | ||
| } | ||
| return FALLBACK_FONT_FAMILY; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
loadTemplate是一个异步函数，但在这里它被同步调用（“fire-and-forget”模式）。这可能会导致竞态条件：在loadTemplate完成加载模板和字体之前，后续的初始化代码（如sceneFetcher）可能已经开始执行。如果场景依赖于模板中定义的自定义字体，字体可能无法被正确应用，或导致内容闪烁（FOUT）。为了保证初始化顺序的正确性，建议将initializeScript函数修改为async函数，并使用await等待loadTemplate完成。