diff options
Diffstat (limited to 'tools/timeline_editor/index.html')
| -rw-r--r-- | tools/timeline_editor/index.html | 110 |
1 files changed, 98 insertions, 12 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html index db71beb..ccd2750 100644 --- a/tools/timeline_editor/index.html +++ b/tools/timeline_editor/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Timeline Editor - demo.seq</title> + <title>Timeline Editor - timeline.seq</title> <style> * { margin: 0; @@ -132,10 +132,13 @@ } .time-markers { - position: relative; + position: sticky; + top: 0; height: 30px; margin-bottom: 10px; border-bottom: 1px solid #3c3c3c; + background: #252526; + z-index: 100; } .time-marker { @@ -155,6 +158,17 @@ background: #3c3c3c; } + .time-marker::after { + content: ''; + position: absolute; + left: 0; + top: 30px; + width: 1px; + height: 10000px; + background: rgba(60, 60, 60, 0.2); + pointer-events: none; + } + .sequence { position: absolute; background: #264f78; @@ -190,6 +204,36 @@ } } + .sequence-header { + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 8px; + z-index: 5; + cursor: pointer; + user-select: none; + } + + .sequence-header-name { + font-size: 14px; + font-weight: bold; + color: #ffffff; + } + + .sequence:not(.collapsed) .sequence-header-name { + display: none; + } + + .sequence.collapsed { + overflow: hidden !important; + background: #1a3a4a !important; + } + + .sequence.collapsed .sequence-name { + display: none !important; + } + .sequence-name { position: absolute; top: 50%; @@ -408,15 +452,15 @@ <div class="container"> <header> <h1>📊 Timeline Editor</h1> - <p>Interactive editor for demo.seq files</p> + <p>Interactive editor for timeline.seq files</p> </header> <div class="controls"> <label class="file-label"> - 📂 Load demo.seq + 📂 Load timeline.seq <input type="file" id="fileInput" accept=".seq"> </label> - <button id="saveBtn" disabled>💾 Save demo.seq</button> + <button id="saveBtn" disabled>💾 Save timeline.seq</button> <label class="file-label"> 🎵 Load Audio (WAV) <input type="file" id="audioInput" accept=".wav"> @@ -493,7 +537,7 @@ const pixelsPerSecLabel = document.getElementById('pixelsPerSec'); const stats = document.getElementById('stats'); - // Parser: demo.seq → JavaScript objects + // Parser: timeline.seq → JavaScript objects // Format specification: doc/SEQUENCE.md function parseSeqFile(content) { const sequences = []; @@ -551,7 +595,8 @@ startTime: parseTime(seqMatch[1]), priority: parseInt(seqMatch[2]), effects: [], - name: seqMatch[3] || '' + name: seqMatch[3] || '', + _collapsed: false }; sequences.push(currentSequence); currentPriority = -1; // Reset effect priority for new sequence @@ -587,7 +632,7 @@ return { sequences, bpm }; } - // Serializer: JavaScript objects → demo.seq + // Serializer: JavaScript objects → timeline.seq function serializeSeqFile(sequences) { let output = '# Demo Timeline\n'; output += '# Generated by Timeline Editor\n'; @@ -786,20 +831,53 @@ const seqVisualWidth = seqVisualEnd - seqVisualStart; + // Initialize collapsed state if undefined + if (seq._collapsed === undefined) { + seq._collapsed = false; + } + // Calculate sequence height based on number of effects (stacked vertically) const numEffects = seq.effects.length; const effectSpacing = 30; - const seqHeight = Math.max(70, 20 + numEffects * effectSpacing + 5); + const fullHeight = Math.max(70, 20 + numEffects * effectSpacing + 5); + const seqHeight = seq._collapsed ? 35 : fullHeight; seqDiv.style.left = `${seqVisualStart * pixelsPerSecond}px`; seqDiv.style.top = `${cumulativeY}px`; seqDiv.style.width = `${seqVisualWidth * pixelsPerSecond}px`; seqDiv.style.height = `${seqHeight}px`; + seqDiv.style.minHeight = `${seqHeight}px`; + seqDiv.style.maxHeight = `${seqHeight}px`; // Store Y position for this sequence (used by effects and scroll) seq._yPosition = cumulativeY; cumulativeY += seqHeight + sequenceGap; + // Create sequence header (double-click to collapse) + const seqHeaderDiv = document.createElement('div'); + seqHeaderDiv.className = 'sequence-header'; + + const headerName = document.createElement('span'); + headerName.className = 'sequence-header-name'; + headerName.textContent = seq.name || `Sequence ${seqIndex + 1}`; + + seqHeaderDiv.appendChild(headerName); + + // Prevent drag on header + seqHeaderDiv.addEventListener('mousedown', (e) => { + e.stopPropagation(); + }); + + // Double-click to toggle collapse + seqHeaderDiv.addEventListener('dblclick', (e) => { + e.stopPropagation(); + e.preventDefault(); + seq._collapsed = !seq._collapsed; + renderTimeline(); + }); + + seqDiv.appendChild(seqHeaderDiv); + // Create sequence name overlay (large, centered, fades on hover) const seqNameDiv = document.createElement('div'); seqNameDiv.className = 'sequence-name'; @@ -807,6 +885,11 @@ seqDiv.appendChild(seqNameDiv); + // Apply collapsed state + if (seq._collapsed) { + seqDiv.classList.add('collapsed'); + } + if (selectedItem && selectedItem.type === 'sequence' && selectedItem.index === seqIndex) { seqDiv.classList.add('selected'); } @@ -827,7 +910,8 @@ timeline.appendChild(seqDiv); - // Render effects within sequence + // Render effects within sequence (skip if collapsed) + if (!seq._collapsed) { seq.effects.forEach((effect, effectIndex) => { const effectDiv = document.createElement('div'); effectDiv.className = 'effect'; @@ -894,6 +978,7 @@ timeline.appendChild(effectDiv); }); + } }); updateStats(); @@ -1172,7 +1257,7 @@ const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; - a.download = currentFile || 'demo.seq'; + a.download = currentFile || 'timeline.seq'; a.click(); URL.revokeObjectURL(url); showMessage('File saved', 'success'); @@ -1194,7 +1279,8 @@ type: 'sequence', startTime: 0, priority: 0, - effects: [] + effects: [], + _collapsed: false }); renderTimeline(); showMessage('New sequence added', 'success'); |