@tmagic/stage 1.0.0-beta.1 → 1.0.0-beta.12

package/src/StageDragResize.ts

@@ -21,11 +21,12 @@ import { EventEmitter } from 'events';
 
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
 
-import { GHOST_EL_ID_PREFIX } from './const';
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
-import type { SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getMode, getOffset, Mode } from './util';
+import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
+import { getAbsolutePosition, getMode, getOffset } from './util';
 
 enum ActionStatus {
   START = 'start',
@@ -40,95 +41,133 @@ export default class StageDragResize extends EventEmitter {
   public core: StageCore;
   public container: HTMLElement;
   public target?: HTMLElement;
+  public dragEl: HTMLElement;
   public moveable?: Moveable;
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
+  public elementGuidelines: HTMLElement[] = [];
 
+  private moveableOptions: MoveableOptions = {};
   private dragStatus: ActionStatus = ActionStatus.END;
-  private elObserver?: ResizeObserver;
   private ghostEl: HTMLElement | undefined;
-  private horizontalGuidelines: number[] = [];
-  private verticalGuidelines: number[] = [];
   private mode: Mode = Mode.ABSOLUTE;
+  private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
     super();
 
     this.core = config.core;
     this.container = config.container;
-    this.initObserver();
+
+    this.dragEl = globalThis.document.createElement('div');
+    this.container.append(this.dragEl);
   }
 
   /**
    * 将选中框渲染并覆盖到选中的组件Dom节点上方
+   * 当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
    * @param el 选中组件的Dom节点元素
+   * @param event 鼠标事件
    */
-  public async select(el: HTMLElement): Promise<void> {
-    if (this.target === el) {
-      this.refresh();
-      return;
-    }
-
-    this.moveable?.destroy();
-
+  public select(el: HTMLElement, event?: MouseEvent): void {
+    const oldTarget = this.target;
     this.target = el;
-    this.mode = getMode(el);
 
-    const options = await this.getOptions();
+    this.init(el);
 
-    this.moveable = new Moveable(this.container, options);
-    this.bindResizeEvent();
-    this.bindDragEvent();
+    // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
+    if (!this.moveable || this.target !== oldTarget) {
+      this.moveableHelper = MoveableHelper.create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true,
+      });
+
+      this.initMoveable();
+    } else {
+      this.updateMoveable();
+    }
 
-    this.syncRect(el);
+    if (event) {
+      this.moveable?.dragStart(event);
+    }
   }
 
   /**
    * 初始化选中框并渲染出来
-   * @param param0
    */
