@gemx-dev/heatmap-react 3.5.46 → 3.5.47

package/src/helpers/elm-callout.ts

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

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

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

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

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

@@ -1,56 +0,0 @@
-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,
-  };
-}