bind deviceorientationabsolute

qazsato · Dec 3, 2024 · 54a92b9 · 54a92b9
1 parent 411ac39
commit 54a92b9
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ map.addControl(new CompassControl())
 import { Map } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { CompassControl } from 'maplibre-gl-compass'
-import type { WebkitDeviceOrientationEvent } from 'maplibre-gl-compass'
+import type { CompassEvent } from 'maplibre-gl-compass'
 import 'maplibre-gl-compass/style.css'
 
 const map = new Map({/* YOUR_MAP_OPTION */})
@@ -63,7 +63,7 @@ compass.on('turnoff', () => {
   map.setBearing(0)
 })
 
-compass.on('deviceorientation', (event: WebkitDeviceOrientationEvent) => {
+compass.on('compass', (event: CompassEvent) => {
   // Your custom logic is here!
 })
 
@@ -80,11 +80,12 @@ map.addControl(compass)
 
 ## Events
 
-| name              | description                                                                                                                                                                                                          |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| turnon            | Triggered when the compass is turned on.                                                                                                                                                                             |
-| turnoff           | Triggered when the compass is turned off.                                                                                                                                                                            |
-| deviceorientation | Triggered when the device orientation changes. For more details on event properties, refer to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event#event_properties). |
+| name    | description                                                                                                                                                                                                          |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| turnon  | Triggered when the compass is turned on.                                                                                                                                                                             |
+| turnoff | Triggered when the compass is turned off.                                                                                                                                                                            |
+| compass | Triggered when the device orientation changes. For more details on event properties, refer to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event#event_properties). |
+
 
 ## License
 

diff --git a/docs/index-CarpIPlA.js → docs/index-C_J3oI8y.js b/docs/index-CarpIPlA.js → docs/index-C_J3oI8y.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/maplibre-gl-compass/compass.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>maplibre-gl-compass</title>
-    <script type="module" crossorigin src="/maplibre-gl-compass/index-CarpIPlA.js"></script>
+    <script type="module" crossorigin src="/maplibre-gl-compass/index-C_J3oI8y.js"></script>
     <link rel="stylesheet" crossorigin href="/maplibre-gl-compass/index-oS4W3OgK.css">
   </head>
   <body>

diff --git a/src/components/DebugView.ts b/src/components/DebugView.ts
@@ -1,3 +1,4 @@
+import { WebkitDeviceOrientationEvent } from '../maplibre-gl-compass'
 import './DebugView.css'
 
 export class DebugView {
@@ -8,16 +9,26 @@ export class DebugView {
     this.element.classList.add('maplibregl-ctrl')
     this.element.innerHTML = `
     <ul class="maplibregl-ctrl-compass-heading-debug">
+      <li><b>event</b>: <span class="event-name"></span></li>
       <li><b>heading</b>: <span class="heading"></span></li>
+      <li><b>alpha</b>: <span class="alpha"></span></li>
+      <li><b>beta</b>: <span class="beta"></span></li>
+      <li><b>gamma</b>: <span class="gamma"></span></li>
     </ul>
     `
     parent.appendChild(this.element)
   }
 
-  update(heading: string) {
+  update(heading?: number, event?: WebkitDeviceOrientationEvent) {
+    const eventName = this.element.querySelector('.event-name')
     const headingSpan = this.element.querySelector('.heading')
-    if (headingSpan) {
-      headingSpan.textContent = heading
-    }
+    const alphaSpan = this.element.querySelector('.alpha')
+    const betaSpan = this.element.querySelector('.beta')
+    const gammaSpan = this.element.querySelector('.gamma')
+    if (eventName) eventName.textContent = event?.type || ''
+    if (headingSpan) headingSpan.textContent = `${heading}`
+    if (alphaSpan) alphaSpan.textContent = `${event?.alpha}`
+    if (betaSpan) betaSpan.textContent = `${event?.beta}`
+    if (gammaSpan) gammaSpan.textContent = `${event?.gamma}`
   }
 }
diff --git a/src/maplibre-gl-compass.ts b/src/maplibre-gl-compass.ts
@@ -2,6 +2,11 @@ import { IControl, Map } from 'maplibre-gl'
 import { CompassButton } from './components/CompassButton'
 import { DebugView } from './components/DebugView'
 
+export type CompassEvent = {
+  heading: number | undefined
+  originalEvent: WebkitDeviceOrientationEvent
+}
+
 // https://developer.mozilla.org/ja/docs/Web/API/DeviceOrientationEvent
 export type WebkitDeviceOrientationEvent = DeviceOrientationEvent & {
   webkitCompassHeading: number | undefined
@@ -29,11 +34,10 @@ export class CompassControl implements IControl {
   private options: CompassControlOptions
 
   private active = false
+  private currentEvent: WebkitDeviceOrientationEvent | undefined
   private currentHeading: number | undefined
 
-  private deviceorientationCallback:
-    | ((event: WebkitDeviceOrientationEvent) => void)
-    | undefined
+  private compassCallback: ((event: CompassEvent) => void) | undefined
   private turnonCallback: (() => void) | undefined
   private turnoffCallback: (() => void) | undefined
 
@@ -67,8 +71,8 @@ export class CompassControl implements IControl {
       throw new Error(`Event type ${type} is not supported.`)
     }
     switch (type) {
-      case 'deviceorientation':
-        this.deviceorientationCallback = callback
+      case 'compass':
+        this.compassCallback = callback
         break
       case 'turnon':
         this.turnonCallback = callback
@@ -82,6 +86,7 @@ export class CompassControl implements IControl {
   turnOn() {
     this.compassButton.turnOn()
     this.enableDeviceOrientation()
+    this.enableDeviceOrientationAbsolute()
 
     setTimeout(() => {
       if (this.active && this.currentHeading === undefined) {
@@ -119,6 +124,14 @@ export class CompassControl implements IControl {
     }
   }
 
+  private enableDeviceOrientationAbsolute() {
+    window.addEventListener(
+      'deviceorientationabsolute',
+      this.onDeviceOrientation,
+      true,
+    )
+  }
+
   private enableDeviceOrientation() {
     // For iOS 13 and later
     // refs: https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent#browser_compatibility
@@ -146,10 +159,13 @@ export class CompassControl implements IControl {
 
   private onDeviceOrientation = (event: DeviceOrientationEvent) => {
     if (!this.map) return
-    const webkitEvent = event as WebkitDeviceOrientationEvent
-    this.currentHeading = webkitEvent.webkitCompassHeading
-    if (this.deviceorientationCallback) {
-      this.deviceorientationCallback(webkitEvent)
+    this.currentEvent = event as WebkitDeviceOrientationEvent
+    this.currentHeading = this.calculateCompassHeading(this.currentEvent)
+    if (this.compassCallback) {
+      this.compassCallback({
+        heading: this.currentHeading,
+        originalEvent: this.currentEvent,
+      })
     }
     if (this.options.debug) {
       this.updateDebugView()
@@ -165,15 +181,29 @@ export class CompassControl implements IControl {
   }
 
   private updateDebugView() {
-    this.debugView?.update(`${this.currentHeading}`)
+    this.debugView?.update(this.currentHeading, this.currentEvent)
   }
 
   private clearDebugView() {
-    this.debugView?.update('')
+    this.debugView?.update()
   }
 
   private disable() {
     this.compassButton.disable()
     this.turnOff()
   }
+
+  private calculateCompassHeading(event: WebkitDeviceOrientationEvent) {
+    if (event.webkitCompassHeading != null) {
+      return event.webkitCompassHeading
+    }
+    if (event.alpha == null) {
+      return undefined
+    }
+    let compassHeading = 360 - event.alpha
+    if (compassHeading < 0) {
+      compassHeading += 360
+    }
+    return compassHeading
+  }
 }