@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/src/StageMultiDragResize.ts

@@ -16,39 +16,46 @@
  * limitations under the License.
  */
 
-import { EventEmitter } from 'events';
-
-import type { MoveableOptions, OnDragStart, OnResizeStart } from 'moveable';
 import Moveable from 'moveable';
-import MoveableHelper from 'moveable-helper';
 
-import { DRAG_EL_ID_PREFIX, PAGE_CLASS } from './const';
-import StageCore from './StageCore';
-import StageMask from './StageMask';
-import { StageDragResizeConfig, StageDragStatus } from './types';
-import { calcValueByFontsize, getMode, getTargetElStyle } from './util';
+import { DRAG_EL_ID_PREFIX, Mode } from './const';
+import DragResizeHelper from './DragResizeHelper';
+import MoveableOptionsManager from './MoveableOptionsManager';
+import { GetRenderDocument, MoveableOptionsManagerConfig, StageDragStatus, StageMultiDragResizeConfig } from './types';
+import { calcValueByFontsize, getMode } from './util';
 
-export default class StageMultiDragResize extends EventEmitter {
-  public core: StageCore;
-  public mask: StageMask;
+export default class StageMultiDragResize extends MoveableOptionsManager {
   /** 画布容器 */
   public container: HTMLElement;
   /** 多选:目标节点组 */
   public targetList: HTMLElement[] = [];
-  /** 多选:目标节点在蒙层中的占位节点组 */
-  public dragElList: HTMLDivElement[] = [];
   /** Moveable多选拖拽类实例 */
   public moveableForMulti?: Moveable;
-  /** 拖动状态 */
   public dragStatus: StageDragStatus = StageDragStatus.END;
-  private multiMoveableHelper?: MoveableHelper;
-
-  constructor(config: StageDragResizeConfig) {
-    super();
+  private dragResizeHelper: DragResizeHelper;
+  private getRenderDocument: GetRenderDocument;
+
+  constructor(config: StageMultiDragResizeConfig) {
+    const moveableOptionsManagerConfig: MoveableOptionsManagerConfig = {
+      container: config.container,
+      moveableOptions: config.multiMoveableOptions,
+      getRootContainer: config.getRootContainer,
+    };
+    super(moveableOptionsManagerConfig);
 
-    this.core = config.core;
     this.container = config.container;
-    this.mask = config.mask;
+    this.getRenderDocument = config.getRenderDocument;
+
+    this.dragResizeHelper = new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+    });
+
+    this.on('update-moveable', () => {
+      if (this.moveableForMulti) {
+        this.updateMoveable();
+      }
+    });
   }
 
   /**
@@ -56,168 +63,108 @@ export default class StageMultiDragResize extends EventEmitter {
    * @param els
    */
   public multiSelect(els: HTMLElement[]): void {
+    if (els.length === 0) {
+      return;
+    }
+    this.mode = getMode(els[0]);
     this.targetList = els;
-    this.core.dr.destroyDragEl();
-    this.destroyDragElList();
-    // 生成虚拟多选节点
-    this.dragElList = els.map((elItem) => {
-      const dragElDiv = globalThis.document.createElement('div');
-      this.container.append(dragElDiv);
-      dragElDiv.style.cssText = getTargetElStyle(elItem);
-      dragElDiv.id = `${DRAG_EL_ID_PREFIX}${elItem.id}`;
-      // 业务方校准
-      if (typeof this.core.config.updateDragEl === 'function') {
-        this.core.config.updateDragEl(dragElDiv, elItem);
-      }
-      return dragElDiv;
-    });
+
+    this.dragResizeHelper.updateGroup(els);
+
+    // 设置周围元素，用于选中元素跟周围元素的对齐辅助
+    const elementGuidelines: HTMLElement[] =
+      Array.prototype.slice.call(this.targetList[0].parentElement?.children) || [];
+    this.setElementGuidelines(this.targetList, elementGuidelines);
+
     this.moveableForMulti?.destroy();
-    this.multiMoveableHelper?.clear();
+    this.dragResizeHelper.clear();
     this.moveableForMulti = new Moveable(
       this.container,
-      this.getOptions({
-        target: this.dragElList,
+      this.getOptions(true, {
+        target: this.dragResizeHelper.getShadowEls(),
       }),
     );
-    this.multiMoveableHelper = MoveableHelper.create({
-      useBeforeRender: true,
-      useRender: false,
-      createAuto: true,
-    });
-    const frames: { left: number; top: number; id: string }[] = [];
-
-    const setFrames = (events: OnDragStart[] | OnResizeStart[]) => {
-      // 记录拖动前快照
-      events.forEach((ev) => {
-        // 实际目标元素
-        const matchEventTarget = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
-        );
-        if (!matchEventTarget) return;
-        frames.push({
-          left: matchEventTarget.offsetLeft,
-          top: matchEventTarget.offsetTop,
-          id: matchEventTarget.id,
-        });
-      });
-    };
 
     this.moveableForMulti
-      .on('resizeGroupStart', (params) => {
-        const { events } = params;
-        this.multiMoveableHelper?.onResizeGroupStart(params);
-        setFrames(events);
+      .on('resizeGroupStart', (e) => {
+        this.dragResizeHelper.onResizeGroupStart(e);
         this.dragStatus = StageDragStatus.START;
       })
-      .on('resizeGroup', (params) => {
-        const { events } = params;
-        // 拖动过程更新
-        events.forEach((ev) => {
-          const { width, height, beforeTranslate } = ev.drag;
-          const frameSnapShot = frames.find(
-            (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
-          );
-          if (!frameSnapShot) return;
-          const targeEl = this.targetList.find(
-            (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
-          );
-          if (!targeEl) return;
-          // 元素与其所属组同时加入多选列表时，只更新父元素
-          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
-          if (!isParentIncluded) {
-            // 更新页面元素位置
-            targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
-            targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
-          }
-
-          // 更新页面元素位置
-          targeEl.style.width = `${width}px`;
-          targeEl.style.height = `${height}px`;
-        });
-        this.multiMoveableHelper?.onResizeGroup(params);
+      .on('resizeGroup', (e) => {
+        this.dragResizeHelper.onResizeGroup(e);
         this.dragStatus = StageDragStatus.ING;
       })
       .on('resizeGroupEnd', () => {
         this.update(true);
         this.dragStatus = StageDragStatus.END;
       })
-      .on('dragGroupStart', (params) => {
-        const { events } = params;
-        this.multiMoveableHelper?.onDragGroupStart(params);
-        // 记录拖动前快照
-        setFrames(events);
+      .on('dragGroupStart', (e) => {
+        this.dragResizeHelper.onDragGroupStart(e);
         this.dragStatus = StageDragStatus.START;
       })
-      .on('dragGroup', (params) => {
-        const { events } = params;
-        // 拖动过程更新
-        events.forEach((ev) => {
-          const frameSnapShot = frames.find(
-            (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
-          );
-          if (!frameSnapShot) return;
-          const targeEl = this.targetList.find(
-            (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
-          );
-          if (!targeEl) return;
-          // 元素与其所属组同时加入多选列表时，只更新父元素
-          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
-          if (!isParentIncluded) {
-            // 更新页面元素位置
-            targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0]}px`;
-            targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
-          }
-        });
-        this.multiMoveableHelper?.onDragGroup(params);
+      .on('dragGroup', (e) => {
+        this.dragResizeHelper.onDragGroup(e);
         this.dragStatus = StageDragStatus.ING;
       })
       .on('dragGroupEnd', () => {
         this.update();
         this.dragStatus = StageDragStatus.END;
       })
-      .on('clickGroup', (params) => {
-        const { inputTarget, targets } = params;
-        // 如果此时mask不处于多选状态下，且有多个元素被选中，同时点击的元素在选中元素中的其中一项，代表多选态切换为该元素的单选态
-        if (!this.mask.isMultiSelectStatus && targets.length > 1 && targets.includes(inputTarget)) {
-          this.emit('select', inputTarget.id.replace(DRAG_EL_ID_PREFIX, ''));
+      .on('clickGroup', (e) => {
+        const { inputTarget, targets } = e;
+        // 如果有多个元素被选中，同时点击的元素在选中元素中的其中一项，可能是多选态切换为该元素的单选态，抛事件给上一层继续判断是否切换
+        if (targets.length > 1 && targets.includes(inputTarget)) {
+          this.emit('change-to-select', inputTarget.id.replace(DRAG_EL_ID_PREFIX, ''));
         }
       });
   }
 
-  public canSelect(el: HTMLElement, stop: () => boolean): Boolean {
-    // 多选状态下不可以选中magic-ui-page，并停止继续向上层选中
-    if (el.className.includes(PAGE_CLASS)) {
-      this.core.highlightedDom = undefined;
-      this.core.highlightLayer.clearHighlight();
-      stop();
-      return false;
-    }
+  public canSelect(el: HTMLElement, selectedEl: HTMLElement | undefined): boolean {
     const currentTargetMode = getMode(el);
-    let selectedDomMode = '';
-    if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
-      // 先单击选中了页面(magic-ui-page)，再按住多选键多选时，任一元素均可选中
-      return true;
+    let selectedElMode = '';
+
+    // 流式布局不支持多选
+    if (currentTargetMode === Mode.SORTABLE) {
+      return false;
     }
-    if (this.targetList.length === 0 && this.core.selectedDom) {
+
+    if (this.targetList.length === 0 && selectedEl) {
       // 单选后添加到多选的情况
-      selectedDomMode = getMode(this.core.selectedDom);
+      selectedElMode = getMode(selectedEl);
     } else if (this.targetList.length > 0) {
       // 已加入多选列表的布局模式是一样的，取第一个判断
-      selectedDomMode = getMode(this.targetList[0]);
+      selectedElMode = getMode(this.targetList[0]);
     }
     // 定位模式不同，不可混选
-    if (currentTargetMode !== selectedDomMode) {
+    if (currentTargetMode !== selectedElMode) {
       return false;
     }
     return true;
   }
 
+  public updateMoveable(eleList = this.targetList) {
+    if (!this.moveableForMulti) return;
+    if (!eleList) throw new Error('未选中任何节点');
+
+    this.targetList = eleList;
+    this.dragResizeHelper.setTargetList(eleList);
+
+    const options = this.getOptions(true, {
+      target: this.dragResizeHelper.getShadowEls(),
+    });
+
+    Object.entries(options).forEach(([key, value]) => {
+      (this.moveableForMulti as any)[key] = value;
+    });
+    this.moveableForMulti.updateTarget();
+  }
+
   /**
    * 清除多选状态
    */
   public clearSelectStatus(): void {
     if (!this.moveableForMulti) return;
-    this.destroyDragElList();
+    this.dragResizeHelper.clearMultiSelectStatus();
     this.moveableForMulti.target = null;
     this.moveableForMulti.updateTarget();
     this.targetList = [];
@@ -228,14 +175,7 @@ export default class StageMultiDragResize extends EventEmitter {
    */
   public destroy(): void {
     this.moveableForMulti?.destroy();
-    this.destroyDragElList();
-  }
-
-  /**
-   * 清除蒙层占位节点
-   */
-  public destroyDragElList(): void {
-    this.dragElList.forEach((dragElItem) => dragElItem?.remove());
+    this.dragResizeHelper.destroy();
   }
 
   /**
@@ -245,60 +185,19 @@ export default class StageMultiDragResize extends EventEmitter {
   private update(isResize = false): void {
     if (this.targetList.length === 0) return;
 
-    const { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
+    const doc = this.getRenderDocument();
     if (!doc) return;
 
-    this.emit('update', {
-      data: this.targetList.map((targetItem) => {
-        const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
-        const left = calcValueByFontsize(doc, offset.left);
-        const top = calcValueByFontsize(doc, offset.top);
-        const width = calcValueByFontsize(doc, targetItem.clientWidth);
-        const height = calcValueByFontsize(doc, targetItem.clientHeight);
-        return {
-          el: targetItem,
-          style: isResize ? { left, top, width, height } : { left, top },
-        };
-      }),
-      parentEl: null,
+    const data = this.targetList.map((targetItem) => {
+      const left = calcValueByFontsize(doc, targetItem.offsetLeft);
+      const top = calcValueByFontsize(doc, targetItem.offsetTop);
+      const width = calcValueByFontsize(doc, targetItem.clientWidth);
+      const height = calcValueByFontsize(doc, targetItem.clientHeight);
+      return {
+        el: targetItem,
+        style: isResize ? { left, top, width, height } : { left, top },
+      };
     });
-  }
-
-  /**
-   * 获取moveable options参数
-   * @param {MoveableOptions} options
-   * @return {MoveableOptions} moveable options参数
-   */
-  private getOptions(options: MoveableOptions = {}): MoveableOptions {
-    let { multiMoveableOptions = {} } = this.core.config;
-
-    if (typeof multiMoveableOptions === 'function') {
-      multiMoveableOptions = multiMoveableOptions(this.core);
-    }
-
-    return {
-      defaultGroupRotate: 0,
-      defaultGroupOrigin: '50% 50%',
-      draggable: true,
-      resizable: true,
-      throttleDrag: 0,
-      startDragRotate: 0,
-      throttleDragRotate: 0,
-      zoom: 1,
-      origin: true,
-      padding: { left: 0, top: 0, right: 0, bottom: 0 },
-      snappable: true,
-      bounds: {
-        top: 0,
-        // 设置0的话无法移动到left为0，所以只能设置为-1
-        left: -1,
-        right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
-        ...(multiMoveableOptions.bounds || {}),
-      },
-      ...options,
-      ...multiMoveableOptions,
-    };
+    this.emit('update', data, null);
   }
 }

package/src/StageRender.ts

@@ -18,32 +18,30 @@
 
 import { EventEmitter } from 'events';
 
+import { Id } from '@tmagic/schema';
 import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
-import StageCore from './StageCore';
+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;
-
-  public core: StageCore;
+  private runtimeUrl?: string;
+  private zoom = DEFAULT_ZOOM;
+  private customizedRender?: () => Promise<HTMLElement | null>;
 
-  private render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
-
-  constructor({ core }: StageRenderConfig) {
+  constructor({ runtimeUrl, zoom, customizedRender }: StageRenderConfig) {
     super();
 
-    this.core = core;
-    this.runtimeUrl = core.config.runtimeUrl || '';
-    this.render = core.config.render;
+    this.runtimeUrl = runtimeUrl || '';
+    this.customizedRender = customizedRender;
+    this.setZoom(zoom);
 
     this.iframe = globalThis.document.createElement('iframe');
     // 同源，直接加载
@@ -67,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 +131,39 @@ export default class StageRender extends EventEmitter {
     });
   };
 
+  public getDocument(): Document | undefined {
+    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(this.core);
+    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) 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 { 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

@@ -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';