JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-22 18:05:17 +08:00
Code Issues Projects Releases Wiki Activity

feat(core): 重新设置designWidth时，应该重新计算root font size

Browse Source
This commit is contained in:
roymondchen 2023-04-10 16:40:20 +08:00
parent 40adc77978
commit 3d9f38781a
1 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/core/src/App.ts
View File

@ -54,7 +54,7 @@ interface EventCache {
} }
class App extends EventEmitter { class App extends EventEmitter {
public env; public env: Env = new Env();
public dsl?: MApp; public dsl?: MApp;
public codeDsl?: CodeBlockDSL; public codeDsl?: CodeBlockDSL;
@ -73,26 +73,14 @@ class App extends EventEmitter {
constructor(options: AppOptionsConfig) { constructor(options: AppOptionsConfig) {
super(); super();
this.env = new Env(options.ua); this.setEnv(options.ua);
// 代码块描述内容在dsl codeBlocks字段 // 代码块描述内容在dsl codeBlocks字段
this.codeDsl = options.config?.codeBlocks; this.codeDsl = options.config?.codeBlocks;
options.platform && (this.platform = options.platform); options.platform && (this.platform = options.platform);
options.jsEngine && (this.jsEngine = options.jsEngine); options.jsEngine && (this.jsEngine = options.jsEngine);
options.designWidth && (this.designWidth = options.designWidth);
// 根据屏幕大小计算出跟节点的font-size，用于rem样式的适配 if (typeof options.designWidth !== 'undefined') {
if (this.jsEngine === 'browser') { this.setDesignWidth(options.designWidth);
const calcFontsize = () => {
const { width } = document.documentElement.getBoundingClientRect();
const fontSize = width / (this.designWidth / 100);
document.documentElement.style.fontSize = `${fontSize}px`;
};
calcFontsize();
document.body.style.fontSize = '14px';
globalThis.addEventListener('resize', calcFontsize);
} }
if (options.transformStyle) { if (options.transformStyle) {
@ -110,6 +98,20 @@ class App extends EventEmitter {
bindCommonEventListener(this); bindCommonEventListener(this);
} }
public setEnv(ua?: string) {
this.env = new Env(ua);
}
public setDesignWidth(width: number) {
this.designWidth = width;
// 根据屏幕大小计算出跟节点的font-size，用于rem样式的适配
if (this.jsEngine === 'browser') {
this.calcFontsize();
globalThis.removeEventListener('resize', this.calcFontsize);
globalThis.addEventListener('resize', this.calcFontsize);
}
}
/** /**
* 将dsl中的style配置转换成css，主要是将数值转成rem为单位的样式值，例如100将被转换成1rem * 将dsl中的style配置转换成css，主要是将数值转成rem为单位的样式值，例如100将被转换成1rem
* @param style Object * @param style Object
@ -326,6 +328,10 @@ class App extends EventEmitter {
public destroy() { public destroy() {
this.removeAllListeners(); this.removeAllListeners();
this.page = undefined; this.page = undefined;
if (this.jsEngine === 'browser') {
globalThis.removeEventListener('resize', this.calcFontsize);
}
} }
private addEventToMap(event: EventCache) { private addEventToMap(event: EventCache) {
@ -354,6 +360,12 @@ class App extends EventEmitter {
const values = transform.join(' '); const values = transform.join(' ');
return !values.trim() ? 'none' : values; return !values.trim() ? 'none' : values;
} }
private calcFontsize() {
const { width } = document.documentElement.getBoundingClientRect();
const fontSize = width / (this.designWidth / 100);
document.documentElement.style.fontSize = `${fontSize}px`;
}
} }
export default App; export default App;