@gemx-dev/heatmap-react 3.5.92-dev.23 → 3.5.92-dev.25

package/dist/esm/index.js

@@ -1677,30 +1677,15 @@ const drawBackdropWithCutout = (options) => {
     const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
     // Clear previous drawing
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    // Set backdrop style
+    // Draw backdrop as a single path with a cutout hole using evenodd fill rule.
+    // This avoids seam artifacts that appear when using 4 separate rectangles
+    // with fractional coordinates (sub-pixel gaps at rect boundaries).
     ctx.fillStyle = backdropColor;
     ctx.globalAlpha = backdropOpacity;
-    // Draw backdrop in 4 rectangles around the active element
-    // This creates a cutout effect
-    // Top rectangle (above active element)
-    if (top > 0) {
-        ctx.fillRect(0, 0, canvasWidth, top);
-    }
-    // Bottom rectangle (below active element)
-    const bottomY = top + height;
-    if (bottomY < canvasHeight) {
-        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
-    }
-    // Left rectangle (left of active element)
-    if (left > 0) {
-        ctx.fillRect(0, top, left, height);
-    }
-    // Right rectangle (right of active element)
-    const rightX = left + width;
-    if (rightX < canvasWidth) {
-        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
-    }
-    // Reset alpha
+    ctx.beginPath();
+    ctx.rect(0, 0, canvasWidth, canvasHeight); // outer (full canvas)
+    ctx.rect(left, top, width, height); // inner (cutout hole)
+    ctx.fill('evenodd');
     ctx.globalAlpha = 1.0;
 };
 /**
@@ -3221,7 +3206,7 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
         }
         iframeDocument.addEventListener('mousemove', handleMouseMove);
         iframeDocument.addEventListener('scroll', handleMouseLeave);
-        iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+        iframeDocument.addEventListener('mouseleave', handleMouseLeave);
         iframeDocument.addEventListener('click', handleClick);
         return () => {
             iframeDocument.removeEventListener('mousemove', handleMouseMove);
@@ -3596,6 +3581,7 @@ const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
     const clickMode = useHeatmapSettingContext((state) => state.clickMode);
     const scrollType = useHeatmapSettingContext((state) => state.scrollType);
+    const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -3614,7 +3600,10 @@ const useHeatmapCanvas = () => {
                 startScrollmap();
                 break;
         }
-    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]);
+        return () => {
+            setSelectedElement(null);
+        };
+    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 const scrollToElementIfNeeded = (visualRef, rect, scale, onScrollComplete) => {
@@ -4235,6 +4224,30 @@ function createPerfTimer(config) {
     };
 }
 
+/**
+ * Default iframe dimension calculation.
+ * Used as fallback when no fix overrides getDimensions().
+ */
+function getFinalHeight(doc, win) {
+    void doc.body.offsetHeight; // trigger reflow
+    // const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
+    // const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
+    return Math.max(
+    // doc.body?.scrollHeight || 0,
+    // doc.body?.offsetHeight || 0,
+    // doc.documentElement?.scrollHeight || 0,
+    // doc.documentElement?.offsetHeight || 0,
+    doc.documentElement?.clientHeight || 0);
+}
+function getFinalWidth(doc) {
+    return Math.max(
+    // doc.body?.scrollWidth || 0,
+    // doc.body?.offsetWidth || 0,
+    // doc.documentElement?.scrollWidth || 0,
+    // doc.documentElement?.offsetWidth || 0,
+    doc.documentElement?.clientWidth || 0);
+}
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
@@ -4259,36 +4272,74 @@ function setup(doc, onChange) {
     };
 }
 
+// cspell:ignore cooldown
 /**
  * Height Observer Processor
  * Background observer — watches for iframe content height changes.
  */
