@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/types/StageCore.d.ts

@@ -1,63 +1,53 @@
 /// <reference types="node" />
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-import type { Id } from '@tmagic/schema';
-import StageDragResize from './StageDragResize';
-import StageHighlight from './StageHighlight';
+import { Id } from '@tmagic/schema';
 import StageMask from './StageMask';
-import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
-import { ContainerHighlightType, IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
+import { RemoveData, StageCoreConfig, UpdateData } from './types';
+/**
+ * 负责管理画布，管理renderer、mask、actionManager三个核心类，并负责统一对外通信，包括提供接口和抛事件
+ */
 export default class StageCore extends EventEmitter {
     container?: HTMLDivElement;
-    selectedDom: HTMLElement | undefined;
-    selectedDomList: HTMLElement[];
-    highlightedDom: Element | undefined;
     renderer: StageRender;
     mask: StageMask;
-    dr: StageDragResize;
-    multiDr: StageMultiDragResize;
-    highlightLayer: StageHighlight;
-    config: StageCoreConfig;
-    zoom: number;
-    containerHighlightClassName: string;
-    containerHighlightDuration: number;
-    containerHighlightType?: ContainerHighlightType;
-    isContainer: IsContainer;
-    private canSelect;
+    private actionManager;
+    private pageResizeObserver;
+    private autoScrollIntoView;
+    private customizedRender?;
     constructor(config: StageCoreConfig);
-    getElementsFromPoint(event: MouseEvent): HTMLElement[];
-    getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined>;
-    isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<Boolean>;
     /**
-     * 选中组件
-     * @param idOrEl 组件Dom节点的id属性，或者Dom节点
+     * 单选选中元素
+     * @param idOrEl 选中的id或者元素
      */
     select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void>;
     /**
-     * 多选
-     * @param domList 多选节点
+     * 多选选中多个元素
+     * @param idOrElList 选中元素的id或元素列表
      */
     multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void>;
     /**
-     * 更新选中的节点
-     * @param data 更新的数据
+     * 高亮选中元素
+     * @param el 要高亮的元素
+     */
+    highlight(idOrEl: Id | HTMLElement): void;
+    /**
+     * 更新组件
+     * @param data 更新组件的数据
      */
     update(data: UpdateData): Promise<void>;
     /**
-     * 高亮选中组件
-     * @param el 页面Dom节点
+     * 往画布增加一个组件
+     * @param data 组件信息数据
      */
-    highlight(idOrEl: HTMLElement | Id): Promise<void>;
-    sortNode(data: SortEventData): Promise<void>;
     add(data: UpdateData): Promise<void>;
-    remove(data: RemoveData): Promise<void>;
-    setZoom(zoom?: number): void;
     /**
-     * 用于在切换选择模式时清除上一次的状态
-     * @param selectType 需要清理的选择模式 多选：multiSelect，单选：select
+     * 从画布删除一个组件
+     * @param data 组件信息数据
      */
-    clearSelectStatus(selectType: String): void;
+    remove(data: RemoveData): Promise<void>;
+    setZoom(zoom?: number): void;
     /**
      * 挂载Dom节点
      * @param el 将stage挂载到该Dom节点上
@@ -67,11 +57,47 @@ export default class StageCore extends EventEmitter {
      * 清空所有参考线
      */
     clearGuides(): void;
-    addContainerHighlightClassName(event: MouseEvent, exclude: Element[]): Promise<void>;
-    getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude?: Element[]): NodeJS.Timeout;
+    /**
+     * @deprecated 废弃接口，建议用delayedMarkContainer代替
+     */
+    getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
+    /**
+     * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+     * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
+     * @param event 鼠标事件
+     * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+     * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
+     */
+    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
     /**
      * 销毁实例
      */
     destroy(): void;
-    private getTargetElement;
+    /**
+     * 监听页面大小变化
+     */
+    private observePageResize;
+    private getActionManagerConfig;
+    private initRenderEvent;
+    private initMaskEvent;
+    /**
+     * 初始化操作相关事件监听
+     */
+    private initActionEvent;
+    /**
+     * 初始化ActionManager类本身抛出来的事件监听
+     */
+    private initActionManagerEvent;
+    /**
+     * 初始化DragResize类通过ActionManager抛出来的事件监听
+     */
+    private initDrEvent;
+    /**
+     * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
+     */
+    private initMulDrEvent;
+    /**
+     * 初始化Highlight类通过ActionManager抛出来的事件监听
+     */
+    private initHighlightEvent;
 }

package/types/StageDragResize.d.ts

