@tmagic/stage 1.0.0-beta.3 → 1.0.0-beta.6

package/dist/types/src/StageCore.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import { Id } from '@tmagic/schema';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+import StageRender from './StageRender';
+import { RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
+export default class StageCore extends EventEmitter {
+    selectedDom: Element | undefined;
+    renderer: StageRender;
+    mask: StageMask;
+    dr: StageDragResize;
+    config: StageCoreConfig;
+    zoom: number;
+    constructor(config: StageCoreConfig);
+    /**
+     * 选中组件
+     * @param idOrEl 组件Dom节点的id属性，或者Dom节点
+     */
+    select(idOrEl: Id | HTMLElement): Promise<void>;
+    update(data: UpdateData): void;
+    sortNode(data: SortEventData): void;
+    add(data: UpdateData): void;
+    remove(data: RemoveData): void;
+    setZoom(zoom?: number): void;
+    /**
+     * 挂载Dom节点
+     * @param el 将stage挂载到该Dom节点上
+     */
+    mount(el: HTMLDivElement): void;
+    /**
+     * 清空所有参考线
+     */
+    clearGuides(): void;
+    /**
+     * 销毁实例
+     */
+    destroy(): void;
+    private maskScrollHandler;
+    private hGuidesChangeGuidesHandler;
+    private vGuidesChangeGuidesHandler;
+    private setMaskLayout;
+    private beforeSelect;
+}

package/dist/types/src/StageDragResize.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import Moveable from 'moveable';
+import StageCore from './StageCore';
+import type { SortEventData, StageDragResizeConfig } from './types';
+/**
+ * 选中框
+ */
+export default class StageDragResize extends EventEmitter {
+    core: StageCore;
+    container: HTMLElement;
+    target?: HTMLElement;
+    moveable?: Moveable;
+    horizontalGuidelines: number[];
+    verticalGuidelines: number[];
+    private dragStatus;
+    private elObserver?;
+    private ghostEl;
+    private mode;
+    constructor(config: StageDragResizeConfig);
+    /**
+     * 将选中框渲染并覆盖到选中的组件Dom节点上方
+     * @param el 选中组件的Dom节点元素
+     */
+    select(el: HTMLElement): Promise<void>;
+    /**
+     * 初始化选中框并渲染出来
+     * @param param0
+     */
+    refresh(): Promise<void>;
+    setVGuidelines(verticalGuidelines: number[]): Promise<void>;
+    setHGuidelines(horizontalGuidelines: number[]): Promise<void>;
+    updateMoveableTarget(target?: HTMLElement): void;
+    /**
+     * 销毁实例
+     */
+    destroy(): void;
+    private bindResizeEvent;
+    private bindDragEvent;
+    private getSnapElements;
+    private sort;
+    private drag;
+    private generateGhostEl;
+    private destroyGhostEl;
+    private getOptions;
+    private initObserver;
+    private syncRect;
+    private calcValueByFontsize;
+}
+/**
+ * 下移组件位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export declare const down: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;
+/**
+ * 上移组件位置
+ * @param {Array} brothers 处于同一容器下的所有子组件配置
+ * @param {number} index 当前组件所处的位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export declare const up: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;

package/dist/types/src/StageMask.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import Guides from '@scena/guides';
+import type StageCore from './StageCore';
+import type { StageMaskConfig } from './types';
+/**
+ * 蒙层
+ * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
+ */
+export default class StageMask extends EventEmitter {
+    content: HTMLDivElement;
+    wrapper: HTMLDivElement;
+    core: StageCore;
+    page: HTMLElement | null;
+    hGuides: Guides;
+    vGuides: Guides;
+    private target;
+    private resizeObserver;
+    private parentResizeObserver;
+    private canSelect;
+    constructor(config: StageMaskConfig);
+    /**
+     * 设置成固定定位模式
+     */
+    setFixed(): void;
+    /**
+     * 设置成绝对定位模式
+     */
+    setAbsolute(): void;
+    /**
+     * 监听页面大小变化
+     * @description 同步页面与mask的大小
+     * @param page 页面Dom节点
+     */
+    observe(page: HTMLElement): void;
+    /**
+     * 挂载Dom节点
+     * @param el 将蒙层挂载到该Dom节点上
+     */
+    mount(el: HTMLDivElement): void;
+    /**
+     * 销毁实例
+     */
+    destroy(): void;
+    /**
+     * 是否显示标尺
+     * @param show 是否显示
+     */
+    showGuides(show?: boolean): void;
+    /**
+     * 是否显示标尺
+     * @param show 是否显示
+     */
+    showRule(show?: boolean): void;
+    /**
+     * 清空所有参考线
+     */
+    clearGuides(): void;
+    /**
+     * 设置蒙层高度
+     * @param height 高度
+     */
+    private setHeight;
+    /**
+     * 设置蒙层宽度
+     * @param width 宽度
+     */
+    private setWidth;
+    /**
+     * 点击事件处理函数
+     * @param event 事件对象
+     */
+    private mouseDownHandler;
+    private mouseUpHandler;
+    private mouseMoveHandler;
+    private contextmenuHandler;
+    private select;
+    private getGuidesStyle;
+    private createGuides;
+}

package/dist/types/src/StageRender.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import StageCore from './StageCore';
+import type { Runtime, RuntimeWindow, StageRenderConfig } 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);
+    getMagicApi: () => {
+        onPageElUpdate: (el: HTMLElement) => boolean;
+        onRuntimeReady: (runtime: Runtime) => void;
+    };
+    /**
+     * 挂载Dom节点
+     * @param el 将页面挂载到该Dom节点上
+     */
+    mount(el: HTMLDivElement): Promise<void>;
+    getRuntime: () => Promise<Runtime>;
+    /**
+     * 销毁实例
+     */
+    destroy(): void;
+}

