File: /var/www/html/tmpr/../tmpr/..//tmpr/..//tmpr/..//tmpr/../wowX/multipage.md
# Multi-Page Feature Implementation
## Context
I have a functional Fabric.js application and want to add a multi-page system similar to Canva's pages feature. The implementation should preserve all existing functionality while adding page management capabilities.
## Core Requirements
### 1. Page Management System
Add the ability to:
- Create multiple pages/canvases
- Navigate between pages using thumbnails or page indicators
- Add new pages (blank or duplicated from existing)
- Delete pages (with confirmation)
- Reorder pages via drag-and-drop
- Set a default page size that applies to all pages
### 2. Data Structure
Each page should store:
- Unique page ID
- Canvas JSON state
- Page name/title (editable)
- Thumbnail preview
- Creation timestamp
- Last modified timestamp
### 3. UI Components Needed
**Page Sidebar/Panel:**
- Scrollable list of page thumbnails
- Current page indicator (highlighted)
- Add page button (+)
- Page counter (e.g., "Page 2 of 5")
**Page Thumbnail:**
- Visual preview of canvas content
- Page number badge
- Hover actions (delete, duplicate, rename)
- Drag handle for reordering
**Navigation Controls:**
- Previous/Next page buttons
- Keyboard shortcuts (Ctrl+PageUp/PageDown or Cmd+])
- Page dropdown selector
### 4. State Management
Implement:
- Current page index/ID tracker
- Pages array to store all page data
- Auto-save mechanism when switching pages
- Undo/redo per page (maintain separate history)
### 5. Core Functions to Implement
```javascript
// Page CRUD operations
function addCanvasPage(position = 'end') { }
function deleteCanvasPage(pageId) { }
function duplicateCanvasPage(pageId) { }
function renameCanvasPage(pageId, newName) { }
function reorderCanvasPages(fromIndex, toIndex) { }
// Navigation
function goToCanvasPage(pageIndex) { }
function nextCanvasPage() { }
function previousCanvasPage() { }
// State management
function saveCurrentCanvasPage() { }
function loadCanvasPage(pageId) { }
function generateCanvasThumbnail(pageId) { }
function exportAllCanvasPages() { }
function importCanvasPages(pagesData) { }
```
### 6. Canvas Switching Logic
When switching pages:
1. Save current canvas state to current page object
2. Clear the canvas
3. Load the selected page's JSON state
4. Update thumbnail of previous page
5. Update UI indicators (page number, highlight)
6. Maintain zoom level and view position (optional)
### 7. Thumbnail Generation
- Generate thumbnails using `canvas.toDataURL()` with scale factor
- Recommended size: 150x150px or maintain aspect ratio
- Update thumbnails on:
- Page switch
- Manual refresh
- After significant changes (debounced)
### 8. Storage/Persistence
Implement save/load for:
- LocalStorage for quick saves (if not using the storage API)
- JSON export of all pages
- JSON import to load existing projects
- Auto-save every N seconds or on page switch
### 9. Performance Considerations
- Lazy load page content (only render active page)
- Use virtual scrolling for large page counts
- Debounce thumbnail updates
- Dispose of fabric objects properly when switching
- Consider canvas pooling for very large documents
### 10. User Experience Enhancements
- Smooth transitions between pages
- Loading indicators during page switches
- Confirmation dialog for destructive actions
- Keyboard shortcuts for power users
- Drag-and-drop page reordering with visual feedback
- Double-click thumbnail to rename
- Right-click context menu on thumbnails
## Implementation Approach
### Phase 1: Core Data Structure
Set up the pages array and page object schema
### Phase 2: Basic Navigation
Implement page switching without UI (function calls only)
### Phase 3: UI Components
Build the page sidebar with thumbnails
### Phase 4: CRUD Operations
Add create, delete, duplicate, rename functionality
### Phase 5: Persistence
Implement save/load system
### Phase 6: Polish
Add animations, keyboard shortcuts, drag-and-drop reordering
## Important Notes
- **Preserve Existing Functionality**: All current canvas operations (drawing, editing, selection, etc.) must continue working exactly as before
- **Isolation**: Changes on one page should not affect other pages
- **Memory Management**: Properly dispose of canvas objects when switching pages to prevent memory leaks
- **State Consistency**: Always save page state before switching to prevent data loss
- **Default Page**: Start with one default page on initialization
## Expected Behavior
The user should be able to:
1. Work on the main canvas as normal (existing functionality intact)
2. Click "Add Page" to create a new blank canvas
3. See all pages in a sidebar with visual previews
4. Click any thumbnail to switch to that page instantly
5. Delete, duplicate, or reorder pages as needed
6. Export the entire multi-page project as a single JSON file
7. Import previously saved multi-page projects