draw() — react Function Reference

Architecture documentation for the draw() function in SchedulingEventsView.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ draw() — react Function Reference

Dependency Diagram

graph TD
  bdfbce96_aa1e_92d9_4ef5_88d5170201a6["draw()"]
  b603a917_4a82_e943_1f8b_6d182bba008b["SchedulingEventsView"]
  bdfbce96_aa1e_92d9_4ef5_88d5170201a6 -->|defined in| b603a917_4a82_e943_1f8b_6d182bba008b
  e90b4f85_79ff_f7c6_2a8c_0b24621f67c7["_drawSingleSchedulingEvent()"]
  bdfbce96_aa1e_92d9_4ef5_88d5170201a6 -->|calls| e90b4f85_79ff_f7c6_2a8c_0b24621f67c7
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  bdfbce96_aa1e_92d9_4ef5_88d5170201a6 -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  style bdfbce96_aa1e_92d9_4ef5_88d5170201a6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js lines 135–210

  draw(context: CanvasRenderingContext2D) {
    const {
      frame,
      _profilerData: {schedulingEvents},
      _hoveredEvent,
      visibleArea,
    } = this;

    context.fillStyle = COLORS.BACKGROUND;
    context.fillRect(
      visibleArea.origin.x,
      visibleArea.origin.y,
      visibleArea.size.width,
      visibleArea.size.height,
    );

    // Draw events
    const baseY = frame.origin.y + TOP_ROW_PADDING;
    const scaleFactor = positioningScaleFactor(
      this._intrinsicSize.width,
      frame,
    );

    const highlightedEvents: SchedulingEvent[] = [];

    schedulingEvents.forEach(event => {
      if (event === _hoveredEvent) {
        highlightedEvents.push(event);
        return;
      }
      this._drawSingleSchedulingEvent(
        context,
        visibleArea,
        event,
        baseY,
        scaleFactor,
        false,
      );
    });

    // Draw the highlighted items on top so they stand out.
    // This is helpful if there are multiple (overlapping) items close to each other.
    highlightedEvents.forEach(event => {
      this._drawSingleSchedulingEvent(
        context,
        visibleArea,
        event,
        baseY,
        scaleFactor,
        true,
      );
    });

    // Render bottom border.
    // Propose border rect, check if intersects with `rect`, draw intersection.
    const borderFrame: Rect = {
      origin: {
        x: frame.origin.x,
        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,
      },
      size: {
        width: frame.size.width,
        height: BORDER_SIZE,
      },
    };
    if (rectIntersectsRect(borderFrame, visibleArea)) {
      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
      context.fillStyle = COLORS.REACT_WORK_BORDER;
      context.fillRect(
        borderDrawableRect.origin.x,
        borderDrawableRect.origin.y,
        borderDrawableRect.size.width,
        borderDrawableRect.size.height,
      );
    }
  }