@tmagic/stage 1.2.0-beta.9 → 1.2.1

package/src/StageRender.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.
@@ -18,28 +18,30 @@
 
 import { EventEmitter } from 'events';
 
+import { Id } from '@tmagic/schema';
 import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
+import { DEFAULT_ZOOM } from './const';
 import style from './style.css?raw';
-import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
+import type { Point, RemoveData, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
+import { addSelectedClassName, removeSelectedClassName } 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;
+  private runtimeUrl?: string;
+  private zoom = DEFAULT_ZOOM;
+  private customizedRender?: () => Promise<HTMLElement | null>;
 
-  private render?: () => Promise<HTMLElement | null>;
-
-  constructor({ runtimeUrl, render }: StageRenderConfig) {
+  constructor({ runtimeUrl, zoom, customizedRender }: StageRenderConfig) {
     super();
 
     this.runtimeUrl = runtimeUrl || '';
-    this.render = render;
+    this.customizedRender = customizedRender;
+    this.setZoom(zoom);
 
     this.iframe = globalThis.document.createElement('iframe');
     // 同源，直接加载
@@ -63,6 +65,38 @@ export default class StageRender extends EventEmitter {
     },
   });
 
+  public async add(data: UpdateData): Promise<void> {
+    const runtime = await this.getRuntime();
+    return runtime?.add?.(data);
+  }
+
+  public async remove(data: RemoveData): Promise<void> {
+    const runtime = await this.getRuntime();
+    return runtime?.remove?.(data);
+  }
+
+  public async update(data: UpdateData): Promise<void> {
+    const runtime = await this.getRuntime();
+    // 更新画布中的组件
+    runtime?.update?.(data);
+  }
+
+  public async select(els: HTMLElement[]): Promise<void> {
+    const runtime = await this.getRuntime();
+
+    for (const el of els) {
+      await runtime?.select?.(el.id);
+      if (runtime?.beforeSelect) {
+        await runtime.beforeSelect(el);
+      }
+      this.flagSelectedEl(el);
+    }
+  }
+
+  public setZoom(zoom: number = DEFAULT_ZOOM): void {
+    this.zoom = zoom;
+  }
+
   /**
    * 挂载Dom节点
    * @param el 将页面挂载到该Dom节点上
@@ -101,6 +135,35 @@ export default class StageRender extends EventEmitter {
     return this.contentWindow?.document;
   }
 
+  /**
+   * 通过坐标获得坐标下所有HTML元素数组
+   * @param point 坐标
+   * @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
+   */
+  public getElementsFromPoint(point: Point): HTMLElement[] {
+    let x = point.clientX;
+    let y = point.clientY;
+
+    if (this.iframe) {
+      const rect = this.iframe.getClientRects()[0];
+      if (rect) {
+        x = x - rect.left;
+        y = y - rect.top;
+      }
+    }
+
+    return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];
+  }
+
+  public getTargetElement(idOrEl: Id | HTMLElement): HTMLElement {
+    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
+      const el = this.getDocument()?.getElementById(`${idOrEl}`);
+      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
+      return el;
+    }
+    return idOrEl;
+  }
+
   /**
    * 销毁实例
    */
@@ -112,6 +175,18 @@ export default class StageRender extends EventEmitter {
     this.removeAllListeners();
   }
 
