From 58ad5c16d6f1b2afc51ec5b36ed08643643e5fd0 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Thu, 5 Feb 2026 21:48:38 +0100
Subject: fix(timeline-editor): Remove time indicator and fix sequence overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug Fix #1: Remove Current Time Indicator
- Removed vertical time indicator line (user feedback: didn't look good)
- Deleted .current-time-indicator CSS class
- Removed HTML element from timeline-container
- Cleaner visual appearance without the distracting line

Bug Fix #2: Dynamic Y Positioning to Prevent Overlap
- Sequences now use cumulative Y positioning instead of fixed spacing
- Previously: seqIndex * 80px (fixed spacing caused overlaps)
- Now: Accumulate Y position based on actual sequence heights

Algorithm:
1. Track cumulativeY starting at 0
2. Calculate each sequence height dynamically:
   height = max(70, 20 + numEffects * 30 + 5)
3. Position sequence at cumulativeY
4. Store Y position in seq._yPosition
5. Increment: cumulativeY += height + 10px gap
6. Effects use seq._yPosition + offset
7. Scroll handler uses seq._yPosition for target

Example (3 sequences with different effect counts):
  Before (overlap):        After (no overlap):
  Seq0: y=0, h=70         Seq0: y=0, h=70
  Seq1: y=80, h=120 ✗     Seq1: y=80, h=120
  Seq2: y=160 (hidden)    Seq2: y=210, h=70 ✓

Technical Changes:
- Added cumulativeY tracking variable
- Added sequenceGap = 10px constant
- Sequences store _yPosition property
- Effects use seq._yPosition instead of seqIndex * 80
- Wheel scroll uses sequences[i]._yPosition
- Properly handles varying sequence heights

Result: Sequences never overlap, regardless of effect count
---
 tools/timeline_editor/index.html | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

(limited to 'tools/timeline_editor')

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;
 
-- 
cgit v1.2.3