From 22330207eb85a5d7ae7139a208fa51f2bef45d7d Mon Sep 17 00:00:00 2001
From: yz-yu <aryu0112@gmail.com>
Date: Fri, 25 Jan 2019 18:25:35 +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 7b9025520e..3abba73a75 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 0216c36514..c596609026 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 d4773593c5..f362740a1d 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;