@tmagic/stage 1.2.0-beta.8 → 1.2.0

package/src/StageMask.ts

@@ -16,20 +16,16 @@
  * limitations under the License.
  */
 
-import KeyController from 'keycon';
-import { throttle } from 'lodash-es';
+import { createDiv, getDocument, injectStyle } from '@tmagic/utils';
 
-import { createDiv, injectStyle } from '@tmagic/utils';
-
-import { Mode, MouseButton, ZIndex } from './const';
+import { Mode, ZIndex } from './const';
 import Rule from './Rule';
-import { getScrollParent, isFixedParent, isMoveableButton } from './util';
+import { getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
-const throttleTime = 100;
 
 const hideScrollbar = () => {
-  injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+  injectStyle(getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
 };
 
 const createContent = (): HTMLDivElement =>
@@ -78,36 +74,28 @@ export default class StageMask extends Rule {
   public wrapperWidth = 0;
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
-  public isMultiSelectStatus: Boolean = false;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageScrollParent: HTMLElement | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
   private wrapperResizeObserver: ResizeObserver | null = null;
 
-  /**
-   * 高亮事件处理函数
-   * @param event 事件对象
-   */
-  private highlightHandler = throttle((event: MouseEvent): void => {
-    this.emit('highlight', event);
-  }, throttleTime);
-
   constructor() {
     const wrapper = createWrapper();
     super(wrapper);
 
     this.wrapper = wrapper;
 
-    this.initContentEventListener();
+    this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.wrapper.appendChild(this.content);
-
-    this.initMultiSelectEvent();
   }
 
   public setMode(mode: Mode) {
     this.mode = mode;
     this.scroll();
+
+    this.content.dataset.mode = mode;
+
     if (mode === Mode.FIXED) {
       this.content.style.width = `${this.wrapperWidth}px`;
       this.content.style.height = `${this.wrapperHeight}px`;
@@ -182,42 +170,9 @@ export default class StageMask extends Rule {
     this.pageScrollParent = null;
     this.wrapperResizeObserver?.disconnect();
 
-    this.content.removeEventListener('mouseleave', this.mouseLeaveHandler);
     super.destroy();
   }
 
-  /**
-   * 初始化content的事件监听
-   */
-  private initContentEventListener(): void {
-    this.content.addEventListener('mousedown', this.mouseDownHandler);
-    this.content.addEventListener('wheel', this.mouseWheelHandler);
-    this.content.addEventListener('mousemove', this.highlightHandler);
-    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
-  }
-
-  /**
-   * 初始化多选事件监听
-   */
-  private initMultiSelectEvent(): void {
-    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-
-    const ctrl = isMac ? 'meta' : 'ctrl';
-
-    KeyController.global.keydown(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
-    });
-    // ctrl+tab切到其他窗口，需要将多选状态置为false
-    KeyController.global.on('blur', () => {
-      this.isMultiSelectStatus = false;
-    });
-    KeyController.global.keyup(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
-    });
-  }
-
   /**
    * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
    */
@@ -286,6 +241,17 @@ export default class StageMask extends Rule {
 
   private scrollTo(scrollLeft: number, scrollTop: number): void {
     this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
+
+    const event = new CustomEvent<{
+      scrollLeft: number;
+      scrollTop: number;
+    }>('customScroll', {
+      detail: {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop,
+      },
+    });
+    this.content.dispatchEvent(event);
   }
 
   /**
@@ -333,51 +299,7 @@ export default class StageMask extends Rule {
     if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
   }
 
-  /**
-   * 点击事件处理函数
-   * @param event 事件对象
-   */
-  private mouseDownHandler = (event: MouseEvent): void => {
-    this.emit('clearHighlight');
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
-    if (!event.target) return;
-
-    const targetClassList = (event.target as HTMLDivElement).classList;
-
-    // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
-    if (!this.isMultiSelectStatus && targetClassList.contains('moveable-area')) {
-      return;
-    }
-    // 点击对象如果是边框锚点，则可能是resize; 点击对象是功能按钮
-    if (targetClassList.contains('moveable-control') || isMoveableButton(event.target as Element)) {
-      return;
-    }
-
-    this.content.removeEventListener('mousemove', this.highlightHandler);
-
-    // 判断触发多选还是单选
-    if (this.isMultiSelectStatus) {
-      this.emit('beforeMultiSelect', event);
-    } else {
-      this.emit('beforeSelect', event);
-    }
-    // 如果是右键点击，这里的mouseup事件监听没有效果
-    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
-  };
-
-  private mouseUpHandler = (): void => {
-    globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
-    this.content.addEventListener('mousemove', this.highlightHandler);
-    if (!this.isMultiSelectStatus) {
-      this.emit('select');
-    }
-  };
-
   private mouseWheelHandler = (event: WheelEvent) => {
-    this.emit('clearHighlight');
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;
@@ -394,11 +316,6 @@ export default class StageMask extends Rule {
     }
 
     this.scroll();
-
     this.emit('scroll', event);
   };
-
-  private mouseLeaveHandler = () => {
-    setTimeout(() => this.emit('clearHighlight'), throttleTime);
-  };
 }

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);
   }
 }