Using the Visual Editor

The visual editor (DiagramView) is a canvas-based state diagram editor for building Turing Machines interactively. Every change you make on the canvas is automatically synchronized with the code panel in real time.

Creating States

• Click on empty canvas space to create a new state. States are auto-labeled q0, q1, q2, and so on. The first state created is automatically designated as the start state.
• States appear as circles with their label displayed in the center.

Moving States

• Click and drag a state to reposition it. The diagram updates continuously as you drag, and the code panel stays synchronized.

Creating Transitions

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

Method	Input	Description
Long press	Mouse	Press and hold on a state for ~500ms until it pulses blue, then drag to the target state and release
Click on arrow	Mouse	Click directly on an existing arrow to start a new arrow from that arrow's source state
Double-tap	Touch	Quickly tap a state twice on a touch device, then drag to the target
Shift + drag	Mouse	Drag from a state back to itself 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). A dashed preview line follows your cursor while drawing the 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)
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
• Input -- The symbol read from the tape (one per tape for multi-tape machines)
• Output -- The symbol written to the tape (one per tape)
• Direction -- Head movement per tape: L (left), R (right), or S (stay)

For multi-tape variants, the form shows a row of input/output/direction fields for each tape.

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

Three buttons are available 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 pan and zoom to the default view (1x zoom, origin at center)

Pan and Zoom

Action	Input
Zoom in/out	Scroll wheel (zooms centered on cursor position)
Pan	Middle-click + drag, or hold Space + left-click drag

Zoom ranges from 0.1x to 5x. The zoom is anchored to the cursor position, so you can zoom into a specific area of the diagram.

Dynamic Mode

Toggle Dynamic Mode from the toolbar to enable cinematic camera behavior during simulation playback. 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
• When simulation stops, the camera smoothly returns to the full diagram view
• Your manual pan/zoom position is preserved and restored when dynamic mode is turned off

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 test case expecting "cutoff" (non-termination) is anchored to this 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 -- Any change on the canvas (create, move, delete, rename) triggers an automatic code regeneration via the resync function
• Code to canvas -- Editing the code panel triggers a re-parse after a 200ms debounce. On successful parse, states and transitions are updated while preserving existing positions (matched by label)

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)	Allows self-loop creation by dragging a state onto itself

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