Skip to content

Commit c2cb62b

Browse files
authored
[web] Migrate Flutter Web DOM usage to JS static interop - 17. (flutter#33338)
1 parent a9918b1 commit c2cb62b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+210
-200
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -261,15 +261,15 @@ class HtmlViewEmbedder {
261261
DomElement headClipView,
262262
) {
263263
int indexInFlutterView = -1;
264-
if (headClipView.parentElement != null) {
264+
if (headClipView.parent != null) {
265265
indexInFlutterView = skiaSceneHost!.children.indexOf(headClipView);
266266
headClipView.remove();
267267
}
268268
DomElement head = platformView;
269269
int clipIndex = 0;
270270
// Re-use as much existing clip views as needed.
271271
while (head != headClipView && clipIndex < numClips) {
272-
head = head.parentElement!;
272+
head = head.parent!;
273273
clipIndex++;
274274
}
275275
// If there weren't enough existing clip views, add more.
@@ -329,7 +329,7 @@ class HtmlViewEmbedder {
329329
case MutatorType.clipRect:
330330
case MutatorType.clipRRect:
331331
case MutatorType.clipPath:
332-
final DomElement clipView = head.parentElement!;
332+
final DomElement clipView = head.parent!;
333333
clipView.style.clip = '';
334334
clipView.style.clipPath = '';
335335
headTransform = Matrix4.identity();

lib/web_ui/lib/src/engine/dom.dart

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ class DomWindow {}
2424

2525
extension DomWindowExtension on DomWindow {
2626
external DomConsole get console;
27+
external num get devicePixelRatio;
2728
external DomDocument get document;
2829
external int? get innerHeight;
2930
external int? get innerWidth;
@@ -134,8 +135,12 @@ extension DomProgressEventExtension on DomProgressEvent {
134135
class DomNode extends DomEventTarget {}
135136

136137
extension DomNodeExtension on DomNode {
138+
external DomNode? get firstChild;
139+
external String get innerText;
140+
external DomNode? get lastChild;
137141
external DomNode appendChild(DomNode node);
138-
external DomElement? get parentElement;
142+
DomElement? get parent => js_util.getProperty(this, 'parentElement');
143+
String? get text => js_util.getProperty(this, 'textContent');
139144
external DomNode? get parentNode;
140145
external DomNode insertBefore(DomNode newNode, DomNode? referenceNode);
141146
void remove() {
@@ -218,6 +223,19 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
218223
setProperty('font-feature-settings', value, '');
219224
set fontVariationSettings(String value) =>
220225
setProperty('font-variation-settings', value, '');
226+
set visibility(String value) => setProperty('visibility', value, '');
227+
set overflow(String value) => setProperty('overflow', value, '');
228+
set boxShadow(String value) => setProperty('box-shadow', value, '');
229+
set borderTopLeftRadius(String value) =>
230+
setProperty('border-top-left-radius', value, '');
231+
set borderTopRightRadius(String value) =>
232+
setProperty('border-top-right-radius', value, '');
233+
set borderBottomLeftRadius(String value) =>
234+
setProperty('border-bottom-left-radius', value, '');
235+
set borderBottomRightRadius(String value) =>
236+
setProperty('border-bottom-right-radius', value, '');
237+
set borderRadius(String value) => setProperty('border-radius', value, '');
238+
set perspective(String value) => setProperty('perspective', value, '');
221239
String get width => getPropertyValue('width');
222240
String get height => getPropertyValue('height');
223241
String get position => getPropertyValue('position');
@@ -249,6 +267,18 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
249267
String get fontFeatureSettings => getPropertyValue('font-feature-settings');
250268
String get fontVariationSettings =>
251269
getPropertyValue('font-variation-settings');
270+
String get visibility => getPropertyValue('visibility');
271+
String get overflow => getPropertyValue('overflow');
272+
String get boxShadow => getPropertyValue('box-shadow');
273+
String get borderTopLeftRadius => getPropertyValue('border-top-left-radius');
274+
String get borderTopRightRadius =>
275+
getPropertyValue('border-top-right-radius');
276+
String get borderBottomLeftRadius =>
277+
getPropertyValue('border-bottom-left-radius');
278+
String get borderBottomRightRadius =>
279+
getPropertyValue('border-bottom-right-radius');
280+
String get borderRadius => getPropertyValue('border-radius');
281+
String get perspective => getPropertyValue('perspective');
252282

253283
external String getPropertyValue(String property);
254284
void setProperty(String propertyName, String value, [String? priority]) {

lib/web_ui/lib/src/engine/engine_canvas.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import 'vector_math.dart';
2323
/// This can be used either as an interface or super-class.
2424
abstract class EngineCanvas {
2525
/// The element that is attached to the DOM.
26-
html.Element get rootElement;
26+
DomElement get rootElement;
2727

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

301301
/// The stack that maintains the DOM elements used to express certain paint
302302
/// operations, such as clips.

lib/web_ui/lib/src/engine/html/backdrop_filter.dart

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import 'dart:html' as html;
6-
75
import 'package:ui/ui.dart' as ui;
86

97
import '../browser_detection.dart';
@@ -26,7 +24,7 @@ class PersistedBackdropFilter extends PersistedContainerSurface
2624
/// [rootElement] is used to host child in front of [filterElement] that
2725
/// is transformed to cover background.
2826
@override
29-
html.Element? get childContainer => _childContainer as html.Element?;
27+
DomElement? get childContainer => _childContainer;
3028
DomElement? _childContainer;
3129
DomElement? _filterElement;
3230
ui.Rect? _activeClipBounds;

lib/web_ui/lib/src/engine/html/bitmap_canvas.dart

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class BitmapCanvas extends EngineCanvas {
5858
static const int kPaddingPixels = 1;
5959

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

6363
final CanvasPool _canvasPool;
6464

@@ -239,7 +239,7 @@ class BitmapCanvas extends EngineCanvas {
239239
for (int i = 0; i < len; i++) {
240240
final html.Element child = _children[i];
241241
// Don't remove children that have been reused by CrossFrameCache.
242-
if (child.parent == rootElement) {
242+
if (child.parent == rootElement as html.Element) {
243243
child.remove();
244244
}
245245
}
@@ -458,11 +458,11 @@ class BitmapCanvas extends EngineCanvas {
458458
ui.Offset.zero,
459459
transformWithOffset(_canvasPool.currentTransform, offset));
460460
for (final html.Element clipElement in clipElements) {
461-
rootElement.append(clipElement);
461+
rootElement.append(clipElement as DomElement);
462462
_children.add(clipElement);
463463
}
464464
} else {
465-
rootElement.append(element);
465+
rootElement.append(element as DomElement);
466466
_children.add(element);
467467
}
468468
final ui.BlendMode? blendMode = paint.blendMode;
@@ -675,7 +675,7 @@ class BitmapCanvas extends EngineCanvas {
675675
final List<html.Element> clipElements = _clipContent(
676676
_canvasPool.clipStack!, imgElement, p, _canvasPool.currentTransform);
677677
for (final html.Element clipElement in clipElements) {
678-
rootElement.append(clipElement);
678+
rootElement.append(clipElement as DomElement);
679679
_children.add(clipElement);
680680
}
681681
} else {
@@ -687,7 +687,7 @@ class BitmapCanvas extends EngineCanvas {
687687
// Reset width/height since they may have been previously set.
688688
..removeProperty('width')
689689
..removeProperty('height');
690-
rootElement.append(imgElement);
690+
rootElement.append(imgElement as DomElement);
691691
_children.add(imgElement);
692692
}
693693
return imgElement;
@@ -851,7 +851,7 @@ class BitmapCanvas extends EngineCanvas {
851851
SurfacePaintData paint) {
852852
// For srcIn blendMode, we use an svg filter to apply to image element.
853853
final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode);
854-
rootElement.append(svgFilter.element);
854+
rootElement.append(svgFilter.element as DomElement);
855855
_children.add(svgFilter.element);
856856
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
857857
imgElement.style.filter = 'url(#${svgFilter.id})';
@@ -866,7 +866,7 @@ class BitmapCanvas extends EngineCanvas {
866866
HtmlImage image, List<double> matrix, SurfacePaintData paint) {
867867
// For srcIn blendMode, we use an svg filter to apply to image element.
868868
final SvgFilter svgFilter = svgFilterFromColorMatrix(matrix);
869-
rootElement.append(svgFilter.element);
869+
rootElement.append(svgFilter.element as DomElement);
870870
_children.add(svgFilter.element);
871871
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
872872
imgElement.style.filter = 'url(#${svgFilter.id})';
@@ -971,15 +971,15 @@ class BitmapCanvas extends EngineCanvas {
971971
offset,
972972
_canvasPool.currentTransform);
973973
for (final html.Element clipElement in clipElements) {
974-
rootElement.append(clipElement);
974+
rootElement.append(clipElement as DomElement);
975975
_children.add(clipElement);
976976
}
977977
} else {
978978
setElementTransform(
979979
paragraphElement,
980980
transformWithOffset(_canvasPool.currentTransform, offset).storage,
981981
);
982-
rootElement.append(paragraphElement);
982+
rootElement.append(paragraphElement as DomElement);
983983
}
984984
_children.add(paragraphElement);
985985
// If there is a prior sibling such as img prevent left/top shift.
@@ -1068,21 +1068,25 @@ class BitmapCanvas extends EngineCanvas {
10681068
void endOfPaint() {
10691069
_canvasPool.endOfPaint();
10701070
_elementCache?.commitFrame();
1071-
// Wrap all elements in translate3d (workaround for webkit paint order bug).
10721071
if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
1073-
for (final html.Element element in rootElement.children) {
1074-
final html.DivElement paintOrderElement = html.DivElement()
1072+
// Copy the children list to avoid concurrent modification.
1073+
final List<DomElement> children = rootElement.children.toList();
1074+
for (final DomElement element in children) {
1075+
final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
10751076
..style.transform = 'translate3d(0,0,0)';
10761077
paintOrderElement.append(element);
10771078
rootElement.append(paintOrderElement);
1078-
_children.add(paintOrderElement);
1079+
_children.add(paintOrderElement as html.Element);
10791080
}
10801081
}
1081-
final html.Node? firstChild = rootElement.firstChild;
1082-
if (firstChild != null && firstChild is html.HtmlElement &&
1083-
firstChild.tagName.toLowerCase() ==
1084-
'canvas') {
1085-
firstChild.style.zIndex = '-1';
1082+
final DomNode? firstChild = rootElement.firstChild;
1083+
if (firstChild != null) {
1084+
if (domInstanceOfString(firstChild, 'HTMLElement')) {
1085+
final DomHTMLElement maybeCanvas = firstChild as DomHTMLElement;
1086+
if (maybeCanvas.tagName.toLowerCase() == 'canvas') {
1087+
maybeCanvas.style.zIndex = '-1';
1088+
}
1089+
}
10861090
}
10871091
}
10881092

@@ -1368,7 +1372,7 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
13681372
final SaveClipEntry entry = clipStack[clipIndex];
13691373
final html.HtmlElement newElement = html.DivElement();
13701374
newElement.style.position = 'absolute';
1371-
applyWebkitClipFix(newElement);
1375+
applyWebkitClipFix(newElement as DomElement);
13721376
if (root == null) {
13731377
root = newElement;
13741378
} else {
@@ -1428,7 +1432,8 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
14281432
..transform = matrix4ToCssTransform(newClipTransform)
14291433
..transformOrigin = '0 0 0';
14301434
final html.Element clipElement =
1431-
createSvgClipDef(curElement as html.HtmlElement, entry.path!);
1435+
createSvgClipDef(curElement as DomElement, entry.path!) as
1436+
html.Element;
14321437
clipDefs.add(clipElement);
14331438
}
14341439
}

0 commit comments

Comments
 (0)