mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-10-28 09:10:39 +00:00
thePR0M3TH3ANandClaude Sonnet 4.6
c47f4d9989
- Fix 'key is not defined' error in publishDiscDesignToNostr function - Preserve layers when importing disc designs into template slots from both JSON files and Nostr - Check both discDesign.layers and top-level payload.layers during import - Populate designer metadata (title, category, imdbId) when loading projects - Auto-set Nostr browse modal to 'disc-design' filter when importing from template slots - Add undo/redo feature plan documentation for future implementation Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
90 lines
2.9 KiB
Markdown
90 lines
2.9 KiB
Markdown
# Undo/Redo Feature Plan
|
|
|
|
## Overview
|
|
Add undo/redo functionality to allow users to fix mistakes and reverse unintended changes. State snapshots will be saved to browser localStorage.
|
|
|
|
## Complexity
|
|
**Moderate** - Estimated 1-2 hours to implement
|
|
|
|
## Key Components
|
|
|
|
### 1. Undo/Redo Stack
|
|
- Maintain two stacks: `undoStack` and `redoStack`
|
|
- Each stack stores snapshots of the entire `state` object
|
|
- Limit stack size to 20-50 snapshots to avoid filling localStorage (~2-5MB usage)
|
|
|
|
### 2. State Snapshot Capture
|
|
Save snapshots at major action points (not on every keystroke):
|
|
- Project import/load
|
|
- Add/delete/modify layers
|
|
- Design image URL changes
|
|
- Design property edits (fit, zoom, x, y, rotate)
|
|
- Metadata edits (title, category, imdbId)
|
|
- Add/remove disc designs in template slots
|
|
|
|
### 3. Storage Strategy
|
|
- Serialize state snapshots using `JSON.stringify()`
|
|
- Store in localStorage key like `undo-stack` and `redo-stack`
|
|
- Include timestamp with each snapshot for debugging
|
|
- Implement size checks to prevent localStorage overflow
|
|
|
|
### 4. Core Functions Needed
|
|
```javascript
|
|
function saveUndoSnapshot(label)
|
|
// Save current state to undo stack, clear redo stack
|
|
|
|
function undo()
|
|
// Restore previous state from undo stack, move current to redo stack
|
|
|
|
function redo()
|
|
// Restore state from redo stack, move current to undo stack
|
|
|
|
function updateUndoRedoUI()
|
|
// Enable/disable undo/redo buttons based on stack availability
|
|
```
|
|
|
|
### 5. UI Changes
|
|
- Add "Undo" button in toolbar/header
|
|
- Add "Redo" button next to undo
|
|
- Show disabled state when no undo/redo available
|
|
- Optional: Show keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z)
|
|
- Optional: Show snapshot label on hover
|
|
|
|
### 6. Integration Points
|
|
Modify existing functions to call `saveUndoSnapshot()` after:
|
|
- `importDiscDesignFromPayload()` - after design imported
|
|
- `addLayer()` - after layer created
|
|
- Layer deletion handlers
|
|
- Design image URL updates
|
|
- Metadata input change handlers
|
|
- Template preset changes
|
|
|
|
## Performance Considerations
|
|
- Serializing/deserializing state is fast (~1-5ms)
|
|
- No performance impact on normal operations
|
|
- localStorage access is synchronous and fast
|
|
- Consider debouncing rapid metadata edits
|
|
|
|
## Limitations
|
|
- Browser localStorage only (not synced across devices/browsers)
|
|
- Limited to current session if user closes browser
|
|
- Large image URLs could impact stack size
|
|
- No undo for external Nostr publishes (data already on network)
|
|
|
|
## Future Enhancements
|
|
- IndexedDB for larger storage capacity
|
|
- Undo history UI showing snapshots
|
|
- Selective undo (undo specific action)
|
|
- Cloud sync of undo history
|
|
- Keyboard shortcuts configuration
|
|
|
|
## Testing Checklist
|
|
- [ ] Undo works after layer add
|
|
- [ ] Undo works after image URL change
|
|
- [ ] Undo works after metadata edit
|
|
- [ ] Redo restores undone actions
|
|
- [ ] Stack limits prevent localStorage overflow
|
|
- [ ] Buttons disable when stacks empty
|
|
- [ ] Page refresh preserves undo stack (if kept in localStorage)
|
|
- [ ] Works across template/designer mode switches
|