[web] PointerBinding per view

Author: mdebbar

lib/web_ui/lib/src/engine/embedder.dart

@@ -8,9 +8,7 @@ import '../engine.dart' show buildMode, renderer;
 import 'browser_detection.dart';
 import 'configuration.dart';
 import 'dom.dart';
-import 'keyboard_binding.dart';
 import 'platform_dispatcher.dart';
-import 'pointer_binding.dart';
 import 'text_editing/text_editing.dart';
 import 'view_embedder/style_manager.dart';
 import 'window.dart';
@@ -67,14 +65,6 @@ class FlutterViewEmbedder {
 
     renderer.reset(this);
 
-    // TODO(mdebbar): Move these to `engine/initialization.dart`.
-
-    KeyboardBinding.initInstance();
-    PointerBinding.initInstance(
-      _flutterViewElement,
-      KeyboardBinding.instance!.converter,
-    );
-
     window.onResize.listen(_metricsDidChange);
   }
 

lib/web_ui/lib/src/engine/initialization.dart

@@ -218,6 +218,8 @@ Future<void> initializeEngineUi() async {
   _initializationState = DebugEngineInitializationState.initializingUi;
 
   RawKeyboard.initialize(onMacOs: operatingSystem == OperatingSystem.macOs);
+  KeyboardBinding.initInstance();
+
   if (!configuration.multiViewEnabled) {
     ensureImplicitViewInitialized(hostElement: configuration.hostElement);
     ensureFlutterViewEmbedderInitialized();

lib/web_ui/lib/src/engine/keyboard_binding.dart

@@ -258,6 +258,7 @@ class KeyboardConverter {
   bool _disposed = false;
   void dispose() {
     _disposed = true;
+    clearPressedKeys();
   }
 
   // On macOS, CapsLock behaves differently in that, a keydown event occurs when
@@ -699,4 +700,8 @@ class KeyboardConverter {
   bool keyIsPressed(int physical) {
     return _pressingRecords.containsKey(physical);
   }
+
+  void clearPressedKeys() {
+    _pressingRecords.clear();
+  }
 }

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

@@ -634,7 +634,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
         const StandardMessageCodec codec = StandardMessageCodec();
         // TODO(yjbanov): Dispatch the announcement to the correct view?
         //                https://github.com/flutter/flutter/issues/137445
-        implicitView!.accessibilityAnnouncements.handleMessage(codec, data);
+        implicitView?.accessibilityAnnouncements.handleMessage(codec, data);
         replyToPlatformMessage(callback, codec.encodeMessage(true));
         return;
 

lib/web_ui/lib/src/engine/pointer_binding.dart

@@ -18,6 +18,7 @@ import 'pointer_binding/event_position_helper.dart';
 import 'pointer_converter.dart';
 import 'safe_browser_api.dart';
 import 'semantics.dart';
+import 'window.dart';
 
 /// Set this flag to true to log all the browser events.
 const bool _debugLogPointerEvents = false;
@@ -73,21 +74,31 @@ int convertButtonToButtons(int button) {
 /// Wrapping the Safari iOS workaround that adds a dummy event listener
 /// More info about the issue and workaround: https://github.com/flutter/flutter/issues/70858
 class SafariPointerEventWorkaround {
-  static SafariPointerEventWorkaround instance = SafariPointerEventWorkaround();
+  DomEventListener? _listener;
 
   void workAroundMissingPointerEvents() {
-    domDocument.addEventListener('touchstart', createDomEventListener((DomEvent event) {}));
+    _listener = createDomEventListener((_) {});
+    domDocument.addEventListener('touchstart', _listener);
+  }
+
+  void dispose() {
+    if (_listener != null) {
+      domDocument.removeEventListener('touchstart', _listener);
+    }
   }
 }
 
 class PointerBinding {
   PointerBinding(
-    this.flutterViewElement,
-    this._keyboardConverter, [
-    this._detector = const PointerSupportDetector(),
-  ]) : _pointerDataConverter = PointerDataConverter() {
+    this.view,
+    this._keyboardConverter, {
+    PointerSupportDetector detector = const PointerSupportDetector(),
+    SafariPointerEventWorkaround? safariWorkaround,
+  })  : _pointerDataConverter = PointerDataConverter(),
+        _detector = detector {
     if (isIosSafari) {
-      SafariPointerEventWorkaround.instance.workAroundMissingPointerEvents();
+      _safariWorkaround = safariWorkaround ?? SafariPointerEventWorkaround();
+      _safariWorkaround!.workAroundMissingPointerEvents();
     }
     _adapter = _createAdapter();
   }
@@ -96,9 +107,9 @@ class PointerBinding {
   static PointerBinding? get instance => _instance;
   static PointerBinding? _instance;
 
-  static void initInstance(DomElement flutterViewElement, KeyboardConverter keyboardConverter) {
+  static void initInstance(EngineFlutterView view, KeyboardConverter keyboardConverter) {
     if (_instance == null) {
-      _instance = PointerBinding(flutterViewElement, keyboardConverter);
+      _instance = PointerBinding(view, keyboardConverter);
       assert(() {
         registerHotRestartListener(_instance!.dispose);
         return true;
@@ -108,37 +119,27 @@ class PointerBinding {
 
   final ClickDebouncer clickDebouncer = ClickDebouncer();
 
+  SafariPointerEventWorkaround? _safariWorkaround;
+
   /// Performs necessary clean up for PointerBinding including removing event listeners
   /// and clearing the existing pointer state
   void dispose() {
-    _adapter.clearListeners();
-    _pointerDataConverter.clearPointerState();
+    _adapter.dispose();
+    _safariWorkaround?.dispose();
     clickDebouncer.reset();
   }
 
-  final DomElement flutterViewElement;
+  final EngineFlutterView view;
+  DomElement get rootElement => view.dom.rootElement;
 
   final PointerSupportDetector _detector;
   final PointerDataConverter _pointerDataConverter;
-  KeyboardConverter _keyboardConverter;
+  final KeyboardConverter _keyboardConverter;
   late _BaseAdapter _adapter;
 
-  @visibleForTesting
-  void debugReset() {
-    _adapter.clearListeners();
-    _adapter = _createAdapter();
-    _pointerDataConverter.clearPointerState();
-  }
-
-  @visibleForTesting
-  void debugOverrideKeyboardConverter(KeyboardConverter keyboardConverter) {
-    _keyboardConverter = keyboardConverter;
-    debugReset();
-  }
-
   _BaseAdapter _createAdapter() {
     if (_detector.hasPointerEvents) {
-      return _PointerAdapter(clickDebouncer.onPointerData, flutterViewElement, _pointerDataConverter, _keyboardConverter);
+      return _PointerAdapter(clickDebouncer.onPointerData, view, _pointerDataConverter, _keyboardConverter);
     }
     throw UnsupportedError(
       'This browser does not support pointer events which '
@@ -470,27 +471,29 @@ class _Listener {
 abstract class _BaseAdapter {
   _BaseAdapter(
     this._callback,
-    this.flutterViewElement,
+    this._view,
     this._pointerDataConverter,
     this._keyboardConverter,
   ) {
     setup();
   }
 
   final List<_Listener> _listeners = <_Listener>[];
-  final DomElement flutterViewElement;
+  final EngineFlutterView _view;
   final _PointerDataCallback _callback;
   final PointerDataConverter _pointerDataConverter;
   final KeyboardConverter _keyboardConverter;
   DomWheelEvent? _lastWheelEvent;
   bool _lastWheelEventWasTrackpad = false;
 
+  DomElement get _rootElement => _view.dom.rootElement;
+
   /// Each subclass is expected to override this method to attach its own event
   /// listeners and convert events into pointer events.
   void setup();
 
-  /// Remove all active event listeners.
-  void clearListeners() {
+  /// Cleans up all event listeners attached by this adapter.
+  void dispose() {
     for (final _Listener listener in _listeners) {
       listener.unregister();
     }
@@ -499,7 +502,7 @@ abstract class _BaseAdapter {
 
   /// Adds a listener for the given [eventName] to [target].
   ///
-  /// Generally speaking, down and leave events should use [flutterViewElement]
+  /// Generally speaking, down and leave events should use [_rootElement]
   /// as the [target], while move and up events should use [domWindow]
   /// instead, because the browser doesn't fire the latter two for DOM elements
   /// when the pointer is outside the window.
@@ -512,7 +515,7 @@ abstract class _BaseAdapter {
       if (_debugLogPointerEvents) {
         if (domInstanceOfString(event, 'PointerEvent')) {
           final DomPointerEvent pointerEvent = event as DomPointerEvent;
-          final ui.Offset offset = computeEventOffsetToTarget(event, flutterViewElement);
+          final ui.Offset offset = computeEventOffsetToTarget(event, _view);
           print('${pointerEvent.type}    '
               '${offset.dx.toStringAsFixed(1)},'
               '${offset.dy.toStringAsFixed(1)}');
@@ -636,36 +639,37 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
         deltaX *= _defaultScrollLineHeight!;
         deltaY *= _defaultScrollLineHeight!;
       case domDeltaPage:
-        deltaX *= ui.window.physicalSize.width;
-        deltaY *= ui.window.physicalSize.height;
+        deltaX *= _view.physicalSize.width;
+        deltaY *= _view.physicalSize.height;
       case domDeltaPixel:
         if (operatingSystem == OperatingSystem.macOs && (isSafari || isFirefox)) {
           // Safari and Firefox seem to report delta in logical pixels while
           // Chrome uses physical pixels.
-          deltaX *= ui.window.devicePixelRatio;
-          deltaY *= ui.window.devicePixelRatio;
+          deltaX *= _view.devicePixelRatio;
+          deltaY *= _view.devicePixelRatio;
         }
       default:
         break;
     }
 
     final List<ui.PointerData> data = <ui.PointerData>[];
-    final ui.Offset offset = computeEventOffsetToTarget(event, flutterViewElement);
+    final ui.Offset offset = computeEventOffsetToTarget(event, _view);
     bool ignoreCtrlKey = false;
     if (operatingSystem == OperatingSystem.macOs) {
-      ignoreCtrlKey = (KeyboardBinding.instance?.converter.keyIsPressed(kPhysicalControlLeft) ?? false) ||
-                      (KeyboardBinding.instance?.converter.keyIsPressed(kPhysicalControlRight) ?? false);
+      ignoreCtrlKey = (_keyboardConverter.keyIsPressed(kPhysicalControlLeft)) ||
+                      (_keyboardConverter.keyIsPressed(kPhysicalControlRight));
     }
     if (event.ctrlKey && !ignoreCtrlKey) {
       _pointerDataConverter.convert(
         data,
+        viewId: _view.viewId,
         change: ui.PointerChange.hover,
         timeStamp: _BaseAdapter._eventTimeStampToDuration(event.timeStamp!),
         kind: kind,
         signalKind: ui.PointerSignalKind.scale,
         device: deviceId,
-        physicalX: offset.dx * ui.window.devicePixelRatio,
-        physicalY: offset.dy * ui.window.devicePixelRatio,
+        physicalX: offset.dx * _view.devicePixelRatio,
+        physicalY: offset.dy * _view.devicePixelRatio,
         buttons: event.buttons!.toInt(),
         pressure: 1.0,
         pressureMax: 1.0,
@@ -674,13 +678,14 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
     } else {
       _pointerDataConverter.convert(
         data,
+        viewId: _view.viewId,
         change: ui.PointerChange.hover,
         timeStamp: _BaseAdapter._eventTimeStampToDuration(event.timeStamp!),
         kind: kind,
         signalKind: ui.PointerSignalKind.scroll,
         device: deviceId,
-        physicalX: offset.dx * ui.window.devicePixelRatio,
-        physicalY: offset.dy * ui.window.devicePixelRatio,
+        physicalX: offset.dx * _view.devicePixelRatio,
+        physicalY: offset.dy * _view.devicePixelRatio,
         buttons: event.buttons!.toInt(),
         pressure: 1.0,
         pressureMax: 1.0,
@@ -696,7 +701,7 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
   void _addWheelEventListener(DartDomEventListener handler) {
     _listeners.add(_Listener.register(
       event: 'wheel',
-      target: flutterViewElement,
+      target: _rootElement,
       handler: handler,
       passive: false,
     ));
@@ -886,13 +891,24 @@ typedef _PointerEventListener = dynamic Function(DomPointerEvent event);
 class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
   _PointerAdapter(
     super.callback,
-    super.flutterViewElement,
+    super.view,
     super.pointerDataConverter,
     super.keyboardConverter,
   );
 
   final Map<int, _ButtonSanitizer> _sanitizers = <int, _ButtonSanitizer>{};
 
+  DomEventTarget get _globalTarget {
+    // When the Flutter app owns the full page, we want to listen on window for
+    // some events. Otherwise, we just want to listen on the root element of the
+    // view.
+    // TODO(mdebbar): Is there a better way of doing this?
+    if (_view == EnginePlatformDispatcher.instance.implicitView) {
+      return domWindow;
+    }
+    return _view.dom.rootElement;
+  }
+
   @visibleForTesting
   Iterable<int> debugTrackedDevices() => _sanitizers.keys;
 
@@ -942,7 +958,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
 
   @override
   void setup() {
-    _addPointerEventListener(flutterViewElement, 'pointerdown', (DomPointerEvent event) {
+    _addPointerEventListener(_rootElement, 'pointerdown', (DomPointerEvent event) {
       final int device = _getPointerId(event);
       final List<ui.PointerData> pointerData = <ui.PointerData>[];
       final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
@@ -961,7 +977,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     });
 
     // Why `domWindow` you ask? See this fiddle: https://jsfiddle.net/ditman/7towxaqp
-    _addPointerEventListener(domWindow, 'pointermove', (DomPointerEvent event) {
+    _addPointerEventListener(_globalTarget, 'pointermove', (DomPointerEvent event) {
       final int device = _getPointerId(event);
       final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
       final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -977,7 +993,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
       _callback(event, pointerData);
     });
 
-    _addPointerEventListener(flutterViewElement, 'pointerleave', (DomPointerEvent event) {
+    _addPointerEventListener(_rootElement, 'pointerleave', (DomPointerEvent event) {
       final int device = _getPointerId(event);
       final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
       final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -989,7 +1005,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     }, checkModifiers: false);
 
     // TODO(dit): This must happen in the flutterViewElement, https://github.com/flutter/flutter/issues/116561
-    _addPointerEventListener(domWindow, 'pointerup', (DomPointerEvent event) {
+    _addPointerEventListener(_globalTarget, 'pointerup', (DomPointerEvent event) {
       final int device = _getPointerId(event);
       if (_hasSanitizer(device)) {
         final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -1006,7 +1022,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
 
     // A browser fires cancel event if it concludes the pointer will no longer
     // be able to generate events (example: device is deactivated)
-    _addPointerEventListener(flutterViewElement, 'pointercancel', (DomPointerEvent event) {
+    _addPointerEventListener(_rootElement, 'pointercancel', (DomPointerEvent event) {
       final int device = _getPointerId(event);
       if (_hasSanitizer(device)) {
         final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -1033,16 +1049,17 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     final double tilt = _computeHighestTilt(event);
     final Duration timeStamp = _BaseAdapter._eventTimeStampToDuration(event.timeStamp!);
     final num? pressure = event.pressure;
-    final ui.Offset offset = computeEventOffsetToTarget(event, flutterViewElement);
+    final ui.Offset offset = computeEventOffsetToTarget(event, _view);
     _pointerDataConverter.convert(
       data,
+      viewId: _view.viewId,
       change: details.change,
       timeStamp: timeStamp,
       kind: kind,
       signalKind: ui.PointerSignalKind.none,
       device: _getPointerId(event),
-      physicalX: offset.dx * ui.window.devicePixelRatio,
-      physicalY: offset.dy * ui.window.devicePixelRatio,
+      physicalX: offset.dx * _view.devicePixelRatio,
+      physicalY: offset.dy * _view.devicePixelRatio,
       buttons: details.buttons,
       pressure:  pressure == null ? 0.0 : pressure.toDouble(),
       pressureMax: 1.0,