Add experimental EventUI

debug/index.html

@@ -27,6 +27,10 @@
 
         var simplePlayBot = new Mapillary.SimplePlayBot();
         viewerSimple.activateBot(simplePlayBot);
+
+        viewerSimple.eventUI.on("moveend", function (node) {
+            console.log(node.key);
+        });
     </script>
 </body>
 </html>

src/UI.ts

@@ -1,4 +1,5 @@
 export {CoverUI} from "./ui/CoverUI"
+export {EventUI} from "./ui/EventUI"
 export {NoneUI} from "./ui/NoneUI"
 export {SimpleUI} from "./ui/SimpleUI"
 export {GlUI} from "./ui/GlUI"

src/state/StateService.ts

@@ -23,6 +23,7 @@ export class StateService {
 
     public updateCurrentState: rx.Subject<ICurrentStateOperation> = new rx.Subject<ICurrentStateOperation>();
     public currentState: rx.Observable<ICurrentState>;
+    public currentNode: rx.Observable<Node>;
 
     private animationSpeed: number = 0.20;
 
@@ -74,6 +75,15 @@ export class StateService {
             });
         }).subscribe(this.updateCurrentState);
 
+        this.currentNode = this.currentState.map((currentState: ICurrentState): Node => {
+            if (currentState != null && currentState.currentNode != null) {
+                return currentState.currentNode;
+            }
+            return null;
+        }).filter((node: Node): boolean => {
+            return node != null;
+        }).distinctUntilChanged();
+
         this.tick.map<ICurrentStateOperation>((i: number): ICurrentStateOperation => {
             return ((currentState: ICurrentState) => {
                 return currentState;

src/ui/EventUI.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../node_modules/rx/ts/rx.all.d.ts" />
+
+import * as _ from "underscore";
+import * as rx from "rx";
+
+import {Node} from "../Graph";
+import {Navigator} from "../Viewer";
+import {IUI} from "../UI";
+
+export class EventUI implements IUI {
+    private disposable: rx.IDisposable;
+    private navigator: Navigator;
+    private cbs: any[];
+
+    constructor(navigator: Navigator) {
+        this.navigator = navigator;
+        this.cbs = [];
+    }
+
+    public activate(): void {
+        this.disposable = this.navigator.stateService.currentNode.subscribe((node: Node): void => {
+            _.map(this.cbs, (cb: any) => {
+                cb(node);
+            });
+        });
+    }
+
+    public deactivate(): void {
+        this.disposable.dispose();
+    }
+
+    public on(event: string, cb: any): void {
+        this.cbs.push(cb);
+    }
+}
+
+export default EventUI;

src/ui/SimpleUI.ts

@@ -2,14 +2,11 @@
 
 import * as rx from "rx";
 
-import {Node} from "../Graph";
 import {ICurrentState} from "../State";
 import {Navigator} from "../Viewer";
 import {IUI} from "../UI";
 
 export class SimpleUI implements IUI {
-    public graphSupport: boolean = true;
-
     private canvas: HTMLCanvasElement;
     private disposable: rx.IDisposable;
     private navigator: Navigator;
@@ -18,8 +15,8 @@ export class SimpleUI implements IUI {
         this.navigator = navigator;
 
         this.canvas = document.createElement("canvas");
-        this.canvas.style.width = "100%";
-        this.canvas.style.height = "100%";
+        this.canvas.style.width = "320px";
+        this.canvas.style.height = "240px";
         container.appendChild(this.canvas);
     }
 
@@ -27,7 +24,7 @@ export class SimpleUI implements IUI {
         this.disposable = this.navigator.stateService.currentState.subscribe((currentState: ICurrentState) => {
             if (currentState != null && currentState.currentNode != null) {
                 let ctx: any = this.canvas.getContext("2d");
-                ctx.drawImage(currentState.currentNode.image, 0, 0);
+                ctx.drawImage(currentState.currentNode.image, 0, 0, 300, 225);
             }
         });
     }
@@ -36,11 +33,6 @@ export class SimpleUI implements IUI {
         this.disposable.dispose();
         // remove canvas from DOM here
     }
-
-    public display(node: Node): void {
-        let i: number = 0;
-        i++;
-    }
 }
 
 export default SimpleUI;

src/viewer/Viewer.ts

@@ -7,7 +7,7 @@ import {InitializationMapillaryError, ParameterMapillaryError} from "../Error";
 import {Node} from "../Graph";
 import {EdgeConstants} from "../Edge";
 import {IViewerOptions, Navigator, OptionsParser} from "../Viewer";
-import {CoverUI, IUI, NoneUI, SimpleUI, GlUI, SimpleNavUI} from "../UI";
+import {CoverUI, EventUI, IUI, NoneUI, SimpleUI, GlUI, SimpleNavUI} from "../UI";
 import {CacheBot, IBot} from "../Bot";
 
 export class Viewer {
@@ -28,6 +28,9 @@ export class Viewer {
      */
     public navigator: Navigator;
 
+    // fixme ugly eventui test
+    public eventUI: EventUI;
+
     /**
      * HTML element containing the Mapillary viewer
      * @member Mapillary.Viewer#container
@@ -102,6 +105,11 @@ export class Viewer {
         }
 
         this.activeUis = {};
+
+        this.eventUI = new EventUI(this.navigator);
+        this.addUI("event", this.eventUI);
+        this.activateUI("event");
+
         _.map(this.options.uis, (ui: string) => {
             this.activateUI(ui);
         });