Refactor the HUD and separate internal components from user space

src/core/hud.ts

@@ -20,7 +20,10 @@
  * Heads Up Display
  */
 
-import { Nullable, Utils } from "../utils/utils";
+import { Viewport } from './viewport';
+import { StatsPanel } from '../ui/stats-panel';
+import { FullscreenButton } from '../ui/fullscreen-button';
+import { Nullable, Utils } from '../utils/utils';
 
 /** HUD container */
 export type HUDContainer = HTMLDivElement;
@@ -36,14 +39,24 @@ export class HUD
     /** Whether or not we have created our own container */
     private _isOwnContainer: boolean;
 
+    /** Container for the internal components */
+    private _internalContainer: ShadowRoot;
+
+    /** Stats panel */
+    #statsPanel: StatsPanel;
+
+    /** Fullscreen button */
+    #fullscreenButton: FullscreenButton;
+
 
 
     /**
      * Constructor
+     * @param viewport viewport
      * @param parent parent of the hud container
      * @param hudContainer an existing hud container (optional)
      */
-    constructor(parent: HTMLElement, hudContainer: Nullable<HUDContainer>)
+    constructor(viewport: Viewport, parent: HTMLElement, hudContainer: Nullable<HUDContainer> = null)
     {
         this._container = hudContainer || this._createContainer(parent);
         this._isOwnContainer = (hudContainer == null);
@@ -59,6 +72,14 @@ export class HUD
             Utils.warning(`The container of the HUD should have the hidden attribute`);
             this._container.hidden = true;
         }
+
+        // create a shadow tree for the internal components
+        this._internalContainer = parent.attachShadow({ mode: 'closed' });
+        this._internalContainer.appendChild(document.createElement('slot'));
+
+        // create internal components
+        this.#statsPanel = new StatsPanel();
+        this.#fullscreenButton = new FullscreenButton(viewport);
     }
 
     /**
@@ -86,14 +107,28 @@ export class HUD
     }
 
     /**
+     * Stats panel
+     * @internal
+     */
+    get _statsPanel(): StatsPanel
+    {
+        return this.#statsPanel; // same name
+    }
+
+    /**
      * Initialize the HUD
      * @param zIndex the z-index of the container
+     * @param wantStatsPanel
+     * @param wantFullscreenButton
      * @internal
      */