-// ── Module-level functions ────────────────────────────────────────────────────
-function clearTimers(s) {
-    if (s.throttleTimeout) {
-        clearTimeout(s.throttleTimeout);
-        s.throttleTimeout = null;
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function readCurrentHeight(s) {
+    if (!s.iframe?.contentDocument || !s.iframe?.contentWindow)
+        return 0;
+    const height = getFinalHeight(s.iframe.contentDocument, s.iframe.contentWindow);
+    s.logger.log('Height:', height);
+    return height;
+}
+function isBlocked(s) {
+    return s.isProcessing || s.isCoolingDown || s.throttleTimeout !== null;
+}
+function hasHeightChanged(s, height) {
+    return height !== s.lastHeight;
+}
+// ── Cooldown ──────────────────────────────────────────────────────────────────
+function startCooldown(s) {
+    s.isCoolingDown = true;
+    s.cooldownTimeout = setTimeout(() => {
+        s.cooldownTimeout = null;
+        s.isCoolingDown = false;
+    }, s.cooldownMs);
+}
+function stopCooldown(s) {
+    if (s.cooldownTimeout) {
+        clearTimeout(s.cooldownTimeout);
+        s.cooldownTimeout = null;
     }
+    s.isCoolingDown = false;
+}
+// ── Debounce ──────────────────────────────────────────────────────────────────
+function cancelPendingDebounce(s) {
     if (s.debounceTimeout) {
         clearTimeout(s.debounceTimeout);
         s.debounceTimeout = null;
     }
 }
-function getActualHeight(s) {
-    if (!s.iframe?.contentDocument)
-        return 0;
-    const { documentElement: docEl, body } = s.iframe.contentDocument;
-    const heights = [docEl.scrollHeight, docEl.offsetHeight, body.scrollHeight, body.offsetHeight];
-    const maxHeight = Math.max(...heights.filter((h) => h > 0));
-    s.logger.log('Height sources:', {
-        'documentElement.scrollHeight': docEl.scrollHeight,
-        'documentElement.offsetHeight': docEl.offsetHeight,
-        'body.scrollHeight': body.scrollHeight,
-        'body.offsetHeight': body.offsetHeight,
-        maxHeight,
-    });
-    return maxHeight;
+function processCurrentHeightIfChanged(s) {
+    const height = readCurrentHeight(s);
+    if (hasHeightChanged(s, height)) {
+        processHeightChange(s, height);
+    }
 }
+function scheduleDebounce(s) {
+    cancelPendingDebounce(s);
+    s.debounceTimeout = setTimeout(() => {
+        s.debounceTimeout = null;
+        processCurrentHeightIfChanged(s);
+    }, s.debounceMs);
+}
+// ── Throttle ──────────────────────────────────────────────────────────────────
+function scheduleThrottledCheck(s) {
+    s.throttleTimeout = setTimeout(() => {
+        s.throttleTimeout = null;
+        const height = readCurrentHeight(s);
+        if (!hasHeightChanged(s, height)) {
+            cancelPendingDebounce(s);
+            return;
+        }
+        s.logger.log(`Height changed: ${s.lastHeight}px -> ${height}px`);
+        scheduleDebounce(s);
+    }, s.throttleMs);
+}
+// ── Core ──────────────────────────────────────────────────────────────────────
 async function processHeightChange(s, newHeight) {
     if (!s.iframe || !s.config)
         return;
@@ -4300,7 +4351,6 @@ async function processHeightChange(s, newHeight) {
             width: s.iframe.contentWindow?.innerWidth ?? 0,
         };
         s.lastHeight = newHeight;
-        s.logger.log('Height change processed:', result);
         s.config.onHeightChange?.(result);
         window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: result }));
     }
@@ -4310,46 +4360,59 @@ async function processHeightChange(s, newHeight) {
     }
     finally {
         s.isProcessing = false;
+        if (s.cooldownMs > 0)
+            startCooldown(s);
     }
 }
 function handleHeightChange(s) {
-    if (s.isProcessing || s.throttleTimeout)
+    if (isBlocked(s))
         return;
-    s.throttleTimeout = setTimeout(() => {
-        s.throttleTimeout = null;
-        const currentHeight = getActualHeight(s);
-        if (currentHeight === s.lastHeight) {
-            // Height returned to known state — cancel any stale pending debounce
-            // to prevent it from firing with an outdated height and corrupting lastHeight.
-            if (s.debounceTimeout) {
-                clearTimeout(s.debounceTimeout);
-                s.debounceTimeout = null;
-            }
-            return;
-        }
-        s.logger.log(`Height changed: ${s.lastHeight}px -> ${currentHeight}px`);
-        if (s.debounceTimeout)
-            clearTimeout(s.debounceTimeout);
-        s.debounceTimeout = setTimeout(() => {
-            s.debounceTimeout = null;
-            // Re-read height at dispatch time to avoid using a stale closure value.
-            const finalHeight = getActualHeight(s);
-            if (finalHeight !== s.lastHeight) {
-                processHeightChange(s, finalHeight);
-            }
-        }, s.debounceMs);
-    }, s.throttleMs);
+    scheduleThrottledCheck(s);
 }
