Skip to main content

glint-state-diagram

Component to render a state machine diagram.

<glint-state-machine
  [graph]="graph"
  [direction]="direction"
  [lineType]="lineType"
  [showMembers]="showMembers"
  [showGuards]="showGuards"
  [showTriggers]="showTriggers"
  [focus]="search()"
  (elementSelected)="handleSelect($event)"/>
  • [graph] (required): The graph object with states and transitions.
  • [direction] (default=TOP_DOWN): Preferred direction in which in the edges flow.
  • [lineType] (default=ORTHOGONAL): How the edges should be rendered.
  • [showMembers]: Toggle the visibility of the class members in nodes.
  • [showGuards]: Toggle the visibility of transition guards.
  • [showTriggers]: Toggle the visibility of transition triggers.
  • [focus]: Input the id of a node to zoom in on that node.
  • (elementSelected): Event that triggers when an element is selected.

Interaction​

The state machine diagram offers support for creating new connections.

<glint-state-machine [graph]="graph"
  [allowConnection]="allowConnection"
  [connectionLabel]="connectionLabel"
  (createConnection)="createConnection($event.from, $event.to)"/>
  • [allowConnection]: Function that decides if a connection to a target is possible.
  • [connectionLabel]: Function that returns a label describing the new element being created when dragging to an empty space.
  • (createConnection): Event that triggers when the user attempt to create a new connection.