ifcviewer-web: stop the log overlay from covering + blocking the canvas

The status overlay was position:fixed top/left/right with max-height
80vh and pointer-events:auto — a near-fullscreen div that both hid the
model and swallowed mouse events, so orbit drags over most of the canvas
did nothing. Move it to a small bottom-left box, set pointer-events:none
so it never intercepts navigation, and collapse it to a few dimmed lines
once the app goes live (errors re-expand it). It still auto-scrolls to
the newest line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dion Moult
2026-06-29 11:33:14 +10:00
parent e3722cf243
commit 2237b4acdd
+14 -3
View File
@@ -8,12 +8,19 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#viewer-canvas { display: block; width: 100vw; height: 100vh; outline: none;
background: #1a1d24; }
#status { position: fixed; top: 8px; left: 12px; right: 12px;
max-height: 80vh; overflow-y: auto; font-size: 11px;
/* Log overlay sits bottom-left and never eats pointer events (so it
can't block orbit drags over the canvas). It auto-scrolls to the
newest line. Capped small; collapses further once the app is live. */
#status { position: fixed; bottom: 8px; left: 12px;
max-width: min(60vw, 680px); max-height: 28vh; overflow-y: auto;
font-size: 11px;
font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
background: rgba(20,22,28,.78); padding: 6px 10px; border-radius: 4px;
white-space: pre-wrap; pointer-events: auto; }
white-space: pre-wrap; pointer-events: none; }
#status.ready { max-height: 4.5em; opacity: .5; }
#status.error { background: rgba(120,30,30,.85); color: #fff; }
/* Errors re-expand and re-opaque even after the ready-collapse. */
#status.ready.error { max-height: 28vh; opacity: 1; }
#open-btn { position: fixed; top: 8px; right: 12px; z-index: 10;
background: #2b6cb0; color: #fff; border: none; padding: 6px 12px;
border-radius: 4px; font-size: 12px; cursor: pointer; }
@@ -63,8 +70,12 @@
// clean JS top-level, NOT nested inside Dawn-web's Promise.then
// chain — which is the configuration that stalls device-callback
// delivery (verified during web bring-up).
var collapsedOnce = false;
function shellTick() {
if (Module._app_ptr && Module._raf_tick_c) {
// First time the app goes live, collapse the log overlay so it
// stops covering the viewport.
if (!collapsedOnce) { statusEl.classList.add('ready'); collapsedOnce = true; }
Module._raf_tick_c(Module._app_ptr);
}
requestAnimationFrame(shellTick);