@tmagic/stage 1.3.4 → 1.3.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.4",
+  "version": "1.3.6",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -23,7 +23,7 @@
     "clear:type": "rimraf ./types"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.4",
-    "@tmagic/schema": "1.3.4",
-    "@tmagic/utils": "1.3.4",
+    "@tmagic/core": "1.3.6",
+    "@tmagic/schema": "1.3.6",
+    "@tmagic/utils": "1.3.6",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
@@ -43,10 +43,10 @@
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.12.4",
+    "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.4.4"
+    "vite": "^5.0.7"
   }
 }

package/src/ActionManager.ts

@@ -561,13 +561,13 @@ export default class ActionManager extends EventEmitter {
   /**
    * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
    */
-  private mouseUpHandler = (): void => {
+  private mouseUpHandler = (event: MouseEvent): void => {
     getDocument().removeEventListener('mouseup', this.mouseUpHandler);
     this.container.addEventListener('mousemove', this.mouseMoveHandler);
     if (this.isMultiSelectStatus) {
-      this.emit('multi-select', this.selectedElList);
+      this.emit('multi-select', this.selectedElList, event);
     } else {
-      this.emit('select', this.selectedEl);
+      this.emit('select', this.selectedEl, event);
     }
   };
 

package/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);
@@ -307,14 +308,14 @@ export default class StageCore extends EventEmitter {
       .on('before-select', (idOrEl: Id | HTMLElement, event?: MouseEvent) => {
         this.select(idOrEl, event);
       })
-      .on('select', (selectedEl: HTMLElement) => {
-        this.emit('select', selectedEl);
+      .on('select', (selectedEl: HTMLElement, event: MouseEvent) => {
+        this.emit('select', selectedEl, event);
       })
       .on('before-multi-select', (idOrElList: HTMLElement[] | Id[]) => {
         this.multiSelect(idOrElList);
       })
-      .on('multi-select', (selectedElList: HTMLElement[]) => {
-        this.emit('multi-select', selectedElList);
+      .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
+        this.emit('multi-select', selectedElList, event);
       });
   }
 

package/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 (!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;
-    }
+    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);
+      el.appendChild<HTMLIFrameElement>(this.iframe);
 
-    this.postTmagicRuntimeReady();
+      this.postTmagicRuntimeReady();
+    } else if (this.nativeContainer) {
+      el.appendChild(this.nativeContainer);
+    }
   }
 
   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();
     }

package/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;

package/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>;
 }
 

package/types/StageRender.d.ts

@@ -1,16 +1,18 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 import { Id } from '@tmagic/schema';
-import type { Point, RemoveData, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
+import { type Point, type RemoveData, type Runtime, type RuntimeWindow, type StageRenderConfig, type UpdateData } from './types';
 export default class StageRender extends EventEmitter {
     /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
     contentWindow: RuntimeWindow | null;
     runtime: Runtime | null;
     iframe?: HTMLIFrameElement;
+    nativeContainer?: HTMLDivElement;
     private runtimeUrl?;
     private zoom;
+    private renderType;
     private customizedRender?;
-    constructor({ runtimeUrl, zoom, customizedRender }: StageRenderConfig);
+    constructor({ runtimeUrl, zoom, customizedRender, renderType }: StageRenderConfig);
     getMagicApi: () => {
         onPageElUpdate: (el: HTMLElement) => boolean;
         onRuntimeReady: (runtime: Runtime) => void;
@@ -38,11 +40,13 @@ export default class StageRender extends EventEmitter {
      * 销毁实例
      */
     destroy(): void;
+    private createIframe;
+    private createNativeContainer;
     /**
      * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
      * @param el 被选中的元素
      */
     private flagSelectedEl;
-    private loadHandler;
+    private iframeLoadHandler;
     private postTmagicRuntimeReady;
 }

package/types/types.d.ts

@@ -26,7 +26,11 @@ export declare enum ContainerHighlightType {
     /** 按住alt键，并在容器上方悬停一段时间后加入 */
     ALT = "alt"
 }
-export type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+export declare enum RenderType {
+    IFRAME = "iframe",
+    NATIVE = "native"
+}
+export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
 export interface StageCoreConfig {
     /** 需要对齐的dom节点的CSS选择器字符串 */
     snapElementQuerySelector?: string;
@@ -44,6 +48,7 @@ export interface StageCoreConfig {
     autoScrollIntoView?: boolean;
     updateDragEl?: UpdateDragEl;
     disabledDragStart?: boolean;
+    renderType?: RenderType;
 }
 export interface ActionManagerConfig {
     container: HTMLElement;
@@ -76,6 +81,7 @@ export interface CustomizeMoveableOptionsCallbackConfig {
 export interface StageRenderConfig {
     runtimeUrl?: string;
     zoom: number | undefined;
+    renderType?: RenderType;
     customizedRender?: () => Promise<HTMLElement | null>;
 }
 export interface StageMaskConfig {