tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix height of outline viewer

Browse Source
This commit is contained in:
Tom 2023-11-29 12:12:32 +00:00
parent 0c701a680b
commit d73df3b24a
2 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_sass/base.scss
View File

@ -123,14 +123,15 @@ figure > img, figure > svg, figure > canvas {
// For fallback images inside custom outline-model-viewer elements // For fallback images inside custom outline-model-viewer elements
.outline-model-poster { .outline-model-poster {
width: 100%; width: 100%;
height: 300px; height: 100%;
} }
outline-model-viewer { outline-model-viewer {
width: 100%;
min-height: 300px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
border: var(--theme-subtle-outline) 1px solid; border: var(--theme-subtle-outline) 1px solid;
border-radius: 10px; border-radius: 10px;
margin-top: 1em; margin-top: 1em;

34
assets/js/outline-model-viewer/index.js
View File

@ -84,14 +84,16 @@ class OutlineModelViewer extends HTMLElement {
constructor() { constructor() {
super(); super();
let component_rect = this.getBoundingClientRect();
console.log("component_rect", component_rect);
this.shadow = this.attachShadow({ mode: "open" }); this.shadow = this.attachShadow({ mode: "open" });
this.render(); this.render(component_rect.height);
const model_path = this.getAttribute("model") || "/assets/projects/bike_lights/models/bigger.glb"; const model_path = this.getAttribute("model") || "/assets/projects/bike_lights/models/bigger.glb";
const spin = (this.getAttribute("spin") || 'true') === 'true' const spin = (this.getAttribute("spin") || 'true') === 'true'
const container = this.shadow.querySelector("div#container"); const container = this.shadow.querySelector("div#container");
console.log(container);
const canvas = this.shadow.querySelector("canvas"); const canvas = this.shadow.querySelector("canvas");
let canvas_rect = canvas.getBoundingClientRect(); let canvas_rect = canvas.getBoundingClientRect();
@ -231,7 +233,7 @@ class OutlineModelViewer extends HTMLElement {
} }
render() { render(height) {
this.shadow.innerHTML = ` this.shadow.innerHTML = `
<div id="container"> <div id="container">
<canvas class = "object-viewer"></canvas> <canvas class = "object-viewer"></canvas>
@ -240,17 +242,21 @@ class OutlineModelViewer extends HTMLElement {
<style> <style>
#container { #container {
position: relative;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: inherit;
} }
.lil-gui .title {height: 2em;}
.lil-gui.root { .lil-gui.root {
margin-top: calc(${height}px - 2em);
width: 100%; width: 100%;
--background-color: var(--theme-bg-color); z-index: 1;
--background-color: none;
--text-color: var(--theme-text-color); --text-color: var(--theme-text-color);
--title-background-color: var(--theme-bg-color); --title-background-color: none;
--title-text-color: var(--theme-text-color); --title-text-color: var(--theme-text-color);
--widget-color: var(--theme-subtle-outline); --widget-color: var(--theme-subtle-outline);
--hover-color: lightgrey; --hover-color: lightgrey;
@ -263,21 +269,11 @@ class OutlineModelViewer extends HTMLElement {
border: var(--theme-subtle-outline) 1px solid; border: var(--theme-subtle-outline) 1px solid;
} }
summary#settings {
border: none;
background: var(--theme-background);
display: flex;
justify-content: center;
align-items: center;
height: 1em;
padding-bottom: 0.5em;
cursor: context-menu;
}
canvas { canvas {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: ${height}px;
border-radius: 0.25rem; border-radius: inherit;
} }
</style> </style>
`; `;