@gemx-dev/heatmap-react 3.5.46 → 3.5.48

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

@@ -1,336 +0,0 @@
-// useAreaHeatmap.ts
-import { MutableRefObject, useRef } from 'react';
-
-// Types
-export interface Rect {
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-  absoluteLeft: number;
-  absoluteTop: number;
-  absoluteRight: number;
-  absoluteBottom: number;
-}
-
-export interface AreaNode {
-  id: string;
-  hash: string;
-  element: HTMLElement;
-  rect: MutableRefObject<Rect>;
-  kind: 'area' | 'money';
-  clickDist?: number;
-  totalclicks: number;
-  priority?: boolean;
-  areaElement?: HTMLDivElement;
-  shadowStyleElement?: HTMLStyleElement;
-  changeObserver?: { disconnect: () => void };
-  hoverColor: string;
-  color: string;
-  cumulativeSessions?: number[];
-  cumulativeSessionsWithPurchase?: number[];
-  cumulativeValue?: number;
-  moneyMapType?: 'Conversion' | 'OrderValue';
-}
-
-export interface AreaRenderState {
-  areas: AreaNode[];
-  selectedArea: AreaNode | null;
-  hoveredArea: AreaNode | null;
-  isEditing: boolean;
-}
-export type GetElementInfoFn = (
-  el: HTMLElement,
-  useBeta?: boolean,
-) => { hash: string; dataId: string | null } | null;
-
-export interface AreaRenderer {
-  init: (win: Window, context: any, getElementInfo: GetElementInfoFn) => void;
-  clear: () => void;
-  render: () => void;
-  lazyRenderArea: (area?: AreaNode) => void;
-  removeArea: (area: AreaNode, skipReRender?: boolean) => void;
-  createArea: (element: HTMLElement, force?: boolean) => void;
-  avoidOverlaps: () => void;
-  getAreas: (sorted?: boolean) => AreaNode[];
-  getAreaInfo: () => AreaRenderState;
-  updateHoveredArea: (area: AreaNode | null) => void;
-  selectArea: (area: AreaNode) => void;
-  enterEditing: () => void;
-  exitEditing: () => void;
-}
-
-// Utility: Simple signal (like a lightweight store)
-function createSignal<T>(initialValue: T) {
-  let value = initialValue;
-  const subscribers = new Set<(v: T) => void>();
-
-  return {
-    get value() {
-      return value;
-    },
-    set value(v: T) {
-      value = v;
-      subscribers.forEach((cb) => cb(v));
-    },
-    update: (v: T) => {
-      value = v;
-      subscribers.forEach((cb) => cb(v));
-    },
-    observe: (cb: (v: T) => void) => {
-      subscribers.add(cb);
-      cb(value);
-      return () => subscribers.delete(cb);
-    },
-  };
-}
-
-// Main Hook
-export function useAreaHeatmap(): AreaRenderer {
-  const areasSet = useRef(new Set<AreaNode>()).current;
-  const areasSignal = createSignal<AreaNode[]>([]);
-  const selectedAreaSignal = createSignal<AreaNode | null>(null);
-  const hoveredAreaSignal = createSignal<AreaNode | null>(null);
-  const isEditingSignal = createSignal(false);
-
-  const contextRef = useRef<any>(null);
-  const targetWindowRef = useRef<Window | null>(null);
-  const targetDocRef = useRef<Document | null>(null);
-  const shadowRootRef = useRef<ShadowRoot | null>(null);
-  const overlayContainerRef = useRef<HTMLDivElement | null>(null);
-  const cleanupRef = useRef<() => void>(() => {});
-
-  // Cleanup old area DOM + observers
-  const removeAreaFromDOM = (area: AreaNode) => {
-    if (area.areaElement?.parentNode) {
-      area.areaElement.parentNode.removeChild(area.areaElement);
-    }
-    area.changeObserver?.disconnect();
-  };
-
-  // Resolve shadow root or root node
-  const getRootNode = (area: AreaNode): Document | ShadowRoot => {
-    return area.element.shadowRoot || (area.element.getRootNode() as any);
-  };
-
-  // Get bounding rect relative to overlay
-  const getRelativeRect = (element: HTMLElement): Rect => {
-    const root = element.getRootNode({ composed: true }) as Document | ShadowRoot;
-    const overlayRect = overlayContainerRef.current?.getBoundingClientRect() || {
-      left: 0,
-      top: 0,
-    };
-    const rect = element.getBoundingClientRect();
-
-    const absoluteLeft = rect.left;
-    const absoluteTop = rect.top;
-
-    return {
-      width: rect.width,
-      height: rect.height,
-      top: rect.top - overlayRect.top,
-      left: rect.left - overlayRect.left,
-      absoluteLeft,
-      absoluteTop,
-      absoluteRight: absoluteLeft + rect.width,
-      absoluteBottom: absoluteTop + rect.height,
-    };
-  };
-
-  // Create or update visual overlay for an area
-  const renderAreaOverlay = (area: AreaNode, mode: 'area' | 'money' = 'area') => {
-    const root = getRootNode(area);
-    if (!root || !targetDocRef.current) return;
-
-    const overlayId = `area-overlay-${area.id}`;
-    let overlay = root.getElementById(overlayId) as HTMLDivElement | null;
-
-    if (!overlay) {
-      overlay = targetDocRef.current.createElement('div');
-      overlay.id = overlayId;
-      overlay.dataset.clarityAreaMapDiv = '1';
-      root.appendChild(overlay);
-
-      const style = targetDocRef.current.createElement('style');
-      overlay.appendChild(style);
-      area.shadowStyleElement = style;
-      area.areaElement = overlay;
-    }
-
-    const rect = getRelativeRect(area.element);
-    area.rect.current = rect;
-
-    const isFixed = getComputedStyle(area.element).position === 'fixed';
-    const position = isFixed ? 'fixed' : 'absolute';
-
-    const css = {
-      [`#${overlayId}`]: {
-        position,
-        top: `${isFixed ? rect.top : rect.absoluteTop}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
-        backgroundColor: area.color,
-        boxShadow: '0 0 0 2px white inset',
-        boxSizing: 'border-box',
-        pointerEvents: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      [`#${overlayId}:hover`]: {
-        backgroundColor: area.hoverColor,
-        boxShadow: '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset',
-      },
-    };
-
-    // Apply styles
-    const styleText = Object.entries(css)
-      .map(([selector, rules]) => {
-        const div = document.createElement('div');
-        Object.assign(div.style, rules);
-        return `${selector} { ${div.style.cssText} }`;
-      })
-      .join('\n');
-
-    if (area.shadowStyleElement) {
-      area.shadowStyleElement.textContent = styleText;
-    }
-
-    // Add label if large enough
-    if (rect.width >= 67 && rect.height >= 30) {
-      let label = overlay.querySelector('[data-label]') as HTMLDivElement | null;
-      if (!label) {
-        label = targetDocRef.current.createElement('div');
-        label.dataset.label = 'true';
-        overlay.appendChild(label);
-      }
-
-      if (mode === 'area' && area.kind === 'area') {
-        label.textContent = `${area.clickDist?.toFixed(2)}%`;
-      } else if (mode === 'money') {
-        if (area.moneyMapType === 'Conversion') {
-          const rate =
-            (area.cumulativeSessions?.length ?? 0) > 0
-              ? ((area.cumulativeSessionsWithPurchase?.length ?? 0) /
-                  (area.cumulativeSessions?.length ?? 0)) *
-                100
-              : 0;
-          label.textContent = `${rate.toFixed(2)}%`;
-        } else if (area.moneyMapType === 'OrderValue') {
-          label.textContent = `$${area.cumulativeValue?.toFixed(2)}`;
-        }
-      }
-
-      Object.assign(label.style, {
-        color: '#161514',
-        backgroundColor: 'rgba(255,255,255,0.86)',
-        padding: '8px',
-        borderRadius: '4px',
-        fontSize: '16px',
-        fontWeight: '600',
-        fontFamily: '"Segoe UI", system-ui, sans-serif',
-        pointerEvents: 'none',
-      });
-    }
-
-    // Interaction
-    overlay.onclick = () => selectArea(area);
-    overlay.onmouseenter = () => updateHoveredArea(area);
-    overlay.onmouseleave = () => updateHoveredArea(null);
-  };
-
-  const selectArea = (area: AreaNode) => {
-    if (selectedAreaSignal.value !== area) {
-      selectedAreaSignal.value = area;
-    }
-  };
-
-  const updateHoveredArea = (area: AreaNode | null) => {
-    hoveredAreaSignal.value = area ?? null;
-  };
-
-  const removeArea = (area: AreaNode, skipReRender = false) => {
-    areasSet.delete(area);
-    removeAreaFromDOM(area);
-    if (!skipReRender) updateAreaList();
-  };
-
-  const updateAreaList = () => {
-    const list = Array.from(areasSet);
-    list.sort((a, b) => b.totalclicks - a.totalclicks); // simple sort
-    areasSignal.update(list);
-  };
-
-  const avoidOverlaps = () => {
-    // Simplified overlap resolution (can be enhanced)
-    const areas = Array.from(areasSet);
-    // Implement your ye() logic here if needed
-  };
-
-  const renderAll = () => {
-    areasSet.forEach((area) => renderAreaOverlay(area));
-    updateAreaList();
-  };
-
-  const clearAll = () => {
-    areasSet.forEach(removeAreaFromDOM);
-    areasSet.clear();
-    selectedAreaSignal.update(null);
-    hoveredAreaSignal.update(null);
-    isEditingSignal.update(false);
-    updateAreaList();
-  };
-
-  const init = (win: Window, context: any, getElementInfo: GetElementInfoFn) => {
-    clearAll();
-    contextRef.current = context;
-    targetWindowRef.current = win;
-    targetDocRef.current = win.document;
-
-    // Create shadow container
-    const container = targetDocRef.current.createElement('div');
-    container.style.cssText = `
-      position: fixed;
-      top: 0; left: 0;
-      width: 100vw; height: 100vh;
-      pointer-events: none;
-      z-index: 2147483647;
-    `;
-    targetDocRef.current.body.appendChild(container);
-    overlayContainerRef.current = container;
-
-    // Optional: setup resize observer, mutation observer, etc.
-  };
-
-  return {
-    init,
-    clear: clearAll,
-    render: renderAll,
-    lazyRenderArea: (area) => {
-      if (area) {
-        areasSet.add(area);
-      }
-    },
-    removeArea,
-    createArea: (element, force = false) => {
-      // Logic to create AreaNode from element
-      console.log('createArea not fully implemented yet', element);
-    },
-    avoidOverlaps,
-    getAreas: (sorted = true) => {
-      const arr = Array.from(areasSet);
-      return sorted ? arr.sort((a, b) => b.totalclicks - a.totalclicks) : arr;
-    },
-    getAreaInfo: () => ({
-      areas: areasSignal.value,
-      selectedArea: selectedAreaSignal.value,
-      hoveredArea: hoveredAreaSignal.value,
-      isEditing: isEditingSignal.value,
-    }),
-    updateHoveredArea,
-    selectArea,
-    enterEditing: () => isEditingSignal.update(true),
-    exitEditing: () => isEditingSignal.update(false),
-  };
-}