From 638e99651615547e645da399f0570eb7d91066d2 Mon Sep 17 00:00:00 2001
From: oceanzhu <oceanzhu@tencent.com>
Date: Sat, 22 Oct 2022 16:41:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor(stage):=20stageRender=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4=E5=AF=B9stageCore=E5=AF=B9=E8=B1=A1=E7=9A=84=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=EF=BC=8C=E7=AE=80=E5=8C=96=E5=AF=B9=E8=B1=A1=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=85=B3=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageCore.ts   | 12 +++++++++++-
 packages/stage/src/StageRender.ts | 22 ++++++++--------------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 3602e70a..bef1abf9 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -75,7 +75,7 @@ export default class StageCore extends EventEmitter {
     this.containerHighlightDuration = config.containerHighlightDuration || 800;
     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.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 });
@@ -374,6 +374,16 @@ export default class StageCore extends EventEmitter {
     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> {
     if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
       const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts
index 43fd47d5..b3580a61 100644
--- a/packages/stage/src/StageRender.ts
+++ b/packages/stage/src/StageRender.ts
@@ -20,9 +20,8 @@ import { EventEmitter } from 'events';
 
 import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
-import StageCore from './StageCore';
 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 {
   /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
@@ -34,16 +33,13 @@ export default class StageRender extends EventEmitter {
 
   public runtimeUrl?: string;
 
-  public core: StageCore;
+  private render: () => Promise<HTMLElement | null>;
 
-  private render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
-
-  constructor({ core }: StageRenderConfig) {
+  constructor(runtimeUrl: string | undefined, render: () => Promise<HTMLElement | null>) {
     super();
 
-    this.core = core;
-    this.runtimeUrl = core.config.runtimeUrl || '';
-    this.render = core.config.render;
+    this.runtimeUrl = runtimeUrl || '';
+    this.render = render;
 
     this.iframe = globalThis.document.createElement('iframe');
     // 同源，直接加载
@@ -119,11 +115,9 @@ export default class StageRender extends EventEmitter {
 
     if (!this.contentWindow) return;
 
-    if (this.render) {
-      const el = await this.render(this.core);
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
-      }
+    const el = await this.render();
+    if (el) {
+      this.contentWindow.document?.body?.appendChild(el);
     }
 
     this.emit('onload');