@gemx-dev/heatmap-react 3.5.35 → 3.5.38

package/dist/esm/index.js

@@ -85,6 +85,14 @@ const useHeatmapControlStore = create()((set, get) => {
     };
 });
 
+const useHeatmapConfigStore = create()((set, get) => {
+    return {
+        mode: 'single',
+        setMode: (mode) => set({ mode }),
+        resetMode: () => set({ mode: 'single' }),
+    };
+});
+
 var IHeatmapType;
 (function (IHeatmapType) {
     IHeatmapType["Click"] = "click";
@@ -128,6 +136,8 @@ const useHeatmapInteractionStore = create()((set, get) => {
 
 const useHeatmapVizStore = create()((set, get) => {
     return {
+        isRenderViz: false,
+        setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
         vizRef: undefined,
         iframeHeight: 0,
@@ -137,6 +147,13 @@ const useHeatmapVizStore = create()((set, get) => {
     };
 });
 
+const useHeatmapLiveStore = create()((set, get) => {
+    return {
+        htmlContent: '',
+        setHtmlContent: (htmlContent) => set({ htmlContent }),
+    };
+});
+
 const useRegisterConfig = () => {
     const config = useHeatmapDataStore((state) => state.config);
     const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
@@ -436,6 +453,266 @@ 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}
+      new ${classInstantiateCode}()
+    })();
+    `;
+    return scriptCode;
+};
+class ViewportUnitsFixer {
+    iframe = null;
+    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 win = this.iframe.contentWindow;
+        const doc = this.iframe.contentDocument;
+        win.__viewportConfig = this.config;
+        const script = doc.createElement('script');
+        const codeInject = await getScriptInjectCode();
+        script.textContent = codeInject;
+        script.type = 'text/javascript';
+        script.id = 'viewport-replacer';
+        script.onload = () => console.log('[Parent] Viewport replacer module loaded');
+        script.onerror = () => {
+            this.config.onSuccess?.({
+                height: 1000,
+            });
+        };
+        doc.head.appendChild(script);
+    }
+    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 {
+    config;
+    regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    constructor() {
+        if (!window.__viewportConfig) {
+            throw new Error('[Iframe] Do not have viewport config');
+        }
+        this.config = window.__viewportConfig;
+        console.log('[Iframe] ViewportUnitsReplacer started with config:', this.config);
+        this.init();
+    }
+    px(value) {
+        return `${value.toFixed(2)}px`;
+    }
+    convert(value, unit) {
+        const num = parseFloat(value);
+        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,
+        };
+        return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
+    }
+    replaceInText(cssText) {
+        return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
+    }
+    processInlineStyles() {
+        let count = 0;
+        document.querySelectorAll('[style]').forEach((el) => {
+            const style = el.getAttribute('style');
+            if (style && this.regex.test(style)) {
+                el.setAttribute('style', this.replaceInText(style));
+                count++;
+            }
+        });
+        console.log(`[Iframe] Replaced ${count} inline style elements`);
+        return count;
+    }
+    processStyleTags() {
+        let count = 0;
+        document.querySelectorAll('style').forEach((tag) => {
+            const css = tag.textContent || '';
+            if (this.regex.test(css)) {
+                tag.textContent = this.replaceInText(css);
+                count++;
+            }
+        });
+        console.log(`[Iframe] Replaced ${count} <style> tags`);
+        return count;
+    }
+    processRule(rule) {
+        let count = 0;
+        if ('style' in rule && rule.style) {
+            const style = rule.style;
+            for (let i = 0; i < style.length; i++) {
+                const prop = style[i];
+                const value = style.getPropertyValue(prop);
+                if (value && this.regex.test(value)) {
+                    style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
+                    count++;
+                }
+            }
+        }
+        if ('cssRules' in rule) {
+            const rules = rule;
+            for (const r of Array.from(rules.cssRules || [])) {
+                count += this.processRule(r);
+            }
+        }
+        return count;
+    }
+    processStylesheets() {
+        let total = 0;
+        Array.from(document.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);
+                    return;
+                }
+                const rules = sheet.cssRules || sheet.rules;
+                if (!rules)
+                    return;
+                for (const rule of Array.from(rules)) {
+                    total += this.processRule(rule);
+                }
+            }
+            catch (e) {
+                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
+            }
+        });
+        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
+        return total;
+    }
+    async processLinkedStylesheets() {
+        const links = document.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);
+                continue;
+            }
+            try {
+                const res = await fetch(link.href);
+                let css = await res.text();
+                if (this.regex.test(css)) {
+                    css = this.replaceInText(css);
+                    const style = document.createElement('style');
+                    style.textContent = css;
+                    style.dataset.originalHref = link.href;
+                    link.parentNode?.insertBefore(style, link);
+                    link.remove();
+                    count++;
+                }
+            }
+            catch (e) {
+                console.warn('[Iframe] Cannot load CSS:', link.href, e);
+            }
+        }
+        console.log(`[Iframe] 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);
+    }
+    notifyParent(height) {
+        window.parent.postMessage({
+            type: 'IFRAME_HEIGHT_CALCULATED',
+            height,
+            width: document.body.scrollWidth,
+        }, '*');
+        console.log('[Iframe] Sent height to parent:', height);
+    }
+    async waitForResources() {
+        if ('fonts' in document) {
+            await document.fonts.ready;
+        }
+        const images = Array.from(document.images).filter((img) => !img.complete);
+        if (images.length > 0) {
+            await Promise.all(images.map((img) => new Promise((resolve) => {
+                img.onload = img.onerror = resolve;
+            })));
+        }
+    }
+    async run() {
+        try {
+            this.processInlineStyles();
+            this.processStyleTags();
+            this.processStylesheets();
+            await this.processLinkedStylesheets();
+            // await this.waitForResources();
+            requestAnimationFrame(() => {
+                const height = this.getFinalHeight();
+                this.notifyParent(height);
+            });
+        }
+        catch (err) {
+            console.error('[Iframe] Critical error:', err);
+            this.notifyParent(document.body.scrollHeight || 1000);
+        }
+    }
+    init() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.run());
+        }
+        else {
+            this.run();
+        }
+    }
+}
+
+var viewportReplacer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: ViewportUnitsReplacer
+});
+
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
         return;
