@gemx-dev/heatmap-react 3.5.45 → 3.5.46

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

@@ -0,0 +1,336 @@
+// 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),
+  };
+}