@tmagic/stage 1.2.0-beta.8 → 1.2.0

package/types/DragResizeHelper.d.ts

@@ -0,0 +1,70 @@
+import { 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, TargetElement } from './types';
+/**
+ * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
+ * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
+ * 有个特殊情况是流式布局下，moveableHelper不支持，targetShadow也是DragResizeHelper直接改的
+ */
+export default class DragResizeHelper {
+    /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
+    private targetShadow;
+    /** 要操作的原始目标节点 */
+    private target;
+    /** 多选:目标节点组 */
+    private targetList;
+    /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
+     * MoveableHelper里面的方法是成员属性，如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
+    private moveableHelper;
+    /** 流式布局下，目标节点的镜像节点 */
+    private ghostEl;
+    /** 用于记录节点被改变前的位置 */
+    private frameSnapShot;
+    /** 多选模式下的多个节点 */
+    private framesSnapShot;
+    /** 布局方式：流式布局、绝对定位、固定定位 */
+    private mode;
+    constructor(config: DragResizeHelperConfig);
+    destroy(): void;
+    destroyShadowEl(): void;
+    getShadowEl(): TargetElement | undefined;
+    updateShadowEl(el: HTMLElement): void;
+    setMode(mode: Mode): void;
+    /**
+     * 改变大小事件开始
+     * @param e 包含了拖拽节点的dom，moveableHelper会直接修改拖拽节点
+     */
+    onResizeStart(e: OnResizeStart): void;
+    onResize(e: OnResize): void;
+    onDragStart(e: OnDragStart): void;
+    onDrag(e: OnDrag): void;
+    onRotateStart(e: OnRotateStart): void;
+    onRotate(e: OnRotate): void;
+    onScaleStart(e: OnScaleStart): void;
+    onScale(e: OnScale): void;
+    getGhostEl(): HTMLElement | undefined;
+    destroyGhostEl(): void;
+    clear(): void;
+    getFrame(el: HTMLElement | SVGElement): ReturnType<MoveableHelper['getFrame']>;
+    getShadowEls(): TargetElement[];
+    updateGroup(els: HTMLElement[]): void;
+    setTargetList(targetList: HTMLElement[]): void;
+    clearMultiSelectStatus(): void;
+    onResizeGroupStart(e: OnResizeGroupStart): void;
+    /**
+     * 多选状态下通过拖拽边框改变大小，所有选中组件会一起改变大小
+     */
+    onResizeGroup(e: OnResizeGroup): void;
+    onDragGroupStart(e: OnDragGroupStart): void;
+    onDragGroup(e: OnDragGroup): void;
+    /**
+     * 多选状态设置多个节点的快照
+     */
+    private setFramesSnapShot;
+    /**
+     * 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
+     */
+    private generateGhostEl;
+    private setGhostElChildrenId;
+}