+  public updateMoveable(el = this.target): void {
+    if (!this.moveable) throw new Error('未初始化moveable');
+    if (!el) throw new Error('为选中任何节点');
 
-  public async refresh() {
-    const options = await this.getOptions();
-    Object.entries(options).forEach(([key, value]) => {
-      (this.moveable as any)[key] = value;
-    });
-    this.updateMoveableTarget();
-  }
+    this.target = el;
 
-  public async setVGuidelines(verticalGuidelines: number[]): Promise<void> {
-    this.verticalGuidelines = verticalGuidelines;
-    this.target && (await this.select(this.target));
-  }
+    this.init(el);
 
-  public async setHGuidelines(horizontalGuidelines: number[]): Promise<void> {
-    this.horizontalGuidelines = horizontalGuidelines;
-    this.target && (await this.select(this.target));
+    Object.entries(this.moveableOptions).forEach(([key, value]) => {
+      (this.moveable as any)[key] = value;
+    });
+    this.moveable.updateTarget();
   }
 
-  public updateMoveableTarget(target?: HTMLElement): void {
-    if (!this.moveable) throw new Error('为初始化目标');
-
-    if (target) {
-      this.moveable.target = target;
+  public setGuidelines(type: GuidesType, guidelines: number[]): void {
+    if (type === GuidesType.HORIZONTAL) {
+      this.horizontalGuidelines = guidelines;
+      this.moveableOptions.horizontalGuidelines = guidelines;
+    } else if (type === GuidesType.VERTICAL) {
+      this.verticalGuidelines = guidelines;
+      this.moveableOptions.verticalGuidelines = guidelines;
     }
 
-    if (this.target) {
-      this.mode = getMode(this.target);
-    }
+    this.updateMoveable();
+  }
 
-    this.moveable.updateTarget();
+  public clearGuides() {
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+    this.moveableOptions.horizontalGuidelines = [];
+    this.moveableOptions.verticalGuidelines = [];
+    this.updateMoveable();
   }
 
   /**
    * 销毁实例
    */
   public destroy(): void {
-    this.destroyGhostEl();
     this.moveable?.destroy();
+    this.destroyGhostEl();
+    this.destroyDragEl();
     this.dragStatus = ActionStatus.END;
-    this.elObserver?.disconnect();
     this.removeAllListeners();
   }
 
+  private init(el: HTMLElement): void {
+    // 如果有滚动条会导致resize时获取到width，height不准确
+    if (/(auto|scroll)/.test(el.style.overflow)) {
+      el.style.overflow = 'hidden';
+    }
+    this.mode = getMode(el);
+
+    this.destroyGhostEl();
+
+    this.updateDragEl(el);
+
+    this.moveableOptions = this.getOptions({
+      target: this.dragEl,
+    });
+  }
+
+  private initMoveable() {
+    this.moveable?.destroy();
+
+    this.moveable = new Moveable(this.container, {
+      ...this.moveableOptions,
+    });
+
+    this.bindResizeEvent();
+    this.bindDragEvent();
+  }
+
   private bindResizeEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
@@ -142,116 +181,110 @@ export default class StageDragResize extends EventEmitter {
           const rect = this.moveable!.getRect();
           const offset = getAbsolutePosition(e.target as HTMLElement, rect);
           e.dragStart.set([offset.left, offset.top]);
-
-          if (this.ghostEl) {
-            this.destroyGhostEl();
-            this.updateMoveableTarget(this.target);
-          }
         }
       })
-      .on('resize', ({ target, width, height, drag }) => {
-        if (!this.moveable) return;
-        if (!this.target) return;
+      .on('resize', ({ width, height, drag }) => {
+        if (!this.moveable || !this.target || !this.dragEl) return;
+
         const { beforeTranslate } = drag;
         frame.translate = beforeTranslate;
         this.dragStatus = ActionStatus.ING;
 
-        target.style.width = `${width}px`;
-        target.style.height = `${height}px`;
+        this.target.style.width = `${width}px`;
+        this.target.style.height = `${height}px`;
+        this.dragEl.style.width = `${width}px`;
+        this.dragEl.style.height = `${height}px`;
 
-        if ([Mode.ABSOLUTE, Mode.FIXED].includes(this.mode)) {
-          target.style.left = `${beforeTranslate[0]}px`;
-          target.style.top = `${beforeTranslate[1]}px`;
+        // 流式布局
+        if (this.mode === Mode.SORTABLE) {
+          this.dragEl.style.top = `${beforeTranslate[1]}px`;
+          this.target.style.top = `0px`;
+          return;
         }
+
+        this.dragEl.style.left = `${beforeTranslate[0]}px`;
+        this.dragEl.style.top = `${beforeTranslate[1]}px`;
+
+        const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
+
+        this.target.style.left = `${offset.left}px`;
+        this.target.style.top = `${offset.top}px`;
       })
-      .on('resizeEnd', ({ target }) => {
+      .on('resizeEnd', () => {
         this.dragStatus = ActionStatus.END;
-
-        const rect = this.moveable!.getRect();
-        const offset = getAbsolutePosition(target as HTMLElement, rect);
-
-        this.updateMoveableTarget(this.target);
-
-        this.emit('update', {
-          el: this.target,
-          style: {
-            width: this.calcValueByFontsize(rect.width),
-            height: this.calcValueByFontsize(rect.height),
-            position: this.target?.style.position,
-            ...(this.mode === Mode.SORTABLE
-              ? {}
-              : {
-                  left: this.calcValueByFontsize(offset.left),
-                  top: this.calcValueByFontsize(offset.top),
-                }),
-          },
-        });
+        this.update(true);
       });
   }
 
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
+    let offset: Offset | null = null;
+
     this.moveable
-      .on('dragStart', () => {
+      .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
         this.dragStatus = ActionStatus.START;
 
+        this.moveableHelper?.onDragStart(e);
+
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
-          this.updateMoveableTarget(this.ghostEl);
         }
       })
-      .on('drag', ({ target, left, top }) => {
+      .on('drag', (e) => {
+        if (!this.target || !this.dragEl) return;
+
+        if (!offset) {
+          offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
+        }
+
         this.dragStatus = ActionStatus.ING;
-        if (this.mode === Mode.SORTABLE && (!this.ghostEl || target !== this.ghostEl)) {
+
+        const { left, top } = e;
+
+        // 流式布局
+        if (this.ghostEl) {
+          this.dragEl.style.top = `${top}px`;
+          this.ghostEl.style.top = `${top + offset.top}px`;
           return;
         }
 
-        if ([Mode.ABSOLUTE, Mode.FIXED].includes(this.mode)) {
-          target.style.left = `${left}px`;
-          target.style.top = `${top}px`;
-        } else if (this.target) {
-          const offset = getAbsolutePosition(this.target, getOffset(this.target));
-          target.style.top = `${offset.top + top}px`;
-        }
+        this.moveableHelper?.onDrag(e);
+
+        this.target.style.left = `${left + offset.left}px`;
+        this.target.style.top = `${top + offset.top}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
-        if (this.dragStatus !== ActionStatus.ING) {
-          return;
+        if (this.dragStatus === ActionStatus.ING) {
+          switch (this.mode) {
+            case Mode.SORTABLE:
+              this.sort();
+              break;
+            default:
+              this.update();
+          }
         }
-
-        if (!this.target) return;
+        offset = null;
 
         this.dragStatus = ActionStatus.END;
-        this.updateMoveableTarget(this.target);
-
-        switch (this.mode) {
-          case Mode.SORTABLE:
-            this.sort();
-            break;
-          default:
-            this.drag();
-        }
-
         this.destroyGhostEl();
       });
   }
 
-  private async getSnapElements(el: HTMLElement): Promise<HTMLElement[]> {
-    const { renderer } = this.core;
+  private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
+    const { renderer, mask } = this.core;
     const getSnapElements =
-      (await renderer.getRuntime())?.getSnapElements ||
+      runtime?.getSnapElements ||
       (() => {
         const doc = renderer.contentWindow?.document;
-        const elementGuidelines = (doc ? Array.from(doc.querySelectorAll('[id]')) : [])
-          // 排除掉当前组件本身
-          .filter((element) => element !== this.target && !this.target?.contains(element));
-        return elementGuidelines as HTMLElement[];
+        return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
       });
-    return getSnapElements(el);
+    return getSnapElements(el).filter(
+      (element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
+    );
   }
 
   private sort(): void {
@@ -273,18 +306,19 @@ export default class StageDragResize extends EventEmitter {
     }
   }
 
-  private drag(): void {
+  private update(isResize = false): void {
     const rect = this.moveable!.getRect();
-    const offset = getAbsolutePosition(this.target as HTMLElement, rect);
+    const offset =
+      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target as HTMLElement, rect);
+
+    const left = this.calcValueByFontsize(offset.left);
+    const top = this.calcValueByFontsize(offset.top);
+    const width = this.calcValueByFontsize(rect.width);
+    const height = this.calcValueByFontsize(rect.height);
 
     this.emit('update', {
       el: this.target,
-      style: {
-        left: this.calcValueByFontsize(this.mode === Mode.FIXED ? rect.left : offset.left),
-        top: this.calcValueByFontsize(this.mode === Mode.FIXED ? rect.top : offset.top),
-        width: this.calcValueByFontsize(rect.width),
-        height: this.calcValueByFontsize(rect.height),
-      },
+      style: isResize ? { left, top, width, height } : { left, top },
     });
   }
 
@@ -295,7 +329,7 @@ export default class StageDragResize extends EventEmitter {
 
     const ghostEl = el.cloneNode(true) as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${ghostEl.id}`;
+    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
     ghostEl.style.zIndex = '5';
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
@@ -310,90 +344,88 @@ export default class StageDragResize extends EventEmitter {
     this.ghostEl = undefined;
   }
 
-  private async getOptions(options: MoveableOptions = {}): Promise<MoveableOptions> {
+  private updateDragEl(el: HTMLElement) {
+    const { width, height } = el.getBoundingClientRect();
+    const offset = getOffset(el);
+
+    this.dragEl.style.cssText = `
+      position: absolute;
+      left: ${offset.left}px;
+      top: ${offset.top}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+  }
+
+  private destroyDragEl(): void {
+    this.dragEl?.remove();
+  }
+
+  private getOptions(options: MoveableOptions = {}): MoveableOptions {
     if (!this.target) return {};
 
-    const isSortable = this.mode === Mode.SORTABLE;
-    const { config, renderer, mask } = this.core;
-    const { iframe } = renderer;
+    const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
 
-    let { moveableOptions = {} } = config;
+    let { moveableOptions = {} } = this.core.config;
 
     if (typeof moveableOptions === 'function') {
       moveableOptions = moveableOptions(this.core);
     }
 
-    const boundsOptions = {
-      top: 0,
-      left: 0,
-      right: iframe?.clientWidth,
-      bottom: this.mode === Mode.FIXED ? iframe?.clientHeight : mask.page?.clientHeight,
-      ...(moveableOptions.bounds || {}),
-    };
-
     return {
-      target: this.target,
-      scrollable: true,
-      origin: true,
+      origin: false,
+      rootContainer: this.core.container,
       zoom: 1,
-      dragArea: true,
+      dragArea: false,
       draggable: true,
       resizable: true,
-      snappable: !isSortable,
-      snapGap: !isSortable,
-      snapElement: !isSortable,
-      snapVertical: !isSortable,
-      snapHorizontal: !isSortable,
-      snapCenter: !isSortable,
-      container: renderer.contentWindow?.document.body,
-
-      elementGuidelines: isSortable ? [] : await this.getSnapElements(this.target),
+      snappable: isAbsolute || isFixed,
+      snapGap: isAbsolute || isFixed,
+      snapThreshold: 5,
+      snapDigit: 0,
+      throttleDrag: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute,
+      },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+      },
+      isDisplayInnerSnapDigit: true,
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
-
-      bounds: boundsOptions,
+      elementGuidelines: this.elementGuidelines,
+
+      bounds: {
+        top: 0,
+        left: 0,
+        right: this.container.clientWidth,
+        bottom: this.container.clientHeight,
+        ...(moveableOptions.bounds || {}),
+      },
       ...options,
       ...moveableOptions,
     };
   }
 
-  private initObserver(): void {
-    if (typeof ResizeObserver === 'undefined') {
-      return;
-    }
-
-    this.elObserver = new ResizeObserver(() => {
-      const doc = this.core.renderer.contentWindow?.document;
-      if (!doc || !this.target || !this.moveable) return;
-
-      /** 组件可能已经重新渲染了，所以需要重新获取新的dom */
-      const target = doc.getElementById(this.target.id);
-
-      if (this.ghostEl) {
-        this.destroyGhostEl();
-      }
-
-      if (target && target !== this.target) {
-        this.syncRect(target);
-        this.target = target;
-      }
-
-      this.updateMoveableTarget(this.target);
-    });
-  }
-
-  private syncRect(el: HTMLElement): void {
-    this.elObserver?.disconnect();
-    this.elObserver?.observe(el);
-  }
-
   private calcValueByFontsize(value: number) {
     const { contentWindow } = this.core.renderer;
     const fontSize = contentWindow?.document.documentElement.style.fontSize;
 
     if (fontSize) {
       const times = globalThis.parseFloat(fontSize) / 100;
-      return value / times;
+      return (value / times).toFixed(2);
     }
 
     return value;

package/src/StageHighlight.ts

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-param-reassign */
+import { EventEmitter } from 'events';
+
+import Moveable from 'moveable';
+
+import StageCore from './StageCore';
+import type { StageHighlightConfig } from './types';
+export default class StageHighlight extends EventEmitter {
+  public core: StageCore;
+  public container: HTMLElement;
+  public target?: HTMLElement;
+  public moveable?: Moveable;
+
+  constructor(config: StageHighlightConfig) {
+    super();
+
+    this.core = config.core;
+    this.container = config.container;
+  }
+
+  /**
+   * 高亮鼠标悬停的组件
+   * @param el 选中组件的Dom节点元素
+   */
+  public highlight(el: HTMLElement): void {
+    if (!el || el === this.target) return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      target: this.target,
+      scrollable: true,
+      origin: false,
+    });
+  }
+
+  /**
+   * 清空高亮
+   */
+  public clearHighlight(): void {
+    if (!this.moveable) return;
+    this.target = undefined;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.moveable?.destroy();
+  }
+}