[web] Add dynamic view sizing for non-implicit views. #48541

ditman · 2023-11-30T20:14:05Z

This PR

Computes the correct physicalConstraints of a view off of its physicalSize and the JSViewConstraints passed by the user when creating a view.
- By default, and to preserve current behavior, the default constraints are "tight" to the physicalSize.
- From Javascript, -1 is a valid "max" constraint, and is interpreted as double.infinity in Flutter.
Hooks the Size of a render call into the renderer, so it doesn't have to rely in the (maybe outdated) physicalSize of a view.
Hooks the onResize event from a view into the dimensionsChanged event from the Engine, so the framework knows it needs to repaint.

TODO:

Recompute physicalConstraints only when the view resizes and not always that the app needs to render.
Tests

Issues

Fixes: [web:multi-view] define an MVP for FlutterViews participation in host page layout flutter#137444

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making or feature I am adding, or the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
I updated/added relevant documentation (doc comments with ///).
I signed the CLA.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

ditman

Reviewing myself.

lib/web_ui/lib/src/engine/platform_dispatcher.dart

ditman · 2023-12-01T01:59:37Z

lib/web_ui/lib/src/engine/platform_dispatcher.dart

+    viewManager.onViewsChanged.listen((_) {
+      invokeOnMetricsChanged();
+    });


Do we want to auto-attach this here, or should we do it after the view has been created, through some registration method in the platform_dispatcher?

ditman · 2023-12-01T02:00:43Z

lib/web_ui/lib/src/engine/canvaskit/renderer.dart

@@ -391,7 +391,7 @@ class CanvasKitRenderer implements Renderer {
    final Rasterizer rasterizer =
        _getRasterizerForView(view as EngineFlutterView);

-    rasterizer.draw((scene as LayerScene).layerTree);
+    rasterizer.draw((scene as LayerScene).layerTree, size: size);


@harryterkelsen is there a way of testing this? Somehow asserting that the thing that was drawn matches the size of the incoming size?

IIRC the size is only used to size the output canvases before drawing to them, so if you wanted to test this then I think you should call draw with an explicit size and then check that the bitmap created and the bitmaprenderer canvases are the same size as the size that is passed in.

ditman · 2023-12-01T02:04:30Z

lib/web_ui/lib/src/engine/view_embedder/flutter_view_manager.dart

  // The controller of the [onViewsChanged] stream.
  final StreamController<void> _onViewsChangedController =
      StreamController<void>.broadcast();

  /// A stream of `void` events that will fire when a view is registered/unregistered.
  Stream<void> get onViewsChanged => _onViewsChangedController.stream;

+  /// Should we create a different onViewResized stream?


Should we propagate resize events from this class at all, or should these subscriptions live elsewhere?

If we always re-render when there is a resize, then I don't think we need a stream for resize events. I would rather have resize trigger a re-render at a higher level in the engine/framework than at the Renderer level since it doesn't seem right to me for the Renderer to decide when to re-render. I think the Renderer should only perform Render requests and never initiate them.

lib/web_ui/lib/src/engine/window.dart

harryterkelsen

Responded to some questions in the PR. I think we should add a test showing a scene being rendered at different sizes in the CanvasKit tests.

(With hardcoded constraints)

…ved.

ditman · 2024-01-10T18:23:41Z

Dynamic View Sizing has relanded in the framework:

Reapply "Dynamic view sizing" (#140165) flutter#140918

Time to refresh this PR!

ditman · 2024-02-02T03:41:22Z

This can be simplified SSSSSO much, it's embarrassing. I'm going to post the simpler version in a new PR so we can all easily laugh together 🤦

ditman · 2024-02-02T04:49:03Z

This is much better, closing: #50271

### Changes * Introduces a new `viewConstraints` JS configuration parameter to configure max/min width/height constraints for a view. Those can have the following values: * An integer `>= 0`: max/min size in pixels * `Infinity` (or `Number.POSITIVE_INFINITY`): (only for max values) -> **unconstrained**. * When any value is not set, it defaults to "tight to the current size". * See [Understanding constraints](https://docs.flutter.dev/ui/layout/constraints). * Computes the correct `physicalConstraints` of a view off of its `physicalSize` and its `viewConstraints` for the framework to use during layout. * When no constraints are passed, the current behavior is preserved: the default constraints are "tight" to the `physicalSize`. * Resizes the current view DOM when requested by the framework and updates its internal physicalSize, then continues with the render procedure. ### Example This is how we can configure a view to "take as much vertical space as needed": ```js flutterApp.addView({ viewConstraints: { minHeight: 0, maxHeight: Infinity, }, hostElement: ..., }); ``` ### TODO * Needs actual unit tests ### Issues * Fixes flutter/flutter#137444 * Closes #48541 [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style

### Changes * Introduces a new `viewConstraints` JS configuration parameter to configure max/min width/height constraints for a view. Those can have the following values: * An integer `>= 0`: max/min size in pixels * `Infinity` (or `Number.POSITIVE_INFINITY`): (only for max values) -> **unconstrained**. * When any value is not set, it defaults to "tight to the current size". * See [Understanding constraints](https://docs.flutter.dev/ui/layout/constraints). * Computes the correct `physicalConstraints` of a view off of its `physicalSize` and its `viewConstraints` for the framework to use during layout. * When no constraints are passed, the current behavior is preserved: the default constraints are "tight" to the `physicalSize`. * Resizes the current view DOM when requested by the framework and updates its internal physicalSize, then continues with the render procedure. ### Example This is how we can configure a view to "take as much vertical space as needed": ```js flutterApp.addView({ viewConstraints: { minHeight: 0, maxHeight: Infinity, }, hostElement: ..., }); ``` ### TODO * Needs actual unit tests ### Issues * Fixes flutter/flutter#137444 * Closes flutter#48541 [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style

github-actions bot added the platform-web Code specifically for the web engine label Nov 30, 2023

ditman commented Dec 1, 2023

View reviewed changes

ditman requested review from mdebbar and harryterkelsen December 2, 2023 01:03

harryterkelsen reviewed Dec 5, 2023

View reviewed changes

ditman force-pushed the web-dynamic-view-sizing branch 2 times, most recently from 5372b79 to 44a4b07 Compare December 13, 2023 23:49

ditman added 4 commits December 20, 2023 11:49

[web] Add size to render.

36b2462

(With hardcoded constraints)

Add JsViewConstraints object.

d67b602

Use JsViewConstraints object.

e3319a0

[web] Add size to renderer.renderScene.

5ccfecd

ditman force-pushed the web-dynamic-view-sizing branch from 0ecdf36 to a612de8 Compare December 20, 2023 19:49

ditman added 6 commits December 20, 2023 11:52

[web] Recompute physicalSize for physicalConstraints.

e0ed8ae

Cache lastObservedSize in dimensionsProvider until a new one is obser…

200d0b5

…ved.

Make test a few hundred milliseconds faster.

c3f0d9f

Add domManager resize

cb39de7

_computePhysicalSize is private now.

dd1ce2c

Attempt a test (and fail)

a691ace

ditman force-pushed the web-dynamic-view-sizing branch from a612de8 to a691ace Compare December 20, 2023 19:56

ditman mentioned this pull request Feb 2, 2024

[web] Add dynamic view sizing (v2) #50271

Merged

8 tasks

ditman closed this Feb 2, 2024

ditman deleted the web-dynamic-view-sizing branch February 2, 2024 04:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[web] Add dynamic view sizing for non-implicit views. #48541

[web] Add dynamic view sizing for non-implicit views. #48541

Uh oh!

ditman commented Nov 30, 2023 •

edited

Loading

Uh oh!

ditman left a comment

Uh oh!

Uh oh!

ditman Dec 1, 2023

Uh oh!

ditman Dec 1, 2023

Uh oh!

harryterkelsen Dec 5, 2023

Uh oh!

ditman Dec 1, 2023

Uh oh!

harryterkelsen Dec 5, 2023

Uh oh!

Uh oh!

harryterkelsen left a comment

Uh oh!

ditman commented Jan 10, 2024

Uh oh!

ditman commented Feb 2, 2024

Uh oh!

ditman commented Feb 2, 2024

Uh oh!

Uh oh!

[web] Add dynamic view sizing for non-implicit views. #48541

[web] Add dynamic view sizing for non-implicit views. #48541

Uh oh!

Conversation

ditman commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issues

Pre-launch Checklist

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ditman Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

ditman Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

harryterkelsen Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

ditman Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

harryterkelsen Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

harryterkelsen left a comment

Choose a reason for hiding this comment

Uh oh!

ditman commented Jan 10, 2024

Uh oh!

ditman commented Feb 2, 2024

Uh oh!

ditman commented Feb 2, 2024

Uh oh!

Uh oh!

ditman commented Nov 30, 2023 •

edited

Loading