From 58c21d8ea2b9dd19fdf2e5579e58ebbef7a401ff Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Thu, 5 Feb 2026 21:59:50 +0100
Subject: fix(timeline-editor): Fix effect dragging offset and property panel
 updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug Fix #1: Effect Drag Offset Calculation
- Fixed erratic jumping when clicking/dragging effects
- Problem: dragOffset calculated from element edge, not timeline origin
- Old calculation:
  dragOffset.x = e.clientX - rect.left (element-relative)
- New calculation:
  dragOffset.x = e.clientX - timelineRect.left - currentLeft (timeline-relative)
- Now correctly accounts for element's current position on timeline
- Dragging feels natural, no unexpected jumps

Bug Fix #2: Effect Positioning Relative to Sequence
- Effects now correctly positioned relative to parent sequence
- Problem: Effects were using absolute timeline positions
- Old behavior: effect.startTime = newTime (absolute)
- New behavior: effect.startTime = newTime - seq.startTime (relative)
- Algorithm:
  1. Calculate newTime from mouse position (absolute timeline)
  2. Convert to relative: relativeTime = newTime - seq.startTime
  3. Store relative time in effect
  4. Rendering uses: seq.startTime + effect.startTime (absolute)
- Sequence bounds now update correctly after effect moves

Bug Fix #3: Property Panel Updates Trigger Re-render
- Property changes now properly update timeline visual
- Added updateProperties() call after renderTimeline()
- Ensures property panel shows calculated values
- Cascade of events after property change:
  a) Update data model (sequence/effect properties)
  b) renderTimeline() → recalculates sequence bounds
  c) updateProperties() → refreshes property panel display
  d) showMessage() → user feedback
- Sequence start/end bounds recalculate correctly
- Visual updates immediately reflect property changes

Technical Details:
- startDrag: dragOffset from timeline origin, not element
- onDrag: Convert absolute position to sequence-relative time
- applyProperties: Call both renderTimeline() and updateProperties()
- Sequence visual bounds: calculated dynamically during render
  * seqVisualStart = seq.startTime + min(effect.startTime)
  * seqVisualEnd = seq.startTime + max(effect.endTime)

Result: All three operations (drag, property edit, bounds calc) work correctly
---
 tools/timeline_editor/index.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index d450522..fb813a5 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -730,9 +730,11 @@
             e.preventDefault();
             isDragging = true;
 
-            const rect = e.target.getBoundingClientRect();
-            dragOffset.x = e.clientX - rect.left;
-            dragOffset.y = e.clientY - rect.top;
+            // Calculate offset from timeline origin (not from element edge)
+            const timelineRect = timeline.getBoundingClientRect();
+            const currentLeft = parseFloat(e.target.style.left) || 0;
+            dragOffset.x = e.clientX - timelineRect.left - currentLeft;
+            dragOffset.y = e.clientY - e.target.getBoundingClientRect().top;
 
             selectedItem = { type, index: seqIndex, seqIndex, effectIndex };
             renderTimeline();
@@ -759,9 +761,14 @@
             if (selectedItem.type === 'sequence') {
                 sequences[selectedItem.index].startTime = Math.round(newTime * 100) / 100;
             } else if (selectedItem.type === 'effect') {
-                const effect = sequences[selectedItem.seqIndex].effects[selectedItem.effectIndex];
+                // Effects have times relative to their parent sequence
+                const seq = sequences[selectedItem.seqIndex];
+                const effect = seq.effects[selectedItem.effectIndex];
                 const duration = effect.endTime - effect.startTime;
-                effect.startTime = Math.round(newTime * 100) / 100;
+
+                // Convert absolute timeline position to relative time within sequence
+                const relativeTime = newTime - seq.startTime;
+                effect.startTime = Math.round(relativeTime * 100) / 100;
                 effect.endTime = effect.startTime + duration;
             }
 
@@ -849,7 +856,12 @@
                 effect.args = document.getElementById('propArgs').value;
             }
 
+            // Re-render timeline (recalculates sequence bounds)
             renderTimeline();
+
+            // Update properties panel to reflect any calculated changes
+            updateProperties();
+
             showMessage('Properties updated', 'success');
         }
 
-- 
cgit v1.2.3