@tmagic/stage 1.3.16 → 1.4.0-beta.2

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;