@tmagic/stage 1.0.0-beta.1

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;
+    private dragStatus;
+    private elObserver?;
+    private ghostEl;
+    private horizontalGuidelines;
+    private verticalGuidelines;
+    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,79 @@
+/// <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 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

@@ -0,0 +1,40 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "@tmagic/stage",
+  "main": "dist/magic-stage.umd.js",
+  "module": "dist/magic-stage.es.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/magic-stage.es.js",
+      "require": "./dist/magic-stage.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@scena/guides": "^0.17.0",
+    "@tmagic/schema": "^1.0.0-beta.1",
+    "@tmagic/utils": "^1.0.0-beta.1",
+    "events": "^3.3.0",
+    "lodash-es": "^4.17.21",
+    "moveable": "^0.25.3"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "sass": "^1.35.1",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.7",
+    "vite-plugin-dts": "^0.9.6"
+  }
+}

package/src/StageCore.ts

@@ -0,0 +1,222 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventEmitter } from 'events';
+
+import { GuidesEvents } from '@scena/guides';
+
+import { Id } from '@tmagic/schema';
+
+import { DEFAULT_ZOOM } from './const';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+import StageRender from './StageRender';
+import { RemoveData, Runtime, SortEventData, StageCoreConfig, UpdateData, UpdateEventData } from './types';
+import { isFixed } from './util';
+
+export default class StageCore extends EventEmitter {
+  public selectedDom: Element | undefined;
+
+  public renderer: StageRender;
+  public mask: StageMask;
+  public dr: StageDragResize;
+  public config: StageCoreConfig;
+  public zoom = DEFAULT_ZOOM;
+
+  constructor(config: StageCoreConfig) {
+    super();
+
+    this.config = config;
+
+    this.setZoom(config.zoom);
+
+    this.renderer = new StageRender({ core: this });
+    this.mask = new StageMask({ core: this });
+    this.dr = new StageDragResize({ core: this, container: this.mask.content });
+
+    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) => {
+      await this.dr?.select(el as HTMLElement);
+      setTimeout(() => this.dr?.moveable?.dragStart(event));
+    });
+    this.mask.on('selected', (el: Element) => {
+      this.select(el as HTMLElement);
+      this.emit('select', el);
+    });
+
+    this.dr.on('update', (data: UpdateEventData) => this.emit('update', data));
+    this.dr.on('sort', (data: UpdateEventData) => this.emit('sort', data));
+  }
+
+  /**
+   * 选中组件
+   * @param idOrEl 组件Dom节点的id属性，或者Dom节点
+   */
+  public async select(idOrEl: Id | HTMLElement): Promise<void> {
+    let el;
+    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
+      const runtime = await this.renderer?.getRuntime();
+      el = await runtime?.select?.(`${idOrEl}`);
+      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
+    } else {
+      el = idOrEl;
+    }
+
+    if (this.selectedDom === el) return;
+
+    await this.beforeSelect(el);
+
+    this.selectedDom = el;
+    this.setMaskLayout(el);
+    this.dr?.select(el);
+  }
+
+  public update(data: UpdateData): void {
+    const { config } = data;
+
+    this.renderer?.getRuntime().then((runtime) => {
+      runtime?.update?.(data);
+      // 更新配置后，需要等组件渲染更新
+      setTimeout(() => {
+        const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
+        if (el) {
+          // 更新了组件的布局，需要重新设置mask是否可以滚动
+          this.setMaskLayout(el);
+        }
+        this.dr?.refresh();
+      }, 0);
+    });
+  }
+
+  public sortNode(data: SortEventData): void {
+    this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+  }
+
+  public add(data: UpdateData): void {
+    this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  }
+
+  public remove(data: RemoveData): void {
+    this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+  }
+
+  public setZoom(zoom: number = DEFAULT_ZOOM): void {
+    this.zoom = zoom;
+  }
+
+  /**
+   * 挂载Dom节点
+   * @param el 将stage挂载到该Dom节点上
+   */
+  public mount(el: HTMLDivElement): void {
+    const { mask, renderer } = this;
+
+    renderer.mount(el);
+    mask.mount(el);
+
+    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
+
+    maskWrapper.addEventListener('scroll', this.maskScrollHandler);
+    hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
+    vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
+
+    this.emit('mounted');
+  }
+
+  /**
+   * 清空所有参考线
+   */
+  public clearGuides() {
+    this.mask.clearGuides();
+    this.dr.setHGuidelines([]);
+    this.dr.setVGuidelines([]);
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    const { mask, renderer, dr } = this;
+    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
+
+    renderer.destroy();
+    mask.destroy();
+    dr.destroy();
+    maskWrapper.removeEventListener('scroll', this.maskScrollHandler);
+    hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
+    vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
+    this.removeAllListeners();
+  }
+
+  private maskScrollHandler = (event: Event) => {
+    const { mask, renderer } = this;
+    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
+    const { scrollTop } = maskWrapper;
+
+    renderer?.contentWindow?.document.documentElement.scrollTo({ top: scrollTop });
+
+    hGuides.scrollGuides(scrollTop);
+    hGuides.scroll(0);
+
+    vGuides.scrollGuides(0);
+    vGuides.scroll(scrollTop);
+
+    this.emit('scroll', event);
+  };
+
+  private hGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
+    this.dr.setHGuidelines(e.guides);
+    this.emit('changeGuides');
+  };
+
+  private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
+    this.dr.setVGuidelines(e.guides);
+    this.emit('changeGuides');
+  };
+
+  private setMaskLayout(el: HTMLElement): void {
+    let fixed = false;
+    let dom = el;
+    while (dom) {
+      fixed = isFixed(dom);
+      if (fixed) {
+        break;
+      }
+      const { parentElement } = dom;
+      if (!parentElement || parentElement.tagName === 'BODY') {
+        break;
+      }
+      dom = parentElement;
+    }
+
+    if (fixed) {
+      this.mask?.setFixed();
+    } else {
+      this.mask?.setAbsolute();
+    }
+  }
+
+  private async beforeSelect(el: HTMLElement): Promise<void> {
+    const runtime = await this.renderer?.getRuntime();
+    if (runtime?.beforeSelect) {
+      await runtime.beforeSelect(el);
+    }
+  }
+}