Using the Visual Editor

Creating States

• Click on empty canvas space to create a new state. New labels use q followed by the current number of states, such as q0 or q1. The first state created is automatically designated as the start state.
• If a state is selected, the first empty-space click deselects it; click again to create a state. If a context menu is open, the first click dismisses it.
• States appear as circles with their label displayed in the center.
• The start state has an incoming arrow. To change the start state, edit the makeInit(...) declaration in CODE; the state context menu has no start-state option.

Moving States

• Drag from the body of a state, away from its connection ports, to reposition it. Starting at a port creates an arrow instead. The diagram updates continuously as you drag.
• Click a state to select or deselect it. Selection is shown by an outer ring.

Creating Transitions

There are several ways to create transitions (arrows) between states:

Method	Input	Description
Connection port	Mouse or touch	Drag from one of the eight connection points around a state's edge to the target state; square ports appear while drawing
Click on arrow	Mouse	Click directly on an existing arrow to start a new arrow from that arrow's source state
Double-click / double-tap, then drag	Mouse or touch	Press the same state twice within 400ms, keeping the second press held, then drag to the target
Shift while drawing	Mouse	Start an arrow using a port or double-click-and-drag, then release on the source state while holding Shift to create a self-loop
Context menu	Both	Right-click (or long-press on touch) a state and select Self-Loop

When you release on a target state, a transition is created with default values (blank input/output, direction R for each tape). A dashed preview line follows your cursor while drawing the arrow. Releasing away from a state cancels the connection.

Mouse long-press is not a transition-creation gesture. On touch devices, a stationary long-press of about 500ms opens a context menu. Touch arrow creation can return to the source state without Shift. The Self-Loop menu action creates a loop only if that state does not already have one.

Transitions that share a source, destination, and connection-port pair are drawn as one arrow with their rule labels separated by semicolons. Use the TRANSITIONS tab to select and edit individual rules in a grouped arrow.

Context Menu

Right-click on a state or transition (or long-press on touch devices) to open the context menu.

State Context Menu

Option	Effect
Set Accept	Marks the state as an accepting state (shown with a green double-circle border)
Set Reject	Marks the state as a reject state (shown with a red square overlay)
Set Halt	Marks a halt state (shown with a blue double-circle border and an H marker); useful for computational machines
Rename	Opens a draggable dialog to change the state label
Self-Loop	Creates a transition from the state back to itself
Delete	Removes the state and all transitions connected to it

Transition Context Menu

Option	Effect
Edit	Opens a draggable dialog to modify the transition's read symbol, write symbol, and head direction for each tape
Delete	Removes the transition

Editing Transitions

The Edit Transition dialog lets you modify all properties of a transition:

• FROM / TO -- Change the source and target states
• READ -- The symbol read from the tape (one per tape for multi-tape machines)
• WRITE -- The symbol written to the tape (one per tape)
• MOVE -- Head movement per tape: L (left), R (right), or S (stay). Multi-step machines can use sequences such as RR or LLS.

For multi-tape variants, the form shows numbered READ/WRITE/MOVE fields for each tape. READ and WRITE are single-symbol values; use _ for blank. Save the form to apply changes, or cancel to leave the rule unchanged.

The TRANSITIONS tab also provides the same fields to add a rule with ADD, and lists existing rules with delete buttons.

Renaming States

The Rename State dialog is a draggable floating window. Type the new label and click Save to confirm or Cancel to dismiss. The label is used in the code representation, so renaming on the canvas updates the code panel instantly.

Canvas Controls

Five buttons are stacked vertically in the top-left corner of the canvas:

Button	Position	Function
Grid toggle	Top-left (1st)	Shows or hides a background grid for alignment reference
Fit to view	Top-left (2nd)	Automatically zooms and pans to fit all states in the visible area
Reset zoom	Top-left (3rd)	Resets manual zoom to 1x and clears manual pan offsets
Undo	Top-left (4th)	Restores the previous diagram-edit snapshot
Redo	Top-left (5th)	Reapplies an undone diagram edit

Undo covers canvas changes such as creating, moving, renaming, and deleting states, editing transitions, and setting state roles. A drag is one undo step. Buttons are disabled when their history is empty; a new diagram edit clears redo history. These are diagram-history controls, not a history of every code edit or camera movement.

Pan and Zoom

Action	Input
Zoom in/out	Scroll wheel (zooms around the centre of the canvas)
Pan	Drag empty canvas space; alternatively middle-click + drag, or hold Space + left-click drag

Manual wheel zoom ranges from 0.1x to 5x. Pan the area of interest to the centre before zooming. An empty-space drag pans rather than creating a state; a short empty-space click creates a state when nothing is selected.

Camera Tracking (CAM)

In SINGLE INPUT mode, toggle CAM in the toolbar to enable camera tracking during simulation playback. This is called dynamic mode internally. When active:

• The camera automatically pans and zooms (to 1.8x) to follow the currently active state
• During transitions, the camera centers on the midpoint of the active arrow
• Tracking continues while a current state or active transition is supplied; stopping playback does not by itself guarantee a return to the full diagram
• Turning CAM off smoothly removes the tracking transform while preserving your manual pan/zoom settings

The tracking zoom is applied on top of manual zoom. Use Fit to view if you want to frame the whole machine.

Simulation Highlighting

During simulation playback or step-through:

• Active state -- Highlighted with an orange glow ring
• Active transition -- The arrow turns orange and becomes thicker
• Tape visualizer -- Shows the current tape contents and head position below the diagram

Test Result LEDs

When test mode is active and tests have been run, colored LED indicators appear next to states:

Color	Meaning
Green	A test case passed and halted at this state (accept/reject)
Red	A test case failed and halted at this state unexpectedly
Blue	A test case expecting "halt" passed at this state
Orange	A passing test expecting cut (cutoff/non-termination), normally anchored to the initial state

Each LED shows a count in parentheses indicating how many test cases produced that result at the given state.

Bidirectional Sync

The visual editor and code panel are always synchronized:

• Canvas to code -- Machine edits on the canvas (create, move, delete, rename, or edit a rule) update the machine store and regenerate the code. Pan and zoom do not change machine code.
• Code to canvas -- Editing the code panel triggers a re-parse after a 200ms debounce. Parsed states and transitions update the diagram while preserving existing positions matched by label. Compiler diagnostics do not necessarily prevent the parsed parts of the diagram from being displayed.

This means you can freely switch between visual and code editing without losing your place.

Keyboard Shortcuts

Key	Effect
Space (hold)	Enables pan mode (cursor changes to grab)
Shift (hold while drawing an arrow)	Allows releasing an arrow on its source state to create a self-loop

Multi-Tape Support

When the machine variant is set to multi-tape or multi-tape-multi-step:

• Transitions display tuple labels like (a,b), (c,d), (L,R) instead of single symbols
• The transition edit form shows separate fields for each tape
• Self-loops and regular arrows both support multi-tape labels
• The tape visualizer below the diagram expands to show all tapes stacked vertically