@tmagic/stage 1.0.0-beta.1

package/src/StageMask.ts

@@ -0,0 +1,308 @@
+/*
+ * 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 Guides from '@scena/guides';
+import { isNumber } from 'lodash';
+
+import { GHOST_EL_ID_PREFIX } from './const';
+import type StageCore from './StageCore';
+import type { CanSelect, StageMaskConfig } from './types';
+import { MouseButton, ZIndex } from './types';
+
+const wrapperClassName = 'editor-mask-wrapper';
+
+const hideScrollbar = () => {
+  const style = globalThis.document.createElement('style');
+  style.innerHTML = `
+    .${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }
+  `;
+  globalThis.document.head.appendChild(style);
+};
+
+const createContent = (): HTMLDivElement => {
+  const el = globalThis.document.createElement('div');
+  el.className = 'editor-mask';
+  el.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate3d(0, 0, 0);
+  `;
+  return el;
+};
+
+const createWrapper = (): HTMLDivElement => {
+  const el = globalThis.document.createElement('div');
+  el.className = wrapperClassName;
+  el.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    z-index: ${ZIndex.MASK};
+  `;
+
+  hideScrollbar();
+
+  return el;
+};
+
+/**
+ * 蒙层
+ * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
+ */
+export default class StageMask extends EventEmitter {
+  public content: HTMLDivElement = createContent();
+  public wrapper: HTMLDivElement = createWrapper();
+  public core: StageCore;
+  public page: HTMLElement | null = null;
+
+  public hGuides: Guides;
+  public vGuides: Guides;
+
+  private target: Element | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+  private parentResizeObserver: ResizeObserver | null = null;
+  private canSelect: CanSelect;
+
+  constructor(config: StageMaskConfig) {
+    super();
+
+    this.core = config.core;
+    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.wrapper.appendChild(this.content);
+
+    this.hGuides = this.createGuides('horizontal');
+    this.vGuides = this.createGuides('vertical');
+  }
+
+  /**
+   * 设置成固定定位模式
+   */
+  public setFixed(): void {
+    this.wrapper.scrollTo({
+      top: 0,
+    });
+    this.wrapper.style.overflow = 'hidden';
+    // 要等滚动条滚上去，才刷新选中框
+    setTimeout(() => {
+      this.core.dr.refresh();
+    });
+  }
+
+  /**
+   * 设置成绝对定位模式
+   */
+  public setAbsolute(): void {
+    this.wrapper.style.overflow = 'auto';
+  }
+
+  /**
+   * 监听页面大小变化
+   * @description 同步页面与mask的大小
+   * @param page 页面Dom节点
+   */
+  public observe(page: HTMLElement): void {
+    if (!page) return;
+
+    this.page = page;
+    this.resizeObserver?.disconnect();
+
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        const [entry] = entries;
+        const { clientHeight, clientWidth } = entry.target;
+        this.setHeight(clientHeight);
+        this.setWidth(clientWidth);
+      });
+
+      this.resizeObserver.observe(page);
+    }
+  }
+
+  /**
+   * 挂载Dom节点
+   * @param el 将蒙层挂载到该Dom节点上
+   */
+  public mount(el: HTMLDivElement): void {
+    if (!this.content) throw new Error('content 不存在');
+
+    el.appendChild(this.wrapper);
+
+    this.parentResizeObserver = new ResizeObserver(() => {
+      this.vGuides.resize();
+      this.hGuides.resize();
+    });
+    this.parentResizeObserver.observe(el);
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.content?.remove();
+    this.page = null;
+    this.resizeObserver?.disconnect();
+    this.parentResizeObserver?.disconnect();
+    this.removeAllListeners();
+  }
+
+  /**
+   * 是否显示标尺
+   * @param show 是否显示
+   */
+  public showGuides(show = true) {
+    this.hGuides.setState({
+      showGuides: show,
+    });
+
+    this.vGuides.setState({
+      showGuides: show,
+    });
+  }
+
+  /**
+   * 是否显示标尺
+   * @param show 是否显示
+   */
+  public showRule(show = true) {
+    this.hGuides.setState({
+      rulerStyle: {
+        visibility: show ? '' : 'hidden',
+      },
+    });
+
+    this.vGuides.setState({
+      rulerStyle: {
+        visibility: show ? '' : 'hidden',
+      },
+    });
+  }
+
+  /**
+   * 清空所有参考线
+   */
+  public clearGuides() {
+    this.vGuides.setState({
+      defaultGuides: [],
+    });
+    this.hGuides.setState({
+      defaultGuides: [],
+    });
+  }
+
+  /**
+   * 设置蒙层高度
+   * @param height 高度
+   */
+  private setHeight(height: number | string): void {
+    this.content.style.height = isNumber(height) ? `${height}px` : height;
+  }
+
+  /**
+   * 设置蒙层宽度
+   * @param width 宽度
+   */
+  private setWidth(width: number | string): void {
+    this.content.style.width = isNumber(width) ? `${width}px` : width;
+  }
+
+  /**
+   * 点击事件处理函数
+   * @param event 事件对象
+   */
+  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
+    if (event.button !== MouseButton.LEFT) return;
+
+    // 点击的对象如果是选中框，则不需要再触发选中了，而可能是拖动行为
+    if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
+      return;
+    }
+
+    this.select(event);
+  };
+
+  private mouseUpHandler = (): void => {
+    this.content?.removeEventListener('mouseup', this.mouseUpHandler, true);
+    this.emit('selected', this.target);
+    this.target = null;
+  };
+
+  private contextmenuHandler = async (event: MouseEvent): Promise<void> => {
+    await this.select(event);
+    this.mouseUpHandler();
+  };
+
+  private async select(event: MouseEvent) {
+    const { renderer, zoom } = this.core;
+
+    const doc = renderer.contentWindow?.document;
+    let x = event.clientX;
+    let y = event.clientY;
+
+    if (renderer.iframe) {
+      const rect = renderer.iframe.getClientRects()[0];
+      if (rect) {
+        x = x - rect.left;
+        y = y - rect.top;
+      }
+    }
+
+    const els = doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+
+    let stopped = false;
+    const stop = () => (stopped = true);
+    for (const el of els) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.canSelect(el, stop))) {
+        if (stopped) break;
+
+        this.emit('select', el, event);
+        this.target = el;
+        // 如果是右键点击，这里的mouseup事件监听没有效果
+        this.content?.addEventListener('mouseup', this.mouseUpHandler, true);
+        break;
+      }
+    }
+  }
+
+  private getGuidesStyle = (type: 'horizontal' | 'vertical') => ({
+    position: 'fixed',
+    left: type === 'horizontal' ? 0 : '-30px',
+    top: type === 'horizontal' ? '-30px' : 0,
+    width: type === 'horizontal' ? '100%' : '30px',
+    height: type === 'horizontal' ? '30px' : '100%',
+  });
+
+  private createGuides = (type: 'horizontal' | 'vertical'): Guides =>
+    new Guides(this.wrapper, {
+      type,
+      displayDragPos: true,
+      backgroundColor: '#fff',
+      lineColor: '#000',
+      textColor: '#000',
+      style: this.getGuidesStyle(type),
+    });
+}

