Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web_ui] PersistedPlatformView attribute update handling to enable resizing #12227

Merged
harryterkelsen merged 7 commits into from
Sep 26, 2019
Merged

[web_ui] PersistedPlatformView attribute update handling to enable resizing #12227

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
584ba08
add PersistedPlatformView attribute update handling to enable resizing
tauu Sep 10, 2019
a0e2869
update size of root element created by a PlatformView
tauu Sep 19, 2019
7a59c4f
improved comments
tauu Sep 19, 2019
76af94b
enforce effective size of PlatformView surface
tauu Sep 19, 2019
2e1a015
updated formating of platform_view.dart
tauu Sep 19, 2019
4759afb
stop storing root element of PlatformView in its Surface
tauu Sep 19, 2019
12d94c9
move setting overflow property to createElement
tauu Sep 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 31 additions & 6 deletions lib/web_ui/lib/src/engine/surface/platform_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,13 @@ class PersistedPlatformView extends PersistedLeafSurface {
final double width;
final double height;

html.HtmlElement _hostElement;
html.ShadowRoot _shadowRoot;

PersistedPlatformView(this.viewId, this.dx, this.dy, this.width, this.height);

@override
html.Element createElement() {
_hostElement = defaultCreateElement('flt-platform-view');
html.Element element = defaultCreateElement('flt-platform-view');
Copy link
Contributor

@harryterkelsen harryterkelsen Sep 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should store the platform view that is created, i.e. platformView in createElement() and on update, update the size and position of the platform view, rather than the shadow root element (flt-platform-view).

This way, the created platform view is itself resized (imagine a <video> element, if we just resize the flt-platform-view element, then the <video> won't be resized, it will just be clipped).

Copy link
Contributor Author

@tauu tauu Sep 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, so the latest version will set the size of both the shadow root element and the PlatformView root element. In addition the overflow property is set to auto on the PlatformView root element. As this property was not set currently, the default behaviour was to let the PlatformView overflow. This will haben even if we set the size of the shadow root (e.g. if a video element is wrapped in a div element).

By setting the overflow property on the shadow root, a user may still chose a different overflow behaviour for the shadow root element. Hope that's ok this way.

Copy link
Contributor

@harryterkelsen harryterkelsen Sep 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's set the overflow to hidden, and also set it on the element in the createElement method so we don't reset it on every apply.


// Allow the platform view host element to receive pointer events.
//
Expand All @@ -34,9 +33,12 @@ class PersistedPlatformView extends PersistedLeafSurface {
// to enable accessibility, you must double tap the app *outside of a
// platform view*. As a consequence, a full-screen platform view will make
// it impossible to enable accessibility.
_hostElement.style.pointerEvents = 'auto';
element.style.pointerEvents = 'auto';

_shadowRoot = _hostElement.attachShadow(<String, String>{'mode': 'open'});
// Enforce the effective size of the PlatformView.
element.style.overflow = 'hidden';

_shadowRoot = element.attachShadow(<String, String>{'mode': 'open'});
final html.StyleElement _styleReset = html.StyleElement();
_styleReset.innerHtml = '''
:host {
Expand All @@ -50,22 +52,45 @@ class PersistedPlatformView extends PersistedLeafSurface {
} else {
html.window.console.warn('No platform view created for id $viewId');
}
return _hostElement;
return element;
}

@override
Matrix4 get localTransformInverse => null;

@override
void apply() {
_hostElement.style
rootElement.style
..transform = 'translate(${dx}px, ${dy}px)'
..width = '${width}px'
..height = '${height}px';
// Set size of the root element created by the PlatformView.
final html.Element platformView =
platformViewRegistry.getCreatedView(viewId);
if (platformView != null) {
platformView.style
..width = '${width}px'
..height = '${height}px';
}
}

@override
double matchForUpdate(PersistedPlatformView existingSurface) {
return existingSurface.viewId == viewId ? 0.0 : 1.0;
}

@override
void update(PersistedPlatformView oldSurface) {
super.update(oldSurface);
if (viewId != oldSurface.viewId) {
// The content of the surface has to be rebuild if the viewId is changed.
build();
} else if (dx != oldSurface.dx ||
dy != oldSurface.dy ||
width != oldSurface.width ||
height != oldSurface.height) {
// A change in any of the dimensions is performed by calling apply.
apply();
}
}
}