clarity-visualize 0.8.58 → 0.8.59

package/build/clarity.visualize.js

@@ -366,8 +366,8 @@ class HeatmapHelper {
             // Remove scroll and resize event listeners
             if (this.state && this.state.window) {
                 let win = this.state.window;
-                win.removeEventListener("scroll", this.redraw, true);
-                win.removeEventListener("resize", this.redraw, true);
+                win.removeEventListener("scroll", this.redraw, { capture: true });
+                win.removeEventListener("resize", this.redraw, { capture: true });
             }
         };
         this.clear = () => {
@@ -490,8 +490,8 @@ class HeatmapHelper {
                 canvas.style.position = "absolute" /* Constant.Absolute */;
                 canvas.style.zIndex = `${2147483647 /* Setting.ZIndex */}`;
                 de.appendChild(canvas);
-                win.addEventListener("scroll", this.redraw, true);
-                win.addEventListener("resize", this.redraw, true);
+                win.addEventListener("scroll", this.redraw, { passive: true, capture: true });
+                win.addEventListener("resize", this.redraw, { passive: true, capture: true });
                 this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
                 if (this.observer) {
                     this.observer.observe(doc.body);
@@ -658,7 +658,7 @@ class InteractionHelper {
         this.points = [];
         this.scrollPointIndex = 0;
         this.clickAudio = null;
-        this.visualizedClicks = [];
+        this.visualizedClicks = new Map();
         this.reset = () => {
             this.points = [];
             this.scrollPointIndex = 0;
@@ -804,9 +804,10 @@ class InteractionHelper {
             switch (type) {
                 case 9 /* Data.Event.Click */:
                     title = "Click";
-                    this.visualizedClicks.push({
+                    const clickElement = this.drawClick(doc, data.x, data.y, title);
+                    this.visualizedClicks.set(clickElement, {
                         doc: de,
-                        click: this.drawClick(doc, data.x, data.y, title),
+                        click: clickElement,
                         time: event.time
                     });
                     if (this.state.options.onclickMismatch) {
@@ -831,9 +832,10 @@ class InteractionHelper {
                     break;
                 case 16 /* Data.Event.DoubleClick */:
                     title = "Click";
-                    this.visualizedClicks.push({
+                    const doubleClickElement = this.drawClick(doc, data.x, data.y, title);
+                    this.visualizedClicks.set(doubleClickElement, {
                         doc: de,
-                        click: this.drawClick(doc, data.x, data.y, title),
+                        click: doubleClickElement,
                         time: event.time
                     });
                     p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -842,9 +844,10 @@ class InteractionHelper {
                 case 18 /* Data.Event.TouchEnd */:
                 case 20 /* Data.Event.TouchCancel */:
                     title = "Touch";
-                    this.visualizedClicks.push({
+                    const touchElement = this.drawTouch(doc, data.x, data.y, title);
+                    this.visualizedClicks.set(touchElement, {
                         doc: de,
-                        click: this.drawTouch(doc, data.x, data.y, title),
+                        click: touchElement,
                         time: event.time
                     });
                     p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -867,15 +870,23 @@ class InteractionHelper {
         };
         this.clearOldClickVisualizations = (currentTimestamp) => {
             if (this.vnext) {
-                while (this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
-                    const visualizedClick = this.visualizedClicks.shift();
-                    this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
+                // Track elements to remove to avoid modifying Map during iteration
+                const elementsToRemove = [];
+                // Calculate how many clicks exceed the maximum allowed
+                const excess = Math.max(0, this.visualizedClicks.size - 10 /* Setting.MaxClicksDisplayed */);
+                let count = 0;
+                // Iterate through visualized clicks and mark old ones for removal
+                for (const [element, data] of this.visualizedClicks) {
+                    count++;
+                    const isTooOld = currentTimestamp - data.time > 5000 /* Setting.MaxClickDisplayDuration */;
+                    const exceedsMaxCount = count <= excess;
+                    if (isTooOld || exceedsMaxCount) {
+                        elementsToRemove.push(element);
+                        this.fadeOutElement(element, data.doc);
+                    }
                 }
-                var tooOldClicks = this.visualizedClicks.filter(click => currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */);
-                tooOldClicks.forEach(click => {
-                    this.fadeOutElement(click.click, click.doc);
-                    this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
-                });
+                // Remove marked elements from the Map
+                elementsToRemove.forEach(element => this.visualizedClicks.delete(element));
             }
         };
         this.fadeOutElement = (element, document) => {