Foblex Flow
Undo/Redo v2
Description
This example demonstrates how to add undo and redo functionality to a flow-based diagram built with Foblex Flow. It uses @foblex/mutator, a lightweight state management utility for snapshots, history, and predictable state transitions.
Use this version when your editor already has enough state complexity that you want a dedicated history layer instead of ad hoc manual stacks.
Example
[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/advanced/undo-redo-v2/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/advanced/undo-redo-v2/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/advanced/undo-redo-v2/example.scss
Installation
Before running this example, install the additional package:
Practical tips
- Use @foblex/mutator whenever your editor requires time-traveling operations.
- Keep the state flat and serializable.
- Group multiple actions into one
update()call when they should be undone as a single step. - Undo/redo can cover selections, canvas transforms, and custom node metadata, not only nodes and connections.
This version is a better fit for editors that already have complex state and need a more disciplined history model.