draw() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ draw() — react Function Reference

Dependency Diagram

graph TD
  f2dac41f_c6ba_b398_a87d_c07c5219fab2["draw()"]
  2c3a6a4e_0c73_35ac_af62_6070bfc10612["ThrownErrorsView"]
  f2dac41f_c6ba_b398_a87d_c07c5219fab2 -->|defined in| 2c3a6a4e_0c73_35ac_af62_6070bfc10612
  206c118a_a95b_2736_0a2c_50fcd6152f5e["_drawSingleThrownError()"]
  f2dac41f_c6ba_b398_a87d_c07c5219fab2 -->|calls| 206c118a_a95b_2736_0a2c_50fcd6152f5e
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  f2dac41f_c6ba_b398_a87d_c07c5219fab2 -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  style f2dac41f_c6ba_b398_a87d_c07c5219fab2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js lines 109–184

  draw(context: CanvasRenderingContext2D) {
    const {
      frame,
      _profilerData: {thrownErrors},
      _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: ThrownError[] = [];

    thrownErrors.forEach(thrownError => {
      if (thrownError === _hoveredEvent) {
        highlightedEvents.push(thrownError);
        return;
      }
      this._drawSingleThrownError(
        context,
        visibleArea,
        thrownError,
        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(thrownError => {
      this._drawSingleThrownError(
        context,
        visibleArea,
        thrownError,
        baseY,
        scaleFactor,
        true,
      );
    });

    // Render bottom borders.
    // 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,
      );
    }
  }