Loading exercise…

Canvas editor with undo and redo

Complete a design editor’s state transitions without breaking its history.

Task

Build undo and redo for a canvas editor that lets users add, move, and delete text elements.

Requirements

  1. State is {past, present, future}. present is an array of {id, x, y, text}; past and future hold earlier scene arrays.
  2. add appends action.shape unless its id already exists. move replaces x and y for action.id. delete removes action.id.
  3. A real edit appends the old present to past and clears future. Missing IDs, duplicate adds, and moves to the same coordinates are no-ops.
  4. undo pops the last past scene and pushes the current scene onto future; redo reverses that. Empty undo/redo is a no-op. Never mutate input. Unsupported actions throw an Error.

Exercises

AI-assisted Coding9 exercises