package/dist/types/src/const.d.ts

@@ -0,0 +1,2 @@
+export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
+export declare const DEFAULT_ZOOM = 1;

package/dist/types/src/index.d.ts

@@ -0,0 +1,7 @@
+import StageCore from './StageCore';
+export type { MoveableOptions } from 'moveable';
+export { default as StageRender } from './StageRender';
+export { default as StageMask } from './StageMask';
+export { default as StageDragResize } from './StageDragResize';
+export * from './types';
+export default StageCore;

package/dist/types/src/types.d.ts

@@ -0,0 +1,84 @@
+import { MoveableOptions } from 'react-moveable/declaration/types';
+import { Id, MApp, MNode } from '@tmagic/schema';
+import StageCore from './StageCore';
+export declare type CanSelect = (el: HTMLElement, stop: () => boolean) => boolean | Promise<boolean>;
+export declare type StageCoreConfig = {
+    /** 需要对齐的dom节点的CSS选择器字符串 */
+    snapElementQuerySelector?: string;
+    /** 放大倍数，默认1倍 */
+    zoom?: number;
+    canSelect?: CanSelect;
+    moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+    /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
+    runtimeUrl?: string;
+    render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+};
+export interface StageRenderConfig {
+    core: StageCore;
+}
+export interface StageMaskConfig {
+    core: StageCore;
+}
+export interface StageDragResizeConfig {
+    core: StageCore;
+    container: HTMLElement;
+}
+export declare type Rect = {
+    width: number;
+    height: number;
+} & Offset;
+export interface Offset {
+    left: number;
+    top: number;
+}
+export interface UpdateEventData {
+    el: HTMLElement;
+    ghostEl: HTMLElement;
+    style: {
+        width: number;
+        height: number;
+        left?: number;
+        top?: number;
+    };
+}
+export interface SortEventData {
+    src: Id;
+    dist: Id;
+    root?: MApp;
+}
+export interface UpdateData {
+    config: MNode;
+    root: MApp;
+}
+export interface RemoveData {
+    id: Id;
+    root: MApp;
+}
+export interface Runtime {
+    beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
+    getSnapElements?: (el: HTMLElement) => HTMLElement[];
+    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 declare enum ZIndex {
+    MASK = "99999",
+    GHOST_EL = "99998"
+}
+export declare enum MouseButton {
+    LEFT = 0,
+    MIDDLE = 1,
+    RIGHT = 2
+}

package/dist/types/src/util.d.ts

@@ -0,0 +1,18 @@
+import type { Offset } from './types';
+export declare enum Mode {
+    ABSOLUTE = "absolute",
+    FIXED = "fixed",
+    SORTABLE = "sortable"
+}
+export declare const getOffset: (el: HTMLElement) => Offset;
+export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
+    left: number;
+    top: number;
+};
+export declare const getHost: (targetUrl: string) => string | undefined;
+export declare const isSameDomain: (targetUrl?: string, source?: string) => boolean;
+export declare const isAbsolute: (el?: HTMLElement | undefined) => boolean;
+export declare const isRelative: (el?: HTMLElement | undefined) => boolean;
+export declare const isStatic: (el?: HTMLElement | undefined) => boolean;
+export declare const isFixed: (el?: HTMLElement | undefined) => boolean;
+export declare const getMode: (el: HTMLElement) => Mode;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/stage",
   "sideEffects": false,
   "main": "dist/tmagic-stage.umd.js",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.3",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.25.3"
+    "moveable": "^0.28.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",

package/src/StageCore.ts

@@ -52,9 +52,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('runtime-ready', (runtime: Runtime) => this.emit('runtime-ready', runtime));
     this.renderer.on('page-el-update', (el: HTMLElement) => this.mask?.observe(el));
 
