@gemx-dev/heatmap-react 3.5.46 → 3.5.48

package/src/hooks/viz-elements/useHeatmapMouseHandler.ts

@@ -1,255 +0,0 @@
-import { useCallback } from 'react';
-import { IHeatmapInfo } from '../../types';
-
-// ===================== TYPES =====================
-interface BoundingBox {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-interface ElementData {
-  totalclicks: number;
-  selector: string;
-}
-
-interface HoveredElementInfo extends BoundingBox {
-  hash: string;
-  clicks: number;
-  rank: number;
-  selector: string;
-}
-
-interface UseHeatmapMouseHandlerProps {
-  heatmapWrapperRef: React.RefObject<HTMLElement>;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  parentRef: React.RefObject<HTMLDivElement>;
-  heatmapInfo: IHeatmapInfo;
-  scaleRatio: number; // zoom/scale ratio
-  onElementHover: (info: HoveredElementInfo) => void;
-}
-
-// ===================== CONSTANTS =====================
-const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha'; // Hoặc attribute bạn đang dùng
-
-// ===================== UTILITY FUNCTIONS =====================
-
-/**
- * Lấy bounding box tuyệt đối của element (relative to document)
- */
-export function getBoundingBox(element: HTMLElement): BoundingBox | null {
-  if (typeof element.getBoundingClientRect !== 'function') {
-    return null;
-  }
-
-  const rect = element.getBoundingClientRect();
-
-  // Lấy scroll offset (hỗ trợ cả cách cũ và mới)
-  const scrollLeft =
-    'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
-
-  const scrollTop =
-    'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
-
-  // Kiểm tra element có kích thước hợp lệ
-  if (!rect || (rect.height === 0 && rect.width === 0)) {
-    return null;
-  }
-
-  // Trả về vị trí tuyệt đối
-  return {
-    left: Math.floor(rect.left + scrollLeft),
-    top: Math.floor(rect.top + scrollTop),
-    width: Math.floor(rect.width),
-    height: Math.floor(rect.height),
-  };
-}
-
-/**
- * Lấy tất cả elements tại tọa độ (x, y), hỗ trợ Shadow DOM
- */
-export function getElementsAtPoint(
-  documentOrShadowRoot: Document | ShadowRoot,
-  x: number,
-  y: number,
-  filterFunction?: (element: Element) => boolean,
-  visitedShadowRoots: Set<ShadowRoot> = new Set(),
-): Element[] {
-  // Lấy tất cả elements tại vị trí
-  const elementsAtPoint = documentOrShadowRoot.elementsFromPoint(x, y);
-
-  if (!filterFunction) {
-    return elementsAtPoint;
-  }
-
-  // Tìm element đầu tiên match với filter
-  const matchedElement = elementsAtPoint.find(filterFunction);
-
-  // Nếu element có Shadow DOM và chưa visit -> đệ quy vào
-  if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
-    visitedShadowRoots.add(matchedElement.shadowRoot);
-
-    return getElementsAtPoint(matchedElement.shadowRoot, x, y, filterFunction, visitedShadowRoots);
-  }
-
-  return elementsAtPoint;
-}
-
-// ===================== MAIN HOOK =====================
-
-export function useHeatmapMouseHandler(props: UseHeatmapMouseHandlerProps) {
-  const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } =
-    props;
-
-  const handleMouseMove = useCallback(
-    (event: MouseEvent) => {
-      // Kiểm tra tất cả refs và data cần thiết
-      if (
-        !heatmapWrapperRef?.current ||
-        !iframeRef?.current ||
-        !iframeRef.current.contentDocument ||
-        !heatmapInfo?.elementMapInfo ||
-        !parentRef?.current
-      ) {
-        return;
-      }
-
-      try {
-        // Tính toán scroll position (đã scale)
-        const scrollTop = parentRef.current.scrollTop / scaleRatio;
-        console.log(`🚀 🐥 ~ useHeatmapMouseHandler ~ scrollTop:`, scrollTop);
-
-        // Lấy vị trí của heatmap wrapper
-        const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
-
-        // Tính toán tọa độ chuột trong iframe (đã scale)
-        const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
-        const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
-
-        // Tìm elements tại vị trí chuột
-        const elementsAtPoint = getElementsAtPoint(
-          iframeRef.current.contentDocument,
-          Math.round(mouseX),
-          Math.round(mouseY),
-          // Filter: chỉ lấy elements có heatmap attribute
-          (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
-        );
-
-        if (!elementsAtPoint || elementsAtPoint.length === 0) {
-          return;
-        }
-
-        // Duyệt qua các elements tìm được
-        for (let i = 0; i < elementsAtPoint.length; i++) {
-          const element = elementsAtPoint[i] as HTMLElement;
-
-          // Lấy hash/id của element
-          const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
-
-          // Kiểm tra element có data trong heatmapInfo không
-          if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
-            const elementData = heatmapInfo.elementMapInfo[elementHash];
-
-            // Lấy bounding box của element
-            const boundingBox = getBoundingBox(element);
-
-            if (boundingBox) {
-              // Tính rank của element
-              const rank =
-                Array.isArray(heatmapInfo.sortedElements) && elementData
-                  ? heatmapInfo.sortedElements.indexOf(elementData) + 1
-                  : NaN;
-
-              // Callback với thông tin element
-              onElementHover({
-                ...boundingBox,
-
-                // Giới hạn width không vượt quá width của heatmap
-                width: Math.min(boundingBox.width, heatmapInfo.width || 0),
-
-                // Adjust top position với scroll
-                top: boundingBox.top + scrollTop,
-
-                // Metadata
-                hash: elementHash,
-                clicks: elementData.totalclicks,
-                rank: rank,
-                selector: elementData.selector || '',
-              });
-
-              // Dừng loop khi tìm thấy element hợp lệ đầu tiên
-              break;
-            }
-          }
-        }
-      } catch (error) {
-        console.warn('Error handling mouse move on heatmap:', error);
-      }
-    },
-    [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover],
-  );
-
-  return { handleMouseMove };
-}
-
-// ===================== EXAMPLE USAGE =====================
-/*
-import { useRef, useState } from 'react';
-
-function HeatmapComponent() {
-  const heatmapWrapperRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const [hoveredElement, setHoveredElement] = useState<HoveredElementInfo | null>(null);
-
-  const heatmapInfo = {
-    width: 1920,
-    elementMapInfo: {
-      'hash123': {
-        totalclicks: 45,
-        selector: 'button.submit'
-      }
-    },
-    sortedElements: [...]
-  };
-
-  const { handleMouseMove } = useHeatmapMouseHandler({
-    heatmapWrapperRef,
-    iframeRef,
-    parentRef,
-    heatmapInfo,
-    scaleRatio: 0.8, // 80% zoom
-    onElementHover: (info) => {
-      setHoveredElement(info);
-      console.log('Hovered element:', info);
-    }
-  });
-
-  return (
-    <div ref={parentRef}>
-      <div
-        ref={heatmapWrapperRef}
-        onMouseMove={handleMouseMove}
-      >
-        <iframe ref={iframeRef} />
-
-        {hoveredElement && (
-          <div className="tooltip" style={{
-            position: 'absolute',
-            left: hoveredElement.left,
-            top: hoveredElement.top
-          }}>
-            Clicks: {hoveredElement.clicks}
-            <br />
-            Rank: #{hoveredElement.rank}
-            <br />
-            Selector: {hoveredElement.selector}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-*/

