Add Fullscreen Mode

index.html

@@ -138,6 +138,15 @@
 
       <ul class="navbar-nav">
 
+        <!-- Fullscreen Button -->
+        <li class="nav-item">
+          <div class="ml-2 mt-1">
+            <button id="spacewalk-fullscreen-button" title="Fullscreen" type="button" class="btn nav-link">
+              Fullscreen
+            </button>
+          </div>
+        </li>
+
         <!-- Spacewalk Files -->
         <li class="nav-item">
 

js/app.js

@@ -199,7 +199,7 @@ const initializationHelper = async container => {
 
     document.querySelector('.navbar').style.display = 'flex'
 
-    renderContainerController = new RenderContainerController(container, sceneManager)
+    renderContainerController = new RenderContainerController(container)
 
     renderLoop()
 

js/renderContainerController.js

@@ -1,31 +1,14 @@
 import { configureRenderContainerDrag } from './renderContainerDrag.js'
-import { traceNavigator } from './app.js'
 
 class RenderContainerController {
 
-    constructor(rootContainer, sceneManager) {
+    constructor(rootContainer) {
 
         this.rootContainer = rootContainer
         this.threejsContainer = rootContainer.querySelector('#spacewalk-threejs-container')
 
         this.setTopLeftPercentages(this.rootContainer, this.threejsContainer)
 
-
-        const config =
-            {
-                // handles: "w, sw, s, se, e",
-                handles: "se",
-                autoHide: true,
-                aspectRatio: true,
-                helper: "spacewalk-threejs-container-resizable-helper",
-                stop: () => {
-                    sceneManager.resizeContainer()
-                    traceNavigator.resize(sceneManager.container)
-                }
-            };
-
-        $(sceneManager.container).resizable(config)
-
         const navbar = document.querySelector('.navbar')
         const topConstraint = navbar.getBoundingClientRect().height
 

js/sceneManager.js

@@ -57,6 +57,54 @@ class SceneManager {
         this.cameraLightingRig = cameraLightingRig;
         this.cameraLightingRig.addToScene(this.scene);
 
+        const resizeableContainer = document.getElementById('spacewalk-threejs-trace-navigator-container')
+
+        this.resizeObserver = new ResizeObserver(entries => {
+            const { width, height } = container.getBoundingClientRect()
+            this.renderer.setSize(width, height)
+            this.cameraLightingRig.object.aspect = width / height
+            this.cameraLightingRig.object.updateProjectionMatrix()
+            this.renderer.render(this.scene, this.cameraLightingRig.object);
+        });
+
+        this.resizeObserver.observe(resizeableContainer)
+
+        const onWindowResize = () => {
+            const { width, height } = container.getBoundingClientRect()
+            this.renderer.setSize(width, height)
+            this.cameraLightingRig.object.aspect = width / height
+            this.cameraLightingRig.object.updateProjectionMatrix()
+            this.renderer.render(this.scene, this.cameraLightingRig.object);
+        }
+
+        window.addEventListener('resize', onWindowResize);
+
+        document.getElementById('spacewalk-fullscreen-button').addEventListener('click', () => {
+            if (!document.fullscreenElement) {
+                resizeableContainer.requestFullscreen().then(() => {
+                    document.body.classList.add('fullscreen');
+                }).catch(err => {
+                    alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+                });
+            } else {
+                document.exitFullscreen().then(() => {
+                    document.body.classList.remove('fullscreen');
+                }).catch(err => {
+                    alert(`Error attempting to exit full-screen mode: ${err.message} (${err.name})`);
+                });
+            }
+        });
+
+        document.addEventListener('fullscreenchange', () => {
+            if (!document.fullscreenElement) {
+                document.body.classList.remove('fullscreen');
+            }
+        });
+
+
+
+
+
         SpacewalkEventBus.globalBus.subscribe('RenderStyleDidChange', this);
         SpacewalkEventBus.globalBus.subscribe('DidSelectTrace', this);