-    this.mask.on('select', async (el: Element, event: MouseEvent) => {
+    this.mask.on('select', async (el: Element) => {
       await this.dr?.select(el as HTMLElement);
-      setTimeout(() => this.dr?.moveable?.dragStart(event));
     });
     this.mask.on('selected', (el: Element) => {
       this.select(el as HTMLElement);

package/src/StageDragResize.ts

@@ -41,12 +41,12 @@ export default class StageDragResize extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
 
   private dragStatus: ActionStatus = ActionStatus.END;
   private elObserver?: ResizeObserver;
   private ghostEl: HTMLElement | undefined;
-  private horizontalGuidelines: number[] = [];
-  private verticalGuidelines: number[] = [];
   private mode: Mode = Mode.ABSOLUTE;
 
   constructor(config: StageDragResizeConfig) {
@@ -246,12 +246,10 @@ export default class StageDragResize extends EventEmitter {
       (await renderer.getRuntime())?.getSnapElements ||
       (() => {
         const doc = renderer.contentWindow?.document;
-        const elementGuidelines = (doc ? Array.from(doc.querySelectorAll('[id]')) : [])
-          // 排除掉当前组件本身
-          .filter((element) => element !== this.target && !this.target?.contains(element));
-        return elementGuidelines as HTMLElement[];
+        return (doc ? Array.from(doc.querySelectorAll('[id]')) : []) as HTMLElement[];
       });
-    return getSnapElements(el);
+    // 排除掉当前组件本身
+    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
   }
 
   private sort(): void {
@@ -341,11 +339,8 @@ export default class StageDragResize extends EventEmitter {
       resizable: true,
       snappable: !isSortable,
       snapGap: !isSortable,
-      snapElement: !isSortable,
-      snapVertical: !isSortable,
-      snapHorizontal: !isSortable,
-      snapCenter: !isSortable,
-      container: renderer.contentWindow?.document.body,
+      snapDirections: { center: !isSortable, middle: !isSortable },
+      elementSnapDirections: { center: !isSortable, middle: !isSortable },
 
       elementGuidelines: isSortable ? [] : await this.getSnapElements(this.target),
       horizontalGuidelines: this.horizontalGuidelines,

package/src/StageMask.ts

@@ -91,8 +91,8 @@ export default class StageMask extends EventEmitter {
     const { config: coreConfig } = config.core;
 
     this.canSelect = coreConfig.canSelect || ((el: HTMLElement) => !!el.id);
-    this.content.addEventListener('mousedown', this.mouseDownHandler, true);
-    this.content.addEventListener('contextmenu', this.contextmenuHandler, true);
+    this.content.addEventListener('mousedown', this.mouseDownHandler);
+    this.content.addEventListener('contextmenu', this.contextmenuHandler);
     this.wrapper.appendChild(this.content);
 
     this.hGuides = this.createGuides('horizontal');
@@ -189,17 +189,26 @@ export default class StageMask extends EventEmitter {
    * @param show 是否显示
    */
   public showRule(show = true) {
-    this.hGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
+    if (show) {
+      this.hGuides.destroy();
+      this.hGuides = this.createGuides('horizontal', this.core.dr.horizontalGuidelines);
+
+      this.vGuides.destroy();
+      this.vGuides = this.createGuides('vertical', this.core.dr.verticalGuidelines);
+    } else {
+      this.hGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
 
-    this.vGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+      this.vGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+    }
   }
 
   /**
@@ -242,15 +251,26 @@ export default class StageMask extends EventEmitter {
       return;
     }
 
+    this.content.addEventListener('mousemove', this.mouseMoveHandler);
+
     this.select(event);
   };
 
   private mouseUpHandler = (): void => {
-    this.content?.removeEventListener('mouseup', this.mouseUpHandler, true);
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+    this.content.removeEventListener('mouseup', this.mouseUpHandler);
     this.emit('selected', this.target);
     this.target = null;
   };
 
+  private mouseMoveHandler = (event: MouseEvent): void => {
+    // 避免触摸板轻触移动拖动组件
+    if (event.buttons) {
+      this.core.dr.moveable?.dragStart(event);
+    }
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+  };
+
   private contextmenuHandler = async (event: MouseEvent): Promise<void> => {
     await this.select(event);
     this.mouseUpHandler();
@@ -282,7 +302,7 @@ export default class StageMask extends EventEmitter {
         this.emit('select', el, event);
         this.target = el;
         // 如果是右键点击，这里的mouseup事件监听没有效果
-        this.content?.addEventListener('mouseup', this.mouseUpHandler, true);
+        this.content.addEventListener('mouseup', this.mouseUpHandler);
         break;
       }
     }
@@ -296,9 +316,10 @@ export default class StageMask extends EventEmitter {
     height: type === 'horizontal' ? '30px' : '100%',
   });
 
-  private createGuides = (type: 'horizontal' | 'vertical'): Guides =>
+  private createGuides = (type: 'horizontal' | 'vertical', defaultGuides: number[] = []): Guides =>
     new Guides(this.wrapper, {
       type,
+      defaultGuides,
       displayDragPos: true,
       backgroundColor: '#fff',
       lineColor: '#000',