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 {
pointer-events: auto;
pointer-events: none; /* Let clicks pass through the empty space by default */
font-family: sans-serif;
background: rgba(20, 20, 20, 0.85);
background: transparent;
padding: 12px;
border-radius: 8px;
display: flex;
@@ -67,9 +67,16 @@ mc-diorama canvas {
gap: 12px;
color: white;
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);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
pointer-events: auto; /* Catch clicks on the panel background */
}
.scrubber-row {
@@ -177,7 +184,7 @@ mc-diorama canvas {
.spacetime-indicator {
position: absolute;
left: 33px;
right: 33px;
bottom: 29px;
display: flex;
gap: 12px;

23
src/controller.js
View File

@@ -52,7 +52,7 @@ export class SpacetimeController {
// --- Feature Indicator (Bottom Left) ---
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.zoom) activeFeatures.push('z');
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.overlay.appendChild(this.indicator);
// --- Top: Reset Button (Only if spatial tools are enabled) ---
// --- Top: Reset Button ---
if (this.hasSpatial) {
const topWrapper = document.createElement('div');
topWrapper.className = 'reset-wrapper';
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.addEventListener('click', () => {
@@ -82,11 +82,13 @@ export class SpacetimeController {
// --- Bottom: Timeline Controls ---
if (this.opts.timeline) {
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) {
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 = `
<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>
@@ -105,11 +107,12 @@ export class SpacetimeController {
this.tickRow = document.createElement('div');
this.tickRow.className = 'scrubber-row';
// Only the play button remains fully visible and clickable
this.tickRow.innerHTML = `
<div class="btn" id="btn-play" title="Play Realtime">R&gt;</div>
<div class="btn" id="btn-loop" title="Toggle Loop">Loop</div>
<div class="btn" id="btn-prev" title="Previous Tick">&lt;&lt;</div>
<div class="track-container" id="track-tick-container">
<div class="btn" id="btn-play" title="Play Realtime" style="pointer-events: auto;">R&gt;</div>
<div class="btn spacetime-hover-reveal" id="btn-loop" title="Toggle Loop">Loop</div>
<div class="btn spacetime-hover-reveal" id="btn-prev" title="Previous Tick">&lt;&lt;</div>
<div class="track-container spacetime-hover-reveal" id="track-tick-container">
<div class="track-inner" id="track-tick-inner">
<div class="track-bg"></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>
</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.overlay.appendChild(this.uiContainer);