emit and receive crosshair events

[CrashLaker]

[CrashLaker]

snippet from ryantxu image panel

export class ImageViewer extends PureComponent<Props, State> {
  state: State = {};
  stream: StreamHandler;

  dashboard: any;
  appEvents: any;

  constructor(props: Props) {
    super(props);
    this.stream = new StreamHandler(this.onCameraUpdate);
  }

  async componentDidMount() {
    this.checkStream();

    const $injector = getLegacyAngularInjector();

    // HACK HACK.. use with super super caution
    this.appEvents = await SystemJS.import('app/core/app_events');

    //this.timeSrv = $injector.get('timeSrv');
    const dashboardSrv = $injector.get('dashboardSrv');
    this.dashboard = dashboardSrv.dashboard;
    this.appEvents.on('graph-hover', this.onGraphHover);
    this.appEvents.on('graph-hover-clear', () => {
      this.setState({ hover: undefined });
    });
  }

  componentWillUnmount() {
    this.appEvents.off('graph-hover', this.onGraphHover);
  }

  onGraphHover = (evt: any) => {
    if (evt.panel?.id === this.props.id) {
      return; // same panel;
    }
    const time = evt.pos?.x;
    if (time) {
      const { hover } = this.state;
      const closest = this.findClosestImage(time);
      if (closest) {
        if (hover !== closest) {
          this.setState({ hover: closest });
        }
      } else if (hover) {
        this.setState({ hover: undefined });
      }
    }
  };