TinyBase logoTinyBase

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.

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);
checkpoints.destroy();

See also

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.