` element into which debug lines will be written.
Optional `MaxLines` specifies the maximum number of lines that are retained in the `
`. *Note that most browsers slow down considerably due to inefficient scrolling if there are too many lines retained in the `
`. Defaults to 200.*
If `true`, optional `ScrollIntoView` causes each new debug line to come into focus.|
### Reserved Names in a State Object
|Reserved Event Name|Description|
|---|---|
|`ENTER`|The `ENTER` function is called as the state is entered.|
|`EXIT`|The `EXIT` function is called as the state is exited.|
|`TIMEOUT`|This event is triggered if a timeout that was established in the `ENTER` function occurred.|
|`COMPOSITE`|Specified by you to indicate nested states (hierarchy).|
|`DOTPATH`|Used internally by `OOSMOS`.|
### Reserved Names in a Composite Object
|Reserved State Name|Description|
|---|---|
|`DEFAULT`|Specified by you inside of a `COMPOSITE` to indicate which of multiple states at the same level should be entered by default.
Not required if there is only one state in the composite.|
### OOSMOS.d.ts
(Private elements removed.)
```
export interface iState {
ENTER?: () => void;
EXIT?: () => void;
TIMEOUT?: () => void;
COMPOSITE?: iComposite | (() => iComposite);
[EventString: string]: (() => void) | any;
DOTPATH?: string;
}
export interface iComposite {
DEFAULT?: string;
[StateName: string]: iState | (() => iState) | any;
}
export declare class StateMachine {
constructor(Composite: iComposite);
Transition(To: string, ...Args: any[]): void;
Start(): void;
Restart(): void;
IsIn(StateDotPath: string): boolean;
Event(EventString: string, ...Args: any[]): void;
SetTimeoutSeconds(TimeoutSeconds: number): void;
DebugPrint(Message: string): void;
SetDebug(DebugMode: boolean, DebugID?: string, MaxLinesOut?: number, ScrollIntoView?: boolean): void;
Print(Message: string): void;
Assert(Condition: boolean, Message: string): void;
Alert(Message: string): void;
}
```
### State Local Variables
Each state must (eventually) specify an object of events. See state `A`, below. It specifies events `ENTER` and `TIMEOUT` within an object. If you want to specify one or more variables that are local only to the state, you can instead specify a function that returns the required object of events. An example is state `B` below. We specify a function that declares state-local variables and then returns the object of events. All the variables declared form a closure with state `B`'s object of events. This is very useful for, say, caching `jQuery` elements for the life of the state.
```javascript
import { StateMachine } from '../OOSMOS';
class TimeoutDemo extends StateMachine {
constructor() {
super({ DEFAULT: 'A',
A: {
ENTER: () => {
this.SetTimeoutSeconds(4);
},
TIMEOUT: function() {
this.Transition('B');
},
},
B: () => {
var Timeouts = 0;
return {
ENTER: function() {
this.SetTimeoutSeconds(1);
},
TIMEOUT: function() {
Timeouts += 1;
this.Transition('A');
},
};
},
});
}
}
const pTimeoutDemo = new TimeoutDemo();
pTimeoutDemo.SetDebug(true);
pTimeoutDemo.Start();
```
### jQuery Example (fragments)
Note that we can establish `jQuery` event handlers in the `ENTER` event and then `unbind` them in the corresponding `EXIT` event.
```javascript
.
.
Active: {
ENTER: () => {
$('#Active').show();
$('#eStop').click(() => { this.Transition('Idle'); });
$('#eRestart').click(f() => { this.Transition('Active'); });
},
EXIT: () => {
$('#eStop').unbind('click');
$('#eRestart').unbind('click');
$('#Active').hide();
}
},
.
.
```
Further, we can use state-local variables to cache the `jQuery` selectors, like this:
```javascript
.
.
Active: function() {
var $Active = $('#Active');
var $eStop = $('#eStop');
var $eRestart = $('#eRestart');
return {
ENTER: () => {
$Active.show();
$eStop.click(() => { this.Transition('Idle'); });
$eRestart.click(f() => { this.Transition('Active'); });
},
EXIT: () => {
$eStop.unbind('click');
$eRestart.unbind('click');
$Active.hide();
}
};
},
.
.
```
## Debug Output
A `StateName` being entered is represented like this:
```
--> StateName
```
A `StateName` being exited is represented like this:
```
StateName -->
```
A default state being entered is indicated like this:
```
==> StateName
```
## Building
From the top level directory, type `npm start`. Note: It depends on `Python`.