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() {