@tmagic/stage 1.0.0-beta.9 → 1.0.0-rc.11

package/src/StageDragResize.ts

@@ -23,14 +23,18 @@ import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getMode, getOffset } from './util';
+import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
+/** 拖动状态 */
 enum ActionStatus {
+  /** 开始拖动 */
   START = 'start',
+  /** 拖动中 */
   ING = 'ing',
+  /** 拖动结束 */
   END = 'end',
 }
 
@@ -39,17 +43,28 @@ enum ActionStatus {
  */
 export default class StageDragResize extends EventEmitter {
   public core: StageCore;
+  /** 画布容器 */
   public container: HTMLElement;
+  /** 目标节点 */
   public target?: HTMLElement;
-  public dragEl?: HTMLElement;
+  /** 目标节点在蒙层中的占位节点 */
+  public dragEl: HTMLDivElement;
+  /** Moveable拖拽类实例 */
   public moveable?: Moveable;
-  public horizontalGuidelines: number[] = [];
-  public verticalGuidelines: number[] = [];
+  /** 水平参考线 */
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  /** 垂直参考线 */
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
+  /** 对齐元素集合 */
+  public elementGuidelines: HTMLElement[] = [];
+  /** 布局方式：流式布局、绝对定位、固定定位 */
+  public mode: Mode = Mode.ABSOLUTE;
 
   private moveableOptions: MoveableOptions = {};
+  /** 拖动状态 */
   private dragStatus: ActionStatus = ActionStatus.END;
+  /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
-  private mode: Mode = Mode.ABSOLUTE;
   private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
@@ -57,6 +72,9 @@ export default class StageDragResize extends EventEmitter {
 
     this.core = config.core;
     this.container = config.container;
+
+    this.dragEl = globalThis.document.createElement('div');
+    this.container.append(this.dragEl);
   }
 
   /**
@@ -65,29 +83,23 @@ export default class StageDragResize extends EventEmitter {
    * @param el 选中组件的Dom节点元素
    * @param event 鼠标事件
    */
-  public async select(el: HTMLElement, event?: MouseEvent): Promise<void> {
+  public select(el: HTMLElement, event?: MouseEvent): void {
+    const oldTarget = this.target;
     this.target = el;
-    // 如果有滚动条会导致resize时获取到width，height不准确
-    if (/(auto|scroll)/.test(this.target.style.overflow)) {
-      this.target.style.overflow = 'hidden';
-    }
-    this.mode = getMode(el);
-    this.destroyDragEl();
-    this.destroyGhostEl();
 
-    this.dragEl = this.generateDragEl(el);
-
-    this.moveableOptions = await this.getOptions({
-      target: this.dragEl || this.target,
-    });
-
-    this.moveableHelper = MoveableHelper.create({
-      useBeforeRender: true,
-      useRender: false,
-      createAuto: true,
-    });
+    // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
+    if (!this.moveable || this.target !== oldTarget) {
+      this.init(el);
+      this.moveableHelper = MoveableHelper.create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true,
+      });
 
-    this.initMoveable();
+      this.initMoveable();
+    } else {
+      this.updateMoveable();
+    }
 
     if (event) {
       this.moveable?.dragStart(event);
@@ -97,11 +109,15 @@ export default class StageDragResize extends EventEmitter {
   /**
    * 初始化选中框并渲染出来
    */
-  public async refresh() {
+  public updateMoveable(el = this.target): void {
     if (!this.moveable) throw new Error('未初始化moveable');
+    if (!el) throw new Error('为选中任何节点');
+
+    this.target = el;
 
-    const options = await this.getOptions();
-    Object.entries(options).forEach(([key, value]) => {
+    this.init(el);
+
+    Object.entries(this.moveableOptions).forEach(([key, value]) => {
       (this.moveable as any)[key] = value;
     });
     this.moveable.updateTarget();
@@ -110,17 +126,21 @@ export default class StageDragResize extends EventEmitter {
   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;
     }
 
-    this.refresh();
+    this.updateMoveable();
   }
 
   public clearGuides() {
-    this.verticalGuidelines = [];
     this.horizontalGuidelines = [];
-    this.refresh();
+    this.verticalGuidelines = [];
+    this.moveableOptions.horizontalGuidelines = [];
+    this.moveableOptions.verticalGuidelines = [];
+    this.updateMoveable();
   }
 
   /**
@@ -134,6 +154,45 @@ export default class StageDragResize extends EventEmitter {
     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 setElementGuidelines(nodes: HTMLElement[]) {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+
+    if (this.mode === Mode.ABSOLUTE) {
+      const frame = document.createDocumentFragment();
+
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === this.target) continue;
+        const { left, top } = getOffset(node as HTMLElement);
+        const elementGuideline = document.createElement('div');
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
+      }
+
+      this.container.append(frame);
+    }
+  }
+
   private initMoveable() {
     this.moveable?.destroy();
 
@@ -143,49 +202,47 @@ export default class StageDragResize extends EventEmitter {
 
     this.bindResizeEvent();
     this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
   }
 
   private bindResizeEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
     const frame = {
-      translate: [0, 0],
+      left: 0,
+      top: 0,
     };
 
     this.moveable
       .on('resizeStart', (e) => {
-        if (e.dragStart) {
-          const rect = this.moveable!.getRect();
-          const offset = getAbsolutePosition(e.target as HTMLElement, rect);
-          e.dragStart.set([offset.left, offset.top]);
-        }
+        if (!this.target) return;
+
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onResizeStart(e);
+
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
       })
-      .on('resize', ({ width, height, drag }) => {
+      .on('resize', (e) => {
+        const { width, height, drag } = e;
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        frame.translate = beforeTranslate;
         this.dragStatus = ActionStatus.ING;
 
-        this.target.style.width = `${width}px`;
-        this.target.style.height = `${height}px`;
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
+        this.moveableHelper?.onResize(e);
 
         // 流式布局
         if (this.mode === Mode.SORTABLE) {
-          this.dragEl.style.top = `${beforeTranslate[1]}px`;
-          this.target.style.top = `0px`;
-          return;
+          this.target.style.top = '0px';
+        } else {
+          this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
+          this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
 
-        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`;
+        this.target.style.width = `${width}px`;
+        this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
         this.dragStatus = ActionStatus.END;
@@ -196,7 +253,7 @@ export default class StageDragResize extends EventEmitter {
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
-    let offset = {
+    const frame = {
       left: 0,
       top: 0,
     };
@@ -209,29 +266,28 @@ export default class StageDragResize extends EventEmitter {
 
         this.moveableHelper?.onDragStart(e);
 
-        offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
-
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
+
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
       })
       .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
 
-        const { left, top } = e;
+        this.dragStatus = ActionStatus.ING;
 
         // 流式布局
         if (this.ghostEl) {
-          this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${top + offset.top}px`;
+          this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
           return;
         }
 
         this.moveableHelper?.onDrag(e);
 
-        this.target.style.left = `${left + offset.left}px`;
-        this.target.style.top = `${top + offset.top}px`;
+        this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
+        this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@@ -250,19 +306,58 @@ export default class StageDragResize extends EventEmitter {
       });
   }
 
-  private async getSnapElements(el: HTMLElement): Promise<HTMLElement[]> {
-    const { renderer } = this.core;
-    const getSnapElements =
-      (await renderer.getRuntime())?.getSnapElements ||
-      (() => {
-        const doc = renderer.contentWindow?.document;
-        return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
+  private bindRotateEvent(): void {
+    if (!this.moveable) throw new Error('moveable 为初始化');
+
+    this.moveable
+      .on('rotateStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onRotateStart(e);
+      })
+      .on('rotate', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onRotate(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('rotateEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
+      });
+  }
+
+  private bindScaleEvent(): void {
+    if (!this.moveable) throw new Error('moveable 为初始化');
+
+    this.moveable
+      .on('scaleStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onScaleStart(e);
+      })
+      .on('scale', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onScale(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('scaleEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
       });
-    return (
-      getSnapElements(el)
-        // 排除掉当前组件本身
-        .filter((element) => element !== this.target && !this.target?.contains(element))
-    );
   }
 
   private sort(): void {
@@ -285,14 +380,15 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private update(isResize = false): void {
-    const rect = this.moveable!.getRect();
+    if (!this.target) return;
+
     const offset =
-      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target as HTMLElement, rect);
+      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
 
     const left = this.calcValueByFontsize(offset.left);
     const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(rect.width);
-    const height = this.calcValueByFontsize(rect.height);
+    const width = this.calcValueByFontsize(this.target.clientWidth);
+    const height = this.calcValueByFontsize(this.target.clientHeight);
 
     this.emit('update', {
       el: this.target,
@@ -307,8 +403,8 @@ 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.style.zIndex = '5';
+    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+    ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
     ghostEl.style.left = `${left}px`;
@@ -322,34 +418,36 @@ export default class StageDragResize extends EventEmitter {
     this.ghostEl = undefined;
   }
 
-  private generateDragEl(el: HTMLElement): HTMLElement {
-    if (this.dragEl) {
-      this.destroyDragEl();
-    }
-
-    const { width, height } = el.getBoundingClientRect();
+  private updateDragEl(el: HTMLElement) {
     const offset = getOffset(el);
-    const dragEl = globalThis.document.createElement('div');
-    dragEl.style.cssText = `
+    const { transform } = getComputedStyle(el);
+
+    this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
-    this.container.append(dragEl);
-    return dragEl;
+
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
   }
 
   private destroyDragEl(): void {
     this.dragEl?.remove();
-    this.dragEl = undefined;
   }
 
-  private async getOptions(options: MoveableOptions = {}): Promise<MoveableOptions> {
+  private getOptions(options: MoveableOptions = {}): MoveableOptions {
     if (!this.target) return {};
 
     const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
 
     let { moveableOptions = {} } = this.core.config;
 
@@ -357,15 +455,25 @@ export default class StageDragResize extends EventEmitter {
       moveableOptions = moveableOptions(this.core);
     }
 
+    const elementGuidelines: any = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+
+    this.setElementGuidelines(elementGuidelines);
+
+    if (moveableOptions.elementGuidelines) {
+      delete moveableOptions.elementGuidelines;
+    }
+
     return {
-      origin: true,
+      origin: false,
       rootContainer: this.core.container,
       zoom: 1,
       dragArea: false,
       draggable: true,
       resizable: true,
-      snappable: isAbsolute,
-      snapGap: isAbsolute,
+      scalable: false,
+      rotatable: false,
+      snappable: isAbsolute || isFixed,
+      snapGap: isAbsolute || isFixed,
       snapThreshold: 5,
       snapDigit: 0,
       throttleDrag: 0,
@@ -378,8 +486,16 @@ export default class StageDragResize extends EventEmitter {
         center: isAbsolute,
         middle: isAbsolute,
       },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+      },
+      isDisplayInnerSnapDigit: true,
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
+      elementGuidelines: this.elementGuidelines,
 
       bounds: {
         top: 0,

package/src/StageHighlight.ts

@@ -21,19 +21,28 @@ import { EventEmitter } from 'events';
 
 import Moveable from 'moveable';
 
+import { HIGHLIGHT_EL_ID_PREFIX } from './const';
 import StageCore from './StageCore';
+import TargetCalibrate from './TargetCalibrate';
 import type { StageHighlightConfig } from './types';
 export default class StageHighlight extends EventEmitter {
   public core: StageCore;
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
+  public calibrationTarget: TargetCalibrate;
 
   constructor(config: StageHighlightConfig) {
     super();
 
     this.core = config.core;
     this.container = config.container;
+    this.calibrationTarget = new TargetCalibrate({
+      parent: this.core.mask.content,
+      mask: this.core.mask,
+      dr: this.core.dr,
+      core: this.core,
+    });
   }
 
   /**
@@ -44,8 +53,12 @@ export default class StageHighlight extends EventEmitter {
     if (!el || el === this.target) return;
     this.target = el;
     this.moveable?.destroy();
+
     this.moveable = new Moveable(this.container, {
-      target: this.target,
+      target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
+      origin: false,
+      rootContainer: this.core.container,
+      zoom: 1,
     });
   }
 
@@ -54,6 +67,7 @@ export default class StageHighlight extends EventEmitter {
    */
   public clearHighlight(): void {
     if (!this.moveable) return;
+    this.target = undefined;
     this.moveable.target = null;
     this.moveable.updateTarget();
   }
@@ -63,5 +77,6 @@ export default class StageHighlight extends EventEmitter {
    */
   public destroy(): void {
     this.moveable?.destroy();
+    this.calibrationTarget.destroy();
   }
 }