package/types/MoveableOptionsManager.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="node" />
+import EventEmitter from 'events';
+import { MoveableOptions } from 'moveable';
+import { GuidesType, Mode } from './const';
+import { MoveableOptionsManagerConfig } from './types';
+/**
+ * 单选和多选的父类，用于管理moveableOptions
+ * @extends EventEmitter
+ */
+export default class MoveableOptionsManager extends EventEmitter {
+    /** 布局方式：流式布局、绝对定位、固定定位 */
+    mode: Mode;
+    /** 画布容器 */
+    protected container: HTMLElement;
+    /** 水平参考线 */
+    private horizontalGuidelines;
+    /** 垂直参考线 */
+    private verticalGuidelines;
+    /** 对齐元素集合 */
+    private elementGuidelines;
+    /** 由外部调用方（编辑器）传入进来的moveable默认参数，可以为空，也可以是一个回调函数 */
+    private customizedOptions?;
+    /** 获取整个画布的根元素（在StageCore的mount函数中挂载的container） */
+    private getRootContainer;
+    constructor(config: MoveableOptionsManagerConfig);
+    /**
+     * 设置水平/垂直参考线
+     * @param type 参考线类型
+     * @param guidelines 参考线坐标数组
+     */
+    setGuidelines(type: GuidesType, guidelines: number[]): void;
+    /**
+     * 清除横向和纵向的参考线
+     */
+    clearGuides(): void;
+    /**
+     * 设置有哪些元素要辅助对齐
+     * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+     * @param allElList 全部元素列表
+     */
+    protected setElementGuidelines(selectedElList: HTMLElement[], allElList: HTMLElement[]): void;
+    /**
+     * 获取moveable参数
+     * @param isMultiSelect 是否多选模式
+     * @param runtimeOptions 调用时实时传进来的的moveable参数
+     * @returns moveable所需参数
+     */
+    protected getOptions(isMultiSelect: boolean, runtimeOptions?: MoveableOptions): MoveableOptions;
+    /**
+     * 获取单选和多选的moveable公共参数
+     * @returns moveable公共参数
+     */
+    private getDefaultOptions;
+    /**
+     * 获取单选下的差异化参数
+     * @returns {MoveableOptions} moveable options参数
+     */
+    private getSingleOptions;
+    /**
+     * 获取多选下的差异化参数
+     * @returns {MoveableOptions} moveable options参数
+     */
+    private getMultiOptions;
+    /**
+     * 获取业务方自定义的moveable参数
+     */
+    private getCustomizeOptions;
+    /**
+     * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
+     */
+    private selectParentHandler;
+    /**
+     * 为需要辅助对齐的元素创建div
+     * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+     * @param allElList 全部元素列表
+     * @returns frame 辅助对齐元素集合的页面片
+     */
+    private createGuidelineElements;
+    /**
+     * 判断一个元素是否在元素列表里面
+     * @param ele 元素
+     * @param eleList 元素列表
+     * @returns 是否在元素列表里面
+     */
+    private isInElementList;
+}

package/types/MoveableSelectParentAble.d.ts

@@ -1,6 +1,5 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
-import type StageDragResize from './StageDragResize';
-declare const _default: (dr: StageDragResize) => {
+declare const _default: (selectParentHandler: () => void) => {
     name: string;
     props: {};
     events: {};

package/types/StageCore.d.ts

@@ -1,64 +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节点上
@@ -68,8 +57,18 @@ 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;
     /**
      * 销毁实例
      */
@@ -78,9 +77,27 @@ export default class StageCore extends EventEmitter {
      * 监听页面大小变化
      */
     private observePageResize;
+    private getActionManagerConfig;
+    private initRenderEvent;
+    private initMaskEvent;
+    /**
+     * 初始化操作相关事件监听
+     */
+    private initActionEvent;
+    /**
+     * 初始化ActionManager类本身抛出来的事件监听
+     */
+    private initActionManagerEvent;
+    /**
+     * 初始化DragResize类通过ActionManager抛出来的事件监听
+     */
+    private initDrEvent;
+    /**
+     * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
+     */
+    private initMulDrEvent;
     /**
-     * 传入stageRender供其回调，获取业务方自定义渲染画布页面渲染结果
+     * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
-    private render;
-    private getTargetElement;
+    private initHighlightEvent;
 }

package/types/StageDragResize.d.ts

@@ -1,43 +1,25 @@
-/// <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 disabledDragStart?;
+    private getRenderDocument;
+    private markContainerEnd;
+    private delayedMarkContainer;
     constructor(config: StageDragResizeConfig);
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
-     * 当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
+     * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
      * @param el 选中组件的Dom节点元素
      * @param event 鼠标事件
      */
@@ -46,17 +28,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 +41,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

@@ -16,16 +16,10 @@ export default class StageMask extends Rule {
     wrapperWidth: number;
     maxScrollTop: number;
     maxScrollLeft: number;
-    isMultiSelectStatus: Boolean;
     private mode;
     private pageScrollParent;
     private intersectionObserver;
     private wrapperResizeObserver;
-    /**
-     * 高亮事件处理函数
-     * @param event 事件对象
-     */
-    private highlightHandler;
     constructor();
     setMode(mode: Mode): void;
     /**
@@ -55,14 +49,6 @@ export default class StageMask extends Rule {
      * 销毁实例
      */
     destroy(): void;
-    /**
-     * 初始化content的事件监听
-     */
-    private initContentEventListener;
-    /**
-     * 初始化多选事件监听
-     */
-    private initMultiSelectEvent;
     /**
      * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
      */
@@ -96,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,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;