@tmagic/stage 1.3.16 → 1.4.0-beta.2

package/src/StageRender.ts

@@ -21,17 +21,9 @@ import { EventEmitter } from 'events';
 import { Id } from '@tmagic/schema';
 import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
-import { DEFAULT_ZOOM } from './const';
+import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
-import {
-  type Point,
-  type RemoveData,
-  RenderType,
-  type Runtime,
-  type RuntimeWindow,
-  type StageRenderConfig,
-  type UpdateData,
-} from './types';
+import type { Point, RemoveData, RenderEvents, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
 import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageRender extends EventEmitter {
@@ -87,15 +79,13 @@ export default class StageRender extends EventEmitter {
     runtime?.update?.(data);
   }
 
-  public async select(els: HTMLElement[]): Promise<void> {
+  public async select(ids: Id[]): Promise<void> {
     const runtime = await this.getRuntime();
 
-    for (const el of els) {
-      await runtime?.select?.(el.id);
-      if (runtime?.beforeSelect) {
-        await runtime.beforeSelect(el);
-      }
-      this.flagSelectedEl(el);
+    for (const id of ids) {
+      await runtime?.select?.(id);
+
+      this.flagSelectedEl(this.getTargetElement(id));
     }
   }
 
@@ -161,13 +151,8 @@ export default class StageRender extends EventEmitter {
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];
   }
 
-  public getTargetElement(idOrEl: Id | HTMLElement): HTMLElement {
-    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
-      const el = this.getDocument()?.getElementById(`${idOrEl}`);
-      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
-      return el;
-    }
-    return idOrEl;
+  public getTargetElement(id: Id): HTMLElement | null {
+    return this.getDocument()?.getElementById(`${id}`) || null;
   }
 
   /**
@@ -181,6 +166,17 @@ export default class StageRender extends EventEmitter {
     this.removeAllListeners();
   }
 
+  public on<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   private createIframe(): HTMLIFrameElement {
     this.iframe = globalThis.document.createElement('iframe');
     // 同源，直接加载
@@ -214,11 +210,11 @@ export default class StageRender extends EventEmitter {
    * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
    * @param el 被选中的元素
    */
-  private flagSelectedEl(el: HTMLElement): void {
+  private flagSelectedEl(el: HTMLElement | null): void {
     const doc = this.getDocument();
     if (doc) {
       removeSelectedClassName(doc);
-      addSelectedClassName(el, doc);
+      el && addSelectedClassName(el, doc);
     }
   }
 

package/src/TargetShadow.ts

@@ -93,7 +93,7 @@ export default class TargetShadow {
   private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
     const el = src || globalThis.document.createElement('div');
 
-    el.id = `${this.idPrefix}${target.id}`;
+    el.id = `${this.idPrefix}_${target.id}`;
 
     el.style.cssText = getTargetElStyle(target, this.zIndex);
 

package/src/const.ts

@@ -78,3 +78,34 @@ export enum AbleActionEventType {
   SELECT_PARENT = 'select-parent',
   REMOVE = 'remove',
 }
+
+/** 将组件添加到容器的方式 */
+export enum ContainerHighlightType {
+  /** 默认方式：组件在容器上方悬停一段时间后加入 */
+  DEFAULT = 'default',
+  /** 按住alt键，并在容器上方悬停一段时间后加入 */
+  ALT = 'alt',
+}
+
+export enum RenderType {
+  IFRAME = 'iframe',
+  NATIVE = 'native',
+}
+
+/** 选择状态 */
+export enum SelectStatus {
+  /** 单选 */
+  SELECT = 'select',
+  /** 多选 */
+  MULTI_SELECT = 'multiSelect',
+}
+
+/** 拖动状态 */
+export enum StageDragStatus {
+  /** 开始拖动 */
+  START = 'start',
+  /** 拖动中 */
+  ING = 'ing',
+  /** 拖动结束 */
+  END = 'end',
+}

package/src/types.ts

@@ -17,12 +17,12 @@
  */
 
 import type { GuidesOptions } from '@scena/guides';
-import type { MoveableOptions } from 'moveable';
+import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 
-import { GuidesType, ZIndex } from './const';
+import { AbleActionEventType, ContainerHighlightType, GuidesType, RenderType, ZIndex } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import StageCore from './StageCore';
 
@@ -36,8 +36,8 @@ export type CustomizeMoveableOptions =
   | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
   | MoveableOptions
   | undefined;
-/** render提供给的接口，如果是id则转成el，如果是el则直接返回 */
-export type GetTargetElement = (idOrEl: Id | HTMLElement) => HTMLElement;
+/** render提供给的接口，id转成el */
+export type GetTargetElement = (id: Id) => HTMLElement | null;
 /** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
 export type GetElementsFromPoint = (point: Point) => HTMLElement[];
 export type GetRenderDocument = () => Document | undefined;
@@ -45,19 +45,6 @@ export type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => No
 export type MarkContainerEnd = () => HTMLElement | null;
 export type GetRootContainer = () => HTMLDivElement | undefined;
 
-/** 将组件添加到容器的方式 */
-export enum ContainerHighlightType {
-  /** 默认方式：组件在容器上方悬停一段时间后加入 */
-  DEFAULT = 'default',
-  /** 按住alt键，并在容器上方悬停一段时间后加入 */
-  ALT = 'alt',
-}
-
-export enum RenderType {
-  IFRAME = 'iframe',
-  NATIVE = 'native',
-}
-
 export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
 
 export interface StageCoreConfig {
@@ -106,7 +93,7 @@ export interface MoveableOptionsManagerConfig {
 }
 
 export interface CustomizeMoveableOptionsCallbackConfig {
-  targetEl?: HTMLElement;
+  targetEl: HTMLElement | null;
   targetElId?: string;
   targetEls?: HTMLElement[];
   targetElIds?: string[];
@@ -151,24 +138,6 @@ export interface DragResizeHelperConfig {
   updateDragEl?: UpdateDragEl;
 }
 
-/** 选择状态 */
-export enum SelectStatus {
-  /** 单选 */
-  SELECT = 'select',
-  /** 多选 */
-  MULTI_SELECT = 'multiSelect',
-}
-
-/** 拖动状态 */
-export enum StageDragStatus {
-  /** 开始拖动 */
-  START = 'start',
-  /** 拖动中 */
-  ING = 'ing',
-  /** 拖动结束 */
-  END = 'end',
-}
-
 export type Rect = {
   width: number;
   height: number;
@@ -234,7 +203,6 @@ export interface RemoveData {
 
 export interface Runtime {
   getApp?: () => Core | undefined;
-  beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   updateRootConfig?: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
@@ -271,3 +239,71 @@ export interface TargetShadowConfig {
 export interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions>;
 }
+
+export interface CoreEvents {
+  mounted: [];
+  'runtime-ready': [runtime: Runtime];
+  'page-el-update': [el: HTMLElement];
+  'change-guides': [data: GuidesEventData];
+  select: [selectedEl: HTMLElement, event: MouseEvent];
+  'multi-select': [selectedElList: HTMLElement[], event: MouseEvent];
+  dblclick: [event: MouseEvent];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+  'select-parent': [];
+  remove: [data: RemoveEventData];
+  highlight: [highlightEl: HTMLElement];
+  mousemove: [event: MouseEvent];
+  mouseleave: [event: MouseEvent];
+  'drag-start': [event: OnDragStart];
+}
+
+export interface RenderEvents {
+  onload: [];
+  'page-el-update': [el: HTMLElement];
+  'runtime-ready': [runtime: Runtime];
+}
+
+export interface MaskEvents {
+  scroll: [event: WheelEvent];
+  'change-guides': [
+    data: {
+      type: GuidesType.HORIZONTAL;
+      guides: number[];
+    },
+  ];
+}
+
+export interface ActionManagerEvents {
+  dblclick: [event: MouseEvent];
+  mousemove: [event: MouseEvent];
+  mouseleave: [event: MouseEvent];
+  highlight: [el: HTMLElement];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+  remove: [data: RemoveEventData];
+  select: [selectedEl: HTMLElement | null, event: MouseEvent];
+  'select-parent': [];
+  'drag-start': [event: OnDragStart];
+  'multi-update': [data: UpdateEventData];
+  'change-to-select': [id: Id, event: MouseEvent];
+  'before-multi-select': [selectedElList: HTMLElement[]];
+  'before-select': [el: HTMLElement, event: MouseEvent];
+  'multi-select': [selectedElList: HTMLElement[], event: MouseEvent];
+  'get-elements-from-point': [els: HTMLElement[]];
+}
+
+export interface DrEvents {
+  'update-moveable': [];
+  [AbleActionEventType.REMOVE]: [];
+  [AbleActionEventType.SELECT_PARENT]: [];
+  'drag-start': [event: OnDragStart];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+}
+
+export interface MultiDrEvents {
+  'update-moveable': [];
+  'change-to-select': [id: Id, event: MouseEvent];
+  update: [data: UpdateEventData];
+}

package/src/util.ts

@@ -177,7 +177,7 @@ export const calcValueByFontsize = (doc: Document, value: number) => {
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const down = (deltaTop: number, target: TargetElement): SortEventData | void => {
+export const down = (deltaTop: number, target: TargetElement): SortEventData => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
@@ -213,7 +213,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData | v
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const up = (deltaTop: number, target: TargetElement): SortEventData | void => {
+export const up = (deltaTop: number, target: TargetElement): SortEventData => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
     (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
   );

package/types/ActionManager.d.ts

@@ -3,8 +3,8 @@
 import EventEmitter from 'events';
 import type { MoveableOptions } from 'moveable';
 import type { Id } from '@tmagic/schema';
-import { GuidesType } from './const';
-import { ActionManagerConfig, SelectStatus, StageDragStatus } from './types';
+import { GuidesType, SelectStatus, StageDragStatus } from './const';
+import type { ActionManagerConfig, ActionManagerEvents } from './types';
 /**
  * 管理蒙层mask之上的操作：1、监听键盘鼠标事件，判断形成单选、多选、高亮操作；2、管理单选、多选、高亮三个类协同工作。
  * @extends EventEmitter
@@ -60,8 +60,8 @@ export default class ActionManager extends EventEmitter {
      * 判断是否单选选中的元素
      */
     isSelectedEl(el: HTMLElement): boolean;
-    setSelectedEl(el?: HTMLElement): void;
-    getSelectedEl(): HTMLElement | undefined;
+    setSelectedEl(el: HTMLElement | null): void;
+    getSelectedEl(): HTMLElement | null;
     getSelectedElList(): HTMLElement[];
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
     /**
@@ -69,7 +69,7 @@ export default class ActionManager extends EventEmitter {
      * @param event 鼠标事件
      * @returns 鼠标下方第一个可选中元素
      */
-    getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined>;
+    getElementFromPoint(event: MouseEvent): Promise<HTMLElement | null>;
     /**
      * 判断一个元素能否在当前场景被选中
      * @param el 被判断的元素
@@ -82,11 +82,11 @@ export default class ActionManager extends EventEmitter {
      * 判断一个元素是否可以被多选，如果当前元素是page，则调stop函数告诉调用方不必继续判断其它元素了
      */
     canMultiSelect(el: HTMLElement, stop: () => boolean): boolean;
-    select(el: HTMLElement, event: MouseEvent | undefined): void;
-    multiSelect(idOrElList: HTMLElement[] | Id[]): void;
+    select(el: HTMLElement | null, event?: MouseEvent): void;
+    multiSelect(ids: Id[]): void;
     getHighlightEl(): HTMLElement | undefined;
     setHighlightEl(el: HTMLElement | undefined): void;
-    highlight(idOrEl: Id | HTMLElement): void;
+    highlight(id: Id): void;
     clearHighlight(): void;
     /**
      * 用于在切换选择模式时清除上一次的状态
@@ -109,6 +109,8 @@ export default class ActionManager extends EventEmitter {
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getDragStatus(): StageDragStatus;
     destroy(): void;
+    on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, listener: (...args: Param) => void): this;
+    emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, ...args: Param): boolean;
     private createDr;
     private createMultiDr;
     private changeCallback;

package/types/DragResizeHelper.d.ts

@@ -1,7 +1,7 @@
-import { OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart } from 'moveable';
+import type { OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart } from 'moveable';
 import MoveableHelper from 'moveable-helper';
 import { Mode } from './const';
-import { DragResizeHelperConfig, Rect, TargetElement } from './types';
+import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；

package/types/StageCore.d.ts

@@ -6,7 +6,7 @@ import type { Id } from '@tmagic/schema';
 import ActionManager from './ActionManager';
 import StageMask from './StageMask';
 import StageRender from './StageRender';
-import type { RemoveData, StageCoreConfig, UpdateData } from './types';
+import type { CoreEvents, RemoveData, StageCoreConfig, UpdateData } from './types';
 /**
  * 负责管理画布，管理renderer、mask、actionManager三个核心类，并负责统一对外通信，包括提供接口和抛事件
  */
@@ -21,19 +21,19 @@ export default class StageCore extends EventEmitter {
     constructor(config: StageCoreConfig);
     /**
      * 单选选中元素
-     * @param idOrEl 选中的id或者元素
+     * @param id 选中的id
      */
-    select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void>;
+    select(id: Id, event?: MouseEvent): Promise<void>;
     /**
      * 多选选中多个元素
-     * @param idOrElList 选中元素的id或元素列表
+     * @param ids 选中元素的id列表
      */
-    multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void>;
+    multiSelect(ids: Id[]): Promise<void>;
     /**
      * 高亮选中元素
      * @param el 要高亮的元素
      */
-    highlight(idOrEl: Id | HTMLElement): void;
+    highlight(id: Id): void;
     clearHighlight(): void;
     /**
      * 更新组件
@@ -73,13 +73,15 @@ export default class StageCore extends EventEmitter {
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
-    getDragStatus(): import("./types").StageDragStatus;
+    getDragStatus(): import("./const").StageDragStatus;
     disableMultiSelect(): void;
     enableMultiSelect(): void;
     /**
      * 销毁实例
      */
     destroy(): void;
+    on<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(eventName: Name, ...args: Param): boolean;
     /**
      * 监听页面大小变化
      */

package/types/StageDragResize.d.ts

@@ -1,13 +1,13 @@
+import { StageDragStatus } from './const';
 import MoveableOptionsManager from './MoveableOptionsManager';
-import type { StageDragResizeConfig } from './types';
-import { StageDragStatus } from './types';
+import type { DrEvents, StageDragResizeConfig } from './types';
 /**
  * 管理单选操作，响应选中操作，初始化moveableOption参数并初始化moveable，处理moveable回调事件对组件进行更新
  * @extends MoveableOptionsManager
  */
 export default class StageDragResize extends MoveableOptionsManager {
     /** 目标节点 */
-    private target?;
+    private target;
     /** Moveable拖拽类实例 */
     private moveable?;
     /** 拖动状态 */
@@ -18,24 +18,26 @@ export default class StageDragResize extends MoveableOptionsManager {
     private markContainerEnd;
     private delayedMarkContainer;
     constructor(config: StageDragResizeConfig);
-    getTarget(): HTMLElement | undefined;
+    getTarget(): HTMLElement | null;
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
      * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
      * @param el 选中组件的Dom节点元素
      * @param event 鼠标事件
      */
-    select(el: HTMLElement, event?: MouseEvent): void;
+    select(el: HTMLElement | null, event?: MouseEvent): void;
     /**
      * 初始化选中框并渲染出来
      */
-    updateMoveable(el?: HTMLElement | undefined): void;
+    updateMoveable(el?: HTMLElement | null): void;
     clearSelectStatus(): void;
     getDragStatus(): StageDragStatus;
     /**
      * 销毁实例
      */
     destroy(): void;
+    on<Name extends keyof DrEvents, Param extends DrEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof DrEvents, Param extends DrEvents[Name]>(eventName: Name, ...args: Param): boolean;
     private init;
     private initMoveable;
     private bindResizeEvent;

package/types/StageMask.d.ts

@@ -1,6 +1,6 @@
 import { Mode } from './const';
 import Rule from './Rule';
-import type { RuleOptions } from './types';
+import type { MaskEvents, RuleOptions } from './types';
 /**
  * 蒙层
  * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
@@ -50,6 +50,8 @@ export default class StageMask extends Rule {
      * 销毁实例
      */
     destroy(): void;
+    on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(eventName: Name, ...args: Param): boolean;
     /**
      * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
      */

package/types/StageMultiDragResize.d.ts

@@ -1,6 +1,7 @@
 import Moveable from 'moveable';
+import { StageDragStatus } from './const';
 import MoveableOptionsManager from './MoveableOptionsManager';
-import { StageDragStatus, StageMultiDragResizeConfig } from './types';
+import { MultiDrEvents, StageMultiDragResizeConfig } from './types';
 export default class StageMultiDragResize extends MoveableOptionsManager {
     /** 画布容器 */
     container: HTMLElement;
@@ -19,7 +20,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
      * @param els
      */
     multiSelect(els: HTMLElement[]): void;
-    canSelect(el: HTMLElement, selectedEl: HTMLElement | undefined): boolean;
+    canSelect(el: HTMLElement, selectedEl: HTMLElement | null): boolean;
     updateMoveable(eleList?: HTMLElement[]): void;
     /**
      * 清除多选状态
@@ -29,6 +30,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
      * 销毁实例
      */
     destroy(): void;
+    on<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(eventName: Name, ...args: Param): boolean;
     /**
      * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
      * @param isResize 是否进行大小缩放

package/types/StageRender.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 import { Id } from '@tmagic/schema';
-import { type Point, type RemoveData, type Runtime, type RuntimeWindow, type StageRenderConfig, type UpdateData } from './types';
+import type { Point, RemoveData, RenderEvents, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
 export default class StageRender extends EventEmitter {
     /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
     contentWindow: RuntimeWindow | null;
@@ -20,7 +20,7 @@ export default class StageRender extends EventEmitter {
     add(data: UpdateData): Promise<void>;
     remove(data: RemoveData): Promise<void>;
     update(data: UpdateData): Promise<void>;
-    select(els: HTMLElement[]): Promise<void>;
+    select(ids: Id[]): Promise<void>;
     setZoom(zoom?: number): void;
     /**
      * 挂载Dom节点
@@ -35,11 +35,13 @@ export default class StageRender extends EventEmitter {
      * @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
      */
     getElementsFromPoint(point: Point): HTMLElement[];
-    getTargetElement(idOrEl: Id | HTMLElement): HTMLElement;
+    getTargetElement(id: Id): HTMLElement | null;
     /**
      * 销毁实例
      */
     destroy(): void;
+    on<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(eventName: Name, ...args: Param): boolean;
     private createIframe;
     private createNativeContainer;
     /**

package/types/const.d.ts

@@ -49,3 +49,30 @@ export declare enum AbleActionEventType {
     SELECT_PARENT = "select-parent",
     REMOVE = "remove"
 }
+/** 将组件添加到容器的方式 */
+export declare enum ContainerHighlightType {
+    /** 默认方式：组件在容器上方悬停一段时间后加入 */
+    DEFAULT = "default",
+    /** 按住alt键，并在容器上方悬停一段时间后加入 */
+    ALT = "alt"
+}
+export declare enum RenderType {
+    IFRAME = "iframe",
+    NATIVE = "native"
+}
+/** 选择状态 */
+export declare enum SelectStatus {
+    /** 单选 */
+    SELECT = "select",
+    /** 多选 */
+    MULTI_SELECT = "multiSelect"
+}
+/** 拖动状态 */
+export declare enum StageDragStatus {
+    /** 开始拖动 */
+    START = "start",
+    /** 拖动中 */
+    ING = "ing",
+    /** 拖动结束 */
+    END = "end"
+}