@gemx-dev/heatmap-react 3.5.42 → 3.5.44

package/dist/esm/index.js

@@ -511,85 +511,311 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
-const getScriptInjectCode = async () => {
-    const moduleResult = (await Promise.resolve().then(function () { return viewportReplacer; }));
-    const ActualClass = moduleResult.default;
-    const classCode = ActualClass.toString();
-    const classInstantiateCode = ActualClass.name;
-    const scriptCode = `
-    (function() {
-      'use strict';
-      ${classCode}
-      const replacer = new ${classInstantiateCode}();
-      replacer.init();
-    })();
-    `;
-    return scriptCode;
-};
-class ViewportUnitsFixer {
-    iframe = null;
-    config;
-    constructor(config) {
-        this.config = config;
-        this.iframe = config.iframe;
+class IframeNavigationBlockerV2 {
+    doc;
+    win;
+    isEnabled = false;
+    showMessage = false;
+    originalWindowOpen;
+    observers = [];
+    constructor(iframe) {
+        if (!iframe.contentDocument || !iframe.contentWindow) {
+            throw new Error('Iframe document or window not accessible');
+        }
+        this.doc = iframe.contentDocument;
+        this.win = iframe.contentWindow;
+        this.originalWindowOpen = this.win.open.bind(this.win);
         this.init();
     }
-    async init() {
-        if (!this.iframe) {
-            console.error('[Parent] Required elements not found');
-            return;
-        }
-        // this.injectScriptContent = await generateIframeInjectScript();
-        window.addEventListener('message', this.handleMessage.bind(this));
-        if (this.iframe.contentDocument?.readyState === 'complete') {
-            await this.injectScript();
+    init() {
+        console.log('[NavigationBlocker] Initializing...');
+        try {
+            // Chặn navigation qua links
+            this.blockLinkNavigation();
+            // Chặn form submissions
+            this.blockFormSubmissions();
+            // Chặn window.open (này an toàn)
+            this.blockWindowOpen();
+            // Chặn beforeunload để prevent navigation
+            this.blockBeforeUnload();
+            // Monitor DOM changes để block dynamic links
+            this.monitorDOMChanges();
+            // Inject CSP nếu có thể
+            this.injectCSP();
         }
-        else {
-            this.iframe.addEventListener('load', () => this.injectScript());
+        catch (error) {
+            console.error('[NavigationBlocker] Init error:', error);
         }
     }
-    async injectScript() {
-        if (!this.iframe?.contentWindow || !this.iframe.contentDocument)
-            return;
-        const doc = this.iframe.contentDocument;
-        const win = this.iframe.contentWindow;
+    blockLinkNavigation() {
+        // Sử dụng capture phase để chặn sớm nhất
+        this.doc.addEventListener('click', (e) => {
+            if (!this.isEnabled)
+                return;
+            const target = e.target;
+            const link = target.closest('a');
+            if (link) {
+                const href = link.getAttribute('href');
+                // Cho phép hash links và empty links
+                if (!href || href === '' || href === '#' || href.startsWith('#')) {
+                    console.log('[NavigationBlocker] Allowed hash navigation:', href);
+                    return;
+                }
+                // Chặn tất cả các loại navigation
+                console.log('[NavigationBlocker] Blocked link navigation to:', href);
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                this.notifyBlockedNavigation(href);
+            }
+        }, true);
+        // Chặn cả middle click và right click "open in new tab"
+        this.doc.addEventListener('auxclick', (e) => {
+            if (!this.isEnabled)
+                return;
+            const target = e.target;
+            const link = target.closest('a');
+            if (link) {
+                const href = link.getAttribute('href');
+                if (href && !href.startsWith('#')) {
+                    console.log('[NavigationBlocker] Blocked auxclick navigation');
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                }
+            }
+        }, true);
+        // Disable tất cả links ngay từ đầu
+        this.disableAllLinks();
+    }
+    disableAllLinks() {
+        this.doc.querySelectorAll('a[href]').forEach((link) => {
+            const href = link.getAttribute('href');
+            if (href && !href.startsWith('#')) {
+                // Thêm pointer-events: none và cursor
+                link.style.cursor = 'not-allowed';
+                link.setAttribute('data-navigation-blocked', 'true');
+                // Remove href để browser không hiện preview
+                link.setAttribute('data-original-href', href);
+                link.removeAttribute('href');
+                // Hoặc giữ href nhưng disable
+                // link.setAttribute('onclick', 'return false');
+            }
+        });
+    }
+    blockFormSubmissions() {
+        this.doc.addEventListener('submit', (e) => {
+            if (!this.isEnabled)
+                return;
+            const form = e.target;
+            const action = form.getAttribute('action');
+            // Cho phép forms không có action
+            if (!action || action === '' || action === '#') {
+                console.log('[NavigationBlocker] Allowed same-page form');
+                e.preventDefault();
+                this.handleFormSubmit(form);
+                return;
+            }
+            // Chặn tất cả external submissions
+            console.log('[NavigationBlocker] Blocked form submission to:', action);
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            this.notifyBlockedNavigation(action);
+        }, true);
+    }
+    blockWindowOpen() {
+        // Override window.open - đây là safe
+        this.win.open = ((...args) => {
+            if (!this.isEnabled) {
+                return this.originalWindowOpen(...args);
+            }
+            const url = args[0]?.toString() || 'popup';
+            console.log('[NavigationBlocker] Blocked window.open:', url);
+            this.notifyBlockedNavigation(url);
+            return null;
+        });
+    }
+    blockBeforeUnload() {
+        // Chặn unload
+        this.win.addEventListener('beforeunload', (e) => {
+            if (!this.isEnabled)
+                return;
+            console.log('[NavigationBlocker] Blocked beforeunload');
+            e.preventDefault();
+            e.returnValue = '';
+            return '';
+        }, true);
+        // Chặn unload
+        this.win.addEventListener('unload', (e) => {
+            if (!this.isEnabled)
+                return;
+            console.log('[NavigationBlocker] Blocked unload');
+            e.preventDefault();
+            e.stopPropagation();
+        }, true);
+        // Monitor popstate
+        this.win.addEventListener('popstate', (e) => {
+            if (!this.isEnabled)
+                return;
+            console.log('[NavigationBlocker] Blocked popstate');
+            e.preventDefault();
+            e.stopPropagation();
+        }, true);
+    }
+    monitorDOMChanges() {
+        // Monitor khi có links mới được thêm vào
+        const observer = new MutationObserver((mutations) => {
+            if (!this.isEnabled)
+                return;
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        // Nếu là link
+                        if (element.tagName === 'A') {
+                            const href = element.getAttribute('href');
+                            if (href && !href.startsWith('#')) {
+                                element.style.cursor = 'not-allowed';
+                                element.setAttribute('data-navigation-blocked', 'true');
+                                element.setAttribute('data-original-href', href);
+                                element.removeAttribute('href');
+                            }
+                        }
+                        // Tìm links trong subtree
+                        element.querySelectorAll('a[href]').forEach((link) => {
+                            const href = link.getAttribute('href');
+                            if (href && !href.startsWith('#')) {
+                                link.style.cursor = 'not-allowed';
+                                link.setAttribute('data-navigation-blocked', 'true');
+                                link.setAttribute('data-original-href', href);
+                                link.removeAttribute('href');
+                            }
+                        });
+                    }
+                });
+            });
+        });
+        observer.observe(this.doc.body, {
+            childList: true,
+            subtree: true,
+        });
+        this.observers.push(observer);
+    }
+    injectCSP() {
+        // Thêm CSP meta tag nếu chưa có (optional)
         try {
-            win.__viewportConfig = this.config;
-            const script = doc.createElement('script');
-            const scriptCode = await getScriptInjectCode();
-            script.textContent = scriptCode;
-            doc.head.appendChild(script);
+            const existingCSP = this.doc.querySelector('meta[http-equiv="Content-Security-Policy"]');
+            if (!existingCSP) {
+                const meta = this.doc.createElement('meta');
+                meta.httpEquiv = 'Content-Security-Policy';
+                meta.content = "navigate-to 'none'"; // Chặn tất cả navigation
+                this.doc.head.appendChild(meta);
+                console.log('[NavigationBlocker] Injected CSP');
+            }
         }
         catch (error) {
-            console.error('[Parent] Failed to inject script', error);
+            console.warn('[NavigationBlocker] Could not inject CSP:', error);
+        }
+    }
+    handleFormSubmit(form) {
+        const formData = new FormData(form);
+        const data = {};
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+        console.log('[NavigationBlocker] Handling form data:', data);
+        window.dispatchEvent(new CustomEvent('iframe-form-submit', {
+            detail: { form, data },
+        }));
+    }
+    notifyBlockedNavigation(url) {
+        console.warn('[NavigationBlocker] Navigation blocked to:', url);
+        window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
+            detail: { url, timestamp: Date.now() },
+        }));
+        if (this.shouldShowMessage(url)) {
+            this.showBlockedMessage(url);
         }
     }