+  /**
+   * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
+   * @param el 被选中的元素
+   */
+  private flagSelectedEl(el: HTMLElement): void {
+    const doc = this.getDocument();
+    if (doc) {
+      removeSelectedClassName(doc);
+      addSelectedClassName(el, doc);
+    }
+  }
+
   private loadHandler = async () => {
     if (!this.contentWindow?.magic) {
       this.postTmagicRuntimeReady();
@@ -119,8 +194,8 @@ export default class StageRender extends EventEmitter {
 
     if (!this.contentWindow) return;
 
-    if (this.render) {
-      const el = await this.render();
+    if (this.customizedRender) {
+      const el = await this.customizedRender();
       if (el) {
         this.contentWindow.document?.body?.appendChild(el);
       }

package/src/TargetShadow.ts

@@ -0,0 +1,120 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 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 { Mode, ZIndex } from './const';
+import type { TargetElement as ShadowElement, TargetShadowConfig, UpdateDragEl } from './types';
+import { getTargetElStyle, isFixedParent } from './util';
+
+/**
+ * 将选中的节点修正定位后，添加一个操作节点到蒙层上
+ */
+export default class TargetShadow {
+  public el?: ShadowElement;
+  public els: ShadowElement[] = [];
+
+  private idPrefix = 'target_calibrate_';
+  private container: HTMLElement;
+  private scrollLeft = 0;
+  private scrollTop = 0;
+  private zIndex?: ZIndex;
+
+  private updateDragEl?: UpdateDragEl;
+
+  constructor(config: TargetShadowConfig) {
+    this.container = config.container;
+
+    if (config.updateDragEl) {
+      this.updateDragEl = config.updateDragEl;
+    }
+
+    if (typeof config.zIndex !== 'undefined') {
+      this.zIndex = config.zIndex;
+    }
+
+    if (config.idPrefix) {
+      this.idPrefix = config.idPrefix;
+    }
+
+    this.container.addEventListener('customScroll', this.scrollHandler);
+  }
+
+  public update(target: ShadowElement): ShadowElement {
+    this.el = this.updateEl(target, this.el);
+
+    return this.el;
+  }
+
+  public updateGroup(targetGroup: ShadowElement[]): ShadowElement[] {
+    if (this.els.length > targetGroup.length) {
+      this.els.slice(targetGroup.length - 1).forEach((el) => {
+        el.remove();
+      });
+    }
+
+    this.els = targetGroup.map((target, index) => this.updateEl(target, this.els[index]));
+
+    return this.els;
+  }
+
+  public destroyEl(): void {
+    this.el?.remove();
+    this.el = undefined;
+  }
+
+  public destroyEls(): void {
+    this.els.forEach((el) => {
+      el.remove();
+    });
+    this.els = [];
+  }
+
+  public destroy(): void {
+    this.container.removeEventListener('customScroll', this.scrollHandler);
+    this.destroyEl();
+    this.destroyEls();
+  }
+
+  private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
+    const el = src || globalThis.document.createElement('div');
+
+    el.id = `${this.idPrefix}${target.id}`;
+
+    el.style.cssText = getTargetElStyle(target, this.zIndex);
+
+    if (typeof this.updateDragEl === 'function') {
+      this.updateDragEl(el, target);
+    }
+    const isFixed = isFixedParent(target);
+    const mode = this.container.dataset.mode || Mode.ABSOLUTE;
+    if (isFixed && mode !== Mode.FIXED) {
+      el.style.transform = `translate3d(${this.scrollLeft}px, ${this.scrollTop}px, 0)`;
+    } else if (!isFixed && mode === Mode.FIXED) {
+      el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
+    }
+
+    if (!globalThis.document.getElementById(el.id)) {
+      this.container.append(el);
+    }
+
+    return el;
+  }
+
+  private scrollHandler = (e: any) => {
+    this.scrollLeft = e.detail.scrollLeft;
+    this.scrollTop = e.detail.scrollTop;
+  };
+}

package/src/const.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.
@@ -25,7 +25,7 @@ export const DRAG_EL_ID_PREFIX = 'drag_el_';
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
-export const CONTAINER_HIGHLIGHT_CLASS = 'tmagic-stage-container-highlight';
+export const CONTAINER_HIGHLIGHT_CLASS_NAME = 'tmagic-stage-container-highlight';
 
 export const PAGE_CLASS = 'magic-ui-page';
 

package/src/index.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.

package/src/logger.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.

package/src/types.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.
@@ -16,25 +16,44 @@
  * limitations under the License.
  */
 
-import { MoveableOptions } from 'moveable';
+import type { MoveableOptions } from 'moveable';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 
-import { GuidesType } from './const';
+import { GuidesType, ZIndex } from './const';
 import StageCore from './StageCore';
-import StageDragResize from './StageDragResize';
-import StageMask from './StageMask';
+
+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，如果是el则直接返回 */
+export type GetTargetElement = (idOrEl: Id | HTMLElement) => HTMLElement;
+/** 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 enum ContainerHighlightType {
+  /** 默认方式：组件在容器上方悬停一段时间后加入 */
   DEFAULT = 'default',
+  /** 按住alt键，并在容器上方悬停一段时间后加入 */
   ALT = 'alt',
 }
 
-export type StageCoreConfig = {
+export type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+
+export interface StageCoreConfig {
   /** 需要对齐的dom节点的CSS选择器字符串 */
   snapElementQuerySelector?: string;
   /** 放大倍数，默认1倍 */
@@ -44,18 +63,47 @@ export type StageCoreConfig = {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
-  moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
-  multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+  moveableOptions?: CustomizeMoveableOptions;
+  multiMoveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
   autoScrollIntoView?: boolean;
-  updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
-};
+  updateDragEl?: UpdateDragEl;
+  disabledDragStart?: boolean;
+}
+
+export interface ActionManagerConfig {
+  container: HTMLElement;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
+  moveableOptions?: CustomizeMoveableOptions;
+  multiMoveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: 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 {
+  targetElId?: string;
+}
 
 export interface StageRenderConfig {
   runtimeUrl?: string;
-  render?: () => Promise<HTMLElement | null>;
+  zoom: number | undefined;
+  customizedRender?: () => Promise<HTMLElement | null>;
 }
 
 export interface StageMaskConfig {
@@ -63,9 +111,35 @@ export interface StageMaskConfig {
 }
 
 export interface StageDragResizeConfig {
-  core: StageCore;
   container: HTMLElement;
-  mask: StageMask;
+  moveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: boolean;
+  getRootContainer: GetRootContainer;
+  getRenderDocument: GetRenderDocument;
+  markContainerEnd: MarkContainerEnd;
+  delayedMarkContainer: DelayedMarkContainer;
+  updateDragEl?: UpdateDragEl;
+}
+
+export interface StageMultiDragResizeConfig {
+  container: HTMLElement;
+  multiMoveableOptions?: CustomizeMoveableOptions;
+  getRootContainer: GetRootContainer;
+  getRenderDocument: GetRenderDocument;
+  updateDragEl?: UpdateDragEl;
+}
+
+export interface DragResizeHelperConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
+
+/** 选择状态 */
+export enum SelectStatus {
+  /** 单选 */
+  SELECT = 'select',
+  /** 多选 */
+  MULTI_SELECT = 'multiSelect',
 }
 
 /** 拖动状态 */
@@ -88,6 +162,11 @@ export interface Offset {
   top: number;
 }
 
+export interface Point {
+  clientX: number;
+  clientY: number;
+}
+
 export interface GuidesEventData {
   type: GuidesType;
   guides: number[];
@@ -154,13 +233,14 @@ export interface RuntimeWindow extends Window {
 }
 
 export interface StageHighlightConfig {
-  core: StageCore;
   container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+  getRootContainer: GetRootContainer;
 }
 
-export interface TargetCalibrateConfig {
-  parent: HTMLElement;
-  mask: StageMask;
-  dr: StageDragResize;
-  core: StageCore;
+export interface TargetShadowConfig {
+  container: HTMLElement;
+  zIndex?: ZIndex;
+  updateDragEl?: UpdateDragEl;
+  idPrefix?: string;
 }

package/src/util.ts

@@ -1,7 +1,7 @@
 /*
  * 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.
+ * Copyright (C) 2023 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.
@@ -18,7 +18,7 @@
 import { removeClassName } from '@tmagic/utils';
 
 import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
-import type { Offset, SortEventData } from './types';
+import type { Offset, SortEventData, TargetElement } from './types';
 
 const getParents = (el: Element, relative: Element) => {
   let cur: Element | null = el.parentElement;
@@ -30,12 +30,16 @@ const getParents = (el: Element, relative: Element) => {
   return parents;
 };
 
-export const getOffset = (el: HTMLElement): Offset => {
-  const { offsetParent } = el;
+export const getOffset = (el: TargetElement): Offset => {
+  const htmlEl = el as HTMLElement;
+  const { offsetParent } = htmlEl;
 
-  const left = el.offsetLeft;
-  const top = el.offsetTop;
+  const left = htmlEl.offsetLeft || 0;
+  const top = htmlEl.offsetTop || 0;
 
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent as HTMLElement);
     return {
@@ -51,7 +55,7 @@ export const getOffset = (el: HTMLElement): Offset => {
 };
 
 // 将蒙层占位节点覆盖在原节点上方
-export const getTargetElStyle = (el: HTMLElement) => {
+export const getTargetElStyle = (el: TargetElement, zIndex?: ZIndex) => {
   const offset = getOffset(el);
   const { transform } = getComputedStyle(el);
   return `
@@ -61,13 +65,16 @@ export const getTargetElStyle = (el: HTMLElement) => {
     top: ${offset.top}px;
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
-    z-index: ${ZIndex.DRAG_EL};
+    ${typeof zIndex !== 'undefined' ? `z-index: ${zIndex};` : ''}
   `;
 };
 
 export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
   const { offsetParent } = el;
 
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent as HTMLElement);
     return {
@@ -87,7 +94,7 @@ export const isStatic = (style: CSSStyleDeclaration): boolean => style.position
 
 export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
 
-export const isFixedParent = (el: HTMLElement) => {
+export const isFixedParent = (el: Element) => {
   let fixed = false;
   let dom = el;
   while (dom) {
@@ -104,7 +111,7 @@ export const isFixedParent = (el: HTMLElement) => {
   return fixed;
 };
 
-export const getMode = (el: HTMLElement): Mode => {
+export const getMode = (el: Element): Mode => {
   if (isFixedParent(el)) return Mode.FIXED;
   const style = getComputedStyle(el);
   if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
@@ -168,7 +175,7 @@ export const calcValueByFontsize = (doc: Document, value: number) => {
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+export const down = (deltaTop: number, target: TargetElement): SortEventData | void => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
@@ -204,7 +211,7 @@ export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEv
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+export const up = (deltaTop: number, target: TargetElement): SortEventData | void => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
     (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
   );