Clip Suspense diamonds so they don't overflow after being resized

facebook · Jul 30, 2021 · 9c656f2 · 9c656f2
1 parent b7e66ec
commit 9c656f2
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -166,13 +166,26 @@ 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,