@@ -691,24 +968,22 @@ const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
     const config = useHeatmapDataStore((state) => state.config);
     const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
+        setIsRenderViz(false);
         const visualizer = new Visualizer();
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
-        // iframe.contentDocument?.body.querySelectorAll('body>*').forEach((element) => {
-        //   console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
-        //   const isClosedEcomsendWidget = element.closest('#ecomsend-widget');
-        //   const isEcomsendWidget = element.querySelector('#ecomsend-widget');
-        //   const isRemove = !(isClosedEcomsendWidget || isEcomsendWidget);
-        //   if (isRemove) {
-        //     element.remove();
-        //   }
-        // });
+        reset(iframe, payloads, (height) => {
+            height && setIframeHeight(height);
+            setIsRenderViz(true);
+        });
         setVizRef(visualizer);
     }, []);
     useEffect(() => {
@@ -723,6 +998,50 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
+function sort(a, b) {
+    return a.time - b.time;
+}
+function findLastSizeOfDom(data) {
+    const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
+    const docSorted = firstDoc?.sort(sort);
+    const firstEvent = docSorted?.[0];
+    const docSize = {
+        width: firstEvent?.data.width,
+        height: firstEvent?.data.height,
+    };
+    const newData = JSON.parse(JSON.stringify(data));
+    const reversedData = newData.reverse();
+    const lastResizeEvent = reversedData.find((item) => !!item.resize);
+    const firstEventResize = lastResizeEvent?.resize?.[0];
+    const resize = {
+        width: firstEventResize?.data.width,
+        height: firstEventResize?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width ?? docSize.width,
+            height: resize.height ?? docSize.height,
+        },
+    };
+}
+function reset(iframe, payloads, onSuccess) {
+    const { size } = findLastSizeOfDom(payloads);
+    const docWidth = size.width ?? 0;
+    const docHeight = size.height ?? 0;
+    const viewportFixer = initViewportFixer({
+        targetWidth: docWidth,
+        targetHeight: docHeight,
+        iframe: iframe,
+        onSuccess: (data) => {
+            onSuccess(data.height);
+            iframe.height = `${data.height}px`;
+        },
+    });
+    viewportFixer.recalculate();
+    return iframe;
+}
 
 function isMobileDevice(userAgent) {
     if (!userAgent)
@@ -894,24 +1213,24 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = (props) => {
-    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
-    const { iframeRef } = props;
+const useContentDimensions = ({ iframeRef, }) => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const contentWidth = config?.width ?? 0;
     useEffect(() => {
         if (!contentWidth)
             return;
         if (!iframeRef.current)
             return;
-        iframeRef.current.width = `${contentWidth}px`;
+        // iframeRef.current.width = `${contentWidth}px`;
     }, [contentWidth, iframeRef]);
     return { contentWidth };
 };
 
-// Hook 3: Iframe Height Observer
 const useIframeHeight = (props) => {
-    const { iframeRef, contentWidth } = props;
+    const { iframeRef } = props;
     const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
@@ -933,17 +1252,9 @@ const useIframeHeight = (props) => {
             console.warn('Cannot measure iframe content:', error);
         }
     }, [iframeRef, setIframeHeight]);
-    useEffect(() => {
-        if (contentWidth > 0) {
-            const timeoutId = setTimeout(() => {
-                updateIframeHeight();
-            }, 100);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [contentWidth]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe)
+        if (!iframe || !isRenderViz)
             return;
         const setupObservers = () => {
             try {
@@ -995,7 +1306,7 @@ const useIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, updateIframeHeight]);
+    }, [iframeRef, isRenderViz, updateIframeHeight]);
     return { iframeHeight };
 };
 
