@gemx-dev/heatmap-react 3.5.46 → 3.5.48

package/src/hooks/viz-render/useReplayRender.ts

@@ -1,160 +0,0 @@
-import { Data } from '@gemx-dev/clarity-decode';
-import { Visualizer } from '@gemx-dev/clarity-visualize';
-import { useCallback, useEffect, useRef } from 'react';
-import { useHeatmapConfigStore, useHeatmapDataStore } from '../../stores';
-import { DecodedEvents, DecodedPayload } from '../../types';
-import { isMobileDevice } from '../../utils/device';
-import { sortEvents } from '../../utils/sort';
-
-interface IUseReplayRenderResult {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-  isPlaying: boolean;
-  play: () => void;
-  pause: () => void;
-}
-
-export const useReplayRender = (): IUseReplayRenderResult => {
-  const data = useHeatmapDataStore((state) => state.data);
-  const setWidth = useHeatmapConfigStore((state) => state.setWidth);
-
-  const visualizerRef = useRef<Visualizer | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const eventsRef = useRef<DecodedEvents>([]);
-  const animationFrameRef = useRef<number | null>(null);
-  const isPlayingRef = useRef<boolean>(false);
-
-  // Initialize visualizer for replay
-  const initializeVisualizer = useCallback(
-    (envelope: Data.Envelope, userAgent: string) => {
-      const iframe = iframeRef.current;
-      if (!iframe?.contentWindow) return null;
-
-      // Clear previous events
-      eventsRef.current = [];
-
-      const visualizer = new Visualizer();
-      const mobile = isMobileDevice(userAgent);
-
-      visualizer.setup(iframe.contentWindow, {
-        version: envelope.version,
-        onresize: (width: number) => {
-          setWidth(width);
-        },
-        mobile,
-        vNext: true,
-        locale: 'en-us',
-      });
-
-      return visualizer;
-    },
-    [setWidth],
-  );
-
-  // Animation loop for replay
-  const replayLoop = useCallback(() => {
-    if (!isPlayingRef.current) return;
-
-    const events = eventsRef.current;
-    const visualizer = visualizerRef.current;
-
-    if (!visualizer || events.length === 0) {
-      animationFrameRef.current = requestAnimationFrame(replayLoop);
-      return;
-    }
-
-    const event = events[0];
-    const end = event.time + 16; // 60FPS => 16ms per frame
-    let index = 0;
-
-    // Get events within current frame
-    while (events[index] && events[index].time < end) {
-      index++;
-    }
-
-    // Render events for this frame
-    if (index > 0) {
-      visualizer.render(events.splice(0, index) as any);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(replayLoop);
-  }, []);
-
-  // Start replay
-  const startReplay = useCallback(
-    async (payloads: DecodedPayload[]) => {
-      if (!payloads || payloads.length === 0) return;
-
-      let visualizer = visualizerRef.current;
-
-      for (const decoded of payloads) {
-        // Initialize on first sequence
-        if (decoded.envelope.sequence === 1) {
-          const userAgent = (decoded.dimension?.[0]?.data[0]?.[0] as string) || '';
-          visualizer = initializeVisualizer(decoded.envelope as any, userAgent);
-
-          if (!visualizer) return;
-          visualizerRef.current = visualizer;
-        }
-
-        if (!visualizer) continue;
-
-        // Merge events and DOM
-        const merged = visualizer.merge([decoded]);
-        eventsRef.current = eventsRef.current.concat(merged.events).sort(sortEvents);
-        visualizer.dom(merged.dom);
-      }
-
-      // Render HTML
-      if (visualizer && iframeRef.current?.contentWindow) {
-        await visualizer.html(payloads, iframeRef.current.contentWindow);
-      }
-
-      // Auto-start replay
-      isPlayingRef.current = true;
-      animationFrameRef.current = requestAnimationFrame(replayLoop);
-    },
-    [initializeVisualizer, replayLoop],
-  );
-
-  // Play control
-  const play = useCallback(() => {
-    if (!isPlayingRef.current) {
-      isPlayingRef.current = true;
-      animationFrameRef.current = requestAnimationFrame(replayLoop);
-    }
-  }, [replayLoop]);
-
-  // Pause control
-  const pause = useCallback(() => {
-    isPlayingRef.current = false;
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
-    }
-  }, []);
-
-  // Main effect: Start replay when data changes
-  useEffect(() => {
-    if (!data || data.length === 0) return;
-
-    startReplay(data);
-
-    // Cleanup
-    return () => {
-      isPlayingRef.current = false;
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-      eventsRef.current = [];
-      visualizerRef.current = null;
-    };
-  }, [data, startReplay]);
-
-  return {
-    iframeRef,
-    isPlaying: isPlayingRef.current,
-    play,
-    pause,
-  };
-};