package/src/hooks/viz-elements/useHoveredElement.ts

@@ -1,170 +0,0 @@
-import { useCallback } from 'react';
-import { buildElementInfo, getElementAtPoint, getElementHash } from '../../helpers';
-import { useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapVizStore } from '../../stores';
-import { IHeatmapInfo } from '../../types';
-import { debounce } from '../../utils/debounce';
-import { getBoundingBox, getElementsAtPoint } from './useHeatmapMouseHandler';
-
-interface Params {
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  getRect: (el?: any) => any;
-}
-export const useHoveredElement = ({ iframeRef, getRect }: Params) => {
-  const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
-  const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
-  const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-
-  const reset = useCallback(() => {
-    setHoveredElement(null);
-  }, [setHoveredElement]);
-  const handleMouseLeave = useCallback(() => {
-    reset();
-  }, [reset]);
-
-  const getHashFromEvent = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (!heatmapInfo || !isIframeReady(iframeRef, heatmapInfo)) {
-        reset();
-        return;
-      }
-
-      const iframe = iframeRef.current!;
-      const doc = iframe.contentDocument!;
-      const iframeRect = iframe.getBoundingClientRect();
-      const { x, y } = convertViewportToIframeCoords(
-        event.clientX,
-        event.clientY,
-        iframeRect,
-        widthScale,
-      );
-
-      const targetElement = findTargetElement(doc, x, y, heatmapInfo);
-      if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
-        reset();
-        return;
-      }
-
-      const hash = getElementHash(targetElement);
-      if (!!hash) return hash;
-
-      reset();
-      return;
-    },
-    [heatmapInfo, iframeRef, getRect, widthScale, reset],
-  );
-
-  const handleMouseMove = useCallback(
-    debounce((event: React.MouseEvent<HTMLDivElement>) => {
-      if (!heatmapInfo) {
-        reset();
-        return;
-      }
-
-      const hash = getHashFromEvent(event);
-      if (!hash) {
-        reset();
-        return;
-      }
-
-      const selector = heatmapInfo?.elementMapInfo?.[hash];
-      const rect = getRect({ hash, selector });
-      const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
-      if (!elementInfo) {
-        reset();
-        return;
-      }
-
-      setHoveredElement(elementInfo);
-    }, 16),
-    [heatmapInfo, getRect, reset, getHashFromEvent],
-  );
-
-  const handleClick = useCallback(() => {
-    if (!hoveredElement?.hash) return;
-
-    onSelect(hoveredElement.hash);
-  }, [hoveredElement?.hash]);
-
-  return {
-    hoveredElement,
-    handleMouseMove,
-    handleMouseLeave,
-    handleClick,
-  };
-};
-
-export const convertViewportToIframeCoords = (
-  clientX: number,
-  clientY: number,
-  iframeRect: DOMRect,
-  scale: number,
-): { x: number; y: number } => {
-  let x = clientX - iframeRect.left;
-  let y = clientY - iframeRect.top;
-
-  if (scale !== 1) {
-    x /= scale;
-    y /= scale;
-  }
-
-  return { x, y };
-};
-
-const findTargetElement = (
-  doc: Document,
-  x: number,
-  y: number,
-  heatmapInfo: IHeatmapInfo,
-): HTMLElement | null => {
-  const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
-  const elementsAtPoint = getElementsAtPoint(
-    doc,
-    Math.round(x),
-    Math.round(y),
-    (element: Element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
-  );
-
-  let dataElement = null;
-  for (let i = 0; i < elementsAtPoint.length; i++) {
-    const element = elementsAtPoint[i] as HTMLElement;
-    const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
-    if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
-      const elementData = heatmapInfo.elementMapInfo[elementHash];
-      const boundingBox = getBoundingBox(element);
-
-      if (boundingBox) {
-        dataElement = element;
-        break;
-      }
-    }
-  }
-  if (!!dataElement) {
-    return dataElement;
-  }
-
-  let targetElement = getElementAtPoint(doc, x, y);
-
-  if (!targetElement) {
-    targetElement = doc.elementFromPoint(x, y) as HTMLElement | null;
-  }
-
-  return targetElement;
-};
-
-const isIframeReady = (
-  iframeRef: React.RefObject<HTMLIFrameElement>,
-  heatmapInfo?: IHeatmapInfo,
-): boolean => {
-  return !!(iframeRef.current?.contentDocument && heatmapInfo?.elementMapInfo);
-};
-
-const isValidElement = (element: HTMLElement | null, heatmapInfo?: IHeatmapInfo): boolean => {
-  if (!element) return false;
-
-  const hash = getElementHash(element);
-  if (!hash) return false;
-
-  return !!heatmapInfo?.elementMapInfo?.[hash];
-};

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

