refactor(stage): 优化拖动体验

package-lock.json

@@ -15678,6 +15678,15 @@
 				"react-simple-compat": "^1.2.1"
 			}
 		},
+		"moveable-helper": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz",
+			"integrity": "sha512-t1FK9PO187Gn0N6GVZcrQgePjiHmuj8eUhmJjH38LvTMnVVxiHzWYRx6ARFZvSFIIW4yb6BEAv4C99Bsx84nFw==",
+			"requires": {
+				"@daybrush/utils": "^1.0.0",
+				"scenejs": "^1.4.2"
+			}
+		},
 		"ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -16420,6 +16429,14 @@
 				}
 			}
 		},
+		"order-map": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/order-map/-/order-map-0.2.2.tgz",
+			"integrity": "sha512-X//Db/lT11tdxxutWQfE+bmbTyieDJWrr/vSiwBwOf8RRw9yAgF7gqn1ihFmfX2E7l7gcPcucep3aWFjo5FpoA==",
+			"requires": {
+				"@daybrush/utils": "^1.0.0"
+			}
+		},
 		"os-browserify": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
@@ -18067,6 +18084,17 @@
 				"xmlchars": "^2.1.1"
 			}
 		},
+		"scenejs": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/scenejs/-/scenejs-1.5.0.tgz",
+			"integrity": "sha512-Xo6LjUsaVcTbC+FGMMwUH1jthAQUj6bq2i55iEBBifrBn/nzm/++dGo8tqjCzMbm6KUPOpiry38N7r9QY2mWpQ==",
+			"requires": {
+				"@daybrush/utils": "^1.3.1",
+				"@scena/event-emitter": "^1.0.3",
+				"css-styled": "^1.0.0",
+				"order-map": "^0.2.2"
+			}
+		},
 		"schema-utils": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",

packages/stage/package.json

@@ -27,7 +27,8 @@
     "@tmagic/utils": "^1.0.0-beta.8",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.28.0"
+    "moveable": "^0.28.0",
+    "moveable-helper": "^0.4.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",

packages/stage/src/StageDragResize.ts

@@ -21,6 +21,7 @@ import { EventEmitter } from 'events';
 
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
 
 import { GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
@@ -49,6 +50,7 @@ export default class StageDragResize extends EventEmitter {
   private dragStatus: ActionStatus = ActionStatus.END;
   private ghostEl: HTMLElement | undefined;
   private mode: Mode = Mode.ABSOLUTE;
+  private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
     super();
@@ -79,6 +81,12 @@ export default class StageDragResize extends EventEmitter {
       target: this.dragEl || this.target,
     });
 
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true,
+    });
+
     this.initMoveable();
 
     if (event) {
@@ -188,34 +196,42 @@ export default class StageDragResize extends EventEmitter {
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
+    let offset = {
+      left: 0,
+      top: 0,
+    };
+
     this.moveable
-      .on('dragStart', () => {
+      .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
         this.dragStatus = ActionStatus.START;
 
+        this.moveableHelper?.onDragStart(e);
+
+        offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
+
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
       })
-      .on('drag', ({ left, top }) => {
+      .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
         this.dragStatus = ActionStatus.ING;
 
-        const offset = getAbsolutePosition(this.target, { left, top });
+        const { left, top } = e;
 
         // 流式布局
         if (this.ghostEl) {
           this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${offset.top}px`;
+          this.ghostEl.style.top = `${top + offset.top}px`;
           return;
         }
 
-        this.dragEl.style.left = `${left}px`;
-        this.dragEl.style.top = `${top}px`;
+        this.moveableHelper?.onDrag(e);
 
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.left = `${left + offset.left}px`;
+        this.target.style.top = `${top + offset.top}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件