Skip to content

Commit

Permalink
[web] Migrate Flutter Web DOM usage to JS static interop - 17. (flutt…
Browse files Browse the repository at this point in the history 
…er#33338)
  • Loading branch information
@joshualitt
joshualitt authored May 23, 2022
1 parent a9918b1 commit c2cb62b
Show file tree
Hide file tree
Showing 45 changed files with 210 additions and 200 deletions.
6 changes: 3 additions & 3 deletions lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,15 +261,15 @@ class HtmlViewEmbedder {
DomElement headClipView,
) {
int indexInFlutterView = -1;
if (headClipView.parentElement != null) {
if (headClipView.parent != null) {
indexInFlutterView = skiaSceneHost!.children.indexOf(headClipView);
headClipView.remove();
}
DomElement head = platformView;
int clipIndex = 0;
// Re-use as much existing clip views as needed.
while (head != headClipView && clipIndex < numClips) {
head = head.parentElement!;
head = head.parent!;
clipIndex++;
}
// If there weren't enough existing clip views, add more.
Expand Down Expand Up @@ -329,7 +329,7 @@ class HtmlViewEmbedder {
case MutatorType.clipRect:
case MutatorType.clipRRect:
case MutatorType.clipPath:
final DomElement clipView = head.parentElement!;
final DomElement clipView = head.parent!;
clipView.style.clip = '';
clipView.style.clipPath = '';
headTransform = Matrix4.identity();
Expand Down
32 changes: 31 additions & 1 deletion lib/web_ui/lib/src/engine/dom.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class DomWindow {}

extension DomWindowExtension on DomWindow {
external DomConsole get console;
external num get devicePixelRatio;
external DomDocument get document;
external int? get innerHeight;
external int? get innerWidth;
Expand Down Expand Up @@ -134,8 +135,12 @@ extension DomProgressEventExtension on DomProgressEvent {
class DomNode extends DomEventTarget {}

extension DomNodeExtension on DomNode {
external DomNode? get firstChild;
external String get innerText;
external DomNode? get lastChild;
external DomNode appendChild(DomNode node);
external DomElement? get parentElement;
DomElement? get parent => js_util.getProperty(this, 'parentElement');
String? get text => js_util.getProperty(this, 'textContent');
external DomNode? get parentNode;
external DomNode insertBefore(DomNode newNode, DomNode? referenceNode);
void remove() {
Expand Down Expand Up @@ -218,6 +223,19 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
setProperty('font-feature-settings', value, '');
set fontVariationSettings(String value) =>
setProperty('font-variation-settings', value, '');
set visibility(String value) => setProperty('visibility', value, '');
set overflow(String value) => setProperty('overflow', value, '');
set boxShadow(String value) => setProperty('box-shadow', value, '');
set borderTopLeftRadius(String value) =>
setProperty('border-top-left-radius', value, '');
set borderTopRightRadius(String value) =>
setProperty('border-top-right-radius', value, '');
set borderBottomLeftRadius(String value) =>
setProperty('border-bottom-left-radius', value, '');
set borderBottomRightRadius(String value) =>
setProperty('border-bottom-right-radius', value, '');
set borderRadius(String value) => setProperty('border-radius', value, '');
set perspective(String value) => setProperty('perspective', value, '');
String get width => getPropertyValue('width');
String get height => getPropertyValue('height');
String get position => getPropertyValue('position');
Expand Down Expand Up @@ -249,6 +267,18 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
String get fontFeatureSettings => getPropertyValue('font-feature-settings');
String get fontVariationSettings =>
getPropertyValue('font-variation-settings');
String get visibility => getPropertyValue('visibility');
String get overflow => getPropertyValue('overflow');
String get boxShadow => getPropertyValue('box-shadow');
String get borderTopLeftRadius => getPropertyValue('border-top-left-radius');
String get borderTopRightRadius =>
getPropertyValue('border-top-right-radius');
String get borderBottomLeftRadius =>
getPropertyValue('border-bottom-left-radius');
String get borderBottomRightRadius =>
getPropertyValue('border-bottom-right-radius');
String get borderRadius => getPropertyValue('border-radius');
String get perspective => getPropertyValue('perspective');

external String getPropertyValue(String property);
void setProperty(String propertyName, String value, [String? priority]) {
Expand Down
4 changes: 2 additions & 2 deletions lib/web_ui/lib/src/engine/engine_canvas.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import 'vector_math.dart';
/// This can be used either as an interface or super-class.
abstract class EngineCanvas {
/// The element that is attached to the DOM.
html.Element get rootElement;
DomElement get rootElement;

void dispose() {
clear();
Expand Down Expand Up @@ -296,7 +296,7 @@ mixin SaveElementStackTracking on EngineCanvas {
/// The element at the top of the element stack, or [rootElement] if the stack
/// is empty.
html.Element get currentElement =>
_elementStack.isEmpty ? rootElement : _elementStack.last;
_elementStack.isEmpty ? rootElement as html.Element : _elementStack.last;

/// The stack that maintains the DOM elements used to express certain paint
/// operations, such as clips.
Expand Down
4 changes: 1 addition & 3 deletions lib/web_ui/lib/src/engine/html/backdrop_filter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:html' as html;

import 'package:ui/ui.dart' as ui;

import '../browser_detection.dart';
Expand All @@ -26,7 +24,7 @@ class PersistedBackdropFilter extends PersistedContainerSurface
/// [rootElement] is used to host child in front of [filterElement] that
/// is transformed to cover background.
@override
html.Element? get childContainer => _childContainer as html.Element?;
DomElement? get childContainer => _childContainer;
DomElement? _childContainer;
DomElement? _filterElement;
ui.Rect? _activeClipBounds;
Expand Down
47 changes: 26 additions & 21 deletions lib/web_ui/lib/src/engine/html/bitmap_canvas.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class BitmapCanvas extends EngineCanvas {
static const int kPaddingPixels = 1;

@override
final html.Element rootElement = html.Element.tag('flt-canvas');
final DomElement rootElement = createDomElement('flt-canvas');

final CanvasPool _canvasPool;

Expand Down Expand Up @@ -239,7 +239,7 @@ class BitmapCanvas extends EngineCanvas {
for (int i = 0; i < len; i++) {
final html.Element child = _children[i];
// Don't remove children that have been reused by CrossFrameCache.
if (child.parent == rootElement) {
if (child.parent == rootElement as html.Element) {
child.remove();
}
}
Expand Down Expand Up @@ -458,11 +458,11 @@ class BitmapCanvas extends EngineCanvas {
ui.Offset.zero,
transformWithOffset(_canvasPool.currentTransform, offset));
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
rootElement.append(element);
rootElement.append(element as DomElement);
_children.add(element);
}
final ui.BlendMode? blendMode = paint.blendMode;
Expand Down Expand Up @@ -675,7 +675,7 @@ class BitmapCanvas extends EngineCanvas {
final List<html.Element> clipElements = _clipContent(
_canvasPool.clipStack!, imgElement, p, _canvasPool.currentTransform);
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
Expand All @@ -687,7 +687,7 @@ class BitmapCanvas extends EngineCanvas {
// Reset width/height since they may have been previously set.
..removeProperty('width')
..removeProperty('height');
rootElement.append(imgElement);
rootElement.append(imgElement as DomElement);
_children.add(imgElement);
}
return imgElement;
Expand Down Expand Up @@ -851,7 +851,7 @@ class BitmapCanvas extends EngineCanvas {
SurfacePaintData paint) {
// For srcIn blendMode, we use an svg filter to apply to image element.
final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode);
rootElement.append(svgFilter.element);
rootElement.append(svgFilter.element as DomElement);
_children.add(svgFilter.element);
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
imgElement.style.filter = 'url(#${svgFilter.id})';
Expand All @@ -866,7 +866,7 @@ class BitmapCanvas extends EngineCanvas {
HtmlImage image, List<double> matrix, SurfacePaintData paint) {
// For srcIn blendMode, we use an svg filter to apply to image element.
final SvgFilter svgFilter = svgFilterFromColorMatrix(matrix);
rootElement.append(svgFilter.element);
rootElement.append(svgFilter.element as DomElement);
_children.add(svgFilter.element);
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
imgElement.style.filter = 'url(#${svgFilter.id})';
Expand Down Expand Up @@ -971,15 +971,15 @@ class BitmapCanvas extends EngineCanvas {
offset,
_canvasPool.currentTransform);
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
setElementTransform(
paragraphElement,
transformWithOffset(_canvasPool.currentTransform, offset).storage,
);
rootElement.append(paragraphElement);
rootElement.append(paragraphElement as DomElement);
}
_children.add(paragraphElement);
// If there is a prior sibling such as img prevent left/top shift.
Expand Down Expand Up @@ -1068,21 +1068,25 @@ class BitmapCanvas extends EngineCanvas {
void endOfPaint() {
_canvasPool.endOfPaint();
_elementCache?.commitFrame();
// Wrap all elements in translate3d (workaround for webkit paint order bug).
if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
for (final html.Element element in rootElement.children) {
final html.DivElement paintOrderElement = html.DivElement()
// Copy the children list to avoid concurrent modification.
final List<DomElement> children = rootElement.children.toList();
for (final DomElement element in children) {
final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
..style.transform = 'translate3d(0,0,0)';
paintOrderElement.append(element);
rootElement.append(paintOrderElement);
_children.add(paintOrderElement);
_children.add(paintOrderElement as html.Element);
}
}
final html.Node? firstChild = rootElement.firstChild;
if (firstChild != null && firstChild is html.HtmlElement &&
firstChild.tagName.toLowerCase() ==
'canvas') {
firstChild.style.zIndex = '-1';
final DomNode? firstChild = rootElement.firstChild;
if (firstChild != null) {
if (domInstanceOfString(firstChild, 'HTMLElement')) {
final DomHTMLElement maybeCanvas = firstChild as DomHTMLElement;
if (maybeCanvas.tagName.toLowerCase() == 'canvas') {
maybeCanvas.style.zIndex = '-1';
}
}
}
}

Expand Down Expand Up @@ -1368,7 +1372,7 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
final SaveClipEntry entry = clipStack[clipIndex];
final html.HtmlElement newElement = html.DivElement();
newElement.style.position = 'absolute';
applyWebkitClipFix(newElement);
applyWebkitClipFix(newElement as DomElement);
if (root == null) {
root = newElement;
} else {
Expand Down Expand Up @@ -1428,7 +1432,8 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
..transform = matrix4ToCssTransform(newClipTransform)
..transformOrigin = '0 0 0';
final html.Element clipElement =
createSvgClipDef(curElement as html.HtmlElement, entry.path!);
createSvgClipDef(curElement as DomElement, entry.path!) as
html.Element;
clipDefs.add(clipElement);
}
}
Expand Down
Loading

0 comments on commit c2cb62b

Please sign in to comment.