Checkpoints
A Checkpoints
object lets you set checkpoints on a Store
, and move forward and backward through them to create undo and redo functionality.
Create a Checkpoints
object easily with the createCheckpoints
function. From there, you can set checkpoints (with the addCheckpoint
method), query the checkpoints available (with the getCheckpointIds
method), move forward and backward through them (with the goBackward
method, goForward
method, and goTo
method), and add listeners for when the list checkpoints changes (with the addCheckpointIdsListener
method).
Checkpoints
work for both changes to tabular data and to keyed value data.
Every checkpoint can be given a label which can be used to describe the actions that changed the Store
before this checkpoint. This can be useful for interfaces that let users 'Undo [last action]'.
Example
This example shows a simple lifecycle of a Checkpoints
object: from creation, to adding a checkpoint, getting the list of available checkpoints, and then registering and removing a listener for them.
import {createCheckpoints, createStore} from 'tinybase';
const store = createStore()
.setTables({pets: {fido: {sold: false}}})
.setValue('open', true);
const checkpoints = createCheckpoints(store);
checkpoints.setSize(200);
console.log(checkpoints.getCheckpointIds());
// -> [[], '0', []]
store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');
console.log(checkpoints.getCheckpointIds());
// -> [['0'], '1', []]
checkpoints.goBackward();
console.log(store.getCell('pets', 'fido', 'sold'));
// -> false
console.log(checkpoints.getCheckpointIds());
// -> [[], '0', ['1']]
store.setValue('open', false);
checkpoints.addCheckpoint('closed');
console.log(checkpoints.getCheckpointIds());
// -> [['0'], '2', []]
checkpoints.goBackward();
console.log(store.getValue('open'));
// -> true
console.log(checkpoints.getCheckpointIds());
// -> [[], '0', ['2']]
const listenerId = checkpoints.addCheckpointIdsListener(() => {
console.log(checkpoints.getCheckpointIds());
});
store.setCell('pets', 'fido', 'species', 'dog');
// -> [['0'], undefined, []]
checkpoints.addCheckpoint();
// -> [['0'], '3', []]
// Previous redo of checkpoints '1' and '2' are now not possible.
checkpoints.delListener(listenerId);
See also
- Using Checkpoints guide
- Todo App demos
- Drawing demo
Since
v1.0.0
Getter methods
This is the collection of getter methods within the Checkpoints
interface. There are 4 getter methods in total.
Setter methods
This is the collection of setter methods within the Checkpoints
interface. There are only two setter methods, addCheckpoint
and setCheckpoint
.
Listener methods
This is the collection of listener methods within the Checkpoints
interface. There are only three listener methods, addCheckpointIdsListener
, addCheckpointListener
, and delListener
.
Configuration methods
This is the collection of configuration methods within the Checkpoints
interface. There is only one method, setSize
.
Iterator methods
This is the collection of iterator methods within the Checkpoints
interface. There is only one method, forEachCheckpoint
.
Lifecycle methods
This is the collection of lifecycle methods within the Checkpoints
interface. There are only three lifecycle methods, clear
, clearForward
, and destroy
.
Movement methods
This is the collection of movement methods within the Checkpoints
interface. There are only three movement methods, goBackward
, goForward
, and goTo
.
Development methods
This is the collection of development methods within the Checkpoints
interface. There is only one method, getListenerStats
.