Phase 2 Implementation:
- Added TrackHierarchy class to build and manage hierarchical track structure
- Track display with expand/collapse triangles for layers and groups
- Hierarchical indentation for visual hierarchy
- Track selection syncs with stage selection (shapes, objects, layers)
- Vertical scrolling for track area when many tracks present
- Horizontal scrolling in ruler area for timeline navigation
Timeline Integration:
- Set TimelineV2 as default timeline on app load
- Timeline automatically updates when shapes added or grouped
- Trigger timeline redraw in renderLayers() for efficient batching
Selection System:
- Clicking tracks selects corresponding objects/shapes on stage
- Selected tracks highlighted in timeline
- Updates context.selection and context.shapeselection arrays
- Stores oldselection/oldshapeselection for undo support
- Calls updateUI() and updateMenu() to sync UI state
Visual Improvements:
- Use predefined colors from styles.js (no hardcoded colors)
- Alternating track background colors for readability
- Selection highlighting with predefined highlight color
- Type indicators for tracks: [L]ayer, [G]roup, [S]hape
Mouse Interactions:
- Click ruler area to move playhead
- Click track expand/collapse triangles to show/hide children
- Click track name to select object/shape
- Scroll wheel in ruler area for horizontal timeline scroll
- Scroll wheel in track area for vertical track list scroll
- Adjusts hit testing for vertical scroll offset
Skyler Lehmkuhl