@gemx-dev/heatmap-react 3.5.45 → 3.5.46

package/src/helpers/elm-callout.ts

@@ -0,0 +1,347 @@
+import { ICalloutPlacement, ICalloutPosition, IHorizontalAlignment } from '../types/elm-callout';
+
+const PADDING = 0;
+const ARROW_SIZE = 8;
+const HORIZONTAL_OFFSET = 0;
+
+interface PositionCandidate {
+  placement: ICalloutPlacement;
+  top: number;
+  left: number;
+  horizontalAlign: IHorizontalAlignment;
+  valid: boolean;
+}
+
+interface ViewportDimensions {
+  width: number;
+  height: number;
+}
+
+interface RectDimensions {
+  targetRect: DOMRect;
+  calloutRect: DOMRect;
+}
+
+// ============================================================================
+// Viewport & Dimensions
+// ============================================================================
+const getViewportDimensions = (): ViewportDimensions => ({
+  width: window.innerWidth,
+  height: window.innerHeight,
+});
+
+const getElementDimensions = (targetElm: Element, calloutElm: HTMLElement): RectDimensions => ({
+  targetRect: targetElm.getBoundingClientRect(),
+  calloutRect: calloutElm.getBoundingClientRect(),
+});
+
+// ============================================================================
+// Alignment Order
+// ============================================================================
+const getAlignmentOrder = (alignment: IHorizontalAlignment): IHorizontalAlignment[] => {
+  switch (alignment) {
+    case 'center':
+      return ['center', 'left', 'right'];
+    case 'left':
+      return ['left', 'center', 'right'];
+    case 'right':
+      return ['right', 'center', 'left'];
+  }
+};
+
+// ============================================================================
+// Position Calculation
+// ============================================================================
+const calculateLeftPosition = ({
+  targetRect,
+  calloutRect,
+  hozOffset,
+  align,
+}: {
+  targetRect: DOMRect;
+  calloutRect: DOMRect;
+  hozOffset: number;
+  align: IHorizontalAlignment;
+}): number => {
+  switch (align) {
+    case 'left':
+      return targetRect.left + hozOffset;
+    case 'right':
+      return targetRect.right - calloutRect.width - hozOffset;
+    case 'center':
+    default:
+      return targetRect.left + targetRect.width / 2 - calloutRect.width / 2;
+  }
+};
+
+const calculateVerticalPosition = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  placement: 'top' | 'bottom',
+  padding: number,
+  arrowSize: number,
+): number => {
+  return placement === 'top'
+    ? targetRect.top - calloutRect.height - padding - arrowSize
+    : targetRect.bottom + padding + arrowSize;
+};
+
+const calculateHorizontalPlacementPosition = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  placement: 'left' | 'right',
+  padding: number,
+  arrowSize: number,
+): { top: number; left: number } => {
+  const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
+  const left =
+    placement === 'right'
+      ? targetRect.right + padding + arrowSize
+      : targetRect.left - calloutRect.width - padding - arrowSize;
+
+  return { top, left };
+};
+
+// ============================================================================
+// Validation
+// ============================================================================
+const isLeftPositionValid = (
+  leftPos: number,
+  calloutWidth: number,
+  viewportWidth: number,
+  padding: number,
+): boolean => {
+  return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
+};
+const isVerticalPositionValid = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  placement: 'top' | 'bottom',
+  viewportHeight: number,
+  padding: number,
+  arrowSize: number,
+): boolean => {
+  return placement === 'top'
+    ? targetRect.top - calloutRect.height - padding - arrowSize > 0
+    : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
+};
+const isHorizontalPlacementValid = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  placement: 'left' | 'right',
+  viewportWidth: number,
+  padding: number,
+  arrowSize: number,
+): boolean => {
+  return placement === 'right'
+    ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
+    : targetRect.left - calloutRect.width - padding - arrowSize > 0;
+};
+
+// ============================================================================
+// Position Candidates Generation
+// ============================================================================
+const generateVerticalPositionCandidates = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  viewportHeight: number,
+  viewportWidth: number,
+  alignment: IHorizontalAlignment,
+  hozOffset: number,
+  padding: number,
+  arrowSize: number,
+): PositionCandidate[] => {
+  const candidates: PositionCandidate[] = [];
+  const placements: Array<'top' | 'bottom'> = ['top', 'bottom'];
+
+  placements.forEach((placement) => {
+    const verticalPos = calculateVerticalPosition(
+      targetRect,
+      calloutRect,
+      placement,
+      padding,
+      arrowSize,
+    );
+    const verticalValid = isVerticalPositionValid(
+      targetRect,
+      calloutRect,
+      placement,
+      viewportHeight,
+      padding,
+      arrowSize,
+    );
+
+    const alignmentOrder = getAlignmentOrder(alignment);
+
+    alignmentOrder.forEach((align) => {
+      const horizontalPos = calculateLeftPosition({
+        targetRect,
+        calloutRect,
+        hozOffset,
+        align,
+      });
+
+      candidates.push({
+        placement,
+        top: verticalPos,
+        left: horizontalPos,
+        horizontalAlign: align,
+        valid:
+          verticalValid &&
+          isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding),
+      });
+    });
+  });
+
+  return candidates;
+};
+const generateHorizontalPositionCandidates = (
+  targetRect: DOMRect,
+  calloutRect: DOMRect,
+  viewportWidth: number,
+  padding: number,
+  arrowSize: number,
+): PositionCandidate[] => {
+  const placements: Array<'left' | 'right'> = ['left', 'right'];
+
+  return placements.map((placement) => {
+    const { top, left } = calculateHorizontalPlacementPosition(
+      targetRect,
+      calloutRect,
+      placement,
+      padding,
+      arrowSize,
+    );
+
+    return {
+      placement,
+      top,
+      left,
+      horizontalAlign: 'center' as IHorizontalAlignment,
+      valid: isHorizontalPlacementValid(
+        targetRect,
+        calloutRect,
+        placement,
+        viewportWidth,
+        padding,
+        arrowSize,
+      ),
+    };
+  });
+};
+const generateAllPositionCandidates = (
+  rectDimensions: RectDimensions,
+  viewport: ViewportDimensions,
+  alignment: IHorizontalAlignment,
+  hozOffset: number,
+  padding: number,
+  arrowSize: number,
+): PositionCandidate[] => {
+  const { targetRect, calloutRect } = rectDimensions;
+
+  const verticalCandidates = generateVerticalPositionCandidates(
+    targetRect,
+    calloutRect,
+    viewport.height,
+    viewport.width,
+    alignment,
+    hozOffset,
+    padding,
+    arrowSize,
+  );
+
+  const horizontalCandidates = generateHorizontalPositionCandidates(
+    targetRect,
+    calloutRect,
+    viewport.width,
+    padding,
+    arrowSize,
+  );
+
+  return [...verticalCandidates, ...horizontalCandidates];
+};
+
+// ============================================================================
+// Position Selection
+// ============================================================================
+const selectBestPosition = (candidates: PositionCandidate[]): PositionCandidate => {
+  return candidates.find((p) => p.valid) || candidates[0];
+};
+
+// ============================================================================
+// Viewport Boundary Adjustment
+// ============================================================================
+const constrainToViewport = (
+  position: { top: number; left: number },
+  calloutRect: DOMRect,
+  viewport: ViewportDimensions,
+  padding: number,
+): { top: number; left: number } => {
+  const left = Math.max(
+    padding,
+    Math.min(position.left, viewport.width - calloutRect.width - padding),
+  );
+  const top = Math.max(
+    padding,
+    Math.min(position.top, viewport.height - calloutRect.height - padding),
+  );
+
+  return { top, left };
+};
+
+// ============================================================================
+// Main Function
+// ============================================================================
+export const calcCalloutPosition = ({
+  targetElm,
+  calloutElm,
+  setPosition,
+  hozOffset = HORIZONTAL_OFFSET,
+  alignment = 'center',
+}: {
+  targetElm: Element;
+  calloutElm: HTMLElement;
+  setPosition: (position: ICalloutPosition) => void;
+  hozOffset?: number;
+  alignment?: IHorizontalAlignment;
+}) => {
+  return () => {
+    // 1. Get dimensions
+    const rectDimensions = getElementDimensions(targetElm, calloutElm);
+    const viewport = getViewportDimensions();
+
+    const padding = PADDING;
+    const arrowSize = ARROW_SIZE;
+
+    // 2. Generate all position candidates
+    const candidates = generateAllPositionCandidates(
+      rectDimensions,
+      viewport,
+      alignment,
+      hozOffset,
+      padding,
+      arrowSize,
+    );
+
+    // 3. Select best position
+    const bestPosition = selectBestPosition(candidates);
+
+    // 4. Constrain to viewport
+    const constrainedPosition = constrainToViewport(
+      { top: bestPosition.top, left: bestPosition.left },
+      rectDimensions.calloutRect,
+      viewport,
+      padding,
+    );
+
+    // 5. Create final position object
+    const finalPosition: ICalloutPosition = {
+      top: constrainedPosition.top,
+      left: constrainedPosition.left,
+      placement: bestPosition.placement,
+      horizontalAlign: bestPosition.horizontalAlign,
+    };
+
+    setPosition(finalPosition);
+  };
+};

