Function createTextOverlay

src/components/createTextOverlay.ts:37–118

(container: HTMLElement)

};

export function createTextOverlay(container: HTMLElement): TextOverlay {
  const computedStyle = getComputedStyle(container);
  const computedPosition = computedStyle.position;
  const computedOverflow = computedStyle.overflow;

  const didSetRelative = computedPosition === 'static';
  const didSetOverflowVisible = computedOverflow === 'hidden' || computedOverflow === 'scroll' || computedOverflow === 'auto';

  const previousInlinePosition = didSetRelative ? container.style.position : null;
  const previousInlineOverflow = didSetOverflowVisible ? container.style.overflow : null;

  if (didSetRelative) {
    container.style.position = 'relative';
  }

  if (didSetOverflowVisible) {
    container.style.overflow = 'visible';
  }

  const overlay = document.createElement('div');
  overlay.style.position = 'absolute';
  overlay.style.inset = '0';
  overlay.style.pointerEvents = 'none';
  overlay.style.overflow = 'visible';
  overlay.style.zIndex = '10'; // Above zoom slider (z-index: 4) and other overlays
  container.appendChild(overlay);

  let disposed = false;

  const clear = (): void => {
    if (disposed) return;
    overlay.replaceChildren();
  };

  const addLabel: TextOverlay['addLabel'] = (text, x, y, options) => {
    if (disposed) {
      // Keep it non-throwing so callsites don't need try/catch in teardown paths.
      return document.createElement('span');
    }

    const span = document.createElement('span');
    span.textContent = text;
    span.style.position = 'absolute';
    span.style.left = `${x}px`;
    span.style.top = `${y}px`;
    span.style.pointerEvents = 'none';
    span.style.userSelect = 'none';
    span.style.whiteSpace = 'nowrap';
    span.style.lineHeight = '1';

    if (options?.fontSize != null) span.style.fontSize = `${options.fontSize}px`;
    if (options?.color != null) span.style.color = options.color;

    const rotation = options?.rotation ?? 0;
    const anchor = options?.anchor ?? 'start';
    const { translateX, originX } = getAnchorTransform(anchor);

    span.style.transformOrigin = `${originX} 50%`;