[web] Migrate Flutter Web DOM usage to JS static interop - 13. (flutt…

…er#33242)
RedQuark · May 17, 2022 · 9667754 · 9667754
1 parent e312797
commit 9667754
Show file tree

Hide file tree

Showing 22 changed files with 105 additions and 84 deletions.
diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart
@@ -10,6 +10,7 @@ import 'package:meta/meta.dart';
 import 'package:ui/ui.dart' as ui;
 
 import 'browser_detection.dart';
+import 'dom.dart';
 import 'engine_canvas.dart';
 import 'html/bitmap_canvas.dart';
 import 'html/painting.dart';
@@ -983,7 +984,8 @@ class ContextStateHandle {
       if (paint.shader is EngineGradient) {
         final EngineGradient engineShader = paint.shader! as EngineGradient;
         final Object paintStyle =
-            engineShader.createPaintStyle(_canvasPool.context, shaderBounds,
+            engineShader.createPaintStyle(_canvasPool.context as
+                DomCanvasRenderingContext2D, shaderBounds,
                 density);
         fillStyle = paintStyle;
         strokeStyle = paintStyle;
@@ -993,7 +995,8 @@ class ContextStateHandle {
       } else if (paint.shader is EngineImageShader) {
         final EngineImageShader imageShader = paint.shader! as EngineImageShader;
         final Object paintStyle =
-            imageShader.createPaintStyle(_canvasPool.context, shaderBounds,
+            imageShader.createPaintStyle(_canvasPool.context as
+                DomCanvasRenderingContext2D, shaderBounds,
                 density);
         fillStyle = paintStyle;
         strokeStyle = paintStyle;

diff --git a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart
@@ -212,7 +212,7 @@ class HtmlViewEmbedder {
   void _compositeWithParams(int viewId, EmbeddedViewParams params) {
     // If we haven't seen this viewId yet, cache it for clips/transforms.
     final ViewClipChain clipChain = _viewClipChains.putIfAbsent(viewId, () {
-      return ViewClipChain(view: createPlatformViewSlot(viewId) as DomElement);
+      return ViewClipChain(view: createPlatformViewSlot(viewId));
     });
 
     final DomElement slot = clipChain.slot;

diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart
@@ -155,6 +155,7 @@ extension DomElementExtension on DomElement {
   external String get id;
   external set id(String id);
   external set spellcheck(bool? value);
+  external String get tagName;
   external DomCSSStyleDeclaration get style;
   external void append(DomNode node);
   external String? getAttribute(String attributeName);
@@ -184,6 +185,8 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   set bottom(String value) => setProperty('bottom', value, '');
   set backgroundColor(String value) =>
       setProperty('background-color', value, '');
+  set pointerEvents(String value) => setProperty('pointer-events', value, '');
+  set filter(String value) => setProperty('filter', value, '');
   String get width => getPropertyValue('width');
   String get height => getPropertyValue('height');
   String get position => getPropertyValue('position');
@@ -198,6 +201,8 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   String get right => getPropertyValue('right');
   String get bottom => getPropertyValue('bottom');
   String get backgroundColor => getPropertyValue('background-color');
+  String get pointerEvents => getPropertyValue('pointer-events');
+  String get filter => getPropertyValue('filter');
 
   external String getPropertyValue(String property);
   void setProperty(String propertyName, String value, [String? priority]) {
@@ -313,6 +318,11 @@ class DomCanvasRenderingContext2D {}
 extension DomCanvasRenderingContext2DExtension on DomCanvasRenderingContext2D {
   external Object? get fillStyle;
   external set fillStyle(Object? style);
+  external DomCanvasGradient createLinearGradient(num x0, num y0, num x1, num
+      y1);
+  external DomCanvasPattern? createPattern(Object image, String reptitionType);
+  external DomCanvasGradient createRadialGradient(num x0, num y0, num r0, num
+      x1, num y1, num r1);
   external void drawImage(DomCanvasImageSource source, num destX, num destY);
   external void fillRect(num x, num y, num width, num height);
   external DomImageData getImageData(int x, int y, int sw, int sh);
@@ -326,6 +336,18 @@ extension DomImageDataExtension on DomImageData {
   external Uint8ClampedList get data;
 }
 
+@JS()
+@staticInterop
+class DomCanvasPattern {}
+
+@JS()
+@staticInterop
+class DomCanvasGradient {}
+
+extension DomCanvasGradientExtension on DomCanvasGradient {
+  external void addColorStop(num offset, String color);
+}
+
 @JS()
 @staticInterop
 class DomXMLHttpRequestEventTarget extends DomEventTarget {}

diff --git a/lib/web_ui/lib/src/engine/html/backdrop_filter.dart b/lib/web_ui/lib/src/engine/html/backdrop_filter.dart
@@ -44,20 +44,19 @@ class PersistedBackdropFilter extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
-    final DomElement element = defaultCreateElement('flt-backdrop') as
-        DomElement;
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-backdrop');
     element.style.transformOrigin = '0 0 0';
     _childContainer = createDomElement('flt-backdrop-interior');
     _childContainer!.style.position = 'absolute';
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
       surfaceStatsFor(this).allocatedDomNodeCount++;
     }
-    _filterElement = defaultCreateElement('flt-backdrop-filter') as DomElement;
+    _filterElement = defaultCreateElement('flt-backdrop-filter');
     _filterElement!.style.transformOrigin = '0 0 0';
     element..append(_filterElement!)..append(_childContainer!);
-    return element as html.Element;
+    return element;
   }
 
   @override

diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -7,6 +7,7 @@ import 'dart:svg' as svg;
 
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../shadow.dart';
 import '../util.dart';
 import 'dom_canvas.dart';
@@ -23,8 +24,8 @@ mixin _DomClip on PersistedContainerSurface {
   /// [rootElement] is used to compensate for the coordinate system shift
   /// introduced by the [rootElement] translation.
   @override
-  html.Element? get childContainer => _childContainer;
-  html.Element? _childContainer;
+  html.Element? get childContainer => _childContainer as html.Element?;
+  DomElement? _childContainer;
 
   @override
   void adoptElements(_DomClip oldSurface) {
@@ -34,9 +35,9 @@ mixin _DomClip on PersistedContainerSurface {
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-clip');
-    _childContainer = html.Element.tag('flt-clip-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-clip');
+    _childContainer = createDomElement('flt-clip-interior');
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
       surfaceStatsFor(this).allocatedDomNodeCount++;
@@ -96,7 +97,7 @@ class PersistedClipRect extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'rect');
   }
 
@@ -153,7 +154,7 @@ class PersistedClipRRect extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'rrect');
   }
 
@@ -238,7 +239,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'physical-shape');
   }
 
@@ -467,7 +468,7 @@ class PersistedClipPath extends PersistedContainerSurface
   html.Element? _clipElement;
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return defaultCreateElement('flt-clippath');
   }
 

diff --git a/lib/web_ui/lib/src/engine/html/color_filter.dart b/lib/web_ui/lib/src/engine/html/color_filter.dart
@@ -10,6 +10,7 @@ import 'package:ui/ui.dart' as ui;
 import '../browser_detection.dart';
 import '../canvaskit/color_filter.dart';
 import '../color_filter.dart';
+import '../dom.dart';
 import '../embedder.dart';
 import '../util.dart';
 import 'bitmap_canvas.dart';
@@ -23,12 +24,12 @@ class PersistedColorFilter extends PersistedContainerSurface
       : super(oldLayer);
 
   @override
-  html.Element? get childContainer => _childContainer;
+  html.Element? get childContainer => _childContainer as html.Element?;
 
   /// The dedicated child container element that's separate from the
   /// [rootElement] is used to compensate for the coordinate system shift
   /// introduced by the [rootElement] translation.
-  html.Element? _childContainer;
+  DomElement? _childContainer;
 
   /// Color filter to apply to this surface.
   final ui.ColorFilter filter;
@@ -61,9 +62,9 @@ class PersistedColorFilter extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-color-filter');
-    final html.Element container = html.Element.tag('flt-filter-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-color-filter');
+    final DomElement container = createDomElement('flt-filter-interior');
     container.style.position = 'absolute';
     _childContainer = container;
     element.append(_childContainer!);

diff --git a/lib/web_ui/lib/src/engine/html/image_filter.dart b/lib/web_ui/lib/src/engine/html/image_filter.dart
@@ -2,10 +2,9 @@
 // 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 '../dom.dart';
 import 'shaders/shader.dart';
 import 'surface.dart';
 
@@ -17,7 +16,7 @@ class PersistedImageFilter extends PersistedContainerSurface
   final ui.ImageFilter filter;
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return defaultCreateElement('flt-image-filter');
   }
 

diff --git a/lib/web_ui/lib/src/engine/html/offset.dart b/lib/web_ui/lib/src/engine/html/offset.dart
@@ -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 '../dom.dart';
@@ -41,11 +39,11 @@ class PersistedOffset extends PersistedContainerSurface
       _localTransformInverse ??= Matrix4.translationValues(-dx, -dy, 0);
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     final DomElement element = domDocument.createElement('flt-offset');
     setElementStyle(element, 'position', 'absolute');
     setElementStyle(element, 'transform-origin', '0 0 0');
-    return element as html.Element;
+    return element;
   }
 
   @override

diff --git a/lib/web_ui/lib/src/engine/html/opacity.dart b/lib/web_ui/lib/src/engine/html/opacity.dart
@@ -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 '../dom.dart';
@@ -43,11 +41,11 @@ class PersistedOpacity extends PersistedContainerSurface
       Matrix4.translationValues(-offset.dx, -offset.dy, 0);
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     final DomElement element = domDocument.createElement('flt-opacity');
     setElementStyle(element, 'position', 'absolute');
     setElementStyle(element, 'transform-origin', '0 0 0');
-    return element as html.Element;
+    return element;
   }
 
   @override

diff --git a/lib/web_ui/lib/src/engine/html/picture.dart b/lib/web_ui/lib/src/engine/html/picture.dart
@@ -8,6 +8,7 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../engine_canvas.dart';
 import '../frame_reference.dart';
 import '../picture.dart';
@@ -121,8 +122,8 @@ class PersistedPicture extends PersistedLeafSurface {
       CrossFrameCache<html.HtmlElement>();
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-picture');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-picture');
 
     // The DOM elements used to render pictures are used purely to put pixels on
     // the screen. They have no semantic information. If an assistive technology

diff --git a/lib/web_ui/lib/src/engine/html/platform_view.dart b/lib/web_ui/lib/src/engine/html/platform_view.dart
@@ -2,8 +2,7 @@
 // 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 '../dom.dart';
 import '../platform_views/slots.dart';
 import 'surface.dart';
 
@@ -18,7 +17,7 @@ class PersistedPlatformView extends PersistedLeafSurface {
   PersistedPlatformView(this.viewId, this.dx, this.dy, this.width, this.height);
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return createPlatformViewSlot(viewId);
   }
 

diff --git a/lib/web_ui/lib/src/engine/html/scene.dart b/lib/web_ui/lib/src/engine/html/scene.dart
@@ -6,6 +6,7 @@ import 'dart:html' as html;
 
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../vector_math.dart';
 import 'surface.dart';
 
@@ -59,7 +60,7 @@ class PersistedScene extends PersistedContainerSurface {
       _localTransformInverse ??= Matrix4.identity();
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return defaultCreateElement('flt-scene');
   }
 

diff --git a/lib/web_ui/lib/src/engine/html/shader_mask.dart b/lib/web_ui/lib/src/engine/html/shader_mask.dart
@@ -7,6 +7,7 @@ import 'dart:html' as html;
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
+import '../dom.dart';
 import '../embedder.dart';
 import 'bitmap_canvas.dart';
 import 'color_filter.dart';
@@ -34,7 +35,7 @@ class PersistedShaderMask extends PersistedContainerSurface
     this.filterQuality,
   ) : super(oldLayer);
 
-  html.Element? _childContainer;
+  DomElement? _childContainer;
   final ui.Shader shader;
   final ui.Rect maskRect;
   final ui.BlendMode blendMode;
@@ -52,7 +53,7 @@ class PersistedShaderMask extends PersistedContainerSurface
   }
 
   @override
-  html.Element? get childContainer => _childContainer;
+  html.Element? get childContainer => _childContainer as html.Element?;
 
   @override
   void discard() {
@@ -72,9 +73,9 @@ class PersistedShaderMask extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-shader-mask');
-    final html.Element container = html.Element.tag('flt-mask-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-shader-mask');
+    final DomElement container = createDomElement('flt-mask-interior');
     container.style.position = 'absolute';
     _childContainer = container;
     element.append(_childContainer!);