@screeb/rrweb 1.0.16 → 1.0.17

package/dist/rrweb.d.cts

@@ -375,6 +375,7 @@ export declare class Replayer {
     private firstFullSnapshot;
     private newDocumentQueue;
     private pointers;
+    private mouseTailAnimationFrame;
     private lastMouseDownEvent;
     private lastHoveredRootNode;
     private lastSelectionData;
@@ -423,6 +424,7 @@ export declare class Replayer {
     private legacy_resolveMissingNode;
     private moveAndHover;
     private drawMouseTail;
+    private stepMouseTails;
     private hoverElements;
     private isUserInteraction;
     private backToNormal;

package/dist/rrweb.d.ts

@@ -375,6 +375,7 @@ export declare class Replayer {
     private firstFullSnapshot;
     private newDocumentQueue;
     private pointers;
+    private mouseTailAnimationFrame;
     private lastMouseDownEvent;
     private lastHoveredRootNode;
     private lastSelectionData;
@@ -423,6 +424,7 @@ export declare class Replayer {
     private legacy_resolveMissingNode;
     private moveAndHover;
     private drawMouseTail;
+    private stepMouseTails;
     private hoverElements;
     private isUserInteraction;
     private backToNormal;

package/dist/rrweb.js

@@ -8507,7 +8507,18 @@ const defaultMouseTailConfig = {
   strokeStyle: "red"
 };
 function indicatesTouchDevice(e2) {
-  return e2.type == EventType.IncrementalSnapshot && (e2.data.source == IncrementalSource.TouchMove || e2.data.source == IncrementalSource.MouseInteraction && e2.data.type == MouseInteractions.TouchStart);
+  if (e2.type !== EventType.IncrementalSnapshot) {
+    return false;
+  }
+  const data = e2.data;
+  if (data.source === IncrementalSource.TouchMove) {
+    return true;
+  }
+  if (data.source === IncrementalSource.MouseInteraction && data.type === MouseInteractions.TouchStart) {
+    const mouseData = data;
+    return mouseData.pointerType === PointerTypes.Touch;
+  }
+  return false;
 }
 function getPointerId(d) {
   const pointerId = "pointerId" in d && typeof d.pointerId === "number" ? d.pointerId : -1;
@@ -8527,6 +8538,7 @@ class Replayer {
     this.firstFullSnapshot = null;
     this.newDocumentQueue = [];
     this.pointers = {};
+    this.mouseTailAnimationFrame = null;
     this.lastMouseDownEvent = null;
     this.lastSelectionData = null;
     this.constructedStyleMutations = [];
@@ -8664,6 +8676,53 @@ class Replayer {
       };
       return wrappedCastFn;
     };
+    this.stepMouseTails = (timestamp) => {
+      const { lineCap, lineWidth, strokeStyle, duration } = this.config.mouseTail === true ? defaultMouseTailConfig : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail);
+      const maxAge = duration / this.speedService.state.context.timer.speed;
+      let hasAnyTail = false;
+      Object.values(this.pointers).forEach((pointer) => {
+        if (!pointer.mouseTail) {
+          return;
+        }
+        const mouseTail = pointer.mouseTail;
+        const ctx = mouseTail.getContext("2d");
+        if (!ctx) {
+          return;
+        }
+        pointer.tailPositions = pointer.tailPositions.filter(
+          (p) => timestamp - p.t <= maxAge
+        );
+        ctx.clearRect(0, 0, mouseTail.width, mouseTail.height);
+        if (pointer.tailPositions.length > 1) {
+          hasAnyTail = true;
+          ctx.lineWidth = lineWidth;
+          ctx.lineCap = lineCap;
+          ctx.strokeStyle = strokeStyle;
+          for (let i2 = 1; i2 < pointer.tailPositions.length; i2++) {
+            const prev = pointer.tailPositions[i2 - 1];
+            const curr = pointer.tailPositions[i2];
+            const age = (timestamp - curr.t) / maxAge;
+            const alpha = Math.max(0, 1 - age);
+            if (alpha <= 0) {
+              continue;
+            }
+            ctx.globalAlpha = alpha;
+            ctx.beginPath();
+            ctx.moveTo(prev.x, prev.y);
+            ctx.lineTo(curr.x, curr.y);
+            ctx.stroke();
+          }
+          ctx.globalAlpha = 1;
+        }
+      });
+      if (hasAnyTail) {
+        this.mouseTailAnimationFrame = requestAnimationFrame(
+          this.stepMouseTails
+        );
+      } else {
+        this.mouseTailAnimationFrame = null;
+      }
+    };
     if (!config?.liveMode && events.length < 2) {
       throw new Error("Replayer need at least 2 events.");
     }
@@ -10188,35 +10247,13 @@ class Replayer {
     if (!pointer || !pointer.mouseTail) {
       return;
     }
-    const { lineCap, lineWidth, strokeStyle, duration } = this.config.mouseTail === true ? defaultMouseTailConfig : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail);
-    const draw = () => {
-      if (!pointer || !pointer.mouseTail) {
-        return;
-      }
-      const mouseTail = pointer.mouseTail;
-      const ctx = mouseTail.getContext("2d");
-      if (!ctx || !pointer.tailPositions.length) {
-        return;
-      }
-      ctx.clearRect(0, 0, mouseTail.width, mouseTail.height);
-      ctx.beginPath();
-      ctx.lineWidth = lineWidth;
-      ctx.lineCap = lineCap;
-      ctx.strokeStyle = strokeStyle;
-      ctx.moveTo(pointer.tailPositions[0].x, pointer.tailPositions[0].y);
-      pointer.tailPositions.forEach((p) => ctx.lineTo(p.x, p.y));
-      ctx.stroke();
-    };
-    pointer.tailPositions.push(position);
-    draw();
-    setTimeout$1(() => {
-      if (pointerId in this.pointers) {
-        pointer.tailPositions = pointer.tailPositions.filter(
-          (p) => p !== position
-        );
-        draw();
-      }
-    }, duration / this.speedService.state.context.timer.speed);
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    pointer.tailPositions.push({ x: position.x, y: position.y, t: now });
+    if (this.mouseTailAnimationFrame === null) {
+      this.mouseTailAnimationFrame = requestAnimationFrame(
+        this.stepMouseTails
+      );
+    }
   }
   hoverElements(el) {
     const iframeDoc = getIFrameContentDocument(this.iframe);