The History State

Based on the tutorials by @thure.

The 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:

Since the interpreter always begins in the gallery, <history> will point there unless the user visited the carousel most recently.