Simplify and refactor the Viewport implementation

src/core/hud.ts

@@ -21,8 +21,6 @@
  */
 
 import { Nullable, Utils } from "../utils/utils";
-import { ViewportContainer } from "./viewport";
-import { IllegalArgumentError } from "../utils/errors";
 
 /** HUD container */
 export type HUDContainer = HTMLDivElement;
@@ -36,7 +34,7 @@ export class HUD
     private _container: HUDContainer;
 
     /** Whether or not we have created our own container */
-    private _ownContainer: boolean;
+    private _isOwnContainer: boolean;
 
 
 
@@ -48,7 +46,7 @@ export class HUD
     constructor(parent: HTMLElement, hudContainer: Nullable<HUDContainer>)
     {
         this._container = hudContainer || this._createContainer(parent);
-        this._ownContainer = (hudContainer == null);
+        this._isOwnContainer = (hudContainer == null);
 
         // move the HUD container to the parent node
         if(this._container.parentElement !== parent) {
@@ -57,8 +55,10 @@ export class HUD
         }
 
         // the HUD should be hidden initially
-        if(!this._container.hidden)
+        if(!this._container.hidden) {
             Utils.warning(`The container of the HUD should have the hidden attribute`);
+            this._container.hidden = true;
+        }
     }
 
     /**
@@ -100,6 +100,8 @@ export class HUD
         container.style.padding = container.style.margin = '0px';
         container.style.zIndex = String(zIndex);
         container.style.userSelect = 'none';
+
+        this.visible = true;
     }
 
     /**
@@ -108,8 +110,8 @@ export class HUD
      */
     _release(): void
     {
-        if(this._ownContainer) {
-            this._ownContainer = false;
+        if(this._isOwnContainer) {
+            this._isOwnContainer = false;
             this._container.remove();
         }
     }

src/core/session.ts

@@ -26,7 +26,7 @@ import { SpeedyPromise } from 'speedy-vision/types/core/speedy-promise';
 import { Nullable, Utils } from '../utils/utils';
 import { AREvent, AREventTarget } from '../utils/ar-events';
 import { IllegalArgumentError, IllegalOperationError, NotSupportedError } from '../utils/errors';
-import { Viewport, BaseViewport, ImmersiveViewport, InlineViewport } from './viewport';
+import { Viewport } from './viewport';
 import { Settings } from './settings';
 import { Stats } from './stats';
 import { StatsPanel } from './stats-panel';
@@ -53,7 +53,7 @@ export interface SessionOptions
     sources: Source[];
 
     /** viewport */
-    viewport: Nullable<BaseViewport>;
+    viewport: Nullable<Viewport>;
 
     /** show stats? */
     stats?: boolean;
@@ -141,7 +141,7 @@ export class Session extends AREventTarget<SessionEventType>
      * @param stats render stats panel?
      * @param gizmos render gizmos?
      */
-    private constructor(sources: Source[], mode: SessionMode, viewport: BaseViewport, stats: boolean, gizmos: boolean)
+    private constructor(sources: Source[], mode: SessionMode, viewport: Viewport, stats: boolean, gizmos: boolean)
     {
         super();
 
@@ -157,17 +157,29 @@ export class Session extends AREventTarget<SessionEventType>
         this._gizmos = new Gizmos();
         this._gizmos.visible = gizmos;
 
+        // validate the mode
+        if(mode == 'immersive') {
+            if(viewport.style != 'best-fit' && viewport.style != 'stretch') {
+                Utils.warning(`Invalid viewport style \"${viewport.style}\" for the \"${mode}\" mode`);
+                viewport.style = 'best-fit';
+            }
+        }
+        else if(mode == 'inline') {
+            if(viewport.style != 'inline') {
+                Utils.warning(`Invalid viewport style \"${viewport.style}\" for the \"${mode}\" mode`);
+                viewport.style = 'inline';
+            }
+        }
+        else
+            throw new IllegalArgumentError(`Invalid session mode "${mode}"`);
+
         // get media
         const media = this.media;
+        const getMediaSize = () => media.size;
 
         // setup the viewport
-        if(mode == 'immersive')
-            this._viewport = new ImmersiveViewport(viewport, () => media.size);
-        else if(mode == 'inline')
-            this._viewport = new InlineViewport(viewport, () => media.size);
-        else
-            throw new IllegalArgumentError(`Invalid session mode "${mode}"`);
-        this._viewport._init();
+        this._viewport = viewport;
+        this._viewport._init(getMediaSize);
 
         // setup the main loop
         this._setupUpdateLoop();

src/main.ts

@@ -26,7 +26,7 @@ import { Settings } from './core/settings';
 import { Session, SessionOptions } from './core/session';
 import { TrackerFactory } from './trackers/tracker-factory';
 import { SourceFactory } from './sources/source-factory';
-import { Viewport, ViewportSettings, BaseViewport } from './core/viewport';
+import { Viewport, ViewportSettings } from './core/viewport';
 import { Utils } from './utils/utils';
 declare const __MARTINS_VERSION__: string;
 declare const __MARTINS_DEVELOPMENT_MODE__: string;
@@ -70,7 +70,7 @@ export default class Martins
      */
     static Viewport(settings: ViewportSettings): Viewport
     {
-        return new BaseViewport(settings);
+        return new Viewport(settings);
     }
 
     /**