Check all modifiers for PointerEvent, MouseEvent and TouchEvent

Author: bleroux

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

@@ -1142,6 +1142,10 @@ extension DomWheelEventExtension on DomWheelEvent {
 class DomTouchEvent extends DomUIEvent {}
 
 extension DomTouchEventExtension on DomTouchEvent {
+  external bool get altKey;
+  external bool get ctrlKey;
+  external bool get metaKey;
+  external bool get shiftKey;
   List<DomTouch>? get changedTouches => js_util
       .getProperty<List<Object?>?>(this, 'changedTouches')
       ?.cast<DomTouch>();

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

@@ -30,6 +30,16 @@ final int _kLogicalShiftLeft = kWebLogicalLocationMap['Shift']![_kLocationLeft]!
 final int _kLogicalShiftRight = kWebLogicalLocationMap['Shift']![_kLocationRight]!;
 final int _kLogicalMetaLeft = kWebLogicalLocationMap['Meta']![_kLocationLeft]!;
 final int _kLogicalMetaRight = kWebLogicalLocationMap['Meta']![_kLocationRight]!;
+
+final int _kPhysicalAltLeft = kWebToPhysicalKey['AltLeft']!;
+final int _kPhysicalAltRight = kWebToPhysicalKey['AltRight']!;
+final int _kPhysicalControlLeft = kWebToPhysicalKey['ControlLeft']!;
+final int _kPhysicalControlRight = kWebToPhysicalKey['ControlRight']!;
+final int _kPhysicalShiftLeft = kWebToPhysicalKey['ShiftLeft']!;
+final int _kPhysicalShiftRight = kWebToPhysicalKey['ShiftRight']!;
+final int _kPhysicalMetaLeft = kWebToPhysicalKey['MetaLeft']!;
+final int _kPhysicalMetaRight = kWebToPhysicalKey['MetaRight']!;
+
 // Map logical keys for modifier keys to the functions that can get their
 // modifier flag out of an event.
 final Map<int, _ModifierGetter> _kLogicalKeyToModifierGetter = <int, _ModifierGetter>{
@@ -152,34 +162,102 @@ class KeyboardBinding {
     _converter = KeyboardConverter(_onKeyData, onMacOs: operatingSystem == OperatingSystem.macOs);
   }
 
-  // Synthesize shift key up or down event only when the known pressing state is different.
-  void synthesizeShiftKeyIfNeeded(ui.KeyEventType type, num eventTimestamp) {
-    // TODO(bleroux): should we take care of shift left AND shift right?
-    final int physicalShift = kWebToPhysicalKey['ShiftLeft']!;
-    final bool alreadyPressed = _converter._pressingRecords.containsKey(physicalShift);
+  // Synthesize modifier keys up or down events only when the known pressing states are different.
+  void synthesizeModifiersIfNeeded(
+    bool altPressed,
+    bool controlPressed,
+    bool metaPressed,
+    bool shiftPressed,
+    num eventTimestamp,
+  ) {
+    _synthesizeModifierIfNeeded(
+      _kPhysicalAltLeft,
+      _kPhysicalAltRight,
+      _kLogicalAltLeft,
+      _kLogicalAltRight,
+      altPressed ? ui.KeyEventType.down : ui.KeyEventType.up,
+      eventTimestamp,
+    );
+    _synthesizeModifierIfNeeded(
+      _kPhysicalControlLeft,
+      _kPhysicalControlRight,
+      _kLogicalControlLeft,
+      _kLogicalControlRight,
+      controlPressed ? ui.KeyEventType.down : ui.KeyEventType.up,
+      eventTimestamp,
+    );
+    _synthesizeModifierIfNeeded(
+      _kPhysicalMetaLeft,
+      _kPhysicalMetaRight,
+      _kLogicalMetaLeft,
+      _kLogicalMetaRight,
+      metaPressed ? ui.KeyEventType.down : ui.KeyEventType.up,
+      eventTimestamp,
+    );
+    _synthesizeModifierIfNeeded(
+      _kPhysicalShiftLeft,
+      _kPhysicalShiftRight,
+      _kLogicalShiftLeft,
+      _kLogicalShiftRight,
+      shiftPressed ? ui.KeyEventType.down : ui.KeyEventType.up,
+      eventTimestamp,
+    );
+  }
+
+  void _synthesizeModifierIfNeeded(
+    int physicalLeft,
+    int physicalRight,
+    int logicalLeft,
+    int logicalRight,
+    ui.KeyEventType type,
+    num domTimestamp,
+  ) {
+    final bool leftPressed = _converter._pressingRecords.containsKey(physicalLeft);
+    final bool rightPressed = _converter._pressingRecords.containsKey(physicalRight);
+    final bool alreadyPressed = leftPressed || rightPressed;
     final bool synthesizeDown = type == ui.KeyEventType.down && !alreadyPressed;
     final bool synthesizeUp = type == ui.KeyEventType.up && alreadyPressed;
-    if (synthesizeDown || synthesizeUp) {
-      final Duration timestamp = _eventTimeStampToDuration(eventTimestamp);
-      _converter.performDispatchKeyData(_shiftLeftKeyData(type, timestamp));
-      // Update pressing state
-      if (synthesizeDown) {
-        _converter._pressingRecords[physicalShift] = _kLogicalShiftLeft;
-      } else {
-        _converter._pressingRecords.remove(physicalShift);
-      }
+
+    // Synthesize a down event only for the left key if right and left are not pressed
+    if (synthesizeDown) {
+      _synthesizeKeyDownEvent(domTimestamp, physicalLeft, logicalLeft);
+    }
+
+    // Synthesize an up event for left key if pressed
+    if (synthesizeUp && leftPressed) {
+      _synthesizeKeyUpEvent(domTimestamp, physicalLeft, logicalLeft);
+    }
+
+    // Synthesize an up event for right key if pressed
+    if (synthesizeUp && rightPressed) {
+      _synthesizeKeyUpEvent(domTimestamp, physicalRight, logicalRight);
     }
   }
 
-  ui.KeyData _shiftLeftKeyData(ui.KeyEventType type, Duration timestamp) {
-    return ui.KeyData(
-      timeStamp: timestamp,
-      type: type,
-      physical: kWebToPhysicalKey['ShiftLeft']!,
-      logical: _kLogicalShiftLeft,
+  void _synthesizeKeyDownEvent(num domTimestamp, int physical, int logical) {
+    _converter.performDispatchKeyData(ui.KeyData(
+      timeStamp: _eventTimeStampToDuration(domTimestamp),
+      type: ui.KeyEventType.down,
+      physical: physical,
+      logical: logical,
       character: null,
       synthesized: true,
-    );
+    ));
+    // Update pressing state
+    _converter._pressingRecords[physical] = logical;
+  }
+
+  void _synthesizeKeyUpEvent(num domTimestamp, int physical, int logical) {
+    _converter.performDispatchKeyData(ui.KeyData(
+      timeStamp: _eventTimeStampToDuration(domTimestamp),
+      type: ui.KeyEventType.up,
+      physical: physical,
+      logical: logical,
+      character: null,
+      synthesized: true,
+    ));
+    // Update pressing states
+    _converter._pressingRecords.remove(physical);
   }
 
   void _reset() {

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

@@ -603,28 +603,30 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     String eventName,
     _PointerEventListener handler, {
     bool useCapture = true,
+    bool checkModifiers = true,
   }) {
     addEventListener(target, eventName, (DomEvent event) {
       final DomPointerEvent pointerEvent = event as DomPointerEvent;
+      if (checkModifiers) {
+        _checkModifiersState(event);
+      }
       handler(pointerEvent);
     }, useCapture: useCapture);
   }
 
-  void _checkModifiersState(DomEvent event) {
-    // TODO(bleroux): add support for 'Meta', 'Ctrl' and 'Alt'
-    final DomPointerEvent pointerEvent = event as DomPointerEvent;
-
-    final bool shiftPressed = pointerEvent.getModifierState('Shift');
-    KeyboardBinding.instance!.synthesizeShiftKeyIfNeeded(
-      shiftPressed ? ui.KeyEventType.down : ui.KeyEventType.up,
+  void _checkModifiersState(DomPointerEvent event) {
+    KeyboardBinding.instance!.synthesizeModifiersIfNeeded(
+      event.getModifierState('Alt'),
+      event.getModifierState('Control'),
+      event.getModifierState('Meta'),
+      event.getModifierState('Shift'),
       event.timeStamp!,
     );
   }
 
   @override
   void setup() {
     _addPointerEventListener(glassPaneElement, 'pointerdown', (DomPointerEvent event) {
-      _checkModifiersState(event);
       final int device = _getPointerId(event);
       final List<ui.PointerData> pointerData = <ui.PointerData>[];
       final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
@@ -643,7 +645,6 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     });
 
     _addPointerEventListener(domWindow, 'pointermove', (DomPointerEvent event) {
-      _checkModifiersState(event);
       final int device = _getPointerId(event);
       final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
       final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -668,10 +669,9 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
         _convertEventsToPointerData(data: pointerData, event: event, details: details);
         _callback(pointerData);
       }
-    }, useCapture: false);
+    }, useCapture: false, checkModifiers: false);
 
     _addPointerEventListener(domWindow, 'pointerup', (DomPointerEvent event) {
-      _checkModifiersState(event);
       final int device = _getPointerId(event);
       if (_hasSanitizer(device)) {
         final List<ui.PointerData> pointerData = <ui.PointerData>[];
@@ -695,7 +695,7 @@ class _PointerAdapter extends _BaseAdapter with _WheelEventListenerMixin {
         _convertEventsToPointerData(data: pointerData, event: event, details: details);
         _callback(pointerData);
       }
-    });
+    }, checkModifiers: false);
 
     _addWheelEventListener((DomEvent event) {
       _handleWheelEvent(event);
@@ -790,13 +790,26 @@ class _TouchAdapter extends _BaseAdapter {
   void _pressTouch(int identifier) { _pressedTouches.add(identifier); }
   void _unpressTouch(int identifier) { _pressedTouches.remove(identifier); }
 
-  void _addTouchEventListener(DomEventTarget target, String eventName, _TouchEventListener handler) {
+  void _addTouchEventListener(DomEventTarget target, String eventName, _TouchEventListener handler, {bool checkModifiers = true,}) {
     addEventListener(target, eventName, (DomEvent event) {
       final DomTouchEvent touchEvent = event as DomTouchEvent;
+      if (checkModifiers) {
+        _checkModifiersState(event);
+      }
       handler(touchEvent);
     });
   }
 
+  void _checkModifiersState(DomTouchEvent event) {
+    KeyboardBinding.instance!.synthesizeModifiersIfNeeded(
+      event.altKey,
+      event.ctrlKey,
+      event.metaKey,
+      event.shiftKey,
+      event.timeStamp!,
+    );
+  }
+
   @override
   void setup() {
     _addTouchEventListener(glassPaneElement, 'touchstart', (DomTouchEvent event) {
@@ -935,13 +948,27 @@ class _MouseAdapter extends _BaseAdapter with _WheelEventListenerMixin {
     String eventName,
     _MouseEventListener handler, {
     bool useCapture = true,
+    bool checkModifiers = true,
   }) {
     addEventListener(target, eventName, (DomEvent event) {
       final DomMouseEvent mouseEvent = event as DomMouseEvent;
+      if (checkModifiers) {
+        _checkModifiersState(event);
+      }
       handler(mouseEvent);
     }, useCapture: useCapture);
   }
 
+  void _checkModifiersState(DomMouseEvent event) {
+    KeyboardBinding.instance!.synthesizeModifiersIfNeeded(
+      event.getModifierState('Alt'),
+      event.getModifierState('Control'),
+      event.getModifierState('Meta'),
+      event.getModifierState('Shift'),
+      event.timeStamp!,
+    );
+  }
+
   @override
   void setup() {
     _addMouseEventListener(glassPaneElement, 'mousedown', (DomMouseEvent event) {