summaryrefslogtreecommitdiff
path: root/tools/timeline_editor/index.html
diff options
context:
space:
mode:
authorskal <pascal.massimino@gmail.com>2026-02-11 23:53:48 +0100
committerskal <pascal.massimino@gmail.com>2026-02-11 23:53:48 +0100
commit01301eb20b18cb99a1a2304d1e88f2de05041595 (patch)
treec68f945d78ab8b2ea655c88b90a263e92fa4591a /tools/timeline_editor/index.html
parent409bbfb08fae03bfb7daa554a799bd8480806799 (diff)
feat: timeline editor improvements - sticky ticks, grid, collapse
- Sticky time markers stay visible when scrolling - Faint vertical grid lines aligned with ticks for better alignment - Collapsible sequences via double-click (35px collapsed state) - Updated all references from demo.seq to timeline.seq - Consolidated and tightened documentation - Fixed _collapsed initialization bug Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Diffstat (limited to 'tools/timeline_editor/index.html')
-rw-r--r--tools/timeline_editor/index.html110
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');
generated by cgit v1.2.3 (git 2.51.0) at 2026-02-12 10:41:43 +0000