@gemx-dev/heatmap-react 3.5.44 → 3.5.46

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

@@ -0,0 +1,160 @@
+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

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

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,91 @@
+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 {};
+};

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

@@ -0,0 +1,2 @@
+export * from './useScrollmapZones';
+export * from './useZonePositions';