package/src/StageRender.ts

@@ -0,0 +1,121 @@
+/*
+ * 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 StageCore from './StageCore';
+import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
+import { getHost, isSameDomain } from './util';
+
+export default class StageRender extends EventEmitter {
+  /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
+  public contentWindow: RuntimeWindow | null = null;
+
+  public runtime: Runtime | null = null;
+
+  public iframe?: HTMLIFrameElement;
+
+  public runtimeUrl?: string;
+
+  public core: StageCore;
+
+  private render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+
+  constructor({ core }: StageRenderConfig) {
+    super();
+
+    this.core = core;
+    this.runtimeUrl = core.config.runtimeUrl || '';
+    this.render = core.config.render;
+
+    this.iframe = globalThis.document.createElement('iframe');
+    // 同源，直接加载
+    this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : '';
+    this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+
+    this.iframe.onload = async () => {
+      this.emit('onload');
+      if (this.render) {
+        const el = await this.render(this.core);
+        if (el) {
+          this.iframe?.contentDocument?.body?.appendChild(el);
+        }
+      }
+    };
+  }
+
+  public getMagicApi = () => ({
+    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
+    onRuntimeReady: (runtime: Runtime) => {
+      this.runtime = runtime;
+      // @ts-ignore
+      globalThis.runtime = runtime;
+      this.emit('runtime-ready', runtime);
+    },
+  });
+
+  /**
+   * 挂载Dom节点
+   * @param el 将页面挂载到该Dom节点上
+   */
+  public async mount(el: HTMLDivElement) {
+    if (this.iframe) {
+      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+        // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
+        let html = await fetch(this.runtimeUrl).then((res) => res.text());
+        // 使用base, 解决相对路径或绝对路径的问题
+        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+        html = html.replace('<head>', `<head>\n<base href="${base}">`);
+        this.iframe.srcdoc = html;
+      }
+
+      el.appendChild<HTMLIFrameElement>(this.iframe);
+
+      this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+      this.contentWindow.magic = this.getMagicApi();
+    } else {
+      throw Error('mount 失败');
+    }
+  }
+
+  public getRuntime = (): Promise<Runtime> => {
+    if (this.runtime) return Promise.resolve(this.runtime);
+    return new Promise((resolve) => {
+      const listener = (runtime: Runtime) => {
+        this.off('runtime-ready', listener);
+        resolve(runtime);
+      };
+      this.on('runtime-ready', listener);
+    });
+  };
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.contentWindow = null;
+    this.iframe?.remove();
+    this.iframe = undefined;
+    this.removeAllListeners();
+  }
+}

package/src/const.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+// 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀
+export const GHOST_EL_ID_PREFIX = 'ghost_el_';
+
+// 默认放到缩小倍数
+export const DEFAULT_ZOOM = 1;

package/src/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 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/src/logger.ts

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+export const log = (...args: any[]) => {
+  console.log(...args);
+};
+
+export const info = (...args: any[]) => {
+  console.log(...args);
+};
+
+export const warn = (...args: any[]) => {
+  console.warn(...args);
+};
+
+export const debug = (...args: any[]) => {
+  console.debug(...args);
+};
+
+export const error = (...args: any[]) => {
+  console.error(...args);
+};

package/src/types.ts

@@ -0,0 +1,121 @@
+import { MoveableOptions } from 'react-moveable/declaration/types';
+
+import { Id, MApp, MNode } from '@tmagic/schema';
+
+import StageCore from './StageCore';
+
+export type CanSelect = (el: HTMLElement, stop: () => boolean) => boolean | Promise<boolean>;
+
+export 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 type Rect = {
+  width: number;
+  height: number;
+} & Offset;
+
+export interface Offset {
+  left: number;
+  top: number;
+}
+
+/*
+ * 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.
+ */
+
+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 enum ZIndex {
+  MASK = '99999',
+  GHOST_EL = '99998',
+}
+
+export enum MouseButton {
+  LEFT = 0,
+  MIDDLE = 1,
+  RIGHT = 2,
+}