@tmagic/stage 1.4.16 → 1.5.0-beta.0

package/types/StageRender.d.ts

@@ -1,53 +0,0 @@
-import { EventEmitter } from 'events';
-import { Id } from '@tmagic/schema';
-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;
-    runtime: Runtime | null;
-    iframe?: HTMLIFrameElement;
-    nativeContainer?: HTMLDivElement;
-    private runtimeUrl?;
-    private zoom;
-    private renderType;
-    private customizedRender?;
-    constructor({ runtimeUrl, zoom, customizedRender, renderType }: 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(ids: Id[]): 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(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;
-    /**
-     * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
-     * @param el 被选中的元素
-     */
-    private flagSelectedEl;
-    private iframeLoadHandler;
-    private postTmagicRuntimeReady;
-}

package/types/TargetShadow.d.ts

@@ -1,22 +0,0 @@
-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

@@ -1,78 +0,0 @@
-/** 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀 */
-export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
-/** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
-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_NAME = "tmagic-stage-container-highlight";
-export declare const PAGE_CLASS = "magic-ui-page";
-/** 默认放到缩小倍数 */
-export declare const DEFAULT_ZOOM = 1;
-/** 参考线类型 */
-export declare enum GuidesType {
-    /** 水平 */
-    HORIZONTAL = "horizontal",
-    /** 垂直 */
-    VERTICAL = "vertical"
-}
-/** css z-index */
-export declare enum ZIndex {
-    /** 蒙层，用于监听用户操作，需要置于顶层 */
-    MASK = "99999",
-    /** 选中的节点 */
-    SELECTED_EL = "666",
-    GHOST_EL = "700",
-    DRAG_EL = "9",
-    HIGHLIGHT_EL = "8"
-}
-/** 鼠标按键 */
-export declare enum MouseButton {
-    /** 左键 */
-    LEFT = 0,
-    /** z中健 */
-    MIDDLE = 1,
-    /** 右键 */
-    RIGHT = 2
-}
-/** 布局方式 */
-export declare enum Mode {
-    /** 绝对定位布局 */
-    ABSOLUTE = "absolute",
-    /** 固定定位布局 */
-    FIXED = "fixed",
-    /** 流式布局 */
-    SORTABLE = "sortable"
-}
-/** 选中节点的class name */
-export declare const SELECTED_CLASS = "tmagic-stage-selected-area";
-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/logger.d.ts

@@ -1,5 +0,0 @@
-export declare const log: (...args: any[]) => void;
-export declare const info: (...args: any[]) => void;
-export declare const warn: (...args: any[]) => void;
-export declare const debug: (...args: any[]) => void;
-export declare const error: (...args: any[]) => void;

package/types/types.d.ts

@@ -1,252 +0,0 @@
-import type { GuidesOptions } from '@scena/guides';
-import type { MoveableOptions, OnDragStart } from 'moveable';
-import Core from '@tmagic/core';
-import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
-import { AbleActionEventType, ContainerHighlightType, GuidesType, RenderType, ZIndex } from './const';
-import DragResizeHelper from './DragResizeHelper';
-import StageCore from './StageCore';
-export type TargetElement = HTMLElement | SVGElement;
-export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
-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 */
-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 type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
-export interface StageCoreConfig {
-    /** 需要对齐的dom节点的CSS选择器字符串 */
-    snapElementQuerySelector?: string;
-    /** 放大倍数，默认1倍 */
-    zoom?: number;
-    canSelect?: CanSelect;
-    isContainer?: IsContainer;
-    containerHighlightClassName?: string;
-    containerHighlightDuration?: number;
-    containerHighlightType?: ContainerHighlightType;
-    moveableOptions?: CustomizeMoveableOptions;
-    /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
-    runtimeUrl?: string;
-    render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
-    autoScrollIntoView?: boolean;
-    updateDragEl?: UpdateDragEl;
-    disabledDragStart?: boolean;
-    renderType?: RenderType;
-    guidesOptions?: Partial<GuidesOptions>;
-    disabledMultiSelect?: boolean;
-}
-export interface ActionManagerConfig {
-    container: HTMLElement;
-    containerHighlightClassName?: string;
-    containerHighlightDuration?: number;
-    containerHighlightType?: ContainerHighlightType;
-    moveableOptions?: CustomizeMoveableOptions;
-    disabledDragStart?: boolean;
-    disabledMultiSelect?: 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 {
-    targetEl: HTMLElement | null;
-    targetElId?: string;
-    targetEls?: HTMLElement[];
-    targetElIds?: string[];
-    isMulti: boolean;
-    document?: Document;
-}
-export interface StageRenderConfig {
-    runtimeUrl?: string;
-    zoom: number | undefined;
-    renderType?: RenderType;
-    customizedRender?: () => Promise<HTMLElement | null>;
-}
-export interface StageMaskConfig {
-    core: StageCore;
-}
-export interface StageDragResizeConfig {
-    container: HTMLElement;
-    dragResizeHelper: DragResizeHelper;
-    moveableOptions?: CustomizeMoveableOptions;
-    disabledDragStart?: boolean;
-    getRootContainer: GetRootContainer;
-    getRenderDocument: GetRenderDocument;
-    markContainerEnd: MarkContainerEnd;
-    delayedMarkContainer: DelayedMarkContainer;
-}
-export interface StageMultiDragResizeConfig {
-    container: HTMLElement;
-    dragResizeHelper: DragResizeHelper;
-    moveableOptions?: CustomizeMoveableOptions;
-    getRootContainer: GetRootContainer;
-    getRenderDocument: GetRenderDocument;
-    markContainerEnd: MarkContainerEnd;
-    delayedMarkContainer: DelayedMarkContainer;
-}
-export interface DragResizeHelperConfig {
-    container: HTMLElement;
-    updateDragEl?: UpdateDragEl;
-}
-export type Rect = {
-    width: number;
-    height: number;
-} & Offset;
-export interface Offset {
-    left: number;
-    top: number;
-}
-export interface Point {
-    clientX: number;
-    clientY: number;
-}
-export interface GuidesEventData {
-    type: GuidesType;
-    guides: number[];
-}
-export interface UpdateEventData {
-    data: {
-        el: HTMLElement;
-        style: {
-            width?: number;
-            height?: number;
-            left?: number;
-            top?: number;
-            transform?: {
-                rotate?: string;
-                scale?: string;
-            };
-        };
-        ghostEl?: HTMLElement;
-    }[];
-    parentEl: HTMLElement | null;
-}
-export interface RemoveEventData {
-    data: {
-        el: HTMLElement;
-    }[];
-}
-export interface SortEventData {
-    src: Id;
-    dist: Id;
-    root?: MApp;
-}
-export interface UpdateData {
-    config: MNode;
-    parent?: MContainer;
-    parentId?: Id;
-    root: MApp;
-}
-export interface RemoveData {
-    id: Id;
-    parentId: Id;
-    root: MApp;
-}
-export interface Runtime {
-    getApp?: () => Core | undefined;
-    updateRootConfig?: (config: MApp) => void;
-    updatePageId?: (id: Id) => void;
-    select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
-    add?: (data: UpdateData) => void;
-    update?: (data: UpdateData) => void;
-    sortNode?: (data: SortEventData) => void;
-    remove?: (data: RemoveData) => void;
-}
-export interface Magic {
-    /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
-    onPageElUpdate: (el: HTMLElement) => void;
-    onRuntimeReady: (runtime: Runtime) => void;
-}
-export interface RuntimeWindow extends Window {
-    magic: Magic;
-}
-export interface StageHighlightConfig {
-    container: HTMLElement;
-    updateDragEl?: UpdateDragEl;
-    getRootContainer: GetRootContainer;
-}
-export interface TargetShadowConfig {
-    container: HTMLElement;
-    zIndex?: ZIndex;
-    updateDragEl?: UpdateDragEl;
-    idPrefix?: string;
-}
-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

@@ -1,42 +0,0 @@
-import { Mode, ZIndex } from './const';
-import type { Offset, SortEventData, TargetElement } from './types';
-export declare const getOffset: (el: Element) => Offset;
-export declare const getTargetElStyle: (el: TargetElement, zIndex?: ZIndex) => string;
-export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
-    left: number;
-    top: number;
-};
-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: 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;
-/**
- * 下移组件位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-export declare const down: (deltaTop: number, target: TargetElement) => SortEventData;
-/**
- * 上移组件位置
- * @param {Array} brothers 处于同一容器下的所有子组件配置
- * @param {number} index 当前组件所处的位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-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;
-    marginTop: number;
-};
-export declare const getBorderWidth: (el: Element) => {
-    borderLeftWidth: number;
-    borderRightWidth: number;
-    borderTopWidth: number;
-    borderBottomWidth: number;
-};