-    _init(zIndex: number): void
+    _init(zIndex: number, wantStatsPanel: boolean, wantFullscreenButton: boolean): void
     {
-        const container = this._container;
+        const parent = this._internalContainer;
+        this.#statsPanel.init(parent, wantStatsPanel);
+        this.#fullscreenButton.init(parent, wantFullscreenButton);
 
+        const container = this._container;
         container.style.position = 'absolute';
         container.style.left = container.style.top = '0px';
         container.style.right = container.style.bottom = '0px';
@@ -112,6 +147,9 @@ export class HUD
     {
         this.visible = false;
 
+        this.#fullscreenButton.release();
+        this.#statsPanel.release();
+
         if(this._isOwnContainer) {
             this._isOwnContainer = false;
             this._container.remove();
@@ -125,11 +163,11 @@ export class HUD
      */
     private _createContainer(parent: HTMLElement): HUDContainer
     {
-        const node = document.createElement('div') as HTMLDivElement;
+        const node = document.createElement('div');
 
         node.hidden = true;
         parent.insertAdjacentElement('afterbegin', node);
 
         return node;
     }
-}
+}

src/core/session.ts

@@ -31,7 +31,6 @@ import { IllegalArgumentError, IllegalOperationError, NotSupportedError, AccessD
 import { Viewport } from './viewport';
 import { Settings } from './settings';
 import { Stats } from './stats';
-import { StatsPanel } from '../ui/stats-panel';
 import { Gizmos } from '../ui/gizmos';
 import { Frame } from './frame';
 import { Tracker } from '../trackers/tracker';
@@ -132,9 +131,6 @@ export class Session extends AREventTarget<SessionEventType>
     /** Render stats (FPS) */
     private _renderStats: Stats;
 
-    /** Stats panel */
-    private _statsPanel: StatsPanel;
-
     /** Gizmos */
     private _gizmos: Gizmos;
 
@@ -174,13 +170,9 @@ export class Session extends AREventTarget<SessionEventType>
         // setup the viewport
         this._viewport = viewport;
         if(this._primarySource !== null)
-            this._viewport._init(() => this._primarySource!._internalMedia.size, mode);
+            this._viewport._init(() => this._primarySource!._internalMedia.size, mode, stats);
         else
-            this._viewport._init(() => Utils.resolution('sm', window.innerWidth / window.innerHeight), mode);
-
-        // setup the stats panel
-        this._statsPanel = new StatsPanel(this._viewport);
-        this._statsPanel.visible = stats;
+            this._viewport._init(() => Utils.resolution('sm', window.innerWidth / window.innerHeight), mode, stats);
 
         // done!
         Session._count++;
@@ -397,7 +389,6 @@ export class Session extends AREventTarget<SessionEventType>
             // release internal components
             this._updateStats.reset();
             this._renderStats.reset();
-            this._statsPanel.release();
             this._viewport._release();
 
             // end the session
@@ -735,9 +726,12 @@ export class Session extends AREventTarget<SessionEventType>
 
                 // update internals
                 this._renderStats.update();
-                this._statsPanel.update(time, this._sources, this._trackers, this._viewport, this._updateStats.cyclesPerSecond, this._renderStats.cyclesPerSecond);
                 this._frameReady = false;
 
+                // update stats panel
+                const statsPanel = this._viewport.hud._statsPanel;
+                statsPanel.update(time, this._sources, this._trackers, this._viewport, this._updateStats.cyclesPerSecond, this._renderStats.cyclesPerSecond);
+
             }
             else {
 

src/core/viewport.ts

@@ -26,7 +26,6 @@ import { SpeedySize } from 'speedy-vision/types/core/speedy-size';
 import { SpeedyPromise } from 'speedy-vision/types/core/speedy-promise';
 import { SessionMode } from './session';
 import { HUD, HUDContainer } from './hud';
-import { FullscreenButton } from '../ui/fullscreen-button';
 import { Vector2 } from '../geometry/vector2';
 import { Resolution } from '../utils/resolution';
 import { Nullable } from '../utils/utils';
@@ -794,6 +793,9 @@ export class Viewport extends ViewportEventTarget
     /** Viewport resolution (controls the size of the drawing buffer of the foreground canvas) */
     private readonly _resolution: Resolution;
 
+    /** Viewport settings */
+    private readonly _settings: Readonly<Required<ViewportSettings>>
+
     /** The containers */
     private readonly _containers: ViewportContainers;
 
@@ -815,8 +817,6 @@ export class Viewport extends ViewportEventTarget
     /** Fullscreen utilities */
     private readonly _fullscreen: ViewportFullscreenHelper;
 
-    /** Built-in fullscreen button */
-    private readonly _fullscreenButton: Nullable<FullscreenButton>;
 
 
 
@@ -827,10 +827,11 @@ export class Viewport extends ViewportEventTarget
      */
     constructor(viewportSettings: ViewportSettings)
     {
-        const settings = Object.assign({}, DEFAULT_VIEWPORT_SETTINGS, viewportSettings);
-
         super();
 
+        const settings = Object.assign({}, DEFAULT_VIEWPORT_SETTINGS, viewportSettings);
+        this._settings = Object.freeze(settings);
+
         const guessedAspectRatio = window.innerWidth / window.innerHeight;
         const initialSize = Utils.resolution(settings.resolution, guessedAspectRatio);
         this._mediaSize = () => initialSize;
@@ -839,17 +840,13 @@ export class Viewport extends ViewportEventTarget
         this._style = settings.style;
 
         this._containers = new ViewportContainers(settings.container);
-        this._hud = new HUD(this._subContainer, settings.hudContainer);
+        this._hud = new HUD(this, this._subContainer, settings.hudContainer);
         this._canvases = new ViewportCanvases(this._subContainer, initialSize, settings.canvas);
 
         this._resizer = new ViewportResizer(this);
         this._resizer.setStrategyByName(this._style);
 
         this._fullscreen = new ViewportFullscreenHelper(this);
-        this._fullscreenButton = null;
-
-        if(settings.fullscreenUI && this.fullscreenAvailable)
-            this._fullscreenButton = new FullscreenButton(this);
     }
 
     /**
@@ -1054,9 +1051,10 @@ export class Viewport extends ViewportEventTarget
      * Initialize the viewport (when the session starts)
      * @param getMediaSize
      * @param sessionMode
+     * @param wantStatsPanel
      * @internal
      */
-    _init(getMediaSize: ViewportSizeGetter, sessionMode: SessionMode): void
+    _init(getMediaSize: ViewportSizeGetter, sessionMode: SessionMode, wantStatsPanel: boolean): void
     {
         // validate if the viewport style matches the session mode
         if(sessionMode == 'immersive') {
@@ -1079,11 +1077,13 @@ export class Viewport extends ViewportEventTarget
 
         // initialize the components
         this._containers.init();
-        this._hud._init(HUD_ZINDEX);
         this._canvases.init();
         this._resizer.init();
         this._fullscreen.init();
-        this._fullscreenButton?.init();
+
+        // initialize the HUD
+        const wantFullscreenButton = this.fullscreenAvailable && this._settings.fullscreenUI;
+        this._hud._init(HUD_ZINDEX, wantStatsPanel, wantFullscreenButton);
     }
 
     /**
@@ -1092,11 +1092,10 @@ export class Viewport extends ViewportEventTarget
      */
     _release(): void
     {
-        this._fullscreenButton?.release();
+        this._hud._release();
         this._fullscreen.release();
         this._resizer.release();
         this._canvases.release();
-        this._hud._release();
         this._containers.release();
     }
 }

src/ui/fullscreen-button.ts

@@ -65,10 +65,13 @@ export class FullscreenButton
 
     /**
      * Initialize
+     * @param parent parent node
+     * @param isVisible
      */
-    init(): void
+    init(parent: Node, isVisible: boolean): void
     {
-        this._viewport.hud.container.appendChild(this._button);
+        parent.appendChild(this._button);
+        this._button.hidden = !isVisible;
         this._viewport.addEventListener('fullscreenchange', this._boundEventHandler);
     }
 
@@ -95,6 +98,7 @@ export class FullscreenButton
         button.style.height = BUTTON_SIZE + 'px';
 
         button.style.opacity = '0.5';
+        button.style.zIndex = '1000000';
         button.style.cursor = 'pointer';
         button.style.outline = 'none';
         (button.style as any)['-webkit-tap-highlight-color'] = 'transparent';

src/ui/stats-panel.ts

@@ -49,9 +49,6 @@ const BUTTON_ICONS = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYA
  */
 export class StatsPanel
 {
-    /** The viewport associated to this panel */
-    private readonly _viewport: Viewport;
-
     /** A container for the panel */
     private readonly _container: HTMLDivElement;
 
@@ -63,15 +60,22 @@ export class StatsPanel
 
     /**
      * Constructor
-     * @param viewport Viewport
      */
-    constructor(viewport: Viewport)
+    constructor()
     {
-        this._viewport = viewport;
+        this._container = this._createContainer();
         this._lastUpdate = 0;
+    }
 
-        this._container = this._createContainer();
-        viewport.hud.container.appendChild(this._container);
+    /**
+     * Initialize the panel
+     * @param parent parent node
+     * @param isVisible
+     */
+    init(parent: Node, isVisible: boolean): void
+    {
+        parent.appendChild(this._container);
+        this._container.hidden = !isVisible;
     }
 
     /**
@@ -100,22 +104,6 @@ export class StatsPanel
     }
 
     /**
-     * Visibility of the panel
-     */
-    get visible(): boolean
-    {
-        return !this._container.hidden;
-    }
-
-    /**
-     * Visibility of the panel
-     */
-    set visible(visible: boolean)
-    {
-        this._container.hidden = !visible;
-    }
-
-    /**
      * Update the contents of the panel
      * @param sources the sources of media linked to the session
      * @param trackers the trackers attached to the session