@screeb/rrweb 1.0.18 → 1.0.19

package/dist/rrweb.umd.cjs

@@ -8655,6 +8655,7 @@ class Replayer {
     this.firstFullSnapshot = null;
     this.newDocumentQueue = [];
     this.pointers = {};
+    this.mouseTailAnimationFrame = null;
     this.lastMouseDownEvent = null;
     this.lastSelectionData = null;
     this.constructedStyleMutations = [];
@@ -8793,6 +8794,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.");
     }
@@ -10334,38 +10382,12 @@ class Replayer {
     if (!pointer || !pointer.mouseTail) {
       return;
     }
-    const { lineCap, lineWidth, strokeStyle, duration } = this.config.mouseTail === true ? defaultMouseTailConfig : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail);
     const now = typeof performance !== "undefined" ? performance.now() : Date.now();
-    const maxAge = duration / this.speedService.state.context.timer.speed;
     pointer.tailPositions.push({ x: position.x, y: position.y, t: now });
-    pointer.tailPositions = pointer.tailPositions.filter(
-      (p) => now - p.t <= maxAge
-    );
-    const mouseTail = pointer.mouseTail;
-    const ctx = mouseTail.getContext("2d");
-    if (!ctx) {
-      return;
-    }
-    ctx.clearRect(0, 0, mouseTail.width, mouseTail.height);
-    if (pointer.tailPositions.length > 1) {
-      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 = (now - 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 (this.mouseTailAnimationFrame === null) {
+      this.mouseTailAnimationFrame = requestAnimationFrame(
+        this.stepMouseTails
+      );
     }
   }
   hoverElements(el) {