diff options
Diffstat (limited to 'tools/timeline_editor')
| -rw-r--r-- | tools/timeline_editor/index.html | 34 |
1 files changed, 12 insertions, 22 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html index ffaf74f..94e88f6 100644 --- a/tools/timeline_editor/index.html +++ b/tools/timeline_editor/index.html @@ -114,22 +114,6 @@ border-left: 2px solid #3c3c3c; } - .current-time-indicator { - position: fixed; - left: 80px; - top: 0; - bottom: 0; - width: 2px; - background: linear-gradient(to bottom, - rgba(78, 201, 176, 0) 0%, - rgba(78, 201, 176, 0.6) 10%, - rgba(78, 201, 176, 0.6) 90%, - rgba(78, 201, 176, 0) 100%); - pointer-events: none; - z-index: 100; - opacity: 0.7; - } - .time-markers { position: relative; height: 30px; @@ -405,7 +389,6 @@ <div class="timeline-container"> <div class="time-markers" id="timeMarkers"></div> <div class="timeline" id="timeline"></div> - <div class="current-time-indicator" id="timeIndicator"></div> </div> <button class="panel-collapse-btn" id="panelCollapseBtn">◀ Properties</button> @@ -610,7 +593,10 @@ } } - // Render sequences + // Render sequences (with dynamic Y positioning to prevent overlap) + let cumulativeY = 0; + const sequenceGap = 10; // Gap between sequences + sequences.forEach((seq, seqIndex) => { const seqDiv = document.createElement('div'); seqDiv.className = 'sequence'; @@ -631,14 +617,18 @@ // Calculate sequence height based on number of effects (stacked vertically) const numEffects = seq.effects.length; - const effectSpacing = 30; // Reduced from 40px + const effectSpacing = 30; const seqHeight = Math.max(70, 20 + numEffects * effectSpacing + 5); seqDiv.style.left = `${seqVisualStart * pixelsPerSecond}px`; - seqDiv.style.top = `${seqIndex * 80}px`; + seqDiv.style.top = `${cumulativeY}px`; seqDiv.style.width = `${seqVisualWidth * pixelsPerSecond}px`; seqDiv.style.height = `${seqHeight}px`; + // Store Y position for this sequence (used by effects and scroll) + seq._yPosition = cumulativeY; + cumulativeY += seqHeight + sequenceGap; + // Format time display based on mode (show visual start, not seq.startTime) let seqTimeDisplay; if (showBeats) { @@ -693,7 +683,7 @@ const effectWidth = (effect.endTime - effect.startTime) * pixelsPerSecond; effectDiv.style.left = `${effectStart}px`; - effectDiv.style.top = `${seqIndex * 80 + 20 + effectIndex * 30}px`; + effectDiv.style.top = `${seq._yPosition + 20 + effectIndex * 30}px`; effectDiv.style.width = `${effectWidth}px`; effectDiv.style.height = '26px'; @@ -1004,7 +994,7 @@ } // Smooth vertical scroll to bring target sequence to top of viewport - const targetScrollTop = targetSeqIndex * 80; // 80px per sequence + const targetScrollTop = sequences[targetSeqIndex]?._yPosition || 0; const currentScrollTop = timelineContainer.scrollTop; const scrollDiff = targetScrollTop - currentScrollTop; |