feat: implement this device orientation Event on the dart side

Author: yifei8

webf/lib/src/dom/event.dart

@@ -69,6 +69,7 @@ const String EVENT_STATE_START = 'start';
 const String EVENT_STATE_UPDATE = 'update';
 const String EVENT_STATE_END = 'end';
 const String EVENT_STATE_CANCEL = 'cancel';
+const String EVENT_DEVICE_ORIENTATION = 'deviceorientation';
 
 mixin ElementEventMixin on ElementBase {
   AppearEventType _prevAppearState = AppearEventType.none;
@@ -418,6 +419,31 @@ class DeviceOrientationEvent extends Event {
   }
 }
 
+class DeviceOrientationEvent extends Event {
+  DeviceOrientationEvent(this.alpha, this.beta, this.gamma) : super(EVENT_DEVICE_ORIENTATION);
+
+  final bool absolute = true;
+  final double alpha;
+  final double beta;
+  final double gamma;
+
+  @override
+  Pointer<NativeType> toRaw([int extraLength = 0, bool isCustomEvent = false]) {
+    List<int> methods = [
+      doubleToUint64(alpha),
+      doubleToUint64(beta),
+      doubleToUint64(gamma)
+    ];
+    Pointer<RawEvent> rawEvent = super.toRaw(methods.length).cast<RawEvent>();
+    int currentStructSize = rawEvent.ref.length + methods.length;
+    Uint64List bytes = rawEvent.ref.bytes.asTypedList(currentStructSize);
+    bytes.setAll(rawEvent.ref.length, methods);
+    rawEvent.ref.length = currentStructSize;
+
+    return rawEvent;
+  }
+}
+
 /// reference: https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent
 class GestureEvent extends Event {
   final String state;

webf/lib/src/dom/window.dart

@@ -2,8 +2,11 @@
  * Copyright (C) 2019-2022 The Kraken authors. All rights reserved.
  * Copyright (C) 2022-present The WebF authors. All rights reserved.
  */
+import 'dart:math' as math;
+import 'dart:async';
 import 'dart:ui';
 
+import 'package:sensors_plus/sensors_plus.dart';
 import 'package:webf/bridge.dart';
 import 'package:webf/dom.dart';
 import 'package:webf/foundation.dart';
@@ -117,6 +120,9 @@ class Window extends EventTarget {
         // Fired at the Document or element when the viewport or element is scrolled, respectively.
         document.documentElement?.addEventListener(eventType, handler, addEventListenerOptions: addEventListenerOptions);
         break;
+      case EVENT_DEVICE_ORIENTATION:
+        _registerGyroscope();
+        break;
     }
   }
 
@@ -127,6 +133,9 @@ class Window extends EventTarget {
       case EVENT_SCROLL:
         document.documentElement?.removeEventListener(eventType, handler);
         break;
+      case EVENT_DEVICE_ORIENTATION:
+        _unRegisterGyroscope(false);
+        break;
     }
   }
 
@@ -135,4 +144,43 @@ class Window extends EventTarget {
   void focus() {
     // TODO
   }
+
+  StreamSubscription<GyroscopeEvent>? _gyroscopeStream;
+  void _registerGyroscope() {
+    _gyroscopeStream ??= gyroscopeEventStream().listen((GyroscopeEvent event) {
+      dispatchDeviceOrientationEvent(event.x, event.y, event.z);
+    },
+      cancelOnError: true,
+    );
+  }
+
+  void _unRegisterGyroscope(bool dispose) {
+    if (dispose || !hasEventListener(EVENT_DEVICE_ORIENTATION)) {
+      _gyroscopeStream?.cancel();
+      _gyroscopeStream = null;
+    }
+  }
+
+  /// Convert gyroscope data obtained in Flutter into rotation angle in the Web
+  /// In the w3c standard:
+  /// alpha: A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 (inclusive) to 360 (exclusive).
+  /// beta: A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 (inclusive) to 180 (exclusive).
+  /// gamma: A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 (inclusive) to 90 (exclusive).
+  void dispatchDeviceOrientationEvent(x, y, z) {
+    var xAxisAngle= math.atan2(y, z) * (180 / math.pi); // Angle of rotation around the X-axis
+    var yAxisAngle = math.atan2(-x, math.sqrt(y * y + z * z)) * (180 / math.pi); // Rotation angle around Y axis
+    var zAxisAngle = math.atan2(y, z) * (180 / math.pi); // Rotation angle around Z axis
+    var alpha = zAxisAngle + 180;
+    var beta = xAxisAngle;
+    var gamma = yAxisAngle;
+    if (hasEventListener(EVENT_DEVICE_ORIENTATION)) {
+      dispatchEvent(DeviceOrientationEvent(alpha, beta, gamma));
+    }
+  }
+
+  @override
+  void dispose() async {
+    _unRegisterGyroscope(true);
+    super.dispose();
+  }
 }

webf/pubspec.yaml

@@ -25,6 +25,7 @@ dependencies:
   shared_preferences: 2.2.0 # No AndroidX used.
   archive: ^3.3.7 # Pure dart module.
   web_socket_channel: ^2.2.0
+  sensors_plus: ^4.0.2
 
 dev_dependencies:
   flutter_test: