Implement Advanced Undo/Redo with Visual History Timeline #113

[Gupta-02]

This PR implements a comprehensive advanced undo/redo system with a visual history timeline, replacing the basic linear undo/redo functionality with a modern, tree-based history system that supports branching and visual navigation.

✨ Key Features Implemented

1. Tree-Based History Structure
   Replaced linear undo/redo lists with a tree structure supporting history branching
   Each history node contains state diffs instead of full state snapshots for efficiency
   Supports complex editing workflows with multiple branches
2. Visual History Timeline Widget
   Expandable/collapsible timeline panel positioned on the right side of the canvas
   Thumbnail previews of canvas states (200x150px at 0.5 pixel ratio)
   Timestamps and descriptions for each history entry
   Current state highlighting with visual indicators
3. Jump-to Functionality
   Click any history item to instantly jump to that state
   Maintains full history tree integrity during navigation
   Supports both forward and backward navigation through complex editing paths
4. Performance Optimizations
   History size limited to 50 nodes to prevent memory issues
   Asynchronous thumbnail generation using RepaintBoundary
   State diffing reduces memory footprint significantly
   Efficient tree traversal algorithms
5. Enhanced User Experience
   Visual feedback for current position in history
   Descriptive change summaries (e.g., "Added 2 text items", "Changed background color")
   Seamless integration with existing undo/redo keyboard shortcuts
   Drawing mode compatibility
   🛠 Technical Implementation
   New Files Created:
   history_model.dart - HistoryNode and HistoryTree data structures
   history_timeline.dart - Visual timeline widget with expand/collapse functionality
   history_manager.dart - Core history management logic and utilities
   history_test.dart - Unit tests for history functionality
   Modified Files:
   canvas_state.dart - Updated to use HistoryTree instead of linear lists
   canvas_cubit.dart - Enhanced with thumbnail generation and tree-based navigation
   canvas_screen.dart - Integrated history timeline widget
   drawing_canvas.dart - Added canvas key for thumbnail capture
   Key Technical Decisions:
   RepaintBoundary: Used for efficient thumbnail generation without performance impact
   State Diffing: Only stores changes between states, not full snapshots
   Tree Structure: Supports branching history unlike traditional linear undo/redo
   Async Operations: Thumbnail generation happens asynchronously to avoid UI blocking
   🎯 Acceptance Criteria Met
   ✅ Visual timeline widget in the UI - Implemented as expandable right-side panel
   ✅ Thumbnail generation for canvas states - Using RepaintBoundary with optimized sizing
   ✅ Ability to jump to any point in history - Click-to-navigate functionality
   ✅ History branching support - Tree structure allows multiple editing paths
   ✅ Performance optimization for large histories - Size limits and efficient algorithms

🧪 Testing
Basic unit tests added for history tree functionality
Manual testing of undo/redo operations
Thumbnail generation verification
Timeline navigation testing
📱 UI/UX Improvements
Clean, modern timeline design that doesn't obstruct canvas
Intuitive expand/collapse behavior
Clear visual indicators for current state
Responsive design that works on different screen sizes
🔄 Backward Compatibility
Existing undo/redo keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z) still work
No breaking changes to existing API
Graceful fallback for edge cases
🚀 Future Enhancements
This foundation enables future features like:

History search and filtering
History export/import
Collaborative editing with shared history
Advanced branching with named branches
History compression for very long sessions

[Gupta-02]

Closes #113

[github-actions]

Our Pull Request Approval Process

Thanks for contributing!

Reviewers

Do not assign reviewers. Our Queue Monitors will review your PR and assign them.
When your PR has been assigned reviewers contact them to get your code reviewed and approved via:

1. comments in this PR

Reviewing Your Code

Your reviewer(s) will have the following roles:

1. arbitrators of future discussions with other contributors about the validity of your changes
2. point of contact for evaluating the validity of your work
3. person who verifies matching issues by others that should be closed.
4. person who gives general guidance in fixing your tests

Other

🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.

[Gupta-02]

@may-tas PLease merge

[may-tas]

@Gupta-02 Attach proof of work (screen recording).

[Gupta-02]

@may-tas Yes sure

[github-actions]

This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the main branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work.