-    handleMessage(event) {
-        const data = event.data;
-        if (!data || data.type !== 'IFRAME_HEIGHT_CALCULATED')
+    shouldShowMessage(url) {
+        return !url.startsWith('#') && url !== 'reload' && url !== 'popup';
+    }
+    showBlockedMessage(url) {
+        if (!this.showMessage)
             return;
-        this.config.onSuccess?.(data);
+        const message = this.doc.createElement('div');
+        message.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: #ff6b6b;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 999999;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px;
+      max-width: 300px;
+      word-break: break-word;
+      pointer-events: none;
+    `;
+        const shortUrl = url.length > 50 ? url.substring(0, 47) + '...' : url;
+        message.innerHTML = `
+      <div style="font-weight: 600; margin-bottom: 4px;">🚫 Navigation Blocked</div>
+      <div style="font-size: 12px; opacity: 0.9;">${this.escapeHtml(shortUrl)}</div>
+    `;
+        this.doc.body.appendChild(message);
+        setTimeout(() => {
+            message.style.opacity = '0';
+            message.style.transition = 'opacity 0.3s';
+            setTimeout(() => message.remove(), 300);
+        }, 3000);
     }
-    recalculate() {
-        this.injectScript();
+    escapeHtml(text) {
+        const div = this.doc.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    enable() {
+        this.isEnabled = true;
+        console.log('[NavigationBlocker] Enabled');
+    }
+    enableMessage() {
+        this.showMessage = true;
+        console.log('[NavigationBlocker] Enabled message');
+    }
+    disable() {
+        this.isEnabled = false;
+        console.log('[NavigationBlocker] Disabled');
+    }
+    disableMessage() {
+        this.showMessage = false;
+        console.log('[NavigationBlocker] Disabled message');
+    }
+    destroy() {
+        this.isEnabled = false;
+        this.showMessage = false;
+        // Cleanup observers
+        this.observers.forEach((observer) => observer.disconnect());
+        this.observers = [];
+        console.log('[NavigationBlocker] Destroyed');
     }
-}
-function initViewportFixer(config) {
-    const fixer = new ViewportUnitsFixer(config);
-    window.viewportFixer = fixer;
-    window.addEventListener('iframe-dimensions-applied', ((e) => {
-        const ev = e;
-        console.log('Iframe dimensions finalized:', ev.detail);
-    }));
-    return fixer;
 }
 
-class ViewportUnitsReplacer {
-    regex() {
-        return /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-    }
-    config() {
-        return window.__viewportConfig;
+class IframeStyleReplacer {
+    doc;
+    win;
+    config;
+    regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    constructor(iframe, config) {
+        if (!iframe.contentDocument || !iframe.contentWindow) {
+            throw new Error('Iframe document or window not accessible');
+        }
+        this.doc = iframe.contentDocument;
+        this.win = iframe.contentWindow;
+        this.config = config;
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -599,42 +825,44 @@ class ViewportUnitsReplacer {
         if (isNaN(num))
             return value;
         const map = {
-            vh: this.config().targetHeight,
-            svh: this.config().targetHeight,
-            lvh: this.config().targetHeight,
-            dvh: this.config().targetHeight,
-            vw: this.config().targetWidth,
-            svw: this.config().targetWidth,
-            lvw: this.config().targetWidth,
-            dvw: this.config().targetWidth,
+            vh: this.config.targetHeight,
+            svh: this.config.targetHeight,
+            lvh: this.config.targetHeight,
+            dvh: this.config.targetHeight,
+            vw: this.config.targetWidth,
+            svw: this.config.targetWidth,
+            lvw: this.config.targetWidth,
+            dvw: this.config.targetWidth,
         };
         return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
     }
     replaceInText(cssText) {
-        return cssText.replace(this.regex(), (_, value, unit) => this.convert(value, unit));
+        return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
     }
     processInlineStyles() {
         let count = 0;
-        document.querySelectorAll('[style]').forEach((el) => {
+        this.doc.querySelectorAll('[style]').forEach((el) => {
             const style = el.getAttribute('style');
-            if (style && this.regex().test(style)) {
+            if (style && this.regex.test(style)) {
+                this.regex.lastIndex = 0;
                 el.setAttribute('style', this.replaceInText(style));
                 count++;
             }
         });
-        console.log(`[Iframe] Replaced ${count} inline style elements`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
         let count = 0;
-        document.querySelectorAll('style').forEach((tag) => {
+        this.doc.querySelectorAll('style').forEach((tag) => {
             const css = tag.textContent || '';
-            if (this.regex().test(css)) {
+            if (this.regex.test(css)) {
+                this.regex.lastIndex = 0;
                 tag.textContent = this.replaceInText(css);
                 count++;
             }
         });
-        console.log(`[Iframe] Replaced ${count} <style> tags`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -644,7 +872,8 @@ class ViewportUnitsReplacer {
             for (let i = 0; i < style.length; i++) {
                 const prop = style[i];
                 const value = style.getPropertyValue(prop);
-                if (value && this.regex().test(value)) {
+                if (value && this.regex.test(value)) {
+                    this.regex.lastIndex = 0;
                     style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
                     count++;
                 }
@@ -660,11 +889,11 @@ class ViewportUnitsReplacer {
     }
     processStylesheets() {
         let total = 0;
-        Array.from(document.styleSheets).forEach((sheet) => {
+        Array.from(this.doc.styleSheets).forEach((sheet) => {
             try {
                 // Bỏ qua external CSS (cross-origin)
-                if (sheet.href && !sheet.href.startsWith(location.origin)) {
-                    console.log('[Iframe] Skipping external CSS:', sheet.href);
+                if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
+                    console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -675,26 +904,27 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
+                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
+        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
-        const links = document.querySelectorAll('link[rel="stylesheet"]');
+        const links = this.doc.querySelectorAll('link[rel="stylesheet"]');
         let count = 0;
         for (const link of Array.from(links)) {
-            if (!link.href.startsWith(location.origin)) {
-                console.log('[Iframe] Skipping external CSS:', link.href);
+            if (!link.href.startsWith(this.win.location.origin)) {
+                console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
                 continue;
             }
             try {
                 const res = await fetch(link.href);
                 let css = await res.text();
-                if (this.regex().test(css)) {
+                if (this.regex.test(css)) {
+                    this.regex.lastIndex = 0;
                     css = this.replaceInText(css);
-                    const style = document.createElement('style');
+                    const style = this.doc.createElement('style');
                     style.textContent = css;
                     style.dataset.originalHref = link.href;
                     link.parentNode?.insertBefore(style, link);
@@ -703,30 +933,25 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot load CSS:', link.href, e);
+                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[Iframe] Replaced ${count} linked CSS files`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
         // Trigger reflow
-        void document.body.offsetHeight;
-        return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
+        void this.doc.body.offsetHeight;
+        return Math.max(this.doc.body.scrollHeight, this.doc.body.offsetHeight, this.doc.documentElement.scrollHeight, this.doc.documentElement.offsetHeight, this.doc.documentElement.clientHeight);
     }
-    notifyParent(height) {
-        window.parent.postMessage({
-            type: 'IFRAME_HEIGHT_CALCULATED',
-            height,
-            width: document.body.scrollWidth,
-        }, '*');
-        console.log('[Iframe] Sent height to parent:', height);
+    getFinalWidth() {
+        return Math.max(this.doc.body.scrollWidth, this.doc.body.offsetWidth, this.doc.documentElement.scrollWidth, this.doc.documentElement.offsetWidth, this.doc.documentElement.clientWidth);
     }
     async waitForResources() {
-        if ('fonts' in document) {
-            await document.fonts.ready;
+        if ('fonts' in this.doc) {
+            await this.doc.fonts.ready;
         }
-        const images = Array.from(document.images).filter((img) => !img.complete);
+        const images = Array.from(this.doc.images).filter((img) => !img.complete);
         if (images.length > 0) {
             await Promise.all(images.map((img) => new Promise((resolve) => {
                 img.onload = img.onerror = resolve;
@@ -735,37 +960,131 @@ class ViewportUnitsReplacer {
     }
     async run() {
         try {
+            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
             await this.processLinkedStylesheets();
             // await this.waitForResources();
-            requestAnimationFrame(() => {
-                const height = this.getFinalHeight();
-                this.notifyParent(height);
+            return await new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    const height = this.getFinalHeight();
+                    const width = this.getFinalWidth();
+                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
+                    resolve({ height, width });
+                });
             });
         }
         catch (err) {
-            console.error('[Iframe] Critical error:', err);
-            this.notifyParent(document.body.scrollHeight || 1000);
+            console.error('[IframeStyleReplacer] Critical error:', err);
+            return {
+                height: this.doc.body.scrollHeight || 1000,
+                width: this.doc.body.scrollWidth || 1000,
+            };
         }
     }
-    init() {
-        if (!window.__viewportConfig)
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+}
+
+class IframeHelperFixer {
+    iframe;
+    config;
+    replacer = null;
+    navigationBlocker = null;
+    constructor(config) {
+        this.config = config;
+        this.iframe = config.iframe;
+        this.init();
+    }
+    async init() {
+        if (!this.iframe) {
+            console.error('[IframeHelper] iframe not found');
+            this.config.onError?.(new Error('iframe not found'));
             return;
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => this.run());
+        }
+        // Wait for iframe to load completely
+        if (this.iframe.contentDocument?.readyState === 'complete') {
+            await this.process();
         }
         else {
-            this.run();
+            this.iframe.addEventListener('load', () => this.process());
+        }
+    }
+    async process() {
+        if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
+            console.error('[IframeHelper] Cannot access iframe document');
+            this.config.onError?.(new Error('Cannot access iframe document'));
+            return;
+        }
+        try {
+            console.log('[IframeHelper] Processing viewport units...');
+            // Create replacer instance
+            this.replacer = new IframeStyleReplacer(this.iframe, this.config);
+            // Create navigation blocker
+            this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe);
+            // Run replacement
+            const result = await this.replacer.run();
+            console.log('[IframeHelper] Process completed:', result);
+            // Trigger success callback
+            this.config.onSuccess?.(result);
+            // Dispatch custom event
+            window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', {
+                detail: result,
+            }));
+        }
+        catch (error) {
+            console.error('[IframeHelper] Failed to process:', error);
+            this.config.onError?.(error);
+        }
+    }
+    async recalculate() {
+        console.log('[IframeHelper] Recalculating...');
+        await this.process();
+    }
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+        if (this.replacer) {
+            this.replacer.updateConfig(config);
         }
     }
+    enableNavigationBlocking() {
+        this.navigationBlocker?.enable();
+    }
+    enableNavigationBlockingMessage() {
+        this.navigationBlocker?.enableMessage();
+    }
+    disableNavigationBlocking() {
+        this.navigationBlocker?.disable();
+    }
+    disableNavigationBlockingMessage() {
+        this.navigationBlocker?.disableMessage();
+    }
+    destroy() {
+        this.replacer = null;
+        this.navigationBlocker?.destroy();
+        this.navigationBlocker = null;
+        console.log('[IframeHelper] Destroyed');
+    }
 }
 
