me/wireless-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

persistent play button

Browse Source
This commit is contained in:
David Allemang
2026-07-07 10:44:49 -04:00
parent 668e1bcf69
commit d5d30e9cc0
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components.css
View File

@@ -57,9 +57,9 @@ mc-diorama canvas {
} }
.visualizer-ui { .visualizer-ui {
pointer-events: auto; pointer-events: none; /* Let clicks pass through the empty space by default */
font-family: sans-serif; font-family: sans-serif;
background: rgba(20, 20, 20, 0.85); background: transparent;
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
@@ -67,9 +67,16 @@ mc-diorama canvas {
gap: 12px; gap: 12px;
color: white; color: white;
user-select: none; user-select: none;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.spacetime-container:hover .visualizer-ui {
background: rgba(20, 20, 20, 0.85);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
pointer-events: auto; /* Catch clicks on the panel background */
} }
.scrubber-row { .scrubber-row {
@@ -177,7 +184,7 @@ mc-diorama canvas {
.spacetime-indicator { .spacetime-indicator {
position: absolute; position: absolute;
left: 33px; right: 33px;
bottom: 29px; bottom: 29px;
display: flex; display: flex;
gap: 12px; gap: 12px;

23
src/controller.js
View File

@@ -52,7 +52,7 @@ export class SpacetimeController {
// --- Feature Indicator (Bottom Left) --- // --- Feature Indicator (Bottom Left) ---
const activeFeatures = []; const activeFeatures = [];
if (this.opts.timeline) activeFeatures.push('t'); // 't' is removed; the permanent Play button is now the timeline indicator!
if (this.opts.pan) activeFeatures.push('p'); if (this.opts.pan) activeFeatures.push('p');
if (this.opts.zoom) activeFeatures.push('z'); if (this.opts.zoom) activeFeatures.push('z');
if (this.opts.orbit) activeFeatures.push('o'); if (this.opts.orbit) activeFeatures.push('o');
@@ -62,12 +62,12 @@ export class SpacetimeController {
this.indicator.innerHTML = activeFeatures.map(f => `<span>${f}</span>`).join(''); this.indicator.innerHTML = activeFeatures.map(f => `<span>${f}</span>`).join('');
this.overlay.appendChild(this.indicator); this.overlay.appendChild(this.indicator);
// --- Top: Reset Button (Only if spatial tools are enabled) --- // --- Top: Reset Button ---
if (this.hasSpatial) { if (this.hasSpatial) {
const topWrapper = document.createElement('div'); const topWrapper = document.createElement('div');
topWrapper.className = 'reset-wrapper'; topWrapper.className = 'reset-wrapper';
this.resetBtn = document.createElement('button'); this.resetBtn = document.createElement('button');
this.resetBtn.className = 'reset-btn spacetime-hover-reveal'; this.resetBtn.className = 'reset-btn';
this.resetBtn.textContent = 'Reset View'; this.resetBtn.textContent = 'Reset View';
this.resetBtn.addEventListener('click', () => { this.resetBtn.addEventListener('click', () => {
@@ -82,11 +82,13 @@ export class SpacetimeController {
// --- Bottom: Timeline Controls --- // --- Bottom: Timeline Controls ---
if (this.opts.timeline) { if (this.opts.timeline) {
this.uiContainer = document.createElement('div'); this.uiContainer = document.createElement('div');
this.uiContainer.className = 'visualizer-ui spacetime-hover-reveal'; // Removed spacetime-hover-reveal from the wrapper
this.uiContainer.className = 'visualizer-ui';
if (this.opts.subticks) { if (this.opts.subticks) {
this.subRow = document.createElement('div'); this.subRow = document.createElement('div');
this.subRow.className = 'scrubber-row'; // The entire subtick row hides on idle
this.subRow.className = 'scrubber-row spacetime-hover-reveal';
this.subRow.innerHTML = ` this.subRow.innerHTML = `
<div class="btn" id="btn-play-sub" title="Animate Events">S&gt;</div> <div class="btn" id="btn-play-sub" title="Animate Events">S&gt;</div>
<div class="btn" id="btn-prev-sub" title="Previous Event">&lt;</div> <div class="btn" id="btn-prev-sub" title="Previous Event">&lt;</div>
@@ -105,11 +107,12 @@ export class SpacetimeController {
this.tickRow = document.createElement('div'); this.tickRow = document.createElement('div');
this.tickRow.className = 'scrubber-row'; this.tickRow.className = 'scrubber-row';
// Only the play button remains fully visible and clickable
this.tickRow.innerHTML = ` this.tickRow.innerHTML = `
<div class="btn" id="btn-play" title="Play Realtime">R&gt;</div> <div class="btn" id="btn-play" title="Play Realtime" style="pointer-events: auto;">R&gt;</div>
<div class="btn" id="btn-loop" title="Toggle Loop">Loop</div> <div class="btn spacetime-hover-reveal" id="btn-loop" title="Toggle Loop">Loop</div>
<div class="btn" id="btn-prev" title="Previous Tick">&lt;&lt;</div> <div class="btn spacetime-hover-reveal" id="btn-prev" title="Previous Tick">&lt;&lt;</div>
<div class="track-container" id="track-tick-container"> <div class="track-container spacetime-hover-reveal" id="track-tick-container">
<div class="track-inner" id="track-tick-inner"> <div class="track-inner" id="track-tick-inner">
<div class="track-bg"></div> <div class="track-bg"></div>
<div class="track-fill" id="fill-tick"></div> <div class="track-fill" id="fill-tick"></div>
@@ -117,7 +120,7 @@ export class SpacetimeController {
<div class="track-handle" id="handle-tick"></div> <div class="track-handle" id="handle-tick"></div>
</div> </div>
</div> </div>
<div class="btn" id="btn-next" title="Next Tick">&gt;&gt;</div> <div class="btn spacetime-hover-reveal" id="btn-next" title="Next Tick">&gt;&gt;</div>
`; `;
this.uiContainer.appendChild(this.tickRow); this.uiContainer.appendChild(this.tickRow);
this.overlay.appendChild(this.uiContainer); this.overlay.appendChild(this.uiContainer);