@tmagic/stage 1.2.0-beta.9 → 1.2.1

package/types/StageRender.d.ts

@@ -1,18 +1,25 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
+import { Id } from '@tmagic/schema';
+import type { Point, RemoveData, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
 export default class StageRender extends EventEmitter {
     /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
     contentWindow: RuntimeWindow | null;
     runtime: Runtime | null;
     iframe?: HTMLIFrameElement;
-    runtimeUrl?: string;
-    private render?;
-    constructor({ runtimeUrl, render }: StageRenderConfig);
+    private runtimeUrl?;
+    private zoom;
+    private customizedRender?;
+    constructor({ runtimeUrl, zoom, customizedRender }: StageRenderConfig);
     getMagicApi: () => {
         onPageElUpdate: (el: HTMLElement) => boolean;
         onRuntimeReady: (runtime: Runtime) => void;
     };
+    add(data: UpdateData): Promise<void>;
+    remove(data: RemoveData): Promise<void>;
+    update(data: UpdateData): Promise<void>;
+    select(els: HTMLElement[]): Promise<void>;
+    setZoom(zoom?: number): void;
     /**
      * 挂载Dom节点
      * @param el 将页面挂载到该Dom节点上
@@ -20,10 +27,22 @@ export default class StageRender extends EventEmitter {
     mount(el: HTMLDivElement): Promise<void>;
     getRuntime: () => Promise<Runtime>;
     getDocument(): Document | undefined;
+    /**
+     * 通过坐标获得坐标下所有HTML元素数组
+     * @param point 坐标
+     * @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
+     */
+    getElementsFromPoint(point: Point): HTMLElement[];
+    getTargetElement(idOrEl: Id | HTMLElement): HTMLElement;
     /**
      * 销毁实例
      */
     destroy(): void;
+    /**
+     * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
+     * @param el 被选中的元素
+     */
+    private flagSelectedEl;
     private loadHandler;
     private postTmagicRuntimeReady;
 }

package/types/TargetShadow.d.ts

@@ -0,0 +1,22 @@
+import type { TargetElement as ShadowElement, TargetShadowConfig } from './types';
+/**
+ * 将选中的节点修正定位后，添加一个操作节点到蒙层上
+ */
+export default class TargetShadow {
+    el?: ShadowElement;
+    els: ShadowElement[];
+    private idPrefix;
+    private container;
+    private scrollLeft;
+    private scrollTop;
+    private zIndex?;
+    private updateDragEl?;
+    constructor(config: TargetShadowConfig);
+    update(target: ShadowElement): ShadowElement;
+    updateGroup(targetGroup: ShadowElement[]): ShadowElement[];
+    destroyEl(): void;
+    destroyEls(): void;
+    destroy(): void;
+    private updateEl;
+    private scrollHandler;
+}

package/types/const.d.ts

@@ -4,7 +4,7 @@ export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
 export declare const DRAG_EL_ID_PREFIX = "drag_el_";
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
-export declare const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
+export declare const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 export declare const PAGE_CLASS = "magic-ui-page";
 /** 默认放到缩小倍数 */
 export declare const DEFAULT_ZOOM = 1;

package/types/types.d.ts

@@ -1,17 +1,32 @@
-import { MoveableOptions } from 'moveable';
+/// <reference types="node" />
+import type { MoveableOptions } from 'moveable';
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
-import { GuidesType } from './const';
+import { GuidesType, ZIndex } from './const';
 import StageCore from './StageCore';
-import StageDragResize from './StageDragResize';
-import StageMask from './StageMask';
+export declare type TargetElement = HTMLElement | SVGElement;
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
+export declare type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+/** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
+export declare type CustomizeMoveableOptions = ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) | MoveableOptions | undefined;
+/** render提供给的接口，如果是id则转成el，如果是el则直接返回 */
+export declare type GetTargetElement = (idOrEl: Id | HTMLElement) => HTMLElement;
+/** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
+export declare type GetElementsFromPoint = (point: Point) => HTMLElement[];
+export declare type GetRenderDocument = () => Document | undefined;
+export declare type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+export declare type MarkContainerEnd = () => HTMLElement | null;
+export declare type GetRootContainer = () => HTMLDivElement | undefined;
+/** 将组件添加到容器的方式 */
 export declare enum ContainerHighlightType {
+    /** 默认方式：组件在容器上方悬停一段时间后加入 */
     DEFAULT = "default",
+    /** 按住alt键，并在容器上方悬停一段时间后加入 */
     ALT = "alt"
 }
-export declare type StageCoreConfig = {
+export declare type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+export interface StageCoreConfig {
     /** 需要对齐的dom节点的CSS选择器字符串 */
     snapElementQuerySelector?: string;
     /** 放大倍数，默认1倍 */
@@ -21,25 +36,74 @@ export declare type StageCoreConfig = {
     containerHighlightClassName?: string;
     containerHighlightDuration?: number;
     containerHighlightType?: ContainerHighlightType;
-    moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
-    multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+    moveableOptions?: CustomizeMoveableOptions;
+    multiMoveableOptions?: CustomizeMoveableOptions;
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
     runtimeUrl?: string;
     render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
     autoScrollIntoView?: boolean;
-    updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
-};
+    updateDragEl?: UpdateDragEl;
+    disabledDragStart?: boolean;
+}
+export interface ActionManagerConfig {
+    container: HTMLElement;
+    containerHighlightClassName?: string;
+    containerHighlightDuration?: number;
+    containerHighlightType?: ContainerHighlightType;
+    moveableOptions?: CustomizeMoveableOptions;
+    multiMoveableOptions?: CustomizeMoveableOptions;
+    disabledDragStart?: boolean;
+    canSelect?: CanSelect;
+    isContainer: IsContainer;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    updateDragEl?: UpdateDragEl;
+    getTargetElement: GetTargetElement;
+    getElementsFromPoint: GetElementsFromPoint;
+}
+export interface MoveableOptionsManagerConfig {
+    container: HTMLElement;
+    moveableOptions?: CustomizeMoveableOptions;
+    getRootContainer: GetRootContainer;
+}
+export interface CustomizeMoveableOptionsCallbackConfig {
+    targetElId?: string;
+}
 export interface StageRenderConfig {
     runtimeUrl?: string;
-    render?: () => Promise<HTMLElement | null>;
+    zoom: number | undefined;
+    customizedRender?: () => Promise<HTMLElement | null>;
 }
 export interface StageMaskConfig {
     core: StageCore;
 }
 export interface StageDragResizeConfig {
-    core: StageCore;
     container: HTMLElement;
-    mask: StageMask;
+    moveableOptions?: CustomizeMoveableOptions;
+    disabledDragStart?: boolean;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    markContainerEnd: MarkContainerEnd;
+    delayedMarkContainer: DelayedMarkContainer;
+    updateDragEl?: UpdateDragEl;
+}
+export interface StageMultiDragResizeConfig {
+    container: HTMLElement;
+    multiMoveableOptions?: CustomizeMoveableOptions;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    updateDragEl?: UpdateDragEl;
+}
+export interface DragResizeHelperConfig {
+    container: HTMLElement;
+    updateDragEl?: UpdateDragEl;
+}
+/** 选择状态 */
+export declare enum SelectStatus {
+    /** 单选 */
+    SELECT = "select",
+    /** 多选 */
+    MULTI_SELECT = "multiSelect"
 }
 /** 拖动状态 */
 export declare enum StageDragStatus {
@@ -58,6 +122,10 @@ export interface Offset {
     left: number;
     top: number;
 }
+export interface Point {
+    clientX: number;
+    clientY: number;
+}
 export interface GuidesEventData {
     type: GuidesType;
     guides: number[];
@@ -115,12 +183,13 @@ export interface RuntimeWindow extends Window {
     magic: Magic;
 }
 export interface StageHighlightConfig {
-    core: StageCore;
     container: HTMLElement;
+    updateDragEl?: UpdateDragEl;
+    getRootContainer: GetRootContainer;
 }
-export interface TargetCalibrateConfig {
-    parent: HTMLElement;
-    mask: StageMask;
-    dr: StageDragResize;
-    core: StageCore;
+export interface TargetShadowConfig {
+    container: HTMLElement;
+    zIndex?: ZIndex;
+    updateDragEl?: UpdateDragEl;
+    idPrefix?: string;
 }

package/types/util.d.ts

@@ -1,7 +1,7 @@
-import { Mode } from './const';
-import type { Offset, SortEventData } from './types';
-export declare const getOffset: (el: HTMLElement) => Offset;
-export declare const getTargetElStyle: (el: HTMLElement) => string;
+import { Mode, ZIndex } from './const';
+import type { Offset, SortEventData, TargetElement } from './types';
+export declare const getOffset: (el: TargetElement) => Offset;
+export declare const getTargetElStyle: (el: TargetElement, zIndex?: ZIndex) => string;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
     left: number;
     top: number;
@@ -10,8 +10,8 @@ export declare const isAbsolute: (style: CSSStyleDeclaration) => boolean;
 export declare const isRelative: (style: CSSStyleDeclaration) => boolean;
 export declare const isStatic: (style: CSSStyleDeclaration) => boolean;
 export declare const isFixed: (style: CSSStyleDeclaration) => boolean;
-export declare const isFixedParent: (el: HTMLElement) => boolean;
-export declare const getMode: (el: HTMLElement) => Mode;
+export declare const isFixedParent: (el: Element) => boolean;
+export declare const getMode: (el: Element) => Mode;
 export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
 export declare const removeSelectedClassName: (doc: Document) => void;
 export declare const addSelectedClassName: (el: Element, doc: Document) => void;
@@ -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: HTMLElement | SVGElement) => SortEventData | void;
+export declare const down: (deltaTop: number, target: TargetElement) => SortEventData | void;
 /**
  * 上移组件位置
  * @param {Array} brothers 处于同一容器下的所有子组件配置
@@ -29,5 +29,5 @@ export declare const down: (deltaTop: number, target: HTMLElement | SVGElement)
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export declare const up: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;
+export declare const up: (deltaTop: number, target: TargetElement) => SortEventData | void;
 export declare const isMoveableButton: (target: Element) => boolean | undefined;