@@ -1 +0,0 @@
-export * from './useVizLiveRender';

package/src/hooks/viz-live/useVizLiveIframeMsg.ts

@@ -1,88 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { decodePayloads } from '../../helpers';
-import { useHeatmapLiveStore } from '../../stores';
-
-export enum MessageType {
-  GX_DOM_TRACKING_PAYLOAD = 'GX_DOM_TRACKING_PAYLOAD',
-  CLARITY_READY = 'CLARITY_READY',
-}
-
-export interface ClarityMessage {
-  type: MessageType;
-  payload?: any;
-  timestamp?: number;
-}
-
-interface UseIframeMessageOptions {
-  trustedOrigins?: string[];
-  onMessage?: (message: ClarityMessage) => void;
-}
-
-export function useVizLiveIframeMsg(options: UseIframeMessageOptions = {}) {
-  const { trustedOrigins = [], onMessage } = options;
-
-  const addPayload = useHeatmapLiveStore((state) => state.addPayload);
-
-  const [isReady, setIsReady] = useState(false);
-
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  const isValidOrigin = useCallback(
-    (origin: string) => {
-      if (trustedOrigins.length === 0) return true;
-      return trustedOrigins.includes(origin);
-    },
-    [trustedOrigins],
-  );
-
-  const handleMessage = useCallback(
-    (event: MessageEvent<ClarityMessage>) => {
-      if (!isValidOrigin(event.origin)) {
-        console.warn('Message from untrusted origin:', event.origin);
-        return;
-      }
-
-      if (!event.data || typeof event.data !== 'object' || !event.data.type) {
-        return;
-      }
-
-      const message = event.data;
-
-      if (!Object.values(MessageType).includes(message.type)) {
-        return;
-      }
-
-      if (onMessage) {
-        onMessage(message);
-      }
-
-      switch (message.type) {
-        case MessageType.GX_DOM_TRACKING_PAYLOAD:
-          if (message.payload) {
-            const data = decodePayloads(message.payload);
-            if (data) {
-              addPayload(data);
-            }
-          }
-          break;
-
-        case MessageType.CLARITY_READY:
-          setIsReady(true);
-          break;
-      }
-    },
-    [isValidOrigin, onMessage],
-  );
-
-  useEffect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, [handleMessage]);
-
-  return {
-    iframeRef,
-    isReady,
-  };
-}

