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

refactor(stage): stageRender去除对stageCore对象的依赖，简化对象依赖关系

Browse Source
This commit is contained in:
oceanzhu 2022-10-22 16:41:25 +08:00 committed by roymondchen
parent baedcaba05
commit 638e996516
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/stage/src/StageCore.ts
View File

@ -75,7 +75,7 @@ export default class StageCore extends EventEmitter {
this.containerHighlightDuration = config.containerHighlightDuration || 800; this.containerHighlightDuration = config.containerHighlightDuration || 800;
this.containerHighlightType = config.containerHighlightType; this.containerHighlightType = config.containerHighlightType;
this.renderer = new StageRender({ core: this }); this.renderer = new StageRender(config.runtimeUrl, this.render);
this.mask = new StageMask({ core: this }); this.mask = new StageMask({ core: this });
this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask }); this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask }); this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
@ -374,6 +374,16 @@ export default class StageCore extends EventEmitter {
this.container = undefined; this.container = undefined;
} }
/**
* 传入stageRender供其回调，获取业务方自定义渲染画布页面渲染结果
*/
private async render(): Promise<HTMLElement | null> {
if (this.config?.render) {
return await this.config.render(this);
}
return null;
}
private async getTargetElement(idOrEl: Id | HTMLElement): Promise<HTMLElement> { private async getTargetElement(idOrEl: Id | HTMLElement): Promise<HTMLElement> {
if (typeof idOrEl === 'string' || typeof idOrEl === 'number') { if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`); const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);

22
packages/stage/src/StageRender.ts
View File

@ -20,9 +20,8 @@ import { EventEmitter } from 'events';
import { getHost, injectStyle, isSameDomain } from '@tmagic/utils'; import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
import StageCore from './StageCore';
import style from './style.css?raw'; import style from './style.css?raw';
import type { Runtime, RuntimeWindow, StageRenderConfig } from './types'; import type { Runtime, RuntimeWindow } from './types';
export default class StageRender extends EventEmitter { export default class StageRender extends EventEmitter {
/** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */ /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
@ -34,16 +33,13 @@ export default class StageRender extends EventEmitter {
public runtimeUrl?: string; public runtimeUrl?: string;
public core: StageCore; private render: () => Promise<HTMLElement | null>;
private render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement; constructor(runtimeUrl: string | undefined, render: () => Promise<HTMLElement | null>) {
constructor({ core }: StageRenderConfig) {
super(); super();
this.core = core; this.runtimeUrl = runtimeUrl || '';
this.runtimeUrl = core.config.runtimeUrl || ''; this.render = render;
this.render = core.config.render;
this.iframe = globalThis.document.createElement('iframe'); this.iframe = globalThis.document.createElement('iframe');
// 同源，直接加载 // 同源，直接加载
@ -119,11 +115,9 @@ export default class StageRender extends EventEmitter {
if (!this.contentWindow) return; if (!this.contentWindow) return;
if (this.render) { const el = await this.render();
const el = await this.render(this.core); if (el) {
if (el) { this.contentWindow.document?.body?.appendChild(el);
this.contentWindow.document?.body?.appendChild(el);
}
} }
this.emit('onload'); this.emit('onload');