The History State
Based on the tutorials by @thure.
initial attribute/node is great for specifying a default internal state inside a compound state, but it falls short of one major scenario: resuming where it left off.
We have a lot of interaction scenarios where users essentially pause and resume the task at hand. Games, appliances, and UIs all often have this type of behavior, and it even manifests similarly.
Imagine we have a simple photo gallery app with three views: gallery (all-up), carousel (one-up), and a sharing modal where users can share the album at any time.
<history>, a link to the past
Since the app should return to whichever view it was in before the user invoked the modal, initial states aren’t enough. Instead, when the modal closes, we point to a history ‘state’, which is essentially a shortcut to the substate that was most recently active. That statechart looks like this:
Click to show source code
Since the interpreter always begins in the gallery,
<history> will point there unless the user visited the carousel most recently.