@tmagic/stage 1.4.0-beta.1 → 1.4.0

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"
+}

package/types/types.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="node" />
 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';
 export type TargetElement = HTMLElement | SVGElement;
@@ -12,25 +12,14 @@ export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
 /** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
 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;
 export type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
 export type MarkContainerEnd = () => HTMLElement | null;
 export type GetRootContainer = () => HTMLDivElement | undefined;
-/** 将组件添加到容器的方式 */
-export declare enum ContainerHighlightType {
-    /** 默认方式：组件在容器上方悬停一段时间后加入 */
-    DEFAULT = "default",
-    /** 按住alt键，并在容器上方悬停一段时间后加入 */
-    ALT = "alt"
-}
-export declare enum RenderType {
-    IFRAME = "iframe",
-    NATIVE = "native"
-}
 export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
 export interface StageCoreConfig {
     /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -75,7 +64,7 @@ export interface MoveableOptionsManagerConfig {
     getRootContainer: GetRootContainer;
 }
 export interface CustomizeMoveableOptionsCallbackConfig {
-    targetEl?: HTMLElement;
+    targetEl: HTMLElement | null;
     targetElId?: string;
     targetEls?: HTMLElement[];
     targetElIds?: string[];
@@ -114,22 +103,6 @@ export interface DragResizeHelperConfig {
     container: HTMLElement;
     updateDragEl?: UpdateDragEl;
 }
-/** 选择状态 */
-export declare enum SelectStatus {
-    /** 单选 */
-    SELECT = "select",
-    /** 多选 */
-    MULTI_SELECT = "multiSelect"
-}
-/** 拖动状态 */
-export declare enum StageDragStatus {
-    /** 开始拖动 */
-    START = "start",
-    /** 拖动中 */
-    ING = "ing",
-    /** 拖动结束 */
-    END = "end"
-}
 export type Rect = {
     width: number;
     height: number;
@@ -186,7 +159,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;
@@ -217,3 +189,65 @@ 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/types/util.d.ts

@@ -21,7 +21,7 @@ export declare const calcValueByFontsize: (doc: Document, value: number) => numb
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export declare const down: (deltaTop: number, target: TargetElement) => SortEventData | void;
+export declare const down: (deltaTop: number, target: TargetElement) => SortEventData;
 /**
  * 上移组件位置
  * @param {Array} brothers 处于同一容器下的所有子组件配置
@@ -29,7 +29,7 @@ export declare const down: (deltaTop: number, target: TargetElement) => SortEven
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export declare const up: (deltaTop: number, target: TargetElement) => SortEventData | void;
+export declare const up: (deltaTop: number, target: TargetElement) => SortEventData;
 export declare const isMoveableButton: (target: Element) => boolean | undefined;
 export declare const getMarginValue: (el: Element) => {
     marginLeft: number;