@tmagic/stage 1.3.16 → 1.4.0-beta.2

package/src/ActionManager.ts

@@ -25,15 +25,25 @@ import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
 import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
 
-import { CONTAINER_HIGHLIGHT_CLASS_NAME, GHOST_EL_ID_PREFIX, GuidesType, MouseButton, PAGE_CLASS } from './const';
+import {
+  AbleActionEventType,
+  CONTAINER_HIGHLIGHT_CLASS_NAME,
+  ContainerHighlightType,
+  GHOST_EL_ID_PREFIX,
+  GuidesType,
+  MouseButton,
+  PAGE_CLASS,
+  SelectStatus,
+  StageDragStatus,
+} from './const';
 import DragResizeHelper from './DragResizeHelper';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMultiDragResize from './StageMultiDragResize';
-import {
+import type {
   ActionManagerConfig,
+  ActionManagerEvents,
   CanSelect,
-  ContainerHighlightType,
   CustomizeMoveableOptions,
   CustomizeMoveableOptionsCallbackConfig,
   GetElementsFromPoint,
@@ -42,8 +52,7 @@ import {
   IsContainer,
   Point,
   RemoveEventData,
-  SelectStatus,
-  StageDragStatus,
+  SortEventData,
   UpdateEventData,
 } from './types';
 import { isMoveableButton } from './util';
@@ -62,7 +71,7 @@ export default class ActionManager extends EventEmitter {
   /** 单选、多选、高亮的容器（蒙层的content） */
   private container: HTMLElement;
   /** 当前选中的节点 */
-  private selectedEl: HTMLElement | undefined;
+  private selectedEl: HTMLElement | null = null;
   /** 多选选中的节点组 */
   private selectedElList: HTMLElement[] = [];
   /** 当前高亮的节点 */
@@ -96,7 +105,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     this.emit('mousemove', event);
-    this.highlight(el);
+    this.highlight(el.id);
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -181,11 +190,11 @@ export default class ActionManager extends EventEmitter {
     return el.id === this.selectedEl?.id;
   }
 
-  public setSelectedEl(el?: HTMLElement): void {
+  public setSelectedEl(el: HTMLElement | null): void {
     this.selectedEl = el;
   }
 
-  public getSelectedEl(): HTMLElement | undefined {
+  public getSelectedEl(): HTMLElement | null {
     return this.selectedEl;
   }
 
@@ -207,7 +216,7 @@ export default class ActionManager extends EventEmitter {
    * @param event 鼠标事件
    * @returns 鼠标下方第一个可选中元素
    */
-  public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined> {
+  public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | null> {
     const els = this.getElementsFromPoint(event as Point);
 
     this.emit('get-elements-from-point', els);
@@ -220,6 +229,7 @@ export default class ActionManager extends EventEmitter {
         return el;
       }
     }
+    return null;
   }
 
   /**
@@ -257,14 +267,20 @@ export default class ActionManager extends EventEmitter {
     return this.multiDr?.canSelect(el, selectedEl) || false;
   }
 
-  public select(el: HTMLElement, event: MouseEvent | undefined): void {
+  public select(el: HTMLElement | null, event?: MouseEvent): void {
     this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
 
-  public multiSelect(idOrElList: HTMLElement[] | Id[]): void {
-    this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
+  public multiSelect(ids: Id[]): void {
+    this.selectedElList = [];
+    ids.forEach((id) => {
+      const el = this.getTargetElement(id);
+      if (el) {
+        this.selectedElList.push(el);
+      }
+    });
     this.clearSelectStatus(SelectStatus.SELECT);
     this.multiDr?.multiSelect(this.selectedElList);
   }
@@ -277,10 +293,10 @@ export default class ActionManager extends EventEmitter {
     this.highlightedEl = el;
   }
 
-  public highlight(idOrEl: Id | HTMLElement): void {
+  public highlight(id: Id): void {
     let el;
     try {
-      el = this.getTargetElement(idOrEl);
+      el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
       return;
@@ -366,6 +382,20 @@ export default class ActionManager extends EventEmitter {
     this.highlightLayer.destroy();
   }
 
+  public on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
+    eventName: Name,
+    ...args: Param
+  ) {
+    return super.emit(eventName, ...args);
+  }
+
   private createDr(config: ActionManagerConfig) {
     const createDrHelper = () =>
       new DragResizeHelper({
@@ -388,14 +418,14 @@ export default class ActionManager extends EventEmitter {
       // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
       setTimeout(() => this.emit('update', data));
     })
-      .on('sort', (data: UpdateEventData) => {
+      .on('sort', (data: SortEventData) => {
         // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
         setTimeout(() => this.emit('sort', data));
       })
-      .on('select-parent', () => {
+      .on(AbleActionEventType.SELECT_PARENT, () => {
         this.emit('select-parent');
       })
-      .on('remove', () => {
+      .on(AbleActionEventType.REMOVE, () => {
         const drTarget = this.dr.getTarget();
         if (!drTarget) return;
         const data: RemoveEventData = {
@@ -430,11 +460,10 @@ export default class ActionManager extends EventEmitter {
       ?.on('update', (data: UpdateEventData) => {
         this.emit('multi-update', data);
       })
-      .on('change-to-select', async (id: Id, e: MouseEvent) => {
+      .on('change-to-select', (id: Id, e: MouseEvent) => {
         // 如果还在多选状态，不触发切换到单选
-        if (this.isMultiSelectStatus) return false;
-        const el = this.getTargetElement(id);
-        this.emit('change-to-select', el, e);
+        if (this.isMultiSelectStatus) return;
+        this.emit('change-to-select', id, e);
       });
 
     return multiDr;
@@ -474,13 +503,16 @@ export default class ActionManager extends EventEmitter {
     // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl as HTMLElement);
-      this.setSelectedEl(undefined);
+      this.setSelectedEl(null);
     }
+
     // 判断元素是否已在多选列表
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
     if (existIndex !== -1) {
       // 再次点击取消选中
-      this.selectedElList.splice(existIndex, 1);
+      if (this.selectedElList.length > 1) {
+        this.selectedElList.splice(existIndex, 1);
+      }
     } else {
       this.selectedElList.push(el);
     }
@@ -580,6 +612,7 @@ export default class ActionManager extends EventEmitter {
       if (!el) return;
       this.emit('before-select', el, event);
     }
+
     getDocument().addEventListener('mouseup', this.mouseUpHandler);
   };
 

package/src/DragResizeHelper.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import {
+import type {
   OnDrag,
   OnDragGroup,
   OnDragGroupStart,
@@ -34,7 +34,7 @@ import MoveableHelper from 'moveable-helper';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
 import TargetShadow from './TargetShadow';
-import { DragResizeHelperConfig, Rect, TargetElement } from './types';
+import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { calcValueByFontsize, getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
 /**
@@ -230,6 +230,9 @@ export default class DragResizeHelper {
    */
   public onResizeGroup(e: OnResizeGroup): void {
     const { events } = e;
+
+    this.moveableHelper.onResizeGroup(e);
+
     // 拖动过程更新
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
@@ -255,26 +258,28 @@ export default class DragResizeHelper {
       targeEl.style.width = `${width}px`;
       targeEl.style.height = `${height}px`;
     });
-    this.moveableHelper.onResizeGroup(e);
   }
 
   public onDragGroupStart(e: OnDragGroupStart): void {
-    const { events } = e;
     this.moveableHelper.onDragGroupStart(e);
+
+    const { events } = e;
     // 记录拖动前快照
     this.setFramesSnapShot(events);
   }
 
   public onDragGroup(e: OnDragGroup): void {
+    this.moveableHelper.onDragGroup(e);
+
     const { events } = e;
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
@@ -286,7 +291,6 @@ export default class DragResizeHelper {
         targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
       }
     });
-    this.moveableHelper.onDragGroup(e);
   }
 
   public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect {
@@ -342,7 +346,7 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
       );
       if (!matchEventTarget) return;
       this.framesSnapShot.push({

package/src/MoveableActionsAble.ts

@@ -20,7 +20,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}

package/src/StageCore.ts

@@ -28,12 +28,14 @@ import StageMask from './StageMask';
 import StageRender from './StageRender';
 import type {
   ActionManagerConfig,
+  CoreEvents,
   CustomizeRender,
   GuidesEventData,
   Point,
   RemoveData,
   RemoveEventData,
   Runtime,
+  SortEventData,
   StageCoreConfig,
   UpdateData,
   UpdateEventData,
@@ -81,41 +83,41 @@ export default class StageCore extends EventEmitter {
 
   /**
    * 单选选中元素
-   * @param idOrEl 选中的id或者元素
+   * @param id 选中的id
    */
-  public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
-    const el = this.renderer.getTargetElement(idOrEl);
+  public async select(id: Id, event?: MouseEvent): Promise<void> {
+    const el = this.renderer.getTargetElement(id);
     if (el === this.actionManager.getSelectedEl()) return;
 
-    await this.renderer.select([el]);
+    await this.renderer.select([id]);
 
-    this.mask.setLayout(el);
+    el && this.mask.setLayout(el);
 
     this.actionManager.select(el, event);
 
-    if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+    if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
       this.mask.observerIntersection(el);
     }
   }
 
   /**
    * 多选选中多个元素
-   * @param idOrElList 选中元素的id或元素列表
+   * @param ids 选中元素的id列表
    */
-  public async multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void> {
-    const els = idOrElList.map((idOrEl) => this.renderer.getTargetElement(idOrEl));
+  public async multiSelect(ids: Id[]): Promise<void> {
+    const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
     if (els.length === 0) return;
 
     const lastEl = els[els.length - 1];
     // 是否减少了组件选择
     const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-    await this.renderer.select(els);
+    await this.renderer.select(ids);
 
-    this.mask.setLayout(lastEl);
+    lastEl && this.mask.setLayout(lastEl);
 
-    this.actionManager.multiSelect(idOrElList);
+    this.actionManager.multiSelect(ids);
 
-    if ((this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
+    if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
       this.mask.observerIntersection(lastEl);
     }
   }
@@ -124,8 +126,8 @@ export default class StageCore extends EventEmitter {
    * 高亮选中元素
    * @param el 要高亮的元素
    */
-  public highlight(idOrEl: Id | HTMLElement): void {
-    this.actionManager.highlight(idOrEl);
+  public highlight(id: Id): void {
+    this.actionManager.highlight(id);
   }
 
   public clearHighlight(): void {
@@ -248,6 +250,17 @@ export default class StageCore extends EventEmitter {
     this.container = undefined;
   }
 
+  public on<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   /**
    * 监听页面大小变化
    */
@@ -280,7 +293,7 @@ export default class StageCore extends EventEmitter {
       updateDragEl: config.updateDragEl,
       getRootContainer: () => this.container,
       getRenderDocument: () => this.renderer.getDocument(),
-      getTargetElement: (idOrEl: Id | HTMLElement) => this.renderer.getTargetElement(idOrEl),
+      getTargetElement: (id: Id) => this.renderer.getTargetElement(id),
       getElementsFromPoint: (point: Point) => this.renderer.getElementsFromPoint(point),
     };
 
@@ -322,14 +335,14 @@ export default class StageCore extends EventEmitter {
    */
   private initActionManagerEvent(): void {
     this.actionManager
-      .on('before-select', (idOrEl: Id | HTMLElement, event?: MouseEvent) => {
-        this.select(idOrEl, event);
+      .on('before-select', (el: HTMLElement, event?: MouseEvent) => {
+        this.select(el.id, event);
       })
       .on('select', (selectedEl: HTMLElement, event: MouseEvent) => {
         this.emit('select', selectedEl, event);
       })
-      .on('before-multi-select', (idOrElList: HTMLElement[] | Id[]) => {
-        this.multiSelect(idOrElList);
+      .on('before-multi-select', (els: HTMLElement[]) => {
+        this.multiSelect(els.map((el) => el.id));
       })
       .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
         this.emit('multi-select', selectedElList, event);
@@ -347,7 +360,7 @@ export default class StageCore extends EventEmitter {
       .on('update', (data: UpdateEventData) => {
         this.emit('update', data);
       })
-      .on('sort', (data: UpdateEventData) => {
+      .on('sort', (data: SortEventData) => {
         this.emit('sort', data);
       })
       .on('select-parent', () => {
@@ -364,10 +377,13 @@ export default class StageCore extends EventEmitter {
   private initMulDrEvent(): void {
     this.actionManager
       // 多选切换到单选
-      .on('change-to-select', (el: HTMLElement, e: MouseEvent) => {
-        this.select(el);
+      .on('change-to-select', (id: Id, e: MouseEvent) => {
+        this.select(id);
         // 先保证画布内完成渲染，再通知外部更新
-        setTimeout(() => this.emit('select', el, e));
+        setTimeout(() => {
+          const el = this.renderer.getTargetElement(id);
+          el && this.emit('select', el, e);
+        });
       })
       .on('multi-update', (data: UpdateEventData) => {
         this.emit('update', data);
@@ -378,7 +394,7 @@ export default class StageCore extends EventEmitter {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   private initHighlightEvent(): void {
-    this.actionManager.on('highlight', async (highlightEl: HTMLElement) => {
+    this.actionManager.on('highlight', (highlightEl: HTMLElement) => {
       this.emit('highlight', highlightEl);
     });
   }

package/src/StageDragResize.ts

@@ -19,11 +19,16 @@
 /* eslint-disable no-param-reassign */
 import Moveable, { MoveableOptions } from 'moveable';
 
-import { Mode } from './const';
+import { Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
-import type { DelayedMarkContainer, GetRenderDocument, MarkContainerEnd, StageDragResizeConfig } from './types';
-import { StageDragStatus } from './types';
+import type {
+  DelayedMarkContainer,
+  DrEvents,
+  GetRenderDocument,
+  MarkContainerEnd,
+  StageDragResizeConfig,
+} from './types';
 import { down, getMode, up } from './util';
 
 /**
@@ -32,7 +37,7 @@ import { down, getMode, up } from './util';
  */
 export default class StageDragResize extends MoveableOptionsManager {
   /** 目标节点 */
-  private target?: HTMLElement;
+  private target: HTMLElement | null = null;
   /** Moveable拖拽类实例 */
   private moveable?: Moveable;
   /** 拖动状态 */
@@ -70,7 +75,12 @@ export default class StageDragResize extends MoveableOptionsManager {
    * @param el 选中组件的Dom节点元素
    * @param event 鼠标事件
    */
-  public select(el: HTMLElement, event?: MouseEvent): void {
+  public select(el: HTMLElement | null, event?: MouseEvent): void {
+    if (!el) {
+      this.moveable?.destroy();
+      this.moveable = undefined;
+      return;
+    }
     // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
     if (!this.moveable || el !== this.target) {
       this.initMoveable(el);
@@ -119,6 +129,17 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.removeAllListeners();
   }
 
+  public on<Name extends keyof DrEvents, Param extends DrEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof DrEvents, Param extends DrEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   private init(el: HTMLElement): MoveableOptions {
     // 如果有滚动条会导致resize时获取到width，height不准确
     if (/(auto|scroll)/.test(el.style.overflow)) {
@@ -247,16 +268,19 @@ export default class StageDragResize extends MoveableOptionsManager {
       .on('rotateEnd', (e) => {
         this.dragStatus = StageDragStatus.END;
         const frame = this.dragResizeHelper?.getFrame(e.target);
-        this.emit('update', {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame?.get('transform'),
+        if (this.target && frame) {
+          this.emit('update', {
+            data: [
+              {
+                el: this.target,
+                style: {
+                  transform: frame.get('transform'),
+                },
               },
-            },
-          ],
-        });
+            ],
+            parentEl: null,
+          });
+        }
       });
   }
 
@@ -276,16 +300,19 @@ export default class StageDragResize extends MoveableOptionsManager {
       .on('scaleEnd', (e) => {
         this.dragStatus = StageDragStatus.END;
         const frame = this.dragResizeHelper.getFrame(e.target);
-        this.emit('update', {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame?.get('transform'),
+        if (this.target && frame) {
+          this.emit('update', {
+            data: [
+              {
+                el: this.target,
+                style: {
+                  transform: frame.get('transform'),
+                },
               },
-            },
-          ],
-        });
+            ],
+            parentEl: null,
+          });
+        }
       });
   }
 

package/src/StageMask.ts

@@ -20,7 +20,7 @@ import { createDiv, getDocument, injectStyle } from '@tmagic/utils';
 
 import { Mode, ZIndex } from './const';
 import Rule from './Rule';
-import type { RuleOptions } from './types';
+import type { MaskEvents, RuleOptions } from './types';
 import { getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
@@ -178,6 +178,17 @@ export default class StageMask extends Rule {
     super.destroy();
   }
 
+  public on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   /**
    * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
    */

package/src/StageMultiDragResize.ts

@@ -18,7 +18,7 @@
 
 import Moveable from 'moveable';
 
-import { DRAG_EL_ID_PREFIX, Mode } from './const';
+import { DRAG_EL_ID_PREFIX, Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
 import {
@@ -26,7 +26,7 @@ import {
   GetRenderDocument,
   MarkContainerEnd,
   MoveableOptionsManagerConfig,
-  StageDragStatus,
+  MultiDrEvents,
   StageMultiDragResizeConfig,
 } from './types';
 import { getMode } from './util';
@@ -120,6 +120,10 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
         this.dragStatus = StageDragStatus.ING;
       })
       .on('dragGroupEnd', () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
         const parentEl = this.markContainerEnd();
         this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;
@@ -133,7 +137,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
       });
   }
 
-  public canSelect(el: HTMLElement, selectedEl: HTMLElement | undefined): boolean {
+  public canSelect(el: HTMLElement, selectedEl: HTMLElement | null): boolean {
     const currentTargetMode = getMode(el);
     let selectedElMode = '';
 
@@ -192,6 +196,17 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
     this.dragResizeHelper.destroy();
   }
 
+  public on<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   /**
    * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
    * @param isResize 是否进行大小缩放