Scheduling profiler: Canvas views clip by default (#22100)
Brian Vaughn committed
Aug 16, 2021 at 13:20 UTC
55d01aa0f391f62e697031c51d058405049eabc2
3 files changed
+18
-13
packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
+1
@@ -118,6 +118,7 @@ export class SnapshotsView extends View {
118
const visibleArea = this.visibleArea;
119
120
// Prevent snapshot from visibly overflowing its container when clipped.
121
+ // View clips by default, but since this view may draw async (on Image load) we re-clip.
122
const shouldClip = !rectEqualToRect(imageRect, visibleArea);
123
if (shouldClip) {
124
const clippedRect = intersectionOfRects(imageRect, visibleArea);
packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
-13
@@ -168,18 +168,6 @@ export class SuspenseEventsView extends View {
168
return; // Not in view
169
}
170
171
- const drawableRect = intersectionOfRects(suspenseRect, rect);
172
-
173
- // Clip diamonds so they don't overflow if the view has been resized (smaller).
174
- const region = new Path2D();
175
- region.rect(
176
- drawableRect.origin.x,
177
- drawableRect.origin.y,
178
- drawableRect.size.width,
179
- drawableRect.size.height,
180
- );
181
- context.save();
182
- context.clip(region);
171
context.beginPath();
172
context.fillStyle = fillStyle;
173
context.moveTo(xStart, y - halfSize);
@@ -187,7 +175,6 @@ export class SuspenseEventsView extends View {
175
context.lineTo(xStart, y + halfSize);
176
context.lineTo(xStart - halfSize, y);
177
context.fill();
190
- context.restore();
178
} else {
179
const xStop = timestampToPosition(
180
timestamp + duration,
packages/react-devtools-scheduling-profiler/src/view-base/View.js
+17
@@ -199,7 +199,24 @@ export class View {
199
this.layoutSubviews();
200
if (this._needsDisplay) this._needsDisplay = false;
201
if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
202
+
203
+ // Clip anything drawn by the view to prevent it from overflowing its visible area.
204
+ const visibleArea = this.visibleArea;
205
+ const region = new Path2D();
206
+ region.rect(
207
+ visibleArea.origin.x,
208
+ visibleArea.origin.y,
209
+ visibleArea.size.width,
210
+ visibleArea.size.height,
211
+ );
212
+ context.save();
213
+ context.clip(region);
214
+ context.beginPath();
215
+
216
this.draw(context, viewRefs);
217
+
218
+ // Stop clipping
219
+ context.restore();
220
}
221
}
222