SchedulingEventsView Class — react Architecture

Source Code

packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js lines 43–288

export class SchedulingEventsView extends View {
  _profilerData: TimelineData;
  _intrinsicSize: Size;

  _hoveredEvent: SchedulingEvent | null = null;
  onHover: ((event: SchedulingEvent | null) => void) | null = null;
  onClick:
    | ((event: SchedulingEvent | null, eventIndex: number | null) => void)
    | null = null;

  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
    super(surface, frame);
    this._profilerData = profilerData;

    this._intrinsicSize = {
      width: this._profilerData.duration,
      height: EVENT_ROW_HEIGHT_FIXED,
    };
  }

  desiredSize(): Size {
    return this._intrinsicSize;
  }

  setHoveredEvent(hoveredEvent: SchedulingEvent | null) {
    if (this._hoveredEvent === hoveredEvent) {
      return;
    }
    this._hoveredEvent = hoveredEvent;
    this.setNeedsDisplay();
  }

  /**
   * Draw a single `SchedulingEvent` as a circle in the canvas.
   */
  _drawSingleSchedulingEvent(
    context: CanvasRenderingContext2D,
    rect: Rect,
    event: SchedulingEvent,
    baseY: number,
    scaleFactor: number,
    showHoverHighlight: boolean,
  ) {
    const {frame} = this;
    const {timestamp, type, warning} = event;

    const x = timestampToPosition(timestamp, scaleFactor, frame);
    const radius = REACT_EVENT_DIAMETER / 2;
    const eventRect: Rect = {
      origin: {
        x: x - radius,
        y: baseY,
      },
      size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},
    };
    if (!rectIntersectsRect(eventRect, rect)) {
      return; // Not in view
    }

    let fillStyle = null;

    if (warning !== null) {
      fillStyle = showHoverHighlight
        ? COLORS.WARNING_BACKGROUND_HOVER
        : COLORS.WARNING_BACKGROUND;
    } else {
      switch (type) {
        case 'schedule-render':
        case 'schedule-state-update':
        case 'schedule-force-update':
          fillStyle = showHoverHighlight
            ? COLORS.REACT_SCHEDULE_HOVER
            : COLORS.REACT_SCHEDULE;
          break;
        default:
          if (__DEV__) {
            console.warn('Unexpected event type "%s"', type);
          }
          break;
      }
    }