Improve the typings of AR Events

src/core/session.ts

@@ -93,7 +93,7 @@ const DEFAULT_OPTIONS: Readonly<Required<SessionOptions>> = {
  * A Session represents an intent to display AR content
  * and encapsulates the main loop (update-render cycle)
  */
-export class Session extends AREventTarget<SessionEventType>
+export class Session extends AREventTarget<SessionEvent>
 {
     /** Number of active sessions */
     private static _count = 0;

src/core/viewport.ts

@@ -46,13 +46,10 @@ type ViewportSizeGetter = () => SpeedySize;
 type ViewportEventType = 'resize' | 'fullscreenchange';
 
 /** An event emitted by a Viewport */
-class ViewportEvent extends AREvent<ViewportEventType> { }
-
-/** Viewport event target */
-class ViewportEventTarget extends AREventTarget<ViewportEventType> { }
+export class ViewportEvent extends AREvent<ViewportEventType> { }
 
 /** Viewport style (immersive mode) */
-type ViewportStyle = 'best-fit' | 'stretch' | 'crop' | 'inline';
+export type ViewportStyle = 'best-fit' | 'stretch' | 'crop' | 'inline';
 
 
 
@@ -704,8 +701,9 @@ class ViewportResizer
 
     /**
      * Called when the viewport receives a 'resize' event
+     * @param event
      */
-    private _onViewportResize(): void
+    private _onViewportResize(event: ViewportEvent): void
     {
         const viewport = this._viewport;
 
@@ -948,7 +946,7 @@ class CropResizeStrategy extends ImmersiveResizeStrategy
 /**
  * Viewport
  */
-export class Viewport extends ViewportEventTarget
+export class Viewport extends AREventTarget<ViewportEvent>
 {
     /** Viewport resolution (controls the size of the drawing buffer of the foreground canvas) */
     private readonly _resolution: Resolution;

src/trackers/image-tracker/image-tracker.ts

@@ -119,7 +119,7 @@ const DEFAULT_OPTIONS: Readonly<ImageTrackerOptions> = {
 /**
  * The ImageTracker tracks an image (one at a time)
  */
-export class ImageTracker extends AREventTarget<ImageTrackerEventType> implements Tracker
+export class ImageTracker extends AREventTarget<ImageTrackerEvent> implements Tracker
 {
     /** session */
     private _session: Nullable<Session>;

src/ui/fullscreen-button.ts

@@ -20,7 +20,7 @@
  * A built-in fullscreen button introduced as a convenience
  */
 
-import { Viewport } from '../core/viewport';
+import { Viewport, ViewportEvent } from '../core/viewport';
 
 /** Button icon to be displayed when the fullscreen mode is disabled */
 const BUTTON_ICON_OFF = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbUlEQVRYR+2WOQ4AIAgE5f+PVhobDZANBZAsraAwXMoqFil+f9GBj8BW8dIiKt45at/XgShStHgvmfdekwAdIIEyAmh1Z/U5ikmABPoRsLZWtt+5DUlgHgGr6qM1Pf9XnO131L7fJEQjyOqXEzjP1YAhNmUTrgAAAABJRU5ErkJggg==';
@@ -47,8 +47,6 @@ export class FullscreenButton
     /** The HTML element of the button */
     private readonly _button: HTMLButtonElement;
 
-    /** Bound event handler */
-    private readonly _boundEventHandler: EventListener;
 
 
 
@@ -60,7 +58,7 @@ export class FullscreenButton
     {
         this._viewport = viewport;
         this._button = this._createButton();
-        this._boundEventHandler = this._handleFullscreenEvent.bind(this);
+        this._handleFullscreenEvent = this._handleFullscreenEvent.bind(this);
     }
 
     /**
@@ -72,7 +70,7 @@ export class FullscreenButton
     {
         parent.appendChild(this._button);
         this._button.hidden = !isVisible;
-        this._viewport.addEventListener('fullscreenchange', this._boundEventHandler);
+        this._viewport.addEventListener('fullscreenchange', this._handleFullscreenEvent);
     }
 
     /**
@@ -80,7 +78,7 @@ export class FullscreenButton
      */
     release(): void
     {
-        this._viewport.removeEventListener('fullscreenchange', this._boundEventHandler);
+        this._viewport.removeEventListener('fullscreenchange', this._handleFullscreenEvent);
         this._button.remove();
     }
 
@@ -145,7 +143,7 @@ export class FullscreenButton
     /**
      * Handle a fullscreenchange event
      */
-    private _handleFullscreenEvent(event: Event): void
+    private _handleFullscreenEvent(event: ViewportEvent): void
     {
         const img = this._viewport.fullscreen ? BUTTON_ICON_ON : BUTTON_ICON_OFF;
         this._button.style.backgroundImage = 'url(' + img + ')';

src/utils/ar-events.ts

@@ -22,15 +22,11 @@
 
 /**
  * AR Event Type
+ * @internal
  */
 type AREventType = string;
 
 /**
- * AR Event Listener (callback)
- */
-export type AREventListener = EventListener;
-
-/**
  * AR Event
  */
 export class AREvent<T extends AREventType> extends Event
@@ -54,9 +50,24 @@ export class AREvent<T extends AREventType> extends Event
 }
 
 /**
+ * Extract the AREventType from an AREvent
+ * @internal
+ */
+type AREventTypeOf<T> = T extends AREvent<infer U> ? U : never;
+
+/**
+ * AR Event Listener (a callback)
+ * @internal
+ */
+interface AREventListener<T>
+{
+    (evt: T extends AREvent<infer U> ? T : never): void;
+}
+
+/**
  * AR Event Target
  */
-export class AREventTarget<T extends AREventType> implements EventTarget
+export class AREventTarget<T>
 {
     /** event target delegate */
     private readonly _delegate: EventTarget;
@@ -76,9 +87,9 @@ export class AREventTarget<T extends AREventType> implements EventTarget
      * @param type event type
      * @param callback
      */
-    addEventListener(type: T, callback: AREventListener): void
+    addEventListener(type: AREventTypeOf<T>, callback: AREventListener<T>): void
     {
-        this._delegate.addEventListener(type, callback);
+        this._delegate.addEventListener(type, callback as EventListener);
     }
 
     /**
@@ -86,9 +97,9 @@ export class AREventTarget<T extends AREventType> implements EventTarget
      * @param type event type
      * @param callback
      */
-    removeEventListener(type: T, callback: AREventListener): void
+    removeEventListener(type: AREventTypeOf<T>, callback: AREventListener<T>): void
     {
-        this._delegate.removeEventListener(type, callback);
+        this._delegate.removeEventListener(type, callback as EventListener);
     }
 
     /**
@@ -97,7 +108,7 @@ export class AREventTarget<T extends AREventType> implements EventTarget
      * @returns same value as a standard event target
      * @internal
      */
-    dispatchEvent(event: AREvent<T>): boolean
+    dispatchEvent(event: T extends AREvent<infer U> ? T : never): boolean
     {
         return this._delegate.dispatchEvent(event);
     }