Working on the Canvas

Arrange, search and save your systems on the canvas, and learn which changes save immediately.

Working on the Canvas

The canvas on the Design tab is where you shape a system. This guide covers finding your way around, arranging nodes, and when your changes are saved.

Finding Your Way Around

The header above the canvas shows:

• ← — "Back to Design", closing the system.
• The system's name — click it to open the system's properties in the Inspector.
• The number of nodes in the system.
• Find state… — type part of a state's name or slug to jump to it. Use the arrow keys and Enter to pick a result, and Esc to close the list.
• Focus mode — hides the project tree, the Inspector and the Element Explorer so the canvas fills the screen (⌥⇧F).

Zoom and fit the view with the controls in the corner of the canvas, and drag the background to pan. Leap remembers where you left each system's view for as long as the browser tab stays open.

Arranging Nodes

• Drag a node to move it. Nodes snap to a grid and step aside to avoid overlapping.
• Click Auto-arrange at the top-left of the canvas to lay out the whole system, following the order of its exits.

A moved node's position is saved with your next save, or when you leave the canvas.

When Changes Are Saved

• Straight away — adding, connecting, deleting and duplicating nodes, and choosing the starting state.
• When you click Save — everything you change in the Inspector. Saving from any node's Inspector saves the whole system, including unsaved changes to its other nodes.

If a node's pending changes aren't valid, Leap saves the rest and tells you which were left out: "Some changes not saved". If the system as a whole can't be saved, a message above the canvas starts with "This system can't be saved yet." and names the problem — for example, "A transition out of "chapter_1" has no target."

Deleting and Duplicating Nodes

• Delete — select a node and press Delete or Backspace, or click Delete in the Inspector header. Leap asks you to confirm: exits and outcomes that point at the node are removed with it.
• Duplicate — click Duplicate in the Inspector header. The copy is named "{name} (Copy)".

Next Steps

Continue to Playtesting Your Design to try your systems out.