@@ -1,43 +1,24 @@
-/// <reference types="node" />
-import { EventEmitter } from 'events';
-import Moveable from 'moveable';
-import { GuidesType, Mode } from './const';
-import StageCore from './StageCore';
-import StageMask from './StageMask';
+import MoveableOptionsManager from './MoveableOptionsManager';
 import type { StageDragResizeConfig } from './types';
 /**
- * 选中框
+ * 管理单选操作，响应选中操作，初始化moveableOption参数并初始化moveable，处理moveable回调事件对组件进行更新
+ * @extends MoveableOptionsManager
  */
-export default class StageDragResize extends EventEmitter {
-    core: StageCore;
-    mask: StageMask;
-    /** 画布容器 */
-    container: HTMLElement;
+export default class StageDragResize extends MoveableOptionsManager {
     /** 目标节点 */
-    target?: HTMLElement;
-    /** 目标节点在蒙层中的占位节点 */
-    dragEl?: HTMLDivElement;
+    private target?;
     /** Moveable拖拽类实例 */
-    moveable?: Moveable;
-    /** 水平参考线 */
-    horizontalGuidelines: number[];
-    /** 垂直参考线 */
-    verticalGuidelines: number[];
-    /** 对齐元素集合 */
-    elementGuidelines: HTMLElement[];
-    /** 布局方式：流式布局、绝对定位、固定定位 */
-    mode: Mode;
-    private moveableOptions;
+    private moveable?;
     /** 拖动状态 */
     private dragStatus;
-    /** 流式布局下，目标节点的镜像节点 */
-    private ghostEl;
-    private moveableHelper?;
-    private isContainerHighlight;
+    private dragResizeHelper;
+    private getRenderDocument;
+    private markContainerEnd;
+    private delayedMarkContainer;
     constructor(config: StageDragResizeConfig);
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
-     * 当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
+     * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
      * @param el 选中组件的Dom节点元素
      * @param event 鼠标事件
      */
@@ -46,17 +27,12 @@ export default class StageDragResize extends EventEmitter {
      * 初始化选中框并渲染出来
      */
     updateMoveable(el?: HTMLElement | undefined): void;
-    setGuidelines(type: GuidesType, guidelines: number[]): void;
-    clearGuides(): void;
     clearSelectStatus(): void;
-    destroyDragEl(): void;
     /**
      * 销毁实例
      */
     destroy(): void;
     private init;
-    private setElementGuidelines;
-    private createGuidelineElements;
     private initMoveable;
     private bindResizeEvent;
     private bindDragEvent;
@@ -64,9 +40,4 @@ export default class StageDragResize extends EventEmitter {
     private bindScaleEvent;
     private sort;
     private update;
-    private generateGhostEl;
-    private setGhostElChildrenId;
-    private destroyGhostEl;
-    private getOptions;
-    private canContainerHighlight;
 }

package/types/StageHighlight.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 import Moveable from 'moveable';
-import StageCore from './StageCore';
-import TargetCalibrate from './TargetCalibrate';
+import TargetShadow from './TargetShadow';
 import type { StageHighlightConfig } from './types';
 export default class StageHighlight extends EventEmitter {
-    core: StageCore;
     container: HTMLElement;
     target?: HTMLElement;
     moveable?: Moveable;
-    calibrationTarget: TargetCalibrate;
+    targetShadow: TargetShadow;
+    private getRootContainer;
     constructor(config: StageHighlightConfig);
     /**
      * 高亮鼠标悬停的组件

package/types/StageMask.d.ts

@@ -1,7 +1,5 @@
 import { Mode } from './const';
 import Rule from './Rule';
-import type StageCore from './StageCore';
-import type { StageMaskConfig } from './types';
 /**
  * 蒙层
  * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
@@ -9,9 +7,7 @@ import type { StageMaskConfig } from './types';
 export default class StageMask extends Rule {
     content: HTMLDivElement;
     wrapper: HTMLDivElement;
-    core: StageCore;
     page: HTMLElement | null;
-    pageScrollParent: HTMLElement | null;
     scrollTop: number;
     scrollLeft: number;
     width: number;
@@ -20,24 +16,28 @@ export default class StageMask extends Rule {
     wrapperWidth: number;
     maxScrollTop: number;
     maxScrollLeft: number;
-    intersectionObserver: IntersectionObserver | null;
-    isMultiSelectStatus: Boolean;
     private mode;
-    private pageResizeObserver;
+    private pageScrollParent;
+    private intersectionObserver;
     private wrapperResizeObserver;
-    /**
-     * 高亮事件处理函数
-     * @param event 事件对象
-     */
-    private highlightHandler;
-    constructor(config: StageMaskConfig);
+    constructor();
     setMode(mode: Mode): void;
     /**
-     * 监听页面大小变化
-     * @description 同步页面与mask的大小
+     * 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
+     * @description 初始化视窗和蒙层监听
      * @param page 页面Dom节点
      */
     observe(page: HTMLElement): void;
+    /**
+     * 处理页面大小变更，同步页面和mask大小
+     * @param entries ResizeObserverEntry，获取页面最新大小
+     */
+    pageResize(entries: ResizeObserverEntry[]): void;
+    /**
+     * 监听一个组件是否在画布可视区域内
+     * @param el 被选中的组件，可能是左侧目录树中选中的
+     */
+    observerIntersection(el: HTMLElement): void;
     /**
      * 挂载Dom节点
      * @param el 将蒙层挂载到该Dom节点上
@@ -49,6 +49,14 @@ export default class StageMask extends Rule {
      * 销毁实例
      */
     destroy(): void;
+    /**
+     * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
+     */
+    private initObserverIntersection;
+    /**
+     * 监听mask的容器大小变化
+     */
+    private initObserverWrapper;
     private scroll;
     private scrollTo;
     /**
@@ -74,12 +82,5 @@ export default class StageMask extends Rule {
      * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
      */
     private fixScrollValue;
-    /**
-     * 点击事件处理函数
-     * @param event 事件对象
-     */
-    private mouseDownHandler;
-    private mouseUpHandler;
     private mouseWheelHandler;
-    private mouseLeaveHandler;
 }

package/types/StageMultiDragResize.d.ts

@@ -1,30 +1,24 @@
-/// <reference types="node" />
-import { EventEmitter } from 'events';
 import Moveable from 'moveable';
-import StageCore from './StageCore';
-import StageMask from './StageMask';
-import { StageDragResizeConfig, StageDragStatus } from './types';
-export default class StageMultiDragResize extends EventEmitter {
-    core: StageCore;
-    mask: StageMask;
+import MoveableOptionsManager from './MoveableOptionsManager';
+import { StageDragStatus, StageMultiDragResizeConfig } from './types';
+export default class StageMultiDragResize extends MoveableOptionsManager {
     /** 画布容器 */
     container: HTMLElement;
     /** 多选:目标节点组 */
     targetList: HTMLElement[];
-    /** 多选:目标节点在蒙层中的占位节点组 */
-    dragElList: HTMLDivElement[];
     /** Moveable多选拖拽类实例 */
     moveableForMulti?: Moveable;
-    /** 拖动状态 */
     dragStatus: StageDragStatus;
-    private multiMoveableHelper?;
-    constructor(config: StageDragResizeConfig);
+    private dragResizeHelper;
+    private getRenderDocument;
+    constructor(config: StageMultiDragResizeConfig);
     /**
      * 多选
      * @param els
      */
     multiSelect(els: HTMLElement[]): void;
-    canSelect(el: HTMLElement, stop: () => boolean): Boolean;
+    canSelect(el: HTMLElement, selectedEl: HTMLElement | undefined): boolean;
+    updateMoveable(eleList?: HTMLElement[]): void;
     /**
      * 清除多选状态
      */
@@ -33,19 +27,9 @@ export default class StageMultiDragResize extends EventEmitter {
      * 销毁实例
      */
     destroy(): void;
-    /**
-     * 清除蒙层占位节点
-     */
-    destroyDragElList(): void;
     /**
      * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
      * @param isResize 是否进行大小缩放
      */
     private update;
-    /**
-     * 获取moveable options参数
-     * @param {MoveableOptions} options
-     * @return {MoveableOptions} moveable options参数
-     */
-    private getOptions;
 }

package/types/StageRender.d.ts

@@ -1,30 +1,48 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-import StageCore from './StageCore';
-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;
-    core: StageCore;
-    private render?;
-    constructor({ core }: 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节点上
      */
     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,24 +36,71 @@ 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;
+}
+export interface ActionManagerConfig {
+    container: HTMLElement;
+    containerHighlightClassName?: string;
+    containerHighlightDuration?: number;
+    containerHighlightType?: ContainerHighlightType;
+    moveableOptions?: CustomizeMoveableOptions;
+    multiMoveableOptions?: CustomizeMoveableOptions;
+    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 {
-    core: StageCore;
+    runtimeUrl?: string;
+    zoom: number | undefined;
+    customizedRender?: () => Promise<HTMLElement | null>;
 }
 export interface StageMaskConfig {
     core: StageCore;
 }
 export interface StageDragResizeConfig {
-    core: StageCore;
     container: HTMLElement;
-    mask: StageMask;
+    moveableOptions?: CustomizeMoveableOptions;
+    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 {
@@ -57,6 +119,10 @@ export interface Offset {
     left: number;
     top: number;
 }
+export interface Point {
+    clientX: number;
+    clientY: number;
+}
 export interface GuidesEventData {
     type: GuidesType;
     guides: number[];
@@ -114,12 +180,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,4 +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;