@tmagic/stage 1.1.0-beta.7 → 1.1.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.7",
+  "version": "1.1.0",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.1.0-beta.7",
-    "@tmagic/schema": "1.1.0-beta.7",
-    "@tmagic/utils": "1.1.0-beta.7",
+    "@tmagic/core": "1.1.0",
+    "@tmagic/schema": "1.1.0",
+    "@tmagic/utils": "1.1.0",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",

package/src/StageCore.ts

@@ -21,7 +21,7 @@ import { EventEmitter } from 'events';
 import type { Id } from '@tmagic/schema';
 import { addClassName } from '@tmagic/utils';
 
-import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
+import { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
@@ -29,12 +29,14 @@ import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import {
   CanSelect,
+  ContainerHighlightType,
   GuidesEventData,
   IsContainer,
   RemoveData,
   Runtime,
   SortEventData,
   StageCoreConfig,
+  StageDragStatus,
   UpdateData,
   UpdateEventData,
 } from './types';
@@ -56,6 +58,7 @@ export default class StageCore extends EventEmitter {
   public zoom = DEFAULT_ZOOM;
   public containerHighlightClassName: string;
   public containerHighlightDuration: number;
+  public containerHighlightType?: ContainerHighlightType;
   public isContainer: IsContainer;
 
   private canSelect: CanSelect;
@@ -68,8 +71,9 @@ export default class StageCore extends EventEmitter {
     this.setZoom(config.zoom);
     this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
     this.isContainer = config.isContainer;
-    this.containerHighlightClassName = config.containerHighlightClassName;
-    this.containerHighlightDuration = config.containerHighlightDuration;
+    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
+    this.containerHighlightDuration = config.containerHighlightDuration || 800;
+    this.containerHighlightType = config.containerHighlightType;
 
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
@@ -101,6 +105,8 @@ export default class StageCore extends EventEmitter {
       .on('highlight', async (event: MouseEvent) => {
         const el = await this.getElementFromPoint(event);
         if (!el) return;
+        // 如果多选组件处于拖拽状态时不进行组件高亮
+        if (this.multiDr.dragStatus === StageDragStatus.ING) return;
         await this.highlight(el);
         if (this.highlightedDom === this.selectedDom) {
           this.highlightLayer.clearHighlight();
@@ -139,9 +145,15 @@ export default class StageCore extends EventEmitter {
         setTimeout(() => this.emit('sort', data));
       });
 
-    this.multiDr.on('update', (data: UpdateEventData) => {
-      setTimeout(() => this.emit('update', data));
-    });
+    this.multiDr
+      .on('update', (data: UpdateEventData) => {
+        setTimeout(() => this.emit('update', data));
+      })
+      .on('select', async (id: Id) => {
+        const el = await this.getTargetElement(id);
+        this.select(el); // 选中
+        setTimeout(() => this.emit('select', el)); // set node
+      });
   }
 
   public getElementsFromPoint(event: MouseEvent) {
@@ -337,7 +349,7 @@ export default class StageCore extends EventEmitter {
     }
   }
 
-  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []) {
+  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []): NodeJS.Timeout {
     return globalThis.setTimeout(() => {
       this.addContainerHighlightClassName(event, exclude);
     }, this.containerHighlightDuration);

package/src/StageDragResize.ts

@@ -19,6 +19,7 @@
 /* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
+import KeyController from 'keycon';
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
@@ -29,18 +30,9 @@ import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from
 import StageCore from './StageCore';
 import StageMask from './StageMask';
 import type { StageDragResizeConfig } from './types';
+import { ContainerHighlightType, StageDragStatus } from './types';
 import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
-/** 拖动状态 */
-enum ActionStatus {
-  /** 开始拖动 */
-  START = 'start',
-  /** 拖动中 */
-  ING = 'ing',
-  /** 拖动结束 */
-  END = 'end',
-}
-
 /**
  * 选中框
  */
@@ -66,10 +58,11 @@ export default class StageDragResize extends EventEmitter {
 
   private moveableOptions: MoveableOptions = {};
   /** 拖动状态 */
-  private dragStatus: ActionStatus = ActionStatus.END;
+  private dragStatus: StageDragStatus = StageDragStatus.END;
   /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
+  private isContainerHighlight: Boolean = false;
 
   constructor(config: StageDragResizeConfig) {
     super();
@@ -77,6 +70,20 @@ export default class StageDragResize extends EventEmitter {
     this.core = config.core;
     this.container = config.container;
     this.mask = config.mask;
+
+    KeyController.global.keydown('alt', (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup('alt', (e) => {
+      e.inputEvent.preventDefault();
+
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
 
   /**
@@ -165,7 +172,7 @@ export default class StageDragResize extends EventEmitter {
     this.moveable?.destroy();
     this.destroyGhostEl();
     this.destroyDragEl();
-    this.dragStatus = ActionStatus.END;
+    this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
 
@@ -243,7 +250,7 @@ export default class StageDragResize extends EventEmitter {
       .on('resizeStart', (e) => {
         if (!this.target) return;
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onResizeStart(e);
 
         frame.top = this.target.offsetTop;
@@ -254,14 +261,15 @@ export default class StageDragResize extends EventEmitter {
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        this.dragStatus = ActionStatus.ING;
-
-        this.moveableHelper?.onResize(e);
+        this.dragStatus = StageDragStatus.ING;
 
         // 流式布局
         if (this.mode === Mode.SORTABLE) {
           this.target.style.top = '0px';
+          this.dragEl.style.width = `${width}px`;
+          this.dragEl.style.height = `${height}px`;
         } else {
+          this.moveableHelper?.onResize(e);
           this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
           this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
@@ -270,7 +278,7 @@ export default class StageDragResize extends EventEmitter {
         this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.update(true);
       });
   }
@@ -292,7 +300,7 @@ export default class StageDragResize extends EventEmitter {
       .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
 
         this.moveableHelper?.onDragStart(e);
 
@@ -311,9 +319,11 @@ export default class StageDragResize extends EventEmitter {
           timeout = undefined;
         }
 
-        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
 
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
 
         // 流式布局
         if (this.ghostEl) {
@@ -334,12 +344,12 @@ export default class StageDragResize extends EventEmitter {
 
         let parentEl: HTMLElement | null = null;
 
-        if (doc) {
+        if (doc && this.canContainerHighlight()) {
           parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
         }
 
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
-        if (this.dragStatus === ActionStatus.ING) {
+        if (this.dragStatus === StageDragStatus.ING) {
           if (parentEl) {
             this.update(false, parentEl);
           } else {
@@ -353,7 +363,7 @@ export default class StageDragResize extends EventEmitter {
           }
         }
 
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.destroyGhostEl();
       });
   }
@@ -363,18 +373,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('rotateStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onRotateStart(e);
       })
       .on('rotate', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.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;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -390,18 +400,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('scaleStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onScaleStart(e);
       })
       .on('scale', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.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;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -459,9 +469,13 @@ export default class StageDragResize extends EventEmitter {
     }
 
     this.emit('update', {
-      el: this.target,
+      data: [
+        {
+          el: this.target,
+          style: isResize ? { left, top, width, height } : { left, top },
+        },
+      ],
       parentEl,
-      style: isResize ? { left, top, width, height } : { left, top },
     });
   }
 
@@ -505,6 +519,7 @@ export default class StageDragResize extends EventEmitter {
 
     const isAbsolute = this.mode === Mode.ABSOLUTE;
     const isFixed = this.mode === Mode.FIXED;
+    const isSortable = this.mode === Mode.SORTABLE;
 
     let { moveableOptions = {} } = this.core.config;
 
@@ -559,11 +574,18 @@ export default class StageDragResize extends EventEmitter {
         // 设置0的话无法移动到left为0，所以只能设置为-1
         left: -1,
         right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
+        bottom: isSortable ? undefined : this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
       ...options,
       ...moveableOptions,
     };
   }
+
+  private canContainerHighlight() {
+    return (
+      this.core.containerHighlightType === ContainerHighlightType.DEFAULT ||
+      (this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight)
+    );
+  }
 }

package/src/StageMultiDragResize.ts

@@ -18,15 +18,16 @@
 
 import { EventEmitter } from 'events';
 
-import type { MoveableOptions } from 'moveable';
+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 } from './types';
+import { StageDragResizeConfig, StageDragStatus } from './types';
 import { calcValueByFontsize, getMode, getTargetElStyle } from './util';
+
 export default class StageMultiDragResize extends EventEmitter {
   public core: StageCore;
   public mask: StageMask;
@@ -38,6 +39,8 @@ export default class StageMultiDragResize extends EventEmitter {
   public dragElList: HTMLDivElement[] = [];
   /** Moveable多选拖拽类实例 */
   public moveableForMulti?: Moveable;
+  /** 拖动状态 */
+  public dragStatus: StageDragStatus = StageDragStatus.END;
   private multiMoveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
@@ -82,23 +85,68 @@ export default class StageMultiDragResize extends EventEmitter {
       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('dragGroupStart', (params) => {
+      .on('resizeGroupStart', (params) => {
         const { events } = params;
-        this.multiMoveableHelper?.onDragGroupStart(params);
-        // 记录拖动前快照
+        this.multiMoveableHelper?.onResizeGroupStart(params);
+        setFrames(events);
+        this.dragStatus = StageDragStatus.START;
+      })
+      .on('resizeGroup', (params) => {
+        const { events } = params;
+        // 拖动过程更新
         events.forEach((ev) => {
-          // 实际目标元素
-          const matchEventTarget = this.targetList.find(
+          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 (!matchEventTarget) return;
-          frames.push({
-            left: matchEventTarget.offsetLeft,
-            top: matchEventTarget.offsetTop,
-            id: matchEventTarget.id,
-          });
+          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);
+        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);
+        this.dragStatus = StageDragStatus.START;
       })
       .on('dragGroup', (params) => {
         const { events } = params;
@@ -121,9 +169,18 @@ export default class StageMultiDragResize extends EventEmitter {
           }
         });
         this.multiMoveableHelper?.onDragGroup(params);
+        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, ''));
+        }
       });
   }
 
@@ -192,16 +249,19 @@ export default class StageMultiDragResize extends EventEmitter {
     const doc = contentWindow?.document;
     if (!doc) return;
 
-    this.targetList.forEach((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);
-      this.emit('update', {
-        el: targetItem,
-        style: isResize ? { left, top, width, height } : { left, top },
-      });
+    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,
     });
   }
 
@@ -228,6 +288,15 @@ export default class StageMultiDragResize extends EventEmitter {
       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,
     };

package/src/style.css

@@ -9,3 +9,7 @@
   opacity: .1;
   pointer-events: none;
 }
+
+.magic-ui-container.magic-layout-relative {
+  min-height: 50px;
+}

package/src/types.ts

@@ -29,6 +29,11 @@ import StageMask from './StageMask';
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 
+export enum ContainerHighlightType {
+  DEFAULT = 'default',
+  ALT = 'alt',
+}
+
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
   snapElementQuerySelector?: string;
@@ -36,8 +41,9 @@ export type StageCoreConfig = {
   zoom?: number;
   canSelect?: CanSelect;
   isContainer: IsContainer;
-  containerHighlightClassName: string;
-  containerHighlightDuration: number;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
   moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
@@ -61,6 +67,16 @@ export interface StageDragResizeConfig {
   mask: StageMask;
 }
 
+/** 拖动状态 */
+export enum StageDragStatus {
+  /** 开始拖动 */
+  START = 'start',
+  /** 拖动中 */
+  ING = 'ing',
+  /** 拖动结束 */
+  END = 'end',
+}
+
 export type Rect = {
   width: number;
   height: number;
@@ -77,19 +93,21 @@ export interface GuidesEventData {
 }
 
 export interface UpdateEventData {
-  el: HTMLElement;
-  parentEl: HTMLElement | null;
-  ghostEl: HTMLElement;
-  style: {
-    width?: number;
-    height?: number;
-    left?: number;
-    top?: number;
-    transform?: {
-      rotate?: string;
-      scale?: string;
+  data: {
+    el: HTMLElement;
+    style: {
+      width?: number;
+      height?: number;
+      left?: number;
+      top?: number;
+      transform?: {
+        rotate?: string;
+        scale?: string;
+      };
     };
-  };
+    ghostEl?: HTMLElement;
+  }[];
+  parentEl: HTMLElement | null;
 }
 
 export interface SortEventData {
@@ -101,11 +119,13 @@ export interface SortEventData {
 export interface UpdateData {
   config: MNode;
   parent?: MContainer;
+  parentId?: Id;
   root: MApp;
 }
 
 export interface RemoveData {
   id: Id;
+  parentId: Id;
   root: MApp;
 }
 

package/types/StageCore.d.ts

@@ -7,7 +7,7 @@ import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
 import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
-import { IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
+import { ContainerHighlightType, IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
 export default class StageCore extends EventEmitter {
     container?: HTMLDivElement;
     selectedDom: HTMLElement | undefined;
@@ -22,6 +22,7 @@ export default class StageCore extends EventEmitter {
     zoom: number;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType?: ContainerHighlightType;
     isContainer: IsContainer;
     private canSelect;
     constructor(config: StageCoreConfig);

package/types/StageDragResize.d.ts

@@ -33,6 +33,7 @@ export default class StageDragResize extends EventEmitter {
     /** 流式布局下，目标节点的镜像节点 */
     private ghostEl;
     private moveableHelper?;
+    private isContainerHighlight;
     constructor(config: StageDragResizeConfig);
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
@@ -67,4 +68,5 @@ export default class StageDragResize extends EventEmitter {
     private setGhostElChildrenId;
     private destroyGhostEl;
     private getOptions;
+    private canContainerHighlight;
 }

package/types/StageMultiDragResize.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter } from 'events';
 import Moveable from 'moveable';
 import StageCore from './StageCore';
 import StageMask from './StageMask';
-import { StageDragResizeConfig } from './types';
+import { StageDragResizeConfig, StageDragStatus } from './types';
 export default class StageMultiDragResize extends EventEmitter {
     core: StageCore;
     mask: StageMask;
@@ -15,6 +15,8 @@ export default class StageMultiDragResize extends EventEmitter {
     dragElList: HTMLDivElement[];
     /** Moveable多选拖拽类实例 */
     moveableForMulti?: Moveable;
+    /** 拖动状态 */
+    dragStatus: StageDragStatus;
     private multiMoveableHelper?;
     constructor(config: StageDragResizeConfig);
     /**