@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/hooks/viz-area/useAreaHeatmapManager.ts

@@ -0,0 +1,692 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// ============================================================================
+// Type Definitions
+// ============================================================================
+
+interface ObservableValue<T> {
+  observe: (callback: (value: T) => void) => void;
+  unobserve: (callback: (value: T) => void) => void;
+  update: (value: T) => void;
+  value: T;
+}
+
+interface Rect {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  absoluteLeft: number;
+  absoluteTop: number;
+  absoluteRight: number;
+  absoluteBottom: number;
+}
+
+interface AreaNode {
+  id: string;
+  hash: string;
+  element: HTMLElement;
+  shadowElement?: HTMLElement;
+  shadowStyleElement?: HTMLStyleElement;
+  areaElement?: HTMLDivElement;
+  rect: ObservableValue<Rect>;
+  kind: 'area' | 'money';
+  totalclicks: number;
+  clickDist: number;
+  color: string;
+  hoverColor: string;
+  isFixed: boolean;
+  priority: boolean;
+  parentNode?: AreaNode;
+  childNodes: Set<AreaNode>;
+  cumulativeMaxClicks?: number;
+  changeObserver?: { disconnect: () => void };
+  iframe?: HTMLIFrameElement; // Iframe chứa element này
+}
+
+interface ElementInfo {
+  hash: string;
+  dataId: string;
+}
+
+interface AreaRenderOptions {
+  areaContainerStyles?: Record<string, any>;
+  initialAreas?: string[];
+}
+
+interface AreaInfo {
+  areas: AreaNode[];
+  selectArea: (area: AreaNode | undefined) => void;
+  observeAreas: (callback: (areas: AreaNode[]) => void) => void;
+  unobserveAreas: (callback: (areas: AreaNode[]) => void) => void;
+  observeSelectedArea: (callback: (area?: AreaNode) => void) => void;
+  unobserveSelectedArea: (callback: (area?: AreaNode) => void) => void;
+  observeHoveredArea: (callback: (area?: AreaNode) => void) => void;
+  unobserveHoveredArea: (callback: (area?: AreaNode) => void) => void;
+  observerEditing: (callback: (editing: boolean) => void) => void;
+  unobserveEditing: (callback: (editing: boolean) => void) => void;
+  enterEditing: () => void;
+  exitEditing: () => void;
+  removeArea: (area: AreaNode) => void;
+}
+
+interface ClickData {
+  hash: string;
+  clicks: number[];
+  x: number[];
+  y: number[];
+  points: number;
+  totalclicks: number;
+  selector: string;
+}
+
+export interface HeatmapData {
+  clickData: ClickData[];
+  totalClicks: number;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const HEATMAP_GRADIENT_COLORS: [number, number, number][] = [
+  [0, 0, 255], // Blue
+  [0, 255, 255], // Cyan
+  [0, 255, 0], // Green
+  [255, 255, 0], // Yellow
+  [255, 0, 0], // Red
+];
+
+const GRADIENT_COLOR_COUNT = HEATMAP_GRADIENT_COLORS.length - 1;
+const HOVER_BOX_SHADOW = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
+const AREA_MAP_DIV_ATTRIBUTE = 'data-clarity-area-map-div';
+const MIN_LABEL_WIDTH = 67;
+const MIN_LABEL_HEIGHT = 30;
+
+// ============================================================================
+// Observable Pattern
+// ============================================================================
+
+function createObservable<T>(initialValue: T): ObservableValue<T> {
+  const observers = new Set<(value: T) => void>();
+
+  const observable: ObservableValue<T> = {
+    observe: (callback: (value: T) => void) => {
+      observers.add(callback);
+      if (observable.value !== undefined) {
+        callback(observable.value);
+      }
+    },
+    unobserve: (callback: (value: T) => void) => {
+      observers.delete(callback);
+    },
+    update: (newValue: T) => {
+      observable.value = newValue;
+      observers.forEach((callback) => {
+        callback(observable.value);
+      });
+    },
+    value: initialValue,
+  };
+
+  return observable;
+}
+
+// ============================================================================
+// Color Utilities
+// ============================================================================
+
+function getHeatmapColor(percentage: number): string {
+  const index = Math.min(Math.floor(percentage * GRADIENT_COLOR_COUNT), GRADIENT_COLOR_COUNT - 1);
+  const [r, g, b] = HEATMAP_GRADIENT_COLORS[index];
+  return `rgba(${r}, ${g}, ${b}, 0.5)`;
+}
+
+function getHoverColor(percentage: number): string {
+  const index = Math.min(Math.floor(percentage * GRADIENT_COLOR_COUNT), GRADIENT_COLOR_COUNT - 1);
+  const [r, g, b] = HEATMAP_GRADIENT_COLORS[index];
+  return `rgba(${r}, ${g}, ${b}, 0.8)`;
+}
+
+// ============================================================================
+// DOM & Iframe Utilities
+// ============================================================================
+
+function getShadowRoot(element: HTMLElement): ShadowRoot {
+  return element.shadowRoot ?? element.attachShadow({ mode: 'open' });
+}
+
+/**
+ * Lấy tất cả iframes trong document, bao gồm nested iframes
+ */
+function getAllIframes(doc: Document): HTMLIFrameElement[] {
+  const iframes: HTMLIFrameElement[] = [];
+  const iframeElements = doc.querySelectorAll('iframe');
+
+  iframeElements.forEach((iframe) => {
+    iframes.push(iframe);
+
+    // Thử truy cập vào nested iframes (nếu same-origin)
+    try {
+      if (iframe.contentDocument) {
+        const nestedIframes = getAllIframes(iframe.contentDocument);
+        iframes.push(...nestedIframes);
+      }
+    } catch (e) {
+      console.warn('Cannot access iframe content (cross-origin):', e);
+    }
+  });
+
+  return iframes;
+}
+
+/**
+ * Tính toán vị trí element bên trong iframe so với parent document
+ */
+function getIframeOffset(iframe: HTMLIFrameElement): { top: number; left: number } {
+  const iframeRect = iframe.getBoundingClientRect();
+  let top = iframeRect.top;
+  let left = iframeRect.left;
+
+  // Nếu iframe nằm trong iframe khác, tính tổng offset
+  let parentWindow = iframe.ownerDocument.defaultView?.parent;
+  let currentIframe = iframe;
+
+  while (parentWindow && parentWindow !== window) {
+    try {
+      const parentIframes = parentWindow.document.querySelectorAll('iframe');
+      const parentIframe = Array.from(parentIframes).find(
+        (frame) => frame.contentWindow === currentIframe.ownerDocument.defaultView,
+      );
+
+      if (parentIframe) {
+        const parentRect = parentIframe.getBoundingClientRect();
+        top += parentRect.top;
+        left += parentRect.left;
+        currentIframe = parentIframe;
+        parentWindow = parentIframe.ownerDocument.defaultView?.parent;
+      } else {
+        break;
+      }
+    } catch (e) {
+      break;
+    }
+  }
+
+  return { top, left };
+}
+
+/**
+ * Lấy rect của element, xử lý cả trường hợp element trong iframe
+ */
+function getElementRect(
+  element: HTMLElement,
+  containerElement?: HTMLElement,
+  iframe?: HTMLIFrameElement,
+): Rect {
+  const elementRect = element.getBoundingClientRect();
+  let width = elementRect.width;
+  let height = elementRect.height;
+  let top = elementRect.top;
+  let left = elementRect.left;
+
+  // Nếu element nằm trong iframe, cộng thêm offset của iframe
+  if (iframe) {
+    const iframeOffset = getIframeOffset(iframe);
+    top += iframeOffset.top;
+    left += iframeOffset.left;
+  }
+
+  // Tính toán vị trí tương đối với container
+  let relativeTop = top;
+  let relativeLeft = left;
+
+  if (containerElement) {
+    const containerRect = containerElement.getBoundingClientRect();
+    relativeTop = top - containerRect.top;
+    relativeLeft = left - containerRect.left;
+  }
+
+  return {
+    width,
+    height,
+    top: relativeTop,
+    left: relativeLeft,
+    absoluteLeft: left,
+    absoluteTop: top,
+    absoluteRight: left + width,
+    absoluteBottom: top + height,
+  };
+}
+
+function getElementInfo(element: HTMLElement, useHashBeta = false): ElementInfo {
+  return {
+    hash:
+      element.getAttribute(useHashBeta ? 'data-clarity-hashbeta' : 'data-clarity-hashalpha') || '',
+    dataId: element.getAttribute('data-clarity-id') || '',
+  };
+}
+
+/**
+ * Tìm element trong document hoặc trong các iframes
+ */
+function findElementByHash(
+  hash: string,
+  rootDocument: Document,
+): { element: HTMLElement | null; iframe?: HTMLIFrameElement } {
+  // Tìm trong document chính
+  let element = rootDocument.querySelector(`[data-clarity-hashalpha="${hash}"]`) as HTMLElement;
+  if (element) {
+    return { element };
+  }
+
+  // Tìm trong các iframes
+  const iframes = getAllIframes(rootDocument);
+  for (const iframe of iframes) {
+    try {
+      if (iframe.contentDocument) {
+        element = iframe.contentDocument.querySelector(
+          `[data-clarity-hashalpha="${hash}"]`,
+        ) as HTMLElement;
+        if (element) {
+          return { element, iframe };
+        }
+      }
+    } catch (e) {
+      console.warn('Cannot access iframe content:', e);
+    }
+  }
+
+  return { element: null };
+}
+
+// ============================================================================
+// Overlay Creation
+// ============================================================================
+
+/**
+ * Tạo overlay div để hiển thị trên element (bao gồm cả element trong iframe)
+ */
+function createOverlayElement(
+  areaNode: AreaNode,
+  parentContainer: HTMLElement,
+  displayMode: 'area' | 'money' = 'area',
+): HTMLDivElement {
+  const overlayDiv = document.createElement('div');
+  const rect = areaNode.rect.value;
+
+  // Style cho overlay
+  Object.assign(overlayDiv.style, {
+    position: 'absolute',
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    backgroundColor: areaNode.color,
+    boxShadow: '0 0 0 2px white inset',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'auto',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    zIndex: '9999',
+    boxSizing: 'border-box',
+  });
+
+  overlayDiv.setAttribute(AREA_MAP_DIV_ATTRIBUTE, '1');
+  overlayDiv.setAttribute('data-area-id', areaNode.id);
+
+  // Thêm label nếu đủ lớn
+  if (rect.width >= MIN_LABEL_WIDTH && rect.height >= MIN_LABEL_HEIGHT) {
+    const label = createLabelElement(areaNode, displayMode);
+    overlayDiv.appendChild(label);
+  }
+
+  // Event handlers
+  overlayDiv.addEventListener('mouseenter', () => {
+    overlayDiv.style.backgroundColor = areaNode.hoverColor;
+    overlayDiv.style.boxShadow = HOVER_BOX_SHADOW;
+  });
+
+  overlayDiv.addEventListener('mouseleave', () => {
+    overlayDiv.style.backgroundColor = areaNode.color;
+    overlayDiv.style.boxShadow = '0 0 0 2px white inset';
+  });
+
+  return overlayDiv;
+}
+
+function createLabelElement(areaNode: AreaNode, displayMode: 'area' | 'money'): HTMLDivElement {
+  const labelDiv = document.createElement('div');
+
+  if (displayMode === 'area') {
+    labelDiv.textContent = `${areaNode.clickDist.toFixed(2)}%`;
+  }
+
+  Object.assign(labelDiv.style, {
+    color: '#161514',
+    backgroundColor: 'rgba(255, 255, 255, 0.86)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '8px',
+    borderRadius: '4px',
+    fontSize: '16px',
+    lineHeight: '20px',
+    minWidth: '56px',
+    fontWeight: '600',
+    fontFamily:
+      '"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
+    pointerEvents: 'none',
+  });
+
+  return labelDiv;
+}
+
+// ============================================================================
+// Area Renderer
+// ============================================================================
+
+function createAreaRenderer(): any {
+  let selectedArea: AreaNode | undefined;
+  let overlayContainer: HTMLDivElement | null = null;
+
+  const areasObservable = createObservable<AreaNode[]>([]);
+  const selectedAreaObservable = createObservable<AreaNode | undefined>(undefined);
+  const hoveredAreaObservable = createObservable<AreaNode | undefined>(undefined);
+  const editingObservable = createObservable<boolean>(false);
+
+  const areaSet = new Set<AreaNode>();
+  const overlayMap = new Map<string, HTMLDivElement>(); // areaId -> overlay element
+
+  const selectArea = (area: AreaNode | undefined) => {
+    selectedArea = area;
+    selectedAreaObservable.update(selectedArea);
+  };
+
+  const removeArea = (area: AreaNode, skipUpdate = false) => {
+    areaSet.delete(area);
+
+    // Xóa overlay element
+    const overlay = overlayMap.get(area.id);
+    if (overlay && overlay.parentElement) {
+      overlay.parentElement.removeChild(overlay);
+    }
+    overlayMap.delete(area.id);
+
+    if (!skipUpdate) {
+      updateAreasObservable();
+    }
+  };
+
+  const areaInfo: AreaInfo = {
+    areas: [],
+    selectArea,
+    observeAreas: areasObservable.observe,
+    unobserveAreas: areasObservable.unobserve,
+    observeSelectedArea: selectedAreaObservable.observe,
+    unobserveSelectedArea: selectedAreaObservable.unobserve,
+    observeHoveredArea: hoveredAreaObservable.observe,
+    unobserveHoveredArea: hoveredAreaObservable.unobserve,
+    observerEditing: editingObservable.observe,
+    unobserveEditing: editingObservable.unobserve,
+    enterEditing: () => {},
+    exitEditing: () => {},
+    removeArea,
+  };
+
+  const updateAreasObservable = () => {
+    const areas = Array.from(areaSet);
+    areaInfo.areas = areas;
+    areasObservable.update(areas);
+  };
+
+  const renderArea = (area: AreaNode) => {
+    if (!overlayContainer) return;
+
+    // Tạo overlay element
+    const overlay = createOverlayElement(area, overlayContainer, 'area');
+    overlayContainer.appendChild(overlay);
+    overlayMap.set(area.id, overlay);
+
+    // Click handler
+    overlay.addEventListener('click', () => {
+      selectArea(area);
+    });
+  };
+
+  const renderer = {
+    lazyRenderArea: (area: AreaNode) => areaSet.add(area),
+    removeArea,
+    render: () => {
+      // Render tất cả areas
+      areaSet.forEach(renderArea);
+      updateAreasObservable();
+    },
+    clear: () => {
+      // Xóa tất cả overlays
+      areaSet.forEach((area) => {
+        const overlay = overlayMap.get(area.id);
+        if (overlay && overlay.parentElement) {
+          overlay.parentElement.removeChild(overlay);
+        }
+      });
+
+      areaSet.clear();
+      overlayMap.clear();
+      updateAreasObservable();
+    },
+    getAreas: () => Array.from(areaSet),
+    getAreaInfo: () => areaInfo,
+    init: (container: HTMLDivElement) => {
+      overlayContainer = container;
+    },
+    areaInfo,
+    updateHoveredArea: hoveredAreaObservable.update,
+  };
+
+  return renderer;
+}
+
+// ============================================================================
+// CUSTOM REACT HOOK
+// ============================================================================
+
+interface UseHeatmapOptions {
+  data?: HeatmapData;
+  iframeRef?: React.RefObject<HTMLIFrameElement>;
+  options?: AreaRenderOptions;
+  enabled?: boolean;
+  includeIframes?: boolean; // Có scan iframes không?
+}
+
+interface UseHeatmapReturn {
+  areas: AreaNode[];
+  selectedArea: AreaNode | undefined;
+  hoveredArea: AreaNode | undefined;
+  isEditing: boolean;
+  selectArea: (area: AreaNode | undefined) => void;
+  enterEditing: () => void;
+  exitEditing: () => void;
+  clear: () => void;
+  refresh: () => void;
+}
+
+export function useHeatmap({
+  data,
+  iframeRef,
+  options = {},
+  enabled = true,
+  includeIframes = true,
+}: UseHeatmapOptions = {}): UseHeatmapReturn {
+  const [areas, setAreas] = useState<AreaNode[]>([]);
+  const [selectedArea, setSelectedArea] = useState<AreaNode | undefined>();
+  const [hoveredArea, setHoveredArea] = useState<AreaNode | undefined>();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const rendererRef = useRef<any>(null);
+  const overlayContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // Initialize renderer và overlay container
+  useEffect(() => {
+    if (!rendererRef.current) {
+      rendererRef.current = createAreaRenderer();
+    }
+
+    // Tạo overlay container
+    if (!overlayContainerRef.current && iframeRef?.current) {
+      const overlayDiv = document.createElement('div');
+      overlayDiv.id = 'heatmap-overlay-container';
+      Object.assign(overlayDiv.style, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: '9998',
+        ...options.areaContainerStyles,
+      });
+
+      iframeRef.current.style.position = 'relative';
+      iframeRef.current.appendChild(overlayDiv);
+      overlayContainerRef.current = overlayDiv;
+
+      rendererRef.current.init(overlayDiv);
+    }
+
+    return () => {
+      if (rendererRef.current) {
+        rendererRef.current.clear();
+      }
+
+      // Cleanup overlay container
+      if (overlayContainerRef.current && overlayContainerRef.current.parentElement) {
+        overlayContainerRef.current.parentElement.removeChild(overlayContainerRef.current);
+      }
+    };
+  }, [data]);
+
+  // Subscribe to observable changes
+  useEffect(() => {
+    if (!rendererRef.current) return;
+
+    const renderer = rendererRef.current;
+    const areaInfo = renderer.getAreaInfo();
+
+    areaInfo.observeAreas(setAreas);
+    areaInfo.observeSelectedArea(setSelectedArea);
+    areaInfo.observeHoveredArea(setHoveredArea);
+    areaInfo.observerEditing(setIsEditing);
+
+    return () => {
+      areaInfo.unobserveAreas(setAreas);
+      areaInfo.unobserveSelectedArea(setSelectedArea);
+      areaInfo.unobserveHoveredArea(setHoveredArea);
+      areaInfo.unobserveEditing(setIsEditing);
+    };
+  }, [data]);
+
+  // Process data và render heatmap (bao gồm iframe)
+  useEffect(() => {
+    if (
+      !enabled ||
+      !data ||
+      !iframeRef?.current ||
+      !rendererRef.current ||
+      !overlayContainerRef.current
+    ) {
+      return;
+    }
+
+    const renderer = rendererRef.current;
+    const container = iframeRef.current.contentDocument;
+
+    // Clear previous render
+    // renderer.clear();
+
+    // Process click data
+    data.clickData.forEach((clickItem) => {
+      // Tìm element (bao gồm trong iframes)
+      const element = container?.querySelector(
+        `[data-clarity-hashalpha="${clickItem.hash}"]`,
+      ) as HTMLElement;
+
+      if (!element) {
+        console.warn(`Element not found for hash: ${clickItem.hash}`);
+        return;
+      }
+
+      const clickPercentage = clickItem.totalclicks / data.totalClicks;
+      const rect = getElementRect(element, overlayContainerRef.current!);
+
+      const areaNode: AreaNode = {
+        id: `area_${clickItem.hash}`,
+        hash: clickItem.hash,
+        element,
+        rect: createObservable(rect),
+        kind: 'area',
+        totalclicks: clickItem.totalclicks,
+        clickDist: clickPercentage * 100,
+        color: getHeatmapColor(clickPercentage),
+        hoverColor: getHoverColor(clickPercentage),
+        isFixed: false,
+        priority: false,
+        childNodes: new Set(),
+      };
+
+      renderer.lazyRenderArea(areaNode);
+    });
+
+    // renderer.render();
+  }, [data]);
+
+  const selectArea = useCallback((area: AreaNode | undefined) => {
+    if (rendererRef.current) {
+      rendererRef.current.getAreaInfo().selectArea(area);
+    }
+  }, []);
+
+  const enterEditing = useCallback(() => {
+    if (rendererRef.current) {
+      rendererRef.current.getAreaInfo().enterEditing();
+    }
+  }, []);
+
+  const exitEditing = useCallback(() => {
+    if (rendererRef.current) {
+      rendererRef.current.getAreaInfo().exitEditing();
+    }
+  }, []);
+
+  const clear = useCallback(() => {
+    if (rendererRef.current) {
+      rendererRef.current.clear();
+    }
+  }, []);
+
+  const refresh = useCallback(() => {
+    if (rendererRef.current) {
+      rendererRef.current.render();
+    }
+  }, []);
+
+  return {
+    areas,
+    selectedArea,
+    hoveredArea,
+    isEditing,
+    selectArea,
+    enterEditing,
+    exitEditing,
+    clear,
+    refresh,
+  };
+}
+
+// ============================================================================
+// EXAMPLE COMPONENT - VÍ DỤ SỬ DỤNG VỚI IFRAME
+// ============================================================================
+
+export default useHeatmap;

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

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