State History

A.k.a. Undo and Redo. The PacemHistoryElement component eases the management of state changes allowing to rollback or skip to the desired value in the state's history.

<!-- history manager -->
<pacem-history id="history" state="{{ #monitored.value, twoway }}"></pacem-history>

<pacem-input-text id="monitored"></pacem-input-text>

<pacem-button disabled="{{ !#history.canUndo }}" on-click="#history.undo()">Undo</pacem-button>
<pacem-button disabled="{{ !#history.canRedo }}" on-click="#history.redo()">Redo</pacem-button>

Limitations

The state, as it changes, must also change its reference to its previous values.

Note: This limitation targets Object and Array instances, of course.

Example: Consider that the states provided to the history component are Arrays. It is mandatory, for the component to behave correctly, that they are references to different instances of Array.
Even despite the fact that the change-tracker may detect changes of an array while preserving its instance.

<!-- history manager -->
<pacem-history id="history" state="{{ #monitored.value, twoway }}"></pacem-history>

<pacem-input-text id="monitored"></pacem-input-text>

<pacem-button disabled="{{ !#history.canUndo }}" on-click="#history.undo()">Undo</pacem-button>
<pacem-button disabled="{{ !#history.canRedo }}" on-click="#history.redo()">Redo</pacem-button>