@@ -1025,7 +1336,6 @@ const useScrollSync = ({ iframeRef }) => {
             if (iframeWindow && iframeDocument) {
                 const iframeScrollTop = scrollTop / widthScale;
                 iframe.style.top = `${iframeScrollTop}px`;
-                // iframeWindow.scrollTo({ top: iframeScrollTop, behavior: 'smooth' });
             }
         }
         catch (error) {
@@ -1036,13 +1346,14 @@ const useScrollSync = ({ iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
+    // const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const { wrapperRef, iframeRef, visualRef } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    const { iframeHeight } = useIframeHeight({ iframeRef, contentWidth });
+    const { iframeHeight } = useIframeHeight({ iframeRef });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
@@ -1068,7 +1379,8 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const style = props.style || {};
     const gap = props.gap || 0;
     const height = props.height || 'auto';
-    const zIndex = props.zIndex || 0;
+    const isZIndexDefined = typeof props.zIndex !== undefined;
+    const zIndex = props.zIndex;
     const backgroundColor = props.backgroundColor || 'transparent';
     const styleGap = useMemo(() => {
         switch (flexDirection) {
@@ -1091,8 +1403,8 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
         justifyContent,
         alignItems,
         height,
-        zIndex,
         backgroundColor,
+        ...(isZIndexDefined ? { zIndex } : {}),
         ...styleGap,
         ...style,
     };
@@ -1101,9 +1413,10 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
+    const TopBar = controls.TopBar;
     return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-        }, children: controls.TopBar ?? null }));
+        }, children: TopBar && jsx(TopBar, {}) }));
 };
 
 const useClickmap = () => {
@@ -1414,11 +1727,12 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
 const VizDomContainer = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     if (isRendering)
         return controls.VizLoading ?? null;
-    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: jsxs(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
                 minWidth: '394px',
-            }, children: jsx(VizDomRenderer, {}) }) }));
+            }, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && (jsxs("div", { className: "gx-hm-loading", children: [jsx("div", { className: "gx-hm-loading--spinner" }), jsx("p", { className: "gx-hm-loading--text", children: "Loading visualization..." })] }))] }) }));
 };
 
 const ContentMetricBar = () => {
@@ -1431,6 +1745,7 @@ const ContentMetricBar = () => {
 const ContentToolbar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     return (jsx("div", { id: "gx-hm-content-toolbar", style: {
+            zIndex: 2,
             position: 'absolute',
             bottom: 0,
             left: '8px',
@@ -1451,6 +1766,7 @@ const LeftSidebar = () => {
     return (jsx("div", { className: "gx-hm-sidebar", style: {
             height: '100%',
             display: 'flex',
+            zIndex: 1,
             ...(isHideSidebar
                 ? {
                     width: '0',
@@ -1509,4 +1825,4 @@ var ErrorType;
     ErrorType["DataError"] = "DataError";
 })(ErrorType || (ErrorType = {}));
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore, useHeatmapInteractionStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };