| Age | Commit message (Collapse) | Author |
|---|
|
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
|
|
Feature #1: Re-order Sequences by Time
- Added "🔄 Re-order by Time" button to controls
- Sorts sequences by startTime (ascending order)
- Preserves focus on currently active sequence
- Algorithm:
1. Store reference to current active sequence (lastActiveSeqIndex)
2. Sort sequences array: sequences.sort((a, b) => a.startTime - b.startTime)
3. Re-render timeline (recalculates _yPosition for all)
4. Find new index of previously active sequence
5. Scroll to its new Y position
6. Update lastActiveSeqIndex to new index
- Button enabled when file is loaded
- Shows success message after re-ordering
- Useful when sequences are added/moved out of order
Use Case:
Before: Seq2(10s), Seq0(0s), Seq1(5s) ← Out of order
After: Seq0(0s), Seq1(5s), Seq2(10s) ← Chronological order
Feature #2: 10% Viewport Slack for Visual Comfort
- Added headroom when calculating current time during scroll
- Previously: currentTime = scrollLeft / pixelsPerSecond
- Now: currentTime = (scrollLeft / pixelsPerSecond) + slack
- Slack = 10% of viewport width in time units
Benefits:
- Sequences don't get targeted when right at left edge
- More comfortable visual positioning
- Sequences become active when ~10% into viewport
- Prevents "edge hugging" during diagonal scroll
Example:
Viewport width: 1000px, pixelsPerSecond: 100
Slack = (1000 / 100) * 0.1 = 1.0 second
scrollLeft = 500px → currentTime = 5.0s + 1.0s = 6.0s
Sequence at 6.0s becomes active (not 5.0s)
Technical Details:
- viewportWidth = timelineContainer.clientWidth
- slack = (viewportWidth / pixelsPerSecond) * 0.1
- Applied before finding target sequence
- Works with any zoom level (pixelsPerSecond changes)
- Dynamic calculation on every wheel event
|
|
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
|
|
Visual Enhancements:
1. Current Time Indicator (Vertical Line)
- Faint vertical line shows current scroll position
- Fixed position at left: 80px with gradient fade
- Color: rgba(78, 201, 176, 0.6) (teal/cyan)
- Gradient: fades at top/bottom for smooth appearance
- pointer-events: none (doesn't block interaction)
- z-index: 100 (appears above timeline elements)
- Guides the eye during mouse wheel navigation
2. Sequence Flash Effect
- Brief highlight when active sequence changes
- 0.6s animation: bright glow → normal state
- Keyframe animation sequenceFlash:
* Start: box-shadow 20px glow, teal border
* End: normal 10px glow, blue border
- Triggers on lastActiveSeqIndex change
- Auto-removes class after 600ms
- Helps user track which sequence is now active
3. Taller Timeline View
- timeline-container: height = calc(100vh - 280px)
- min-height: 500px (prevents over-shrinking)
- Uses full vertical real estate
- Much less squished appearance
- Better utilization of screen space
- Accommodates more sequences in viewport
Technical Implementation:
- Added lastActiveSeqIndex global state variable
- Wheel handler detects sequence index changes
- querySelector to find sequence div and add flash class
- setTimeout removes flash class after animation
- Fixed positioning for time indicator
- Responsive height calculation for container
User Experience:
- Visual feedback during diagonal scrolling
- Clear indication of current time position
- Smooth flash draws attention to sequence changes
- More comfortable editing with taller view
- Better spatial awareness of timeline position
|
|
Enhancement: Smart Vertical Scrolling
- Mouse wheel now scrolls diagonally (horizontal + vertical)
- Automatically brings relevant sequence to top-left of viewport
- Follows the time-ordered cascade of sequences
Algorithm:
1. Scroll horizontally as before (timeline.scrollLeft += deltaY)
2. Calculate current time position (left edge of viewport)
currentTime = scrollLeft / pixelsPerSecond
3. Find closest sequence at that time:
- Last sequence that starts before or at currentTime
- Sequences sorted by startTime
4. Smooth scroll vertically to target sequence:
- targetScrollTop = seqIndex * 80px
- Smooth transition: scrollTop += diff * 0.3 (not instant jump)
User Experience:
- Scroll forward in time → later sequences move to top
- Scroll backward in time → earlier sequences move to top
- Creates natural "diagonal" navigation along timeline
- Top-left corner always shows the most relevant sequence
Example timeline:
Seq 0 (0s) ──────────────
Seq 1 (5s) ──────────────
Seq 2 (10s) ──────────────
Scroll to 7s → Seq 1 moves to top (it's active at that time)
Scroll to 12s → Seq 2 moves to top (it's active at that time)
This provides intuitive navigation through time-ordered sequences.
|
|
responsive layout
Bug Fix #1: Dynamic Sequence Start Time
- Sequences now dynamically adjust start position based on earliest effect
- Sequence box shrinks from left when effects move later in time
- Calculate visual bounds: min(effect.startTime) to max(effect.endTime)
- Sequence position: seq.startTime + minEffectStart
- Sequence width: maxEffectEnd - minEffectStart
- Time display shows actual visual start time, not fixed seq.startTime
- Eliminates empty space at sequence start when effects are delayed
Bug Fix #2: Mouse Wheel Horizontal Scroll
- Mouse wheel now scrolls timeline horizontally (natural navigation)
- Prevents default vertical scroll behavior on timeline container
- More intuitive than using horizontal scrollbar
- Smooth scrolling with deltaY mapped to scrollLeft
Bug Fix #3: Responsive Layout
- Container now uses 100% width (was: fixed 1400px max)
- Added window resize event listener to re-render timeline
- Body uses box-sizing: border-box for proper padding
- Timeline recalculates on browser window resize
- Works correctly when going fullscreen
Technical details:
- seqVisualStart = seq.startTime + Math.min(effect.startTime)
- seqVisualEnd = seq.startTime + Math.max(effect.endTime)
- Wheel event uses { passive: false } to allow preventDefault()
- Window resize debouncing not needed (renderTimeline is fast)
|
|
UX improvement:
- Sequence name now displays as large centered overlay (24px bold)
- Strong text shadow for readability over effect stack
- Fades out smoothly when mouse enters sequence box (0.3s transition)
- Fades back in when mouse leaves sequence box
- Small info text (time, priority) stays in top-left corner
Visual hierarchy:
- Default: Large sequence name visible, dominates the view
- On hover: Name fades away, effects become clearly visible
- Smooth 300ms opacity transition for polished feel
CSS implementation:
- .sequence-name: Centered absolutely, z-index 10, pointer-events none
- .sequence.hovered .sequence-name: opacity 0
- .sequence-info: Small text in corner, always visible
- Multi-layer text shadow for high contrast
JavaScript:
- mouseenter: Add 'hovered' class to trigger fade out
- mouseleave: Remove 'hovered' class to restore name
- Supports custom sequence names from demo.seq file
|
|
UI improvements:
- Properties panel now floats in top-right corner (fixed position)
- Added collapse/expand button for properties panel
- Panel slides out of view when collapsed, button appears to restore
- Effects now show only class name, full details on hover (tooltip)
- Tooltip shows: ClassName, Time, Priority, Args
- Effect bars reduced from 35px to 26px height (cleaner appearance)
- Effect spacing reduced from 40px to 30px (more compact stacking)
- Effects use flexbox centering for better text alignment
- Added hover highlight for better visual feedback
CSS changes:
- Properties panel: position fixed, z-index 1000, slide animation
- Collapse button appears at top-right when panel hidden
- Effects: single-line display with ellipsis overflow
- Improved padding and font sizing for compact effect bars
The properties panel is now always accessible without scrolling to the
bottom of the page, and effect bars are much cleaner while still showing
all information on hover.
|
|
Bugs fixed:
- Effects within sequences now stack vertically instead of overlapping
- Sequence height now dynamically adjusts based on effect count
- Effects positioned with proper 40px vertical spacing
Features added:
- Seconds/Beats toggle checkbox with BPM display
- Time markers show beats (0b, 1b, etc.) when in beat mode
- Snap-to-beat when dragging in beat mode
- Effect/sequence time labels show beats when enabled
- BPM tracking from loaded demo.seq file
The effect stacking bug was caused by all effects using the same vertical
position formula (seqIndex * 80 + 25). Fixed by adding effectIndex * 40
to stack effects properly. Sequences now grow in height to accommodate
multiple stacked effects.
|
|
Documentation improvements:
1. Added reference to doc/SEQUENCE.md in README
2. Added comment in parser pointing to format spec
3. Updated README with complete format examples including:
- Priority modifiers (+, =, -)
- Time notation (beats vs seconds)
- Optional sequence names
- BPM declaration
New feature task (Phase 1):
Task 1.2b: Priority Editing UI (HIGH PRIORITY, 6-8h)
- Edit sequence priority (0-9 for scene, 10+ for post-processing)
- Toggle effect priority modifiers (+/=/-)
- Visual priority indicators and z-order visualization
- Computed priority display
- Priority conflict warnings
Implementation details:
- Radio buttons for priority modifiers
- Up/down buttons for sequence priority
- Color-coded priority levels
- Priority badges on timeline items
- Automatic priority recalculation
Rationale:
Priority control is essential for proper render order and z-stacking.
Currently, priorities are shown but not easily editable. This task
makes priority a first-class editable property.
Updated effort estimates:
- Phase 1: 28-36 hours (was 22-28)
- Total: ~117-161 hours for full feature set
|
|
Fixed critical parsing bugs that prevented loading real demo.seq files.
Issues fixed:
1. Beat notation support: Parse '0b', '4b' as beats and convert to seconds
- Added BPM parsing from '# BPM 120' comments
- Helper function: parseTime() converts beats to seconds using BPM
2. Priority modifiers: Handle '+', '=', '-' modifiers correctly
- '+' increments priority
- '=' keeps same priority
- '-' decrements priority (for background effects)
- Store both absolute priority and modifier for round-trip
3. Inline comments: Strip comments from end of lines with '#'
- Effect lines like 'EFFECT + FlashEffect 0.0 1.0 # comment' now parse
4. Sequence names: Parse optional sequence names in quotes
- Format: SEQUENCE <time> <priority> "name" [end]
5. Updated serializer: Output correct format with modifiers
- Generate 'EFFECT + ClassName ...' instead of 'EFFECT ClassName ... priority'
- Preserve BPM comment in output
- Preserve sequence names
Parser now correctly handles:
- SEQUENCE 0b 0 → Start at beat 0, priority 0
- SEQUENCE 4b 0 → Start at beat 4 (2 seconds @ 120 BPM)
- EFFECT - FlashCubeEffect .2 3 → Background effect (priority -1)
- EFFECT + FlashEffect 0.0 1. → Normal effect (priority 0)
- EFFECT = GaussianBlur 0 8 → Same priority as previous
Testing: Load assets/demo.seq should now work correctly.
|
|
Created detailed roadmap for timeline editor future development.
Phase 1: Core Editing Features (HIGH PRIORITY)
- Snap-to-beat: Musical timing with BPM-based grid (4-6h)
- Create new effects: Modal dialog for adding effects (6-8h)
- Overlap detection: Visual warnings for conflicts (8-10h)
Total: 22-28 hours
Phase 2: Productivity Enhancements (MEDIUM PRIORITY)
- Undo/redo system with command pattern (10-12h)
- Multi-select & batch operations (12-15h)
- Copy/paste & duplication (6-8h)
- Keyboard shortcuts & navigation (4-6h)
Total: 38-51 hours
Phase 3: Advanced Features (LOW PRIORITY)
- Timeline playback indicator (4-6h)
- Templates & presets (8-10h)
- Search & filter (6-8h)
- Timeline comparison view (15-20h)
- Export formats (JSON, CSV, MD) (6-8h)
- Auto-save & local storage (4-6h)
Total: 51-74 hours
Implementation Details:
- Technical approach for each feature
- UI mockups and code snippets
- Effort estimates and dependencies
- Success metrics and design principles
Priority recommendation:
1. Snap-to-beat (makes musical timing easy)
2. Create effects (essential for productivity)
3. Overlap detection (prevents rendering bugs)
Total effort for full feature set: ~110-150 hours
The roadmap provides clear guidance for incremental development
while keeping the tool simple and self-contained.
|
|
Created a functional web-based timeline editor for demo.seq files.
Features implemented:
✅ Load/save demo.seq files via browser file API
✅ Visual Gantt-style timeline with time markers
✅ Drag & drop sequences and effects along timeline
✅ Properties panel for editing timing, priorities, arguments
✅ Zoom controls (10% - 200%)
✅ Add/delete sequences and effects
✅ Real-time statistics (sequence count, effect count, duration)
✅ Dark theme matching VSCode aesthetic
✅ Color-coded items (sequences blue, effects gray)
✅ Selection highlighting
Technical details:
- Pure HTML/CSS/JavaScript (no dependencies, no build step)
- ~600 lines in single self-contained HTML file
- Works offline, no backend needed
- Parser converts demo.seq text → JavaScript objects
- Serializer converts JavaScript objects → demo.seq text
Usage:
1. Open tools/timeline_editor/index.html in browser
2. Load assets/demo.seq
3. Drag items, edit properties
4. Save modified file
5. Copy to assets/demo.seq and rebuild
Limitations (acceptable for v1):
- No undo/redo yet
- No effect creation UI (must use properties panel)
- No overlap detection warnings
- No snap-to-grid
- No preview rendering (intentional - editor only)
This provides a quick way to experiment with demo timing without
recompiling, and better visualization of sequence/effect relationships.
Size: ~25KB (HTML + embedded JS/CSS)
Status: Task #57 basic implementation complete
|