-function observe(s) {
+function attachObserver(s) {
     if (!s.iframe?.contentDocument?.body) {
         s.logger.warn('Cannot observe height changes: iframe body not found');
         return;
     }
     s.observerCleanup?.();
-    s.lastHeight = getActualHeight(s);
+    s.lastHeight = readCurrentHeight(s);
     s.logger.log('Initial height:', s.lastHeight);
     s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
 }
+function detachObserver(s) {
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+}
+function clearAllTimers(s) {
+    if (s.throttleTimeout) {
+        clearTimeout(s.throttleTimeout);
+        s.throttleTimeout = null;
+    }
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+    if (s.startDelayTimeout) {
+        clearTimeout(s.startDelayTimeout);
+        s.startDelayTimeout = null;
+    }
+    stopCooldown(s);
+}
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+function observeImmediately(s) {
+    attachObserver(s);
+    s.logger.log('Height observer started');
+}
+function observeAfterDelay(s, delayMs) {
+    s.logger.log(`Height observer will start in ${delayMs}ms`);
+    s.startDelayTimeout = setTimeout(() => {
+        s.startDelayTimeout = null;
+        if (!s.running)
+            return;
+        attachObserver(s);
+        s.logger.log('Height observer started (after delay)');
+    }, delayMs);
+}
 function start$5(s, iframe, cfg) {
     if (s.running) {
         s.logger.warn('Observer is already running. Call stop() first.');
@@ -4359,27 +4422,32 @@ function start$5(s, iframe, cfg) {
     s.config = cfg;
     s.throttleMs = cfg.throttleMs ?? 25;
     s.debounceMs = cfg.debounceMs ?? 500;
+    s.cooldownMs = cfg.cooldownMs ?? 0;
     s.running = true;
-    observe(s);
-    s.logger.log('Height observer started');
+    const startDelayMs = cfg.startDelayMs ?? 0;
+    if (startDelayMs > 0) {
+        observeAfterDelay(s, startDelayMs);
+    }
+    else {
+        observeImmediately(s);
+    }
 }
 function stop$5(s) {
     if (!s.running)
         return;
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.iframe = null;
     s.config = null;
     s.lastHeight = 0;
     s.isProcessing = false;
+    s.isCoolingDown = false;
     s.running = false;
     s.logger.log('Height observer stopped');
 }
 function clear(s) {
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.lastHeight = 0;
     s.isProcessing = false;
 }
@@ -4393,6 +4461,8 @@ function updateConfig$3(s, cfg) {
         s.throttleMs = cfg.throttleMs;
     if (cfg.debounceMs !== undefined)
         s.debounceMs = cfg.debounceMs;
+    if (cfg.cooldownMs !== undefined)
+        s.cooldownMs = cfg.cooldownMs;
     s.logger.configure({ enabled: !!s.config.debug });
     s.logger.log('Config updated');
 }
@@ -4406,15 +4476,19 @@ function createHeightObserver() {
         lastHeight: 0,
         throttleTimeout: null,
         debounceTimeout: null,
+        startDelayTimeout: null,
+        cooldownTimeout: null,
         isProcessing: false,
+        isCoolingDown: false,
         throttleMs: 25,
         debounceMs: 500,
+        cooldownMs: 0,
         running: false,
     };
     return {
         start: (iframe, cfg) => start$5(s, iframe, cfg),
         stop: () => stop$5(s),
-        observe: () => observe(s),
+        observe: () => attachObserver(s),
         clear: () => clear(s),
         updateConfig: (cfg) => updateConfig$3(s, cfg),
         getCurrentHeight: () => s.lastHeight,
@@ -5161,20 +5235,6 @@ register$1({
     afterProcess,
 });
 
-/**
- * Default iframe dimension calculation.
- * Used as fallback when no fix overrides getDimensions().
- */
-function getFinalHeight(doc, win) {
-    void doc.body.offsetHeight; // trigger reflow
-    const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
-    const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
-    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0, bodyMinHeight, htmlMinHeight);
-}
-function getFinalWidth(doc) {
-    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
-}
-
 /**
  * Viewport fix pipeline runner.
  *
@@ -5456,20 +5516,6 @@ async function process(s) {
         perf$3.endSession();
         s.logger.groupEnd();
         s.logger.log('Process completed:', result);
-        s.heightObserver.stop();
-        s.heightObserver.start(s.iframe, {
-            iframe: s.iframe,
-            debug: s.config.debug,
-            throttleMs: 25,
-            debounceMs: 500,
-            onHeightChange: (result) => {
-                s.config?.onSuccess?.(result);
-                dispatchDimensionsEvent(result);
-            },
-            onError: (error) => {
-                s.config?.onError?.(error);
-            },
-        });
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
@@ -5521,6 +5567,26 @@ function stop$1(s) {
     s.running = false;
     s.logger.log('Stopped');
 }
+function startHeightObserver(s) {
+    if (!s.iframe || !s.config)
+        return;
+    s.heightObserver.stop();
+    s.heightObserver.start(s.iframe, {
+        iframe: s.iframe,
+        debug: s.config.debug,
+        throttleMs: 25,
+        debounceMs: 500,
+        cooldownMs: 1000,
+        startDelayMs: s.config.heightObserverStartDelayMs,
+        onHeightChange: (result) => {
+            s.config?.onSuccess?.(result);
+            dispatchDimensionsEvent(result);
+        },
+        onError: (error) => {
+            s.config?.onError?.(error);
+        },
+    });
+}
 async function recalculate$1(s) {
     if (!s.running) {
         s.logger.warn('Fixer is not running.');
@@ -5559,6 +5625,7 @@ function createOrchestrator() {
         enableNavigationBlockingMessage: () => s.navigationBlocker.enableMessage(),
         disableNavigationBlocking: () => s.navigationBlocker.disable(),
         disableNavigationBlockingMessage: () => s.navigationBlocker.disableMessage(),
+        startHeightObserver: () => startHeightObserver(s),
         isRunning: () => s.running,
         getStateInfo: () => ({
             isRunning: s.running,
@@ -5617,6 +5684,7 @@ function createIframeHelper() {
         stop: () => stop(s),
         recalculate: () => recalculate(s),
         enableNavigationBlocking: () => enableNavigationBlocking(s),
+        startHeightObserver: () => s.fixer.startHeightObserver(),
         isRunning: () => s.running,
     };
 }
@@ -6648,6 +6716,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [deviceType]);
@@ -6674,6 +6743,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -6702,6 +6772,7 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
         iframe,
         debug: true,
         shopId,
+        heightObserverStartDelayMs: 1000,
         onSuccess: (data) => {
             perf$1.measure('IframeHelper processing', tHelper);
             perf$1.measure('Total render', t0);
@@ -8490,45 +8561,6 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     }
 };
 
-const IS_ENABLE_MINIMAP = false;
-const Minimap = ({ zones, maxUsers }) => {
-    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
-    const showMinimap = useHeatmapScrollContext((s) => s.showMinimap);
-    const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
-    if (!showMinimap || !isScrollType || !IS_ENABLE_MINIMAP)
-        return null;
-    return (jsx("div", { style: {
-            position: 'fixed',
-            left: '20px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            width: '60px',
-            height: '400px',
-            backgroundColor: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
-            zIndex: 10002,
-            padding: '8px',
-            boxSizing: 'border-box',
-        }, children: jsx("div", { style: {
-                width: '100%',
-                height: '100%',
-                borderRadius: '4px',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: zones.map((zone) => {
-                const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
-                const color = getScrollGradientColor(normalized);
-                return (jsx("div", { title: `${zone.label}: ${zone.percUsers.toFixed(2)}%`, style: {
-                        width: '100%',
-                        flex: `${zone.endY - zone.startY}`,
-                        backgroundColor: color,
-                        borderBottom: '1px solid rgba(255,255,255,0.2)',
-                    } }, zone.id));
-            }) }) }));
-};
-
 const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
     const CompScrollZoneTooltip = useHeatmapControlStore((state) => state.controls.ScrollZoneTooltip);
     const tooltipRef = useRef(null);
@@ -8554,17 +8586,9 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
-    // const hoveredZone = useHeatmapVizScrollStore((state) => state.hoveredZone);
-    // const setHoveredZone = useHeatmapVizScrollStore((state) => state.setHoveredZone);
-    const { zones, isReady, maxUsers } = useScrollmapZones({
-        iframeRef,
-        wrapperRef,
-    });
-    if (!isReady || !zones.length)
-        return null;
     if (!position)
         return null;
-    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(Minimap, { zones: zones, maxUsers: maxUsers })] }));
+    return (jsx(Fragment, { children: jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }) }));
 };
 
 const ScrollOverlay = ({ wrapperRef, iframeRef }) => {