package/src/helpers/elm-getter.ts

@@ -0,0 +1,70 @@
+import type { ElementInfo, ElementRect, HeatmapElement, IHeatmapInfo } from '../types';
+
+export function getElementLayout(element: HTMLElement): ElementRect | null {
+  if (!element?.getBoundingClientRect) return null;
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return null;
+
+  return {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+export const getElementAtPoint = (doc: Document, x: number, y: number): HTMLElement | null => {
+  let el: Node | null = null;
+
+  if ('caretPositionFromPoint' in doc) {
+    el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+  }
+
+  el = el ?? doc.elementFromPoint(x, y);
+
+  let element = el as HTMLElement | null;
+  while (element && element.nodeType === Node.TEXT_NODE) {
+    element = element.parentElement;
+  }
+  return element;
+};
+
+export function getElementHash(element: HTMLElement): string | null {
+  return (
+    element.getAttribute('data-clarity-hash') ||
+    element.getAttribute('data-clarity-hashalpha') ||
+    element.getAttribute('data-clarity-hashbeta')
+  );
+}
+
+const getElementRank = (hash: string, elements?: HeatmapElement[]): number => {
+  if (!elements) return 0;
+  return elements.findIndex((e) => e.hash === hash) + 1;
+};
+
+export const buildElementInfo = (
+  hash: string,
+  rect: ElementRect | null,
+  heatmapInfo: IHeatmapInfo,
+): ElementInfo | null => {
+  if (!rect || !heatmapInfo) return null;
+
+  const info = heatmapInfo.elementMapInfo?.[hash];
+  if (!info) return null;
+
+  const rank = getElementRank(hash, heatmapInfo.sortedElements);
+  const clicks = info.totalclicks ?? 0;
+  const selector = info.selector ?? '';
+
+  const baseInfo = {
+    hash,
+    clicks,
+    rank,
+    selector,
+  };
+
+  return {
+    ...baseInfo,
+    ...rect,
+  };
+};

package/src/helpers/iframe-helper/fixer.ts

@@ -0,0 +1,100 @@
+import { IframeDimensionsDetail, IframeStyleConfig } from '../../types';
+import { IframeNavigationBlockerV2 } from './navigation-blocker-v2';
+import { IframeStyleReplacer } from './style-replacer';
+
+export class IframeHelperFixer {
+  private iframe: HTMLIFrameElement;
+  private config: IframeStyleConfig;
+  private replacer: IframeStyleReplacer | null = null;
+  private navigationBlocker: IframeNavigationBlockerV2 | null = null;
+
+  constructor(config: IframeStyleConfig) {
+    this.config = config;
+    this.iframe = config.iframe;
+    this.init();
+  }
+
+  private async init(): Promise<void> {
+    if (!this.iframe) {
+      console.error('[IframeHelper] iframe not found');
+      this.config.onError?.(new Error('iframe not found'));
+      return;
+    }
+
+    // Wait for iframe to load completely
+    if (this.iframe.contentDocument?.readyState === 'complete') {
+      await this.process();
+    } else {
+      this.iframe.addEventListener('load', () => this.process());
+    }
+  }
+
+  private async process(): Promise<void> {
+    if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
+      console.error('[IframeHelper] Cannot access iframe document');
+      this.config.onError?.(new Error('Cannot access iframe document'));
+      return;
+    }
+
+    try {
+      console.log('[IframeHelper] Processing viewport units...');
+
+      // Create replacer instance
+      this.replacer = new IframeStyleReplacer(this.iframe, this.config);
+
+      // Create navigation blocker
+      this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe);
+
+      // Run replacement
+      const result = await this.replacer.run();
+
+      console.log('[IframeHelper] Process completed:', result);
+
+      // Trigger success callback
+      this.config.onSuccess?.(result);
+
+      // Dispatch custom event
+      window.dispatchEvent(
+        new CustomEvent<IframeDimensionsDetail>('iframe-dimensions-applied', {
+          detail: result,
+        }),
+      );
+    } catch (error) {
+      console.error('[IframeHelper] Failed to process:', error);
+      this.config.onError?.(error as Error);
+    }
+  }
+
+  public async recalculate(): Promise<void> {
+    console.log('[IframeHelper] Recalculating...');
+    await this.process();
+  }
+
+  public updateConfig(config: Partial<IframeStyleConfig>): void {
+    this.config = { ...this.config, ...config };
+    if (this.replacer) {
+      this.replacer.updateConfig(config);
+    }
+  }
+
+  public enableNavigationBlocking(): void {
+    this.navigationBlocker?.enable();
+  }
+  public enableNavigationBlockingMessage(): void {
+    this.navigationBlocker?.enableMessage();
+  }
+
+  public disableNavigationBlocking(): void {
+    this.navigationBlocker?.disable();
+  }
+  public disableNavigationBlockingMessage(): void {
+    this.navigationBlocker?.disableMessage();
+  }
+
+  public destroy(): void {
+    this.replacer = null;
+    this.navigationBlocker?.destroy();
+    this.navigationBlocker = null;
+    console.log('[IframeHelper] Destroyed');
+  }
+}