package/src/hooks/viz-scale/index.ts

@@ -1,2 +0,0 @@
-export * from './useHeatmapScale';
-export * from './useWrapperRefHeight';

package/src/hooks/viz-scale/useContainerDimensions.ts

@@ -1,48 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface IUseContainerDimensionsProps {
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-}
-
-interface IUseContainerDimensionsResult {
-  containerWidth: number;
-  containerHeight: number;
-}
-
-export const useContainerDimensions = (
-  props: IUseContainerDimensionsProps,
-): IUseContainerDimensionsResult => {
-  const { wrapperRef } = props;
-
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
-
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-
-  const updateDimensions = useCallback(() => {
-    const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
-    if (scrollContainer) {
-      setContainerWidth(scrollContainer.clientWidth);
-      setContainerHeight(scrollContainer.clientHeight);
-    }
-  }, [wrapperRef]);
-
-  useEffect(() => {
-    const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
-    if (!scrollContainer || typeof window.ResizeObserver === 'undefined') {
-      return;
-    }
-
-    resizeObserverRef.current = new ResizeObserver(updateDimensions);
-    resizeObserverRef.current.observe(scrollContainer);
-    updateDimensions();
-
-    return () => {
-      if (resizeObserverRef.current && scrollContainer) {
-        resizeObserverRef.current.unobserve(scrollContainer);
-      }
-    };
-  }, [wrapperRef, updateDimensions]);
-
-  return { containerWidth, containerHeight };
-};

package/src/hooks/viz-scale/useContentDimensions.ts

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { useHeatmapConfigStore } from '../../stores';
-
-interface IUseContentDimensionsProps {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-interface IUseContentDimensionsResult {
-  contentWidth: number;
-}
-
-export const useContentDimensions = ({
-  iframeRef,
-}: IUseContentDimensionsProps): IUseContentDimensionsResult => {
-  const contentWidth = useHeatmapConfigStore((state) => state.width);
-
-  useEffect(() => {
-    if (!contentWidth) return;
-    if (!iframeRef.current) return;
-
-    // iframeRef.current.width = `${contentWidth}px`;
-  }, [contentWidth, iframeRef]);
-
-  return { contentWidth };
-};

package/src/hooks/viz-scale/useHeatmapScale.ts

@@ -1,52 +0,0 @@
-import { useContainerDimensions } from './useContainerDimensions';
-import { useContentDimensions } from './useContentDimensions';
-import { useObserveIframeHeight } from './useObserveIframeHeight';
-import { useScaleCalculation } from './useScaleCalculation';
-import { useScrollSync } from './useScrollSync';
-
-interface IHeatmapScaleProps {
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-  visualRef: React.RefObject<HTMLDivElement | null>;
-  iframeHeight: number;
-
-  setIframeHeight?: (height: number) => void;
-}
-
-interface IUseHeatmapScaleResult {
-  containerWidth: number;
-  containerHeight: number;
-  scaledWidth: number;
-  scaledHeight: number;
-  handleScroll: (scrollTop: number) => void;
-}
-
-export const useHeatmapScale = (props: IHeatmapScaleProps): IUseHeatmapScaleResult => {
-  const { wrapperRef, iframeRef, iframeHeight, setIframeHeight } = 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)
-  useObserveIframeHeight({ iframeRef, setIframeHeight });
-
-  // 4. Calculate scale
-  const { scale } = useScaleCalculation({ containerWidth, contentWidth });
-
-  // 5. Setup scroll sync
-  const { handleScroll } = useScrollSync({ iframeRef });
-
-  const scaledHeight = iframeHeight * scale;
-  const scaledWidth = contentWidth * scale;
-
-  return {
-    containerWidth,
-    containerHeight,
-    scaledWidth,
-    scaledHeight,
-    handleScroll,
-  };
-};

package/src/hooks/viz-scale/useObserveIframeHeight.ts

