From ba2f1e5ac5b71ece1d61aec81b84adf166ab063e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 12 Dec 2023 15:09:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage,=20editor):=20runtime=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=9B=B4=E6=8E=A5=E6=B8=B2=E6=9F=93=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8D=E7=94=A8iframe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                |  1 +
 packages/editor/src/editorProps.ts            |  4 +
 packages/editor/src/hooks/use-stage.ts        |  1 +
 .../layouts/sidebar/layer/use-node-status.ts  |  2 +-
 packages/editor/src/type.ts                   |  2 +
 packages/editor/src/utils/editor.ts           | 15 ++-
 packages/form/src/containers/Container.vue    |  1 +
 packages/stage/src/StageCore.ts               |  1 +
 packages/stage/src/StageRender.ts             | 99 +++++++++++++------
 packages/stage/src/TargetShadow.ts            |  2 +-
 packages/stage/src/types.ts                   |  9 +-
 11 files changed, 102 insertions(+), 35 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index aa5a2bd6..7d36b5b2 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -175,6 +175,7 @@ provide(
     containerHighlightDuration: props.containerHighlightDuration,
     containerHighlightType: props.containerHighlightType,
     disabledDragStart: props.disabledDragStart,
+    renderType: props.renderType,
   }),
 );
 
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index f6011626..488e4512 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -7,6 +7,7 @@ import StageCore, {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
   MoveableOptions,
+  RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
 
@@ -39,6 +40,8 @@ export interface EditorProps {
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 中间工作区域中画布通过iframe渲染时的页面url */
   runtimeUrl?: string;
+  /** 是用iframe渲染还是直接渲染 */
+  renderType?: RenderType;
   /** 选中时是否自动滚动到可视区域 */
   autoScrollIntoView?: boolean;
   /** 组件的属性配置表单的dsl */
@@ -87,4 +90,5 @@ export const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
+  renderType: RenderType.IFRAME,
 };
diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index c310deb9..7f32fbeb 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -31,6 +31,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
     disabledDragStart: stageOptions.disabledDragStart,
+    renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
diff --git a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
index 65dad93e..dc8add8b 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
@@ -18,7 +18,7 @@ const createPageNodeStatus = (page: MPage, initalLayerNodeStatus?: Map<Id, Layer
   });
 
   page.items.forEach((node: MNode) =>
-    traverseNode(node, (node) => {
+    traverseNode<MNode>(node, (node) => {
       map.set(
         node.id,
         initalLayerNodeStatus?.get(node.id) || {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 051cd2ac..eba82fa1 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -25,6 +25,7 @@ import type {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
   MoveableOptions,
+  RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
 
@@ -129,6 +130,7 @@ export interface StageOptions {
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl: UpdateDragEl;
+  renderType: RenderType;
 }
 
 export interface StoreState {
diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
index 2e8dc858..bb276206 100644
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@@ -257,13 +257,22 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export const traverseNode = (node: MNode, cb: (node: MNode, parents: MNode[]) => void, parents: MNode[] = []) => {
+export interface NodeItem {
+  items?: NodeItem[];
+  [key: string]: any;
+}
+
+export const traverseNode = <T extends NodeItem = NodeItem>(
+  node: T,
+  cb: (node: T, parents: T[]) => void,
+  parents: T[] = [],
+) => {
   cb(node, parents);
 
   if (node.items?.length) {
     parents.push(node);
-    node.items.forEach((item: MNode) => {
-      traverseNode(item, cb, [...parents]);
+    node.items.forEach((item) => {
+      traverseNode(item as T, cb, [...parents]);
     });
   }
 };
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index 2ecea9b7..536bc7a5 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="config"
+    :id="config.id"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >
diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index e4c0c984..49af52c9 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -61,6 +61,7 @@ export default class StageCore extends EventEmitter {
     this.renderer = new StageRender({
       runtimeUrl: config.runtimeUrl,
       zoom: config.zoom,
+      renderType: config.renderType,
       customizedRender: async (): Promise<HTMLElement | null> => {
         if (this?.customizedRender) {
           return await this.customizedRender(this);
diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts
index 8347a850..ffc541ce 100644
--- a/packages/stage/src/StageRender.ts
+++ b/packages/stage/src/StageRender.ts
@@ -23,7 +23,15 @@ import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
 import { DEFAULT_ZOOM } from './const';
 import style from './style.css?raw';
-import type { Point, RemoveData, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
+import {
+  type Point,
+  type RemoveData,
+  RenderType,
+  type Runtime,
+  type RuntimeWindow,
+  type StageRenderConfig,
+  type UpdateData,
+} from './types';
 import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageRender extends EventEmitter {
@@ -31,28 +39,26 @@ export default class StageRender extends EventEmitter {
   public contentWindow: RuntimeWindow | null = null;
   public runtime: Runtime | null = null;
   public iframe?: HTMLIFrameElement;
+  public nativeContainer?: HTMLDivElement;
 
   private runtimeUrl?: string;
   private zoom = DEFAULT_ZOOM;
+  private renderType: RenderType;
   private customizedRender?: () => Promise<HTMLElement | null>;
 
-  constructor({ runtimeUrl, zoom, customizedRender }: StageRenderConfig) {
+  constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }: StageRenderConfig) {
     super();
 
+    this.renderType = renderType;
     this.runtimeUrl = runtimeUrl || '';
     this.customizedRender = customizedRender;
     this.setZoom(zoom);
 
-    this.iframe = globalThis.document.createElement('iframe');
-    // 同源，直接加载
-    this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : '';
-    this.iframe.style.cssText = `
-      border: 0;
-      width: 100%;
-      height: 100%;
-    `;
-
-    this.iframe.addEventListener('load', this.loadHandler);
+    if (this.renderType === RenderType.IFRAME) {
+      this.createIframe();
+    } else if (this.renderType === RenderType.NATIVE) {
+      this.createNativeContainer();
+    }
   }
 
   public getMagicApi = () => ({
@@ -102,22 +108,22 @@ export default class StageRender extends EventEmitter {
    * @param el 将页面挂载到该Dom节点上
    */
   public async mount(el: HTMLDivElement) {
-    if (!this.iframe) {
-      throw Error('mount 失败');
+    if (this.iframe) {
+      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+        // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
+        let html = await fetch(this.runtimeUrl).then((res) => res.text());
+        // 使用base, 解决相对路径或绝对路径的问题
+        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+        html = html.replace('<head>', `<head>\n<base href="${base}">`);
+        this.iframe.srcdoc = html;
+      }
+
+      el.appendChild<HTMLIFrameElement>(this.iframe);
+
+      this.postTmagicRuntimeReady();
+    } else if (this.nativeContainer) {
+      el.appendChild(this.nativeContainer);
     }
-
-    if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-      // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
-      let html = await fetch(this.runtimeUrl).then((res) => res.text());
-      // 使用base, 解决相对路径或绝对路径的问题
-      const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
-      html = html.replace('<head>', `<head>\n<base href="${base}">`);
-      this.iframe.srcdoc = html;
-    }
-
-    el.appendChild<HTMLIFrameElement>(this.iframe);
-
-    this.postTmagicRuntimeReady();
   }
 
   public getRuntime = (): Promise<Runtime> => {
@@ -150,6 +156,12 @@ export default class StageRender extends EventEmitter {
         x = x - rect.left;
         y = y - rect.top;
       }
+    } else if (this.nativeContainer) {
+      const rect = this.nativeContainer.getClientRects()[0];
+      if (rect) {
+        x = x - rect.left;
+        y = y - rect.top;
+      }
     }
 
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];
@@ -168,13 +180,42 @@ export default class StageRender extends EventEmitter {
    * 销毁实例
    */
   public destroy(): void {
-    this.iframe?.removeEventListener('load', this.loadHandler);
+    this.iframe?.removeEventListener('load', this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = undefined;
     this.removeAllListeners();
   }
 
+  private createIframe(): HTMLIFrameElement {
+    this.iframe = globalThis.document.createElement('iframe');
+    // 同源，直接加载
+    this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : '';
+    this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+
+    this.iframe.addEventListener('load', this.iframeLoadHandler);
+
+    return this.iframe;
+  }
+
+  private async createNativeContainer() {
+    this.contentWindow = globalThis as unknown as RuntimeWindow;
+    this.nativeContainer = globalThis.document.createElement('div');
+
+    this.contentWindow.magic = this.getMagicApi();
+
+    if (this.customizedRender) {
+      const el = await this.customizedRender();
+      if (el) {
+        this.nativeContainer.appendChild(el);
+      }
+    }
+  }
+
   /**
    * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
    * @param el 被选中的元素
@@ -187,7 +228,7 @@ export default class StageRender extends EventEmitter {
     }
   }
 
-  private loadHandler = async () => {
+  private iframeLoadHandler = async () => {
     if (!this.contentWindow?.magic) {
       this.postTmagicRuntimeReady();
     }
diff --git a/packages/stage/src/TargetShadow.ts b/packages/stage/src/TargetShadow.ts
index 4e3bfa88..a6a21d5e 100644
--- a/packages/stage/src/TargetShadow.ts
+++ b/packages/stage/src/TargetShadow.ts
@@ -96,7 +96,7 @@ export default class TargetShadow {
     el.style.cssText = getTargetElStyle(target, this.zIndex);
 
     if (typeof this.updateDragEl === 'function') {
-      this.updateDragEl(el, target);
+      this.updateDragEl(el, target, this.container);
     }
     const isFixed = isFixedParent(target);
     const mode = this.container.dataset.mode || Mode.ABSOLUTE;
diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts
index 2d7706cc..59490015 100644
--- a/packages/stage/src/types.ts
+++ b/packages/stage/src/types.ts
@@ -52,7 +52,12 @@ export enum ContainerHighlightType {
   ALT = 'alt',
 }
 
-export type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+export enum RenderType {
+  IFRAME = 'iframe',
+  NATIVE = 'native',
+}
+
+export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
 
 export interface StageCoreConfig {
   /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -71,6 +76,7 @@ export interface StageCoreConfig {
   autoScrollIntoView?: boolean;
   updateDragEl?: UpdateDragEl;
   disabledDragStart?: boolean;
+  renderType?: RenderType;
 }
 
 export interface ActionManagerConfig {
@@ -107,6 +113,7 @@ export interface CustomizeMoveableOptionsCallbackConfig {
 export interface StageRenderConfig {
   runtimeUrl?: string;
   zoom: number | undefined;
+  renderType?: RenderType;
   customizedRender?: () => Promise<HTMLElement | null>;
 }