Feature/enhanced view modes (Day | Week | Month | Year)

[jasonnator]

Summary

This PR introduces enhanced view mode functionality with always-visible view mode buttons, improved navigation
features, and fixes for several long-standing UX issues.

Key Features:

• ✨ Always-visible view mode buttons in the header for instant switching between Day/Week/Month/Year views
• 🎯 Auto-scroll to today when changing view modes (configurable)
• 🖱️ Click-and-drag to pan the timeline horizontally
• 📌 Persistent controls outside the scrollable area
• 🔧 Multiple bug fixes for scroll behavior, text centering, and layout issues

Related Issues

This PR addresses several community-reported issues:

• Fixes Disable Auto Scrolling to the Left when Gantt Instance Updates or View Mode Changes #482 - Prevents unwanted auto-scrolling when changing view modes (scroll position is now preserved)
• Addresses Can't seem to find a way to enable view mode #150 - Provides built-in UI for view mode selection (no need for custom button implementations)
• Improves Frappe gantt chart display is not correct and change view mode is not working #445 - Ensures view mode changes work reliably
• Enhances When I change "mode view"... loss all event listeners set up on gantt chart #58 - Controls persist outside the grid, preventing event listener loss
• Related to Change mode view ... always in days in popup ? #54 - Better visual feedback for current view mode

What's Changed

New Features

1. View Mode Buttons

   • Always visible in header for better discoverability
   • Clean, modern segmented control design
   • Active state clearly indicates current view
   • Configurable via view_mode_buttons and view_mode_buttons_list options

2. Drag-to-Pan Navigation

   • Click and drag on empty areas to pan the timeline
   • Smart cursor feedback (grab/grabbing)
   • Doesn't interfere with existing bar interactions

3. Auto-Scroll to Today

   • Automatically centers on today when changing view modes
   • Configurable via auto_scroll_to_today option
   • Helps users maintain context when switching time scales

Bug Fixes

• Fixed scroll position jumping when collapsing/expanding tasks
• Fixed vertical scrolling affecting horizontal position
• Fixed text centering for bars with collapse buttons
• Fixed bars being cut off due to incorrect height calculations
• Fixed short duration bars with text overflow (auto-expand to fit)
• Corrected collapse button spacing calculations

Configuration

const gantt = new Gantt('#gantt', tasks, {
    // Enable view mode buttons (default: true)
    view_mode_buttons: true,

    // Specify which buttons to show
    view_mode_buttons_list: ['Day', 'Week', 'Month', 'Year'],

    // Auto-scroll to today when changing views (default: true)
    auto_scroll_to_today: true,

    // Show Today button
    today_button: true
});

Examples

Two comprehensive examples have been added to demonstrate the features:
- /examples/enhanced-view-modes/ - Shows the new view mode controls
- /examples/collapsible-tasks/ - Demonstrates the collapsible dependent tasks feature

Backwards Compatibility

- Fully backwards compatible with existing implementations
- Legacy view_mode_select dropdown still supported
- All new features are optional and can be disabled

Testing

The implementation has been tested with:
- Multiple view mode switches
- Large datasets with many tasks
- Collapsible task hierarchies
- Various screen sizes and scroll positions
- Interaction with existing features (drag, resize, etc.)

Screenshots

The view mode buttons appear in the header, making it easy to switch between different time scales while
maintaining scroll position and context.

🤖 Generated with https://claude.com/claude-code

Co-Authored-By: Claude noreply@anthropic.com