State Machine Panel UI

Opening State Machine Editor

You can open the State Machine Editor using one of the following methods.

Via the menu
Navigate to View > State Machine> State Machine Editor. Via the Solution Explorer Panel
In the Solution Explorer Panel, browse through the solution and double-click an already existing State Machine.
(In the provided sample solutions, State Machines are located under Solution > State Machine)

Once the State Machine Editor is open, you can switch between it and other editors (e.g. the Scene Editor) by selecting the corresponding tab.

To adjust display preferences for the State Machine Editor panel, open the Preferences dialog via the menu: File > Preferences..., then navigate to Preferences > Environment > State Machine.

State Machine Editor Panel

TheNavigation and rearranging elements in the State Machine EditorDiagram panel(area canA bein accessedthe byimage selectingbelow):

Pan the Diagram:
Drag with the Statemiddle Machinemouse Editorbutton to tab frommove the center of the Scene Composer. If the tab is not visible, you can enable it via the menu bar by navigating to [View > State Machine > State Machine Editor].

To move the displaydiagram within the diagrameditor.

(Rearrange Elements:
Use drag and drop to reposition individual elements, such as sectionstates Aand belowtransitions, image), hold downwithin the mousediagram. wheelSelect Multiple Nodes:
Click and drag.drag Theto contentsdraw ofa selection rectangle around the panelelements willyou movewant accordingly,to basedselect. on your mouse movements.

A	Diagram	Displays the main workspace for the State Machine Editor.
B	State/Transition View	Hierarchically displays all States and Transitions defined in the State Machine Editor.
C	Behavior/Fusion Configuration	Displays the behaviors configured for the currently selected element (e.g., State or Transition) in the diagram. By clicking the Fusion button, the Fusion Editor panel will appear, showing Fusion-specific configurations.
a	Top Toolbar	Contains icons representing elements for constructing a state machine. These can be dragged onto the diagram to create and configure your state machine.
b	Bottom Toolbar	Provides tools for zooming and panning the diagram's display.

State/Transition View

TheThis view displays all elements (States and Transitions) of the stateState machineMachine configured(states and transitions) in a hierarchical tree format. When you select an element in the diagram are displayed in tree format intree, the editor tree. When an element is selected in the editor tree, thatcorresponding element is also automatically selectedhighlighted in the diagram.diagram on the right. This makessynchronized itselection possibleallows you to edit and check each element intuitively and efficiently.

1	State Machine Name	Displays the name of the State Machine currently selected state machine in the Solution Explorer. If a Subchart is open, its fill path is displayed.shown.
2	show current subcharts only	Switches the content displayed in the editor tree. Enabled (blue icon): Displays the entire content of the selected state machine, allowing a comprehensive overview. Disabled (white icon): Displays only the currently active Subchart as the root of the editor tree. If no Subchart is active, the full content is shown.
3	show subchart details	Switches the Subchart content is displayed in the editor tree. Enabled (blue icon): Displays all contents within the currently active Subchart, providing a detailed view of its structure. Disabled (white icon): Displays only the active Subchart's immediate elements, focusing on essential information.
4	show transitions	Toggles the visibility of Transitions in the editor tree. Enabled (blue icon): Displays all Transitions, showing their relationships as child nodes under their source or target. Disabled (white icon): Hides all Transitions, simplifying the tree display.
5	Navigation Buttons	FunctionWorks similarly to a web browser's "Back" and "Forward" buttons.controls. TheseThey allow you to navigatebrowse through the display history of state machines in the diagram, making it easy to revisit previouspreviously views.viewed diagrams.
6	Hierarchy Navigation Button	Enables switchingyou to switch from a detailed Subchart view back to a higher-level hierarchy view,view. helpingThis feature helps you easily transition between Subchart-specific details and the overall state machine structure.structure, ensuring better navigation and context awareness.
7	Search Field	Allows you to searchquickly forlocate States or Transitions within the editor tree by entering keywords. When a match is found, the corresponding element is automatically selectedhighlighted in both the editor tree and the diagram. ItsAdditionally, its details are also displayed in the properties panel for easy review orand editing.
8	Editor Tree	TheDisplays all elements (State, Transition, etc.) that you have configured onin the diagramdiagram, aresuch displayedas States, Transitions, and other components, in a tree.hierarchical tree structure.

Behavior/Fusion Configuration

TheThis panel displays the behaviors thatassociated are made up ofwith the elementscurrently selected State Machine element (State, Transition, etc.). selectedTo onconfigure or edit complex behavior logic, click the diagramFusion... arebutton displayed.to In addition, by pressingopen the Fusion button, the Fusion editor is displayed.Editor.

1	Search Field	ByAllows you to quickly locate behaviors in the Behavior View by entering a string of characterscharacters. in this field, you can search for the corresponding behavior from within the Behavior View. If a behavior that includes the keyword you entered is found, thatit behavior will beis automatically selected.highlighted Inand addition, theits details of the selected behavior will beare displayed in the Properties panel, allowing you toenabling easily checkreview and edit them.editing.
2	Fusion button	DisplaysOpens the Fusion Editor paneland displays the Fusion diagram for the selected element (such as State, Transition, etc.),. allowingThis allows you to configure and edit Fusion-specific configurations to be edited.configurations.
3	Behavior View	Lists all behaviors configured within the currently selected element (State, Transition, etc.).

Top Toolbar

The toolbar at the top of the diagram containsprovides icons for the elements that make up a stateState machine.Machine. YouTo canadd useelements thesesuch as States, Transitions and other components:

Drag the desired icons to easily placefrom the elementstoolbar. ofDrop ait stateinto machine.the State Machine diagram.

This intuitive drag-and-drop functionality makes it easy to build and customize complex stateState machines.Machines

For detailsdetailed ofinformation about each component, please refer to Components in State Machine.　

1	Transition	TransionA controlsTransition transitionsdefines the movement between States usingbased on specified conditions and actions.
2	Initial State	The Initial State isrepresents the State that indicates the starting point of the State MachineMachine's processing.execution.
3	History State	The History State remembersstores the last State ofwithin thea Subchart and resumes execution from there.that state when the Subchart is re-entered.
4	State	A State indicatesrepresents a specific point in the State Machine. Specific actions and conditions,conditions can be processed at both when entering and execute processing atexiting the start and end.state.
5	Subchart	A Subchart is a structurestructural element that combinesgroups States and Transitions tointo simplifya management. single unit, simplifying the management of complex State Machines.
6	Entry Point	An Entry Point is a pseudo-state that allowsenables controlled entry into a Subchart.
7	Exit Point	An Exit Point is a pseudo-state that allowsenables controlled exit from a Subchart.
8	Note	ThisA Note is a visual toolelement forused organizingto organize and display supplementary information and design details aboutrelated stateto machines.State Machines.
9	Choice	A Choice is aused functionto for branchingbranch transitions based on conditions.
10	ViewState	A ViewState controls whetherthe visibility of a specific View is shown or hidden within the stateState machine.Machine.

Bottom Toolbar

The toolbar at the bottom of the diagram containsprovides iconscontrols for setting the display magnification and other functions related to the diagramdiagram's display.visualization. These tools help you adjust the view for easier navigation and editing of complex State Machine diagrams.

1

Zoom

AdjustsClick on the "Zoom" text to reset the State Machine diagram to a 100% zoom factor.

2 Zoom Slider Use this zoom slider to adjusts the display magnification of the diagram. 23 View whole layout

AutomaticallyThis function automatically scales the view toso fitthat all elements in the diagram intofit within the display.display area.

34 Switch to selected node Centers the view on the currently selected element in the diagram.