package/src/helpers/iframe-helper/index.ts

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

package/src/helpers/iframe-helper/init.ts

@@ -0,0 +1,56 @@
+import { IframeDebugInfo, IframeDimensionsDetail, IframeStyleConfig } from '../../types';
+import { IframeHelperFixer } from './fixer';
+
+export function initIframeHelperFixer(config: IframeStyleConfig): IframeHelperFixer {
+  const fixer = new IframeHelperFixer(config);
+
+  window.addEventListener('iframe-dimensions-applied', ((e: Event) => {
+    const ev = e as CustomEvent<IframeDimensionsDetail>;
+    console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
+  }) as EventListener);
+
+  window.addEventListener('iframe-navigation-blocked', ((e: Event) => {
+    const ev = e as CustomEvent<{ url: string }>;
+    console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
+  }) as EventListener);
+
+  window.addEventListener('iframe-form-submit', ((e: Event) => {
+    const ev = e as CustomEvent<{ form: HTMLFormElement; data: any }>;
+    console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
+  }) as EventListener);
+
+  return fixer;
+}
+
+export function debugIframeStyle(): IframeDebugInfo | null {
+  const iframe = document.querySelector<HTMLIFrameElement>('clarity-iframe');
+  if (!iframe?.contentDocument) {
+    console.error('Cannot access iframe document');
+    return null;
+  }
+
+  const doc = iframe.contentDocument;
+  console.log('=== Viewport Units Debug ===');
+  console.log('Iframe:', { w: iframe.offsetWidth, h: iframe.offsetHeight });
+  console.log('Body:', {
+    scroll: doc.body.scrollHeight,
+    offset: doc.body.offsetHeight,
+    client: doc.body.clientHeight,
+  });
+
+  const remaining: Array<{ tag: string; style: string }> = [];
+  doc.querySelectorAll('*').forEach((el) => {
+    const style = el.getAttribute('style') || '';
+    if (/v[hwdsl]/.test(style)) {
+      remaining.push({ tag: el.tagName, style });
+    }
+  });
+
+  console.log(`Remaining viewport units: ${remaining.length}`, remaining);
+
+  return {
+    iframe: iframe.offsetHeight,
+    body: doc.body.scrollHeight,
+    remaining: remaining.length,
+  };
+}