draw() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ draw() — react Function Reference

Dependency Diagram

graph TD
  31e43d15_7c69_dff1_b9a7_17416bef00f6["draw()"]
  b81cc0fe_3212_0d53_b9ee_a5cdac317703["SnapshotsView"]
  31e43d15_7c69_dff1_b9a7_17416bef00f6 -->|defined in| b81cc0fe_3212_0d53_b9ee_a5cdac317703
  163e5c39_dcbb_032a_57e9_b189e6dff0f8["_findClosestSnapshot()"]
  31e43d15_7c69_dff1_b9a7_17416bef00f6 -->|calls| 163e5c39_dcbb_032a_57e9_b189e6dff0f8
  2454e689_8f66_8042_5daf_1ecb3dec46f4["_drawSnapshotImage()"]
  31e43d15_7c69_dff1_b9a7_17416bef00f6 -->|calls| 2454e689_8f66_8042_5daf_1ecb3dec46f4
  style 31e43d15_7c69_dff1_b9a7_17416bef00f6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/SnapshotsView.js lines 52–123

  draw(context: CanvasRenderingContext2D) {
    const snapshotHeight = this._profilerData.snapshotHeight;
    const {visibleArea} = this;

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

    const y = visibleArea.origin.y;

    let x = visibleArea.origin.x;

    // Rather than drawing each snapshot where it occurred,
    // draw them at fixed intervals and just show the nearest one.
    while (x < visibleArea.origin.x + visibleArea.size.width) {
      const snapshot = this._findClosestSnapshot(x);
      if (snapshot === null) {
        // This shold never happen.
        break;
      }

      const scaledHeight = snapshotHeight;
      const scaledWidth = (snapshot.width * snapshotHeight) / snapshot.height;

      const imageRect: Rect = {
        origin: {
          x,
          y,
        },
        size: {width: scaledWidth, height: scaledHeight},
      };

      // Lazily create and cache Image objects as we render a snapsho for the first time.
      if (snapshot.image === null) {
        const img = (snapshot.image = new Image());
        img.onload = () => {
          this._drawSnapshotImage(context, snapshot, imageRect);
        };
        img.src = snapshot.imageSource;
      } else {
        this._drawSnapshotImage(context, snapshot, imageRect);
      }

      x += scaledWidth + BORDER_SIZE;
    }

    const hoverLocation = this._hoverLocation;
    if (hoverLocation !== null) {
      const scrubberWidth = SNAPSHOT_SCRUBBER_SIZE + BORDER_SIZE * 2;
      const scrubberOffset = scrubberWidth / 2;

      context.fillStyle = COLORS.SCRUBBER_BORDER;
      context.fillRect(
        hoverLocation.x - scrubberOffset,
        visibleArea.origin.y,
        scrubberWidth,
        visibleArea.size.height,
      );

      context.fillStyle = COLORS.SCRUBBER_BACKGROUND;
      context.fillRect(
        hoverLocation.x - scrubberOffset + BORDER_SIZE,
        visibleArea.origin.y,
        SNAPSHOT_SCRUBBER_SIZE,
        visibleArea.size.height,
      );
    }
  }