@gemx-dev/heatmap-react 3.5.42 → 3.5.43

package/dist/esm/components/VizLive/VizLiveHeatmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VizLiveHeatmap.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveHeatmap.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAoBlC,CAAC"}
+{"version":3,"file":"VizLiveHeatmap.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveHeatmap.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAqBlC,CAAC"}

package/dist/esm/helpers/viewport-fixer.d.ts

@@ -2,11 +2,13 @@ import { DebugInfo, ViewportConfig } from '../types';
 export declare class ViewportUnitsFixer {
     private iframe;
     private config;
+    private replacer;
     constructor(config: ViewportConfig);
     private init;
-    private injectScript;
-    private handleMessage;
-    recalculate(): void;
+    private process;
+    recalculate(): Promise<void>;
+    updateConfig(config: Partial<ViewportConfig>): void;
+    destroy(): void;
 }
 export declare function initViewportFixer(config: ViewportConfig): ViewportUnitsFixer;
 export declare function debugViewportUnits(): DebugInfo | null;

package/dist/esm/helpers/viewport-fixer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAiB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}
+{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,cAAc,EAAE,MAAM,UAAU,CAAC;AAGvE,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,QAAQ,CAAsC;gBAE1C,MAAM,EAAE,cAAc;YAMpB,IAAI;YAcJ,OAAO;IAiCR,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAKlC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAOnD,OAAO,IAAI,IAAI;CAIvB;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAS5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}

package/dist/esm/helpers/viewport-replacer.d.ts

@@ -1,12 +1,10 @@
 import type { ViewportConfig } from '../types';
-declare global {
-    interface Window {
-        __viewportConfig?: ViewportConfig;
-    }
-}
-declare class ViewportUnitsReplacer {
-    regex(): RegExp;
-    config(): ViewportConfig;
+export declare class ViewportUnitsReplacer {
+    private doc;
+    private win;
+    private config;
+    private regex;
+    constructor(iframe: HTMLIFrameElement, config: ViewportConfig);
     private px;
     private convert;
     private replaceInText;
@@ -16,10 +14,12 @@ declare class ViewportUnitsReplacer {
     private processStylesheets;
     private processLinkedStylesheets;
     private getFinalHeight;
-    private notifyParent;
+    private getFinalWidth;
     private waitForResources;
-    private run;
-    init(): void;
+    run(): Promise<{
+        height: number;
+        width: number;
+    }>;
+    updateConfig(config: Partial<ViewportConfig>): void;
 }
-export default ViewportUnitsReplacer;
 //# sourceMappingURL=viewport-replacer.d.ts.map

package/dist/esm/helpers/viewport-replacer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-replacer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-replacer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,gBAAgB,CAAC,EAAE,cAAc,CAAC;KACnC;CACF;AAED,cAAM,qBAAqB;IACzB,KAAK,IAAI,MAAM;IAIf,MAAM,IAAI,cAAc;IAIxB,OAAO,CAAC,EAAE;IAIV,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,kBAAkB;YAwBZ,wBAAwB;IAkCtC,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,YAAY;YAYN,gBAAgB;YAkBhB,GAAG;IAmBjB,IAAI;CASL;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"viewport-replacer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-replacer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,qBAAa,qBAAqB;IAChC,OAAO,CAAC,GAAG,CAAW;IACtB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,KAAK,CAAgD;gBAEjD,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,cAAc;IAU7D,OAAO,CAAC,EAAE;IAIV,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,kBAAkB;YAwBZ,wBAAwB;IAmCtC,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,aAAa;YAUP,gBAAgB;IAkBjB,GAAG,IAAI,OAAO,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IA6BvD,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;CAG3D"}

package/dist/esm/index.js

@@ -511,85 +511,18 @@ 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;
+class ViewportUnitsReplacer {
+    doc;
+    win;
     config;
-    constructor(config) {
-        this.config = config;
-        this.iframe = config.iframe;
-        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();
-        }
-        else {
-            this.iframe.addEventListener('load', () => this.injectScript());
-        }
-    }
-    async injectScript() {
-        if (!this.iframe?.contentWindow || !this.iframe.contentDocument)
-            return;
-        const doc = this.iframe.contentDocument;
-        const win = this.iframe.contentWindow;
-        try {
-            win.__viewportConfig = this.config;
-            const script = doc.createElement('script');
-            const scriptCode = await getScriptInjectCode();
-            script.textContent = scriptCode;
-            doc.head.appendChild(script);
+    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');
         }
-        catch (error) {
-            console.error('[Parent] Failed to inject script', error);
-        }
-    }
-    handleMessage(event) {
-        const data = event.data;
-        if (!data || data.type !== 'IFRAME_HEIGHT_CALCULATED')
-            return;
-        this.config.onSuccess?.(data);
-    }
-    recalculate() {
-        this.injectScript();
-    }
-}
-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;
+        this.doc = iframe.contentDocument;
+        this.win = iframe.contentWindow;
+        this.config = config;
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -599,42 +532,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(`[ViewportReplacer] 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(`[ViewportReplacer] Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -644,7 +579,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 +596,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('[ViewportReplacer] Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -675,26 +611,27 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
+                console.warn('[ViewportReplacer] Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
+        console.log(`[ViewportReplacer] 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('[ViewportReplacer] 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 +640,25 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot load CSS:', link.href, e);
+                console.warn('[ViewportReplacer] Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[Iframe] Replaced ${count} linked CSS files`);
+        console.log(`[ViewportReplacer] 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 +667,104 @@ class ViewportUnitsReplacer {
     }
     async run() {
         try {
+            console.log('[ViewportReplacer] 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('[ViewportReplacer] Calculated dimensions:', { height, width });
+                    resolve({ height, width });
+                });
             });
         }
         catch (err) {
-            console.error('[Iframe] Critical error:', err);
-            this.notifyParent(document.body.scrollHeight || 1000);
+            console.error('[ViewportReplacer] 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 ViewportUnitsFixer {
+    iframe;
+    config;
+    replacer = null;
+    constructor(config) {
+        this.config = config;
+        this.iframe = config.iframe;
+        this.init();
+    }
+    async init() {
+        if (!this.iframe) {
+            console.error('[ViewportFixer] iframe not found');
+            this.config.onError?.(new Error('iframe not found'));
             return;
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => this.run());
+        }
+        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('[ViewportFixer] Cannot access iframe document');
+            this.config.onError?.(new Error('Cannot access iframe document'));
+            return;
+        }
+        try {
+            console.log('[ViewportFixer] Processing viewport units...');
+            // Tạo replacer instance với iframe và config
+            this.replacer = new ViewportUnitsReplacer(this.iframe, this.config);
+            // Chạy replacement
+            const result = await this.replacer.run();
+            console.log('[ViewportFixer] 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('[ViewportFixer] Failed to process:', error);
+            this.config.onError?.(error);
+        }
+    }
+    async recalculate() {
+        console.log('[ViewportFixer] Recalculating...');
+        await this.process();
+    }
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+        if (this.replacer) {
+            this.replacer.updateConfig(config);
+        }
+    }
+    destroy() {
+        this.replacer = null;
+        console.log('[ViewportFixer] Destroyed');
+    }
+}
+function initViewportFixer(config) {
+    const fixer = new ViewportUnitsFixer(config);
+    window.addEventListener('iframe-dimensions-applied', ((e) => {
+        const ev = e;
+        console.log('[ViewportFixer] Iframe dimensions finalized:', ev.detail);
+    }));
+    return fixer;
 }
-
-var viewportReplacer = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: ViewportUnitsReplacer
-});
 
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
@@ -2367,7 +2366,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);