-var viewportReplacer = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: ViewportUnitsReplacer
-});
+function initIframeHelperFixer(config) {
+    const fixer = new IframeHelperFixer(config);
+    window.addEventListener('iframe-dimensions-applied', ((e) => {
+        const ev = e;
+        console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
+    }));
+    window.addEventListener('iframe-navigation-blocked', ((e) => {
+        const ev = e;
+        console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
+    }));
+    window.addEventListener('iframe-form-submit', ((e) => {
+        const ev = e;
+        console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
+    }));
+    return fixer;
+}
 
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
@@ -1292,7 +1611,7 @@ function useVizLiveRender() {
         if (!iframe || !htmlContent)
             return;
         setIsRenderViz(false);
-        reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
@@ -1301,8 +1620,8 @@ function useVizLiveRender() {
         iframeRef,
     };
 }
-function reset$1(iframe, rect, onSuccess) {
-    const viewportFixer = initViewportFixer({
+function reset(iframe, rect, onSuccess) {
+    const fixer = initIframeHelperFixer({
         targetWidth: rect.width,
         targetHeight: rect.height,
         iframe: iframe,
@@ -1311,8 +1630,8 @@ function reset$1(iframe, rect, onSuccess) {
             onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
+    fixer.enableNavigationBlocking();
 }
 
 let visualizer = new Visualizer();
@@ -1330,7 +1649,7 @@ const useHeatmapRender = () => {
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
-        reset(iframe, payloads, (height) => {
+        initIframe(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
             setVizRef(visualizer);
@@ -1348,11 +1667,11 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function reset(iframe, payloads, onSuccess) {
+function initIframe(iframe, payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
-    const viewportFixer = initViewportFixer({
+    initIframeHelperFixer({
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
@@ -1361,8 +1680,7 @@ function reset(iframe, payloads, onSuccess) {
             onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
 }
 
 function isMobileDevice(userAgent) {
@@ -2367,7 +2685,7 @@ const VizLiveRenderer = () => {
 const VizLiveHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
     const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
     const reset = useHeatmapLiveStore((state) => state.reset);