_drawSnapshotImage() — react Function Reference

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

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ _drawSnapshotImage() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/SnapshotsView.js lines 137–193

  _drawSnapshotImage(
    context: CanvasRenderingContext2D,
    snapshot: Snapshot,
    imageRect: Rect,
  ) {
    const visibleArea = this.visibleArea;

    // Prevent snapshot from visibly overflowing its container when clipped.
    // View clips by default, but since this view may draw async (on Image load) we re-clip.
    const shouldClip = !rectEqualToRect(imageRect, visibleArea);
    if (shouldClip) {
      const clippedRect = intersectionOfRects(imageRect, visibleArea);
      context.save();
      context.beginPath();
      context.rect(
        clippedRect.origin.x,
        clippedRect.origin.y,
        clippedRect.size.width,
        clippedRect.size.height,
      );
      context.closePath();
      context.clip();
    }

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

    // $FlowFixMe[incompatible-call] Flow doesn't know about the 9 argument variant of drawImage()
    context.drawImage(
      snapshot.image,

      // Image coordinates
      0,
      0,

      // Native image size
      snapshot.width,
      snapshot.height,

      // Canvas coordinates
      imageRect.origin.x + BORDER_SIZE,
      imageRect.origin.y + BORDER_SIZE,

      // Scaled image size
      imageRect.size.width - BORDER_SIZE * 2,
      imageRect.size.height - BORDER_SIZE * 2,
    );

    if (shouldClip) {
      context.restore();
    }
  }