openreplay/frontend/app/player/web/Screen/Inspector.ts

import type Screen from './Screen';
import type Marker from './Marker';

export default class Inspector {
  constructor(
    private screen: Screen,
    private marker: Marker,
  ) {}

  private onMouseMove = (e: MouseEvent) => {
    e.stopPropagation();

    const target = this.screen.getElementFromPoint(e);
    if (target === this.marker.target) {
      return;
    }

    this.marker.mark(target);
  };

  private onOverlayLeave = () => this.marker.unmark();

  private onMarkClick = () => {
    const { target } = this.marker;
    if (!target) {
      return;
    }
    this.clickCallback && this.clickCallback({ target });
  };

  addClickListener(callback: (el: { target: Element }) => void) {
    this.clickCallback = callback;
  }

  private clickCallback: (e: { target: Element }) => void = () => {};

  enable() {
    this.screen.overlay.addEventListener('mousemove', this.onMouseMove);
    this.screen.overlay.addEventListener('mouseleave', this.onOverlayLeave);
    this.screen.overlay.addEventListener('click', this.onMarkClick);
  }

  clean() {
    this.screen.overlay.removeEventListener('mousemove', this.onMouseMove);
    this.screen.overlay.removeEventListener('mouseleave', this.onOverlayLeave);
    this.screen.overlay.removeEventListener('click', this.onMarkClick);
  }
}