@@ -1,162 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useHeatmapVizStore } from '../../stores';
-
-interface IUseIframeHeightProps {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-  setIframeHeight?: (height: number) => void;
-}
-
-interface IUseIframeHeightResult {
-  iframeHeight?: number;
-}
-
-export const useObserveIframeHeight = (props: IUseIframeHeightProps): IUseIframeHeightResult => {
-  const { iframeRef, setIframeHeight } = props;
-
-  const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
-
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  const mutationObserverRef = useRef<MutationObserver | null>(null);
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const lastHeightRef = useRef<number>(0);
-  const animationFrameRef = useRef<number | null>(null);
-
-  const updateIframeHeight = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe || !setIframeHeight) return;
-
-    try {
-      const iframeDocument = iframe.contentDocument;
-      const iframeBody = iframeDocument?.body;
-      const iframeDocumentElement = iframeDocument?.documentElement;
-      if (!iframeBody || !iframeDocumentElement) return;
-
-      iframe.style.height = 'auto';
-
-      requestAnimationFrame(() => {
-        const bodyHeight = Math.max(
-          iframeBody.scrollHeight,
-          iframeBody.offsetHeight,
-          iframeBody.clientHeight,
-        );
-
-        const documentHeight = Math.max(
-          iframeDocumentElement.scrollHeight,
-          iframeDocumentElement.offsetHeight,
-          iframeDocumentElement.clientHeight,
-        );
-
-        const actualHeight = Math.max(bodyHeight, documentHeight);
-        if (actualHeight > 0) {
-          lastHeightRef.current = actualHeight;
-          iframe.height = `${actualHeight}px`;
-          iframe.style.height = `${actualHeight}px`;
-          setIframeHeight(actualHeight);
-        }
-      });
-    } catch (error) {
-      console.warn('Cannot measure iframe content:', error);
-    }
-  }, [iframeRef, setIframeHeight]);
-
-  const debouncedUpdate = useCallback(() => {
-    // Cancel pending updates
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-
-    debounceTimerRef.current = setTimeout(() => {
-      animationFrameRef.current = requestAnimationFrame(() => {
-        updateIframeHeight();
-      });
-    }, 50);
-  }, [updateIframeHeight]);
-
-  // Immediate update không debounce (cho ResizeObserver)
-  const immediateUpdate = useCallback(() => {
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(() => {
-      updateIframeHeight();
-    });
-  }, [updateIframeHeight]);
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe || !isRenderViz) return;
-
-    const setupObservers = () => {
-      try {
-        const iframeDocument = iframe.contentDocument;
-        const iframeBody = iframeDocument?.body;
-        if (!iframeBody) return;
-
-        // Cleanup existing observers
-        if (resizeObserverRef.current) {
-          resizeObserverRef.current.disconnect();
-        }
-        if (mutationObserverRef.current) {
-          mutationObserverRef.current.disconnect();
-        }
-
-        if (typeof window.ResizeObserver !== 'undefined') {
-          resizeObserverRef.current = new ResizeObserver(immediateUpdate);
-          resizeObserverRef.current.observe(iframeBody);
-
-          const iframeDocumentElement = iframeDocument?.documentElement;
-          if (iframeDocumentElement) {
-            resizeObserverRef.current.observe(iframeDocumentElement);
-          }
-        }
-
-        if (typeof window.MutationObserver !== 'undefined') {
-          mutationObserverRef.current = new MutationObserver(immediateUpdate);
-          mutationObserverRef.current.observe(iframeBody, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['style', 'class'],
-            characterData: false,
-          });
-        }
-
-        updateIframeHeight();
-      } catch (error) {
-        console.warn('Cannot access iframe content:', error);
-      }
-    };
-
-    if (iframe.contentDocument?.readyState === 'complete') {
-      setupObservers();
-    } else {
-      iframe.addEventListener('load', setupObservers, { once: true });
-    }
-
-    return () => {
-      // Cleanup observers
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-      }
-      if (mutationObserverRef.current) {
-        mutationObserverRef.current.disconnect();
-      }
-
-      // Cleanup timers
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-
-      iframe.removeEventListener('load', setupObservers);
-    };
-  }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
-
-  return {};
-};

package/src/hooks/viz-scale/useScaleCalculation.ts

