Implement an Undo/Redo System with Command Pattern
Last updated: April 5, 2025
Quick Overview
Design and implement an undo/redo system using the command pattern that supports arbitrary operations, grouping of operations, and memory-efficient history management.
Canva
April 5, 202512
7
2,567 solved
Design and implement an undo/redo system using the command pattern that supports arbitrary operations, grouping of operations, and memory-efficient history management.
Undo/redo is a core feature in any design editor. At Canva, the undo system must handle complex operations (move, resize, change color, group elements, apply effects) and support both single-user and collaborative contexts. This question tests your design pattern knowledge and practical engineering skills.
What the Interviewer Expects
- Implement the Command interface with execute and undo methods
- Build an UndoManager that maintains history stacks for undo and redo
- Support grouping multiple commands into a single undoable operation
- Implement memory management (limit history size, compress old commands)
- Write clean, extensible code that new command types can easily plug into
Key Topics to Cover
How to Approach This
- Clarify input constraints and edge cases before writing code.
- Walk through your approach verbally and confirm with the interviewer before coding.
- Start with a brute force solution, then optimize. Mention time and space complexity.
- Test your solution with examples, including edge cases like empty input or duplicates.
- Consider common patterns: sliding window, two pointers, hash map, BFS/DFS, dynamic programming.
Possible Follow-up Questions
- How would you extend this to support undo in a collaborative editing context?
- How would you implement selective undo (undo a specific operation from the middle of the history)?
- How would you serialize the command history for persistence?
Sharpen Your Skills on Codemia
Practice similar problems with our interactive workspace, get AI feedback, and track your progress.
Practice DSA ProblemsSample Answer
Problem Analysis
The problem requires implementing an undo/redo system using the command pattern. The command pattern is suitable here because it encapsulates all the information needed to perform an action, allowing ...
Approach
- Define the Command Interface: Create a
Commandinterface withexecute()andundo()methods. 2. Implement Concrete Commands: For each operation (e.g.,MoveCommand, `ResizeCommand...