package/src/hooks/viz-live/useVizLiveRender.ts

@@ -1,67 +0,0 @@
-import { useEffect } from 'react';
-import { initIframeHelperFixer } from '../../helpers';
-import { useHeatmapConfigStore, useHeatmapLiveStore, useHeatmapVizStore } from '../../stores';
-import { useVizLiveIframeMsg } from './useVizLiveIframeMsg';
-
-export function useVizLiveRender() {
-  const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-  const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
-  const contentWidth = useHeatmapConfigStore((state) => state.width);
-  const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-  const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-
-  const { iframeRef, isReady } = useVizLiveIframeMsg();
-
-  useEffect(() => {
-    if (!htmlContent || !iframeRef.current) return;
-
-    const iframe = iframeRef.current;
-    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
-
-    if (iframeDoc) {
-      iframeDoc.open();
-      iframeDoc.writeln(htmlContent);
-      iframeDoc.close();
-    }
-  }, [htmlContent]);
-
-  useEffect(() => {
-    if (!isReady) return;
-    if (!iframeRef.current) return;
-
-    const iframe = iframeRef.current;
-    if (!iframe || !htmlContent) return;
-
-    setIsRenderViz(false);
-    reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
-      height && setIframeHeight(height);
-      setIsRenderViz(true);
-    });
-  }, [isReady, contentWidth, wrapperHeight]);
-
-  return {
-    iframeRef,
-  };
-}
-
-function reset(
-  iframe: HTMLIFrameElement,
-  rect: {
-    width: number;
-    height: number;
-  },
-  onSuccess: (height: number) => void,
-) {
-  const fixer = initIframeHelperFixer({
-    targetWidth: rect.width,
-    targetHeight: rect.height,
-    iframe: iframe,
-    onSuccess: (data) => {
-      iframe.height = `${data.height}px`;
-      onSuccess(data.height);
-    },
-  });
-
-  // fixer.recalculate();
-  fixer.enableNavigationBlocking();
-}

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

@@ -1 +0,0 @@
-export * from './useHeatmapVizRender';

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

@@ -1,71 +0,0 @@
-import { Visualizer } from '@gemx-dev/clarity-visualize';
-import { useCallback, useEffect, useRef } from 'react';
-import { findLastSizeOfDom, initIframeHelperFixer } from '../../helpers';
-import { useHeatmapDataStore, useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
-import { DecodedPayload } from '../../types';
-
-interface IUseHeatmapRenderResult {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-let visualizer: Visualizer = new Visualizer();
-export const useHeatmapRender = (): IUseHeatmapRenderResult => {
-  const data = useHeatmapDataStore((state) => state.data);
-  const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
-  const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-  const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-
-  const renderHeatmap = useCallback(async (payloads: DecodedPayload[]) => {
-    if (!payloads || payloads.length === 0) return;
-
-    setIsRenderViz(false);
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) return;
-
-    await visualizer.html(payloads, iframe.contentWindow);
-
-    initIframe(iframe, payloads, (height: number) => {
-      height && setIframeHeight(height);
-      setIsRenderViz(true);
-      setVizRef(visualizer);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!data || data.length === 0) return;
-
-    renderHeatmap(data);
-    return () => {
-      setVizRef(null);
-    };
-  }, [data]);
-
-  return {
-    iframeRef,
-  };
-};
-
-function initIframe(
-  iframe: HTMLIFrameElement,
-  payloads: DecodedPayload[],
-  onSuccess: (height: number) => void,
-) {
-  const { size } = findLastSizeOfDom(payloads);
-
-  const docWidth = size.width ?? 0;
-  const docHeight = size.height ?? 0;
-
-  const fixer = initIframeHelperFixer({
-    targetWidth: docWidth,
-    targetHeight: docHeight,
-    iframe: iframe,
-    onSuccess: (data) => {
-      iframe.height = `${data.height}px`;
-      onSuccess(data.height);
-    },
-  });
-
-  // fixer.recalculate();
-}

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

@@ -1,20 +0,0 @@
-import { useMemo } from 'react';
-import { useHeatmapRender } from './useHeatmapRender';
-import { useReplayRender } from './useReplayRender';
-
-interface IHeatmapVizRenderResult {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-export const useHeatmapVizRender = (mode: 'heatmap' | 'replay'): IHeatmapVizRenderResult => {
-  const heatmapResult = useMemo(() => {
-    switch (mode) {
-      case 'heatmap':
-        return useHeatmapRender;
-      case 'replay':
-        return useReplayRender;
-    }
-  }, [mode]);
-
-  return heatmapResult();
-};