diff --git a/assets/js/outline-model-viewer/PointCloudViewer.js b/assets/js/outline-model-viewer/PointCloudViewer.js index 50a9ee8..d231f49 100644 --- a/assets/js/outline-model-viewer/PointCloudViewer.js +++ b/assets/js/outline-model-viewer/PointCloudViewer.js @@ -62,13 +62,13 @@ export class PointCloudViewer extends HTMLElement { dirLight.position.set(5, 5, 10); scene.add(dirLight); - window.addEventListener("resize", onWindowResize, false); + window.addEventListener("resize", this.onWindowResize, false); - function onWindowResize() { + this.onWindowResize = () => { this.camera.aspect = canvas.clientWidth / canvas.clientHeight; this.camera.updateProjectionMatrix(); renderer.setSize(canvas.clientWidth, canvas.clientHeight); - } + }; const timer = new Timer(); const update = () => { diff --git a/assets/js/outline-model-viewer/helpers.js b/assets/js/outline-model-viewer/helpers.js index 333916b..bcabdd2 100644 --- a/assets/js/outline-model-viewer/helpers.js +++ b/assets/js/outline-model-viewer/helpers.js @@ -75,7 +75,7 @@ function componentHTML(component_rect) { return `
- +
@@ -103,8 +103,8 @@ function componentHTML(component_rect) { #fullscreen-btn { position: absolute; - top: 10px; - right: 10px; + top: 0.2em; + right: 0.3em; z-index: 10; font-size: 24px; background: none; @@ -133,6 +133,10 @@ function componentHTML(component_rect) { --string-color: #a2db3c; } + .lil-gui div.title { + margin: 0.5em; + } + .lil-gui button { border: var(--theme-subtle-outline) 1px solid; } @@ -148,6 +152,25 @@ function componentHTML(component_rect) { height: ${height}px; border-radius: inherit; } + + #container.fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background: var(--theme-bg-color); + } + + #container.fullscreen canvas { + height: 100%; + } + + #container.fullscreen .lil-gui.root { + margin-top: 0; + width: 200px; + } `; } @@ -204,6 +227,30 @@ function setupThreeJS(component) { component.gui.add(params, "screenshot").name("Take Screenshot"); component.gui.add(params, "resetCamera").name("Reset Viewport"); + component.full_screen = false; + // clone of original rect + component.original_rect = { + width: component_rect.width, + height: component_rect.height, + }; + + component.toggleFullScreen = () => { + component.full_screen = !component.full_screen; + if (component.full_screen) { + component.container.classList.add("fullscreen"); + } else { + component.container.classList.remove("fullscreen"); + component.canvas.height = component.original_rect.height; + } + component.canvas.removeAttribute("style"); + component.canvas.removeAttribute("width"); + component.canvas.removeAttribute("height"); + component.onWindowResize(); + }; + + const fullScreenButton = component.shadow.querySelector("#fullscreen-btn"); + fullScreenButton.addEventListener("click", component.toggleFullScreen); + return component; } diff --git a/assets/js/outline-model-viewer/index.js b/assets/js/outline-model-viewer/index.js index a4e51d7..ff52502 100644 --- a/assets/js/outline-model-viewer/index.js +++ b/assets/js/outline-model-viewer/index.js @@ -466,7 +466,8 @@ export class OutlineModelViewer extends HTMLElement { // const fullScreenButton = this.shadow.querySelector("#fullscreen-btn"); // fullScreenButton.addEventListener("click", () => toggleFullScreen()); - // window.addEventListener("resize", onWindowResize, false); + + window.addEventListener("resize", onWindowResize, false); // Handle fullscreen change events triggerd through various means function onFullScreenChange() {