refactor: type and document events

spec/viewer/Observer.spec.ts

@@ -7,14 +7,15 @@ import { NavigatorMockCreator } from "../helper/NavigatorMockCreator";
 import { EventEmitter } from "../../src/utils/EventEmitter";
 import { Observer } from "../../src/viewer/Observer";
 import { Viewer } from "../../src/viewer/Viewer";
+import { ViewerLoadingEvent } from "../../src/Mapillary";
 
 describe("Observer.ctor", () => {
     it("should be defined", () => {
-        const eventEmitter: EventEmitter = new EventEmitter();
+        const viewer = <Viewer>new EventEmitter();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 new NavigatorMockCreator().create(),
                 new ContainerMockCreator().create());
 
@@ -24,40 +25,40 @@ describe("Observer.ctor", () => {
 
 describe("Observer.loading", () => {
     it("should emit loading when not started", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer = new Observer(
-            eventEmitter,
+        const observer = new Observer(
+            viewer,
             navigatorMock,
             new ContainerMockCreator().create());
 
         expect(observer).toBeDefined();
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 
         (<Subject<boolean>>navigatorMock.loadingService.loading$).next(true);
     });
 
     it("should emit loading when started", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 navigatorMock,
                 new ContainerMockCreator().create());
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 
@@ -67,19 +68,19 @@ describe("Observer.loading", () => {
     });
 
     it("should emit loading when started and stopped", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 navigatorMock,
                 new ContainerMockCreator().create());
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 

spec/viewer/Viewer.spec.ts

@@ -1,3 +1,4 @@
+import { ViewerEvent } from "../../src/Mapillary";
 import * as ComponentController from "../../src/viewer/ComponentController";
 import * as Container from "../../src/viewer/Container";
 import * as CustomRenderer from "../../src/viewer/CustomRenderer";
@@ -84,12 +85,12 @@ describe("Viewer.remove", () => {
     it("should emit removed event", (done: Function) => {
         createMocks();
         const viewer = new Viewer({ apiClient: "", container: "" });
-
+        const remove: ViewerEvent = "remove";
         viewer.on(
-            Viewer.removed,
+            remove,
             (event: { type: string }): void => {
                 expect(event).toBeDefined();
-                expect(event.type).toBe(Viewer.removed);
+                expect(event.type).toBe(remove);
 
                 done();
             });

src/Mapillary.ts

@@ -69,6 +69,7 @@ export { isFallbackSupported, isSupported } from "./utils/Support";
 // Viewer types
 export { Alignment } from "./viewer/enums/Alignment";
 export { ComponentSize } from "./component/utils/ComponentSize";
+export { IViewer } from "./viewer/interfaces/IViewer";
 export { ICustomRenderer } from "./viewer/interfaces/ICustomRenderer";
 export { PointOfView } from "./viewer/interfaces/PointOfView";
 export { RenderMode } from "./render/RenderMode";
@@ -78,7 +79,15 @@ export { Viewer } from "./viewer/Viewer";
 
 // Viewer events
 export { ViewerEvent } from "./viewer/events/ViewerEvent";
-export { MouseViewerEvent } from "./viewer/events/ViewerMouseEvent";
+export { ViewerMouseEvent } from "./viewer/events/ViewerMouseEvent";
+export {
+    ViewerBearingEvent,
+    ViewerLoadingEvent,
+    ViewerNavigableEvent,
+    ViewerNavigationEdgeStatusEvent,
+    ViewerNodeEvent,
+    ViewerStateEvent,
+} from "./viewer/events/ViewerStateEvent";
 
 // Viewer options
 export { ComponentOptions } from "./viewer/options/ComponentOptions";

src/utils/EventEmitter.ts

@@ -1,59 +1,60 @@
 export class EventEmitter {
-    private _events: { [eventType: string]: any[] };
+    private _events: { [type: string]: ((event: any) => void)[] };
 
-    constructor() {
-        this._events = {};
-    }
+    constructor() { this._events = {}; }
 
     /**
      * Subscribe to an event by its name.
-     * @param {string }eventType - The name of the event to subscribe to.
-     * @param {any} fn - The handler called when the event occurs.
+     * @param {string} type - The name of the event
+     * to subscribe to.
+     * @param {(event: T) => void} handler - The
+     * handler called when the event occurs.
      */
-    public on(eventType: string, fn: any): void {
-        this._events[eventType] = this._events[eventType] || [];
-        this._events[eventType].push(fn);
-        return;
+    public on<T>(
+        type: string,
+        handler: (event: T) => void): void {
+        this._events[type] = this._events[type] || [];
+        this._events[type].push(handler);
     }
 
     /**
      * Unsubscribe from an event by its name.
-     * @param {string} eventType - The name of the event to subscribe to.
-     * @param {any} fn - The handler to remove.
+     * @param {string} type - The name of the event
+     * to unsubscribe from.
+     * @param {(event: T) => void} handler - The
+     * handler to remove.
      */
-    public off(eventType: string, fn: any): void {
-        if (!eventType) {
-            this._events = {};
-            return;
-        }
-
-        if (!this._listens(eventType)) {
-            let idx: number = this._events[eventType].indexOf(fn);
-            if (idx >= 0) {
-                this._events[eventType].splice(idx, 1);
+    public off<T>(
+        type: string,
+        handler: (event: T) => void): void {
+        if (!type) { this._events = {}; return; }
+
+        if (!this._listens(type)) {
+            const index = this._events[type].indexOf(handler);
+            if (index >= 0) {
+                this._events[type].splice(index, 1);
             }
-            if (this._events[eventType].length) {
-                delete this._events[eventType];
+            if (this._events[type].length) {
+                delete this._events[type];
             }
         } else {
-            delete this._events[eventType];
+            delete this._events[type];
         }
-
-        return;
     }
 
-    public fire(eventType: string, data: any): void {
-        if (!this._listens(eventType)) {
-            return;
-        }
-
-        for (let fn of this._events[eventType]) {
-            fn.call(this, data);
+    /**
+     * @ignore
+     */
+    public fire<T>(
+        type: string,
+        event: T): void {
+        if (!this._listens(type)) { return; }
+        for (let fn of this._events[type]) {
+            fn.call(this, event);
         }
-        return;
     }
 
     private _listens(eventType: string): boolean {
-        return !!(this._events && this._events[eventType]);
+        return eventType in this._events;
     }
 }

src/viewer/CustomRenderer.ts

@@ -12,7 +12,7 @@ import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { WebGLRenderer } from "three";
 import { RenderCamera } from "../render/RenderCamera";
-import { Viewer } from "./Viewer";
+import { IViewer } from "./interfaces/IViewer";
 
 export class CustomRenderer {
     private _renderers: {
@@ -28,7 +28,7 @@ export class CustomRenderer {
         this._renderers = {};
     }
 
-    public add(renderer: ICustomRenderer, viewer: Viewer): void {
+    public add(renderer: ICustomRenderer, viewer: IViewer): void {
         const subs = new SubscriptionHolder();
         this._renderers[renderer.id] = { subs, renderer };
 
@@ -72,7 +72,7 @@ export class CustomRenderer {
                 }));
     }
 
-    public dispose(viewer: Viewer): void {
+    public dispose(viewer: IViewer): void {
         for (const id of Object.keys(this._renderers)) {
             this.remove(id, viewer);
         }
@@ -82,7 +82,7 @@ export class CustomRenderer {
         return id in this._renderers;
     }
 
-    public remove(id: string, viewer: Viewer): void {
+    public remove(id: string, viewer: IViewer): void {
         this._renderers[id].subs.unsubscribe();
 
         const renderer = this._renderers[id].renderer;