From 4a2c7335834420bcb78fd7f4be707faf5a8ffaf8 Mon Sep 17 00:00:00 2001
From: yz-yu <aryu0112@gmail.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] improve mouse record and replay (#49)

Increase the throttle value of collecting mouse move and add a
transition time to the replayer's mouse. This may decrease the
size of mouse move data and make the replay movement more smooth.
Another change is to move and hover when click event is replayed.
This is to improve the replay of some programmatic click, such as
E2E tests.
---
 src/record/observer.ts      |  2 +-
 src/replay/index.ts         | 19 ++++++++++++-------
 src/replay/styles/style.css |  1 +
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/record/observer.ts b/src/record/observer.ts
index 7b902552..3abba73a 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -248,7 +248,7 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
       });
       wrappedCb();
     },
-    20,
+    50,
     {
       trailing: false,
     },
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 0216c365..c5966090 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -427,13 +427,7 @@ export class Replayer {
           d.positions.forEach(p => {
             const action = {
               doAction: () => {
-                this.mouse.style.left = `${p.x}px`;
-                this.mouse.style.top = `${p.y}px`;
-                const target = mirror.getNode(p.id);
-                if (!target) {
-                  return this.warnNodeNotFound(d, p.id);
-                }
-                this.hoverElements((target as Node) as Element);
+                this.moveAndHover(d, p.x, p.y, p.id);
               },
               delay: p.timeOffset + e.timestamp - this.baselineTime,
             };
@@ -475,6 +469,7 @@ export class Replayer {
              * clicked at this moment.
              */
             if (!isSync) {
+              this.moveAndHover(d, d.x, d.y, d.id);
               this.mouse.classList.remove('active');
               // tslint:disable-next-line
               void this.mouse.offsetWidth;
@@ -577,6 +572,16 @@ export class Replayer {
     }
   }
 
+  private moveAndHover(d: incrementalData, x: number, y: number, id: number) {
+    this.mouse.style.left = `${x}px`;
+    this.mouse.style.top = `${y}px`;
+    const target = mirror.getNode(id);
+    if (!target) {
+      return this.warnNodeNotFound(d, id);
+    }
+    this.hoverElements((target as Node) as Element);
+  }
+
   private hoverElements(el: Element) {
     this.iframe
       .contentDocument!.querySelectorAll('.\\:hover')
diff --git a/src/replay/styles/style.css b/src/replay/styles/style.css
index d4773593..f362740a 100644
--- a/src/replay/styles/style.css
+++ b/src/replay/styles/style.css
@@ -5,6 +5,7 @@
   position: absolute;
   width: 20px;
   height: 20px;
+  transition: 0.05s linear;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;