[skwasm] Clip pictures if they go beyond the bounds of the window. (#50887)

This fixes flutter/flutter#143800, where we are attempting to capture an image that is way too large. We only need to render the part of the image that will be visible in the window.

Author: eyebrowsoffire

lib/web_ui/lib/src/engine/scene_view.dart

@@ -20,6 +20,7 @@ typedef RenderResult = ({
 // composite pictures into the canvases in the DOM tree it builds.
 abstract class PictureRenderer {
   FutureOr<RenderResult> renderPictures(List<ScenePicture> picture);
+  ScenePicture clipPicture(ScenePicture picture, ui.Rect clip);
 }
 
 class _SceneRender {
@@ -86,20 +87,49 @@ class EngineSceneView {
     }
   }
 
+  ScenePicture _clipPictureIfNeeded(ScenePicture picture, ui.Rect clip) {
+    final ui.Rect pictureRect = picture.cullRect;
+    if (pictureRect.left >= clip.left &&
+        pictureRect.top >= clip.top &&
+        pictureRect.right <= clip.right &&
+        pictureRect.bottom <= clip.bottom) {
+      // The picture is already within the clip bounds.
+      return picture;
+    }
+
+    return pictureRenderer.clipPicture(picture, clip);
+  }
+
+  ui.Rect? _getScreenBounds() {
+    final DomScreen? screen = domWindow.screen;
+    if (screen == null) {
+      return null;
+    }
+    return ui.Rect.fromLTWH(0, 0, screen.width, screen.height);
+  }
+
   Future<void> _renderScene(EngineScene scene, FrameTimingRecorder? recorder) async {
+    final ui.Rect? screenBounds = _getScreenBounds();
+    if (screenBounds == null) {
+      // The browser isn't displaying the document. Skip rendering.
+      return;
+    }
     final List<LayerSlice> slices = scene.rootLayer.slices;
     final List<ScenePicture> picturesToRender = <ScenePicture>[];
+    final List<ScenePicture> originalPicturesToRender = <ScenePicture>[];
     for (final LayerSlice slice in slices) {
-      if (slice is PictureSlice) {
-        picturesToRender.add(slice.picture);
+      if (slice is PictureSlice && !slice.picture.cullRect.isEmpty) {
+        originalPicturesToRender.add(slice.picture);
+        final ScenePicture clippedPicture = _clipPictureIfNeeded(slice.picture, screenBounds);
+        picturesToRender.add(clippedPicture);
       }
     }
     final Map<ScenePicture, DomImageBitmap> renderMap;
     if (picturesToRender.isNotEmpty) {
       final RenderResult renderResult = await pictureRenderer.renderPictures(picturesToRender);
       renderMap = <ScenePicture, DomImageBitmap>{
         for (int i = 0; i < picturesToRender.length; i++)
-          picturesToRender[i]: renderResult.imageBitmaps[i],
+          originalPicturesToRender[i]: renderResult.imageBitmaps[i],
       };
       recorder?.recordRasterStart(renderResult.rasterStartMicros);
       recorder?.recordRasterFinish(renderResult.rasterEndMicros);
@@ -125,10 +155,11 @@ class EngineSceneView {
             }
           }
 
+          final ui.Rect clippedBounds = slice.picture.cullRect.intersect(screenBounds);
           if (container != null) {
-            container.bounds = slice.picture.cullRect;
+            container.bounds = clippedBounds;
           } else {
-            container = PictureSliceContainer(slice.picture.cullRect);
+            container = PictureSliceContainer(clippedBounds);
           }
           container.updateContents();
           container.renderBitmap(renderMap[slice.picture]!);

lib/web_ui/lib/src/engine/skwasm/skwasm_impl/renderer.dart

@@ -482,4 +482,14 @@ class SkwasmPictureRenderer implements PictureRenderer {
   @override
   FutureOr<RenderResult> renderPictures(List<ScenePicture> pictures) =>
     surface.renderPictures(pictures.cast<SkwasmPicture>());
+
+  @override
+  ScenePicture clipPicture(ScenePicture picture, ui.Rect clip) {
+    final ui.PictureRecorder recorder = ui.PictureRecorder();
+    final ui.Canvas canvas = ui.Canvas(recorder, clip);
+    canvas.clipRect(clip);
+    canvas.drawPicture(picture);
+
+    return recorder.endRecording() as ScenePicture;
+  }
 }

lib/web_ui/test/engine/scene_view_test.dart

@@ -43,7 +43,14 @@ class StubPictureRenderer implements PictureRenderer {
     );
   }
 
+  @override
+  ScenePicture clipPicture(ScenePicture picture, ui.Rect clip) {
+    clipRequests[picture] = clip;
+    return picture;
+  }
+
   List<ScenePicture> renderedPictures = <ScenePicture>[];
+  Map<ScenePicture, ui.Rect> clipRequests = <ScenePicture, ui.Rect>{};
 }
 
 void testMain() {
@@ -149,4 +156,21 @@ void testMain() {
     expect(stubPictureRenderer.renderedPictures.first, pictures.first);
     expect(stubPictureRenderer.renderedPictures.last, pictures.last);
   });
+
+  test('SceneView clips pictures that are outside the window screen', () async {
+      final StubPicture picture = StubPicture(const ui.Rect.fromLTWH(
+        -50,
+        -50,
+        100,
+        120,
+      ));
+
+      final EngineRootLayer rootLayer = EngineRootLayer();
+      rootLayer.slices.add(PictureSlice(picture));
+      final EngineScene scene = EngineScene(rootLayer);
+      await sceneView.renderScene(scene, null);
+
+      expect(stubPictureRenderer.renderedPictures.length, 1);
+      expect(stubPictureRenderer.clipRequests.containsKey(picture), true);
+  });
 }