@@ -1,31 +0,0 @@
-import { useEffect } from 'react';
-import { HEATMAP_CONFIG } from '../../configs';
-import { useHeatmapVizStore } from '../../stores';
-
-interface IUseScaleCalculationProps {
-  containerWidth: number;
-  contentWidth: number;
-}
-
-interface IUseScaleCalculationResult {
-  scale: number;
-}
-
-export const useScaleCalculation = (
-  props: IUseScaleCalculationProps,
-): IUseScaleCalculationResult => {
-  const scale = useHeatmapVizStore((state) => state.scale);
-  const setScale = useHeatmapVizStore((state) => state.setScale);
-
-  const { containerWidth, contentWidth } = props;
-
-  useEffect(() => {
-    if (containerWidth > 0 && contentWidth > 0) {
-      const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
-      const calculatedScale = Math.min(availableWidth / contentWidth, 1);
-      setScale(calculatedScale);
-    }
-  }, [containerWidth, contentWidth]);
-
-  return { scale };
-};

package/src/hooks/viz-scale/useScrollSync.ts

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-import { useHeatmapVizStore } from '../../stores';
-
-interface IUseScrollSyncProps {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-interface IUseScrollSyncResult {
-  handleScroll: (scrollTop: number) => void;
-}
-
-export const useScrollSync = ({ iframeRef }: IUseScrollSyncProps): IUseScrollSyncResult => {
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  const handleScroll = useCallback(
-    (scrollTop: number) => {
-      const iframe = iframeRef.current;
-      if (!iframe || widthScale <= 0) return;
-
-      try {
-        const iframeWindow = iframe.contentWindow;
-        const iframeDocument = iframe.contentDocument;
-
-        if (iframeWindow && iframeDocument) {
-          const iframeScrollTop = scrollTop / widthScale;
-          iframe.style.top = `${iframeScrollTop}px`;
-        }
-      } catch (error) {
-        console.warn('Cannot sync scroll to iframe:', error);
-      }
-    },
-    [iframeRef, widthScale],
-  );
-
-  return { handleScroll };
-};

package/src/hooks/viz-scale/useWrapperRefHeight.ts

@@ -1,91 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useHeatmapVizStore } from '../../stores';
-
-interface IUseWrapperRefHeightProps {
-  isActive: boolean;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  setWrapperHeight?: (height: number) => void;
-}
-
-interface IUseWrapperRefHeightResult {
-  wrapperHeight?: number;
-}
-
-export const useWrapperRefHeight = (
-  props: IUseWrapperRefHeightProps,
-): IUseWrapperRefHeightResult => {
-  const { isActive, wrapperRef, setWrapperHeight } = props;
-
-  const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
-
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  const mutationObserverRef = useRef<MutationObserver | null>(null);
-
-  const updateWrapperHeight = useCallback(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-
-    try {
-      const wrapperHeight = wrapper.offsetHeight;
-      if (wrapperHeight > 0) {
-        setWrapperHeight?.(wrapperHeight);
-      }
-    } catch (error) {
-      console.warn('Cannot measure iframe content:', error);
-    }
-  }, [wrapperRef, setWrapperHeight]);
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper || !isRenderViz) return;
-
-    const setupObservers = () => {
-      try {
-        // Cleanup existing observers
-        if (resizeObserverRef.current) {
-          resizeObserverRef.current.disconnect();
-        }
-        if (mutationObserverRef.current) {
-          mutationObserverRef.current.disconnect();
-        }
-
-        // ResizeObserver for size changes
-        if (typeof window.ResizeObserver !== 'undefined') {
-          resizeObserverRef.current = new ResizeObserver(updateWrapperHeight);
-          resizeObserverRef.current.observe(wrapper);
-        }
-
-        // MutationObserver for DOM changes
-        if (typeof window.MutationObserver !== 'undefined') {
-          mutationObserverRef.current = new MutationObserver(updateWrapperHeight);
-          mutationObserverRef.current.observe(wrapper, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            characterData: true,
-          });
-        }
-
-        // Initial measurement
-        updateWrapperHeight();
-      } catch (error) {
-        console.warn('Cannot access wrapper content:', error);
-      }
-    };
-
-    if (isActive) {
-      setupObservers();
-    }
-
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-      }
-      if (mutationObserverRef.current) {
-        mutationObserverRef.current.disconnect();
-      }
-    };
-  }, [wrapperRef, isRenderViz, updateWrapperHeight, isActive]);
-
-  return {};
-};