A simple Javascript statemachine. Great for managing UI state.
This library implements a simple Javascript Finite State Machine. I use it e.g. to manage a fairly complex HTML form with a number of view states.
This finite state machine implements a simple stop watch that can be powered on/off, reset, started and stopped.
// Initialize FSM with initial state and instance specific data
var fsm = new FSM("Power Off", { name: "Jo's Stop Watch", display: "blank" });
// "specific" transitions
// API: fsm.addTransition(events, currentStates, callback, nextState)
// This is a transitional state. As soon as fsm enters "Power On", it sends itself the
// "Press Reset Button" event and transitions to the "Reset state"
fsm.addTransition(
"Press Power Button",
"Power Off",
function() { this.sendEvent("Press Reset Button"); },
"Power On"
);
// This transition handles the same event for two different current states
fsm.addTransition(
"Press Reset Button",
["Power On", "Stopped"],
function() { this.data.display = "00:00:00"; },
"Reset"
);
fsm.addTransition(
"Press Start/Stop Button",
["Reset", "Stopped"],
function(){ this.data.display = "00:01:RR"; },
"Running"
);
fsm.addTransition(
"Press Start/Stop Button",
"Running",
function(){ this.data.display = "00:03:34"; },
"Stopped"
);
// "from any state" transitions
// We already specified a transition for "Press Power Button" event on "Power Off" current
// state above. This specification here handles the same event for all other current states.
fsm.addTransitionFromAnyState(
"Press Power Button",
function() { this.data.display = "blank"; },
"Power Off"
);
// Handles two different events on any state. We specify these only to avoid the
// "Transition is undefined" error.
// Don't provide next state, so that nothing changes (loopback)
fsm.addTransitionFromAnyState(
["Press Start/Stop Button", "Press Reset Button"],
null
);
Once the fsm is initialized, you can start using it:
fsm.sendEvent("Press Power Button"); // Power it on
fsm.currentState // "Reset"
fsm.data.display // "00:00:00"
fsm.sendEvent("Press Start/Stop Button"); // Start timer
fsm.currentState // "Running"
fsm.data.display // "00:01:RR"
fsm.sendEvent("Press Start/Stop Button"); // Stop timer
fsm.currentState // "Stopped"
fsm.data.display // "00:03:34"
fsm.sendEvent("Press Start/Stop Button"); // Restart timer
fsm.currentState // "Running"
fsm.data.display // "00:01:RR"
fsm.sendEvent("Press Start/Stop Button"); // Stop timer
fsm.currentState // "Stopped"
fsm.data.display // "00:03:34"
fsm.sendEvent("Press Reset Button"); // Reset timer
fsm.currentState // "Reset"
fsm.data.display // "00:00:00"
fsm.sendEvent("Press Power Button"); // Power it off
fsm.currentState // "Power Off"
fsm.data.display // "blank"
There are three types of transitions:
When you send an event to the FSM, it tries to find a matching transition. It looks in the following order:
And it will apply the first transition it finds. If it cannot find a matching transition, it throws a "Transition is undefined" error.
JS Finite State Machine is Copyright (c) 2011 by Jo Hund, ClearCove Software Inc.
JS Finite State Machine is licensed under the MIT license.