Skip to content

Commit

Permalink
Scheduling profiler: Canvas views clip by default (#22100)
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn authored Aug 16, 2021
1 parent bc4e751 commit 55d01aa
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export class SnapshotsView extends View {
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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -168,26 +168,13 @@ export class SuspenseEventsView extends View {
return; // Not in view
}

const drawableRect = intersectionOfRects(suspenseRect, rect);

// Clip diamonds so they don't overflow if the view has been resized (smaller).
const region = new Path2D();
region.rect(
drawableRect.origin.x,
drawableRect.origin.y,
drawableRect.size.width,
drawableRect.size.height,
);
context.save();
context.clip(region);
context.beginPath();
context.fillStyle = fillStyle;
context.moveTo(xStart, y - halfSize);
context.lineTo(xStart + halfSize, y);
context.lineTo(xStart, y + halfSize);
context.lineTo(xStart - halfSize, y);
context.fill();
context.restore();
} else {
const xStop = timestampToPosition(
timestamp + duration,
Expand Down
17 changes: 17 additions & 0 deletions packages/react-devtools-scheduling-profiler/src/view-base/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,24 @@ export class View {
this.layoutSubviews();
if (this._needsDisplay) this._needsDisplay = false;
if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;

// Clip anything drawn by the view to prevent it from overflowing its visible area.
const visibleArea = this.visibleArea;
const region = new Path2D();
region.rect(
visibleArea.origin.x,
visibleArea.origin.y,
visibleArea.size.width,
visibleArea.size.height,
);
context.save();
context.clip(region);
context.beginPath();

this.draw(context, viewRefs);

// Stop clipping
context.restore();
}
}

Expand Down

0 comments on commit 55d01aa

Please sign in to comment.