@gemx-dev/heatmap-react 3.5.46 → 3.5.48

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

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

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