@tmagic/stage 1.3.0-beta.0 → 1.3.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.2",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.0-beta.0",
-    "@tmagic/schema": "1.3.0-beta.0",
-    "@tmagic/utils": "1.3.0-beta.0",
+    "@tmagic/core": "1.3.0-beta.2",
+    "@tmagic/schema": "1.3.0-beta.2",
+    "@tmagic/utils": "1.3.0-beta.2",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",

package/src/ActionManager.ts

@@ -19,7 +19,7 @@ import EventEmitter from 'events';
 
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
-import type { MoveableOptions } from 'moveable';
+import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
@@ -88,6 +88,9 @@ export default class ActionManager extends EventEmitter {
       this.clearHighlight();
       return;
     }
+
+    this.emit('mousemove', event);
+
     this.highlight(el);
   }, throttleTime);
 
@@ -204,6 +207,8 @@ export default class ActionManager extends EventEmitter {
   public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined> {
     const els = this.getElementsFromPoint(event as Point);
 
+    this.emit('get-elements-from-point', els);
+
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
@@ -343,6 +348,10 @@ export default class ActionManager extends EventEmitter {
     return undefined;
   }
 
+  public getDragStatus() {
+    return this.dr.getDragStatus();
+  }
+
   public destroy(): void {
     this.container.removeEventListener('mousedown', this.mouseDownHandler);
     this.container.removeEventListener('mousemove', this.mouseMoveHandler);
@@ -484,6 +493,9 @@ export default class ActionManager extends EventEmitter {
           data: [{ el: drTarget }],
         };
         this.emit('remove', data);
+      })
+      .on('drag-start', (e: OnDragStart) => {
+        this.emit('drag-start', e);
       });
 
     this.multiDr
@@ -555,8 +567,9 @@ export default class ActionManager extends EventEmitter {
     }
   };
 
-  private mouseLeaveHandler = () => {
+  private mouseLeaveHandler = (event: MouseEvent) => {
     setTimeout(() => this.clearHighlight(), throttleTime);
+    this.emit('mouseleave', event);
   };
 
   private mouseWheelHandler = () => {

package/src/StageCore.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import type { MoveableOptions } from 'moveable';
+import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import type { Id } from '@tmagic/schema';
 
@@ -217,6 +217,10 @@ export default class StageCore extends EventEmitter {
     return this.actionManager.getMoveableOption(key);
   }
 
+  public getDragStatus() {
+    return this.actionManager.getDragStatus();
+  }
+
   /**
    * 销毁实例
    */
@@ -292,6 +296,7 @@ export default class StageCore extends EventEmitter {
     this.initDrEvent();
     this.initMulDrEvent();
     this.initHighlightEvent();
+    this.initMouseEvent();
   }
 
   /**
@@ -356,4 +361,20 @@ export default class StageCore extends EventEmitter {
       this.emit('highlight', highlightEl);
     });
   }
+
+  /**
+   * 初始化Highlight类通过ActionManager抛出来的事件监听
+   */
+  private initMouseEvent(): void {
+    this.actionManager
+      .on('mousemove', (event: MouseEvent) => {
+        this.emit('mousemove', event);
+      })
+      .on('mouseleave', (event: MouseEvent) => {
+        this.emit('mouseleave', event);
+      })
+      .on('drag-start', (e: OnDragStart) => {
+        this.emit('drag-start', e);
+      });
+  }
 }

package/src/StageDragResize.ts

@@ -105,6 +105,10 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.moveable.updateRect();
   }
 
+  public getDragStatus(): StageDragStatus {
+    return this.dragStatus;
+  }
+
   /**
    * 销毁实例
    */
@@ -187,6 +191,7 @@ export default class StageDragResize extends MoveableOptionsManager {
         this.dragStatus = StageDragStatus.START;
 
         this.dragResizeHelper.onDragStart(e);
+        this.emit('drag-start', e);
       })
       .on('drag', (e) => {
         if (!this.target || !this.dragResizeHelper.getShadowEl()) return;

package/src/index.ts

@@ -18,7 +18,7 @@
 
 import StageCore from './StageCore';
 
-export type { MoveableOptions } from 'moveable';
+export type { MoveableOptions, OnDragStart } from 'moveable';
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';

package/types/ActionManager.d.ts

@@ -4,7 +4,7 @@ import EventEmitter from 'events';
 import type { MoveableOptions } from 'moveable';
 import type { Id } from '@tmagic/schema';
 import { GuidesType } from './const';
-import { ActionManagerConfig, SelectStatus } from './types';
+import { ActionManagerConfig, SelectStatus, StageDragStatus } from './types';
 /**
  * 管理蒙层mask之上的操作：1、监听键盘鼠标事件，判断形成单选、多选、高亮操作；2、管理单选、多选、高亮三个类协同工作。
  * @extends EventEmitter
@@ -103,6 +103,7 @@ export default class ActionManager extends EventEmitter {
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+    getDragStatus(): StageDragStatus;
     destroy(): void;
     private changeCallback;
     /**

package/types/StageCore.d.ts

@@ -72,6 +72,7 @@ export default class StageCore extends EventEmitter {
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
+    getDragStatus(): import("./types").StageDragStatus;
     /**
      * 销毁实例
      */
@@ -103,4 +104,8 @@ export default class StageCore extends EventEmitter {
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     private initHighlightEvent;
+    /**
+     * 初始化Highlight类通过ActionManager抛出来的事件监听
+     */
+    private initMouseEvent;
 }

package/types/StageDragResize.d.ts

@@ -1,5 +1,6 @@
 import MoveableOptionsManager from './MoveableOptionsManager';
 import type { StageDragResizeConfig } from './types';
+import { StageDragStatus } from './types';
 /**
  * 管理单选操作，响应选中操作，初始化moveableOption参数并初始化moveable，处理moveable回调事件对组件进行更新
  * @extends MoveableOptionsManager
@@ -30,6 +31,7 @@ export default class StageDragResize extends MoveableOptionsManager {
      */
     updateMoveable(el?: HTMLElement | undefined): void;
     clearSelectStatus(): void;
+    getDragStatus(): StageDragStatus;
     /**
      * 销毁实例
      */

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import StageCore from './StageCore';
-export type { MoveableOptions } from 'moveable';
+export type { MoveableOptions, OnDragStart } from 'moveable';
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';