Skip to content

Editor

Incomplete documentation

Widget selection#

Clicking on a widget, on a tab label or on an item in the project tree selects the widgets for edition:

  • All its editable properties are shown in the inspector panel
  • The corresponding item in the project tree is highlighted
  • A selection outline is drawn around the widget
  • Dragging / Resizing handles are added to the widget

Right clicking on a widget displays a menu with the following actions

  • Show in tree: show widget in project tree (hidden when clicking in the project tree)
  • Copy: copy widget's data
  • Cut: copy widget's data and delete selected widget
  • Paste: paste copied widget in selected container
    • Paste: paste the widget as is
    • ID + 1 : increments the id of the copied widget (and all its children) before pasting
    • Clone : create a clone widget targetting the copied widget
  • Add widget: create a new widget in selected container
  • Add tab: create a new tab in selected container
  • Delete: delete selected tab or widget

Inspector#

Selected widget's properties are displayed and can be modified in the inspector. The properties reference lists the available properties for each widget type.

  • Property fields are all multiline (press shift + enter for new line).
  • Properties are written in JSON, with some flexibility brought by the JSON5 format. For example, doubles quotes around object keys are not mandatory.
  • Clicking on a property name spawns a help modal window

Project tree#

The project tree displays the whole widget structure of the session. Widgets can be reordered within a container with drag-and-drop.

Widget resizing / dragging#

Selected widget can be resized using its south, south-east and east handles. It can be dragged with its north-west handle. If the widget's position/size was written in percents, the editor will try to keep using percents.

When the grid is enabled, widget resizing / dragging snaps to a 10 pixel wide grid.

Multi-widgets editing#

Multiple widgets can be edited at once.

  • The inspector will only display properties that are shared by all selected widgets
  • Selection can only contain sibling widgets (same direct parent)
  • Context-menu actions and properties changes apply to all selected widgets
  • Resizing / Dragging will affect all selected widgets, relatively the selection's size and position

Keyboard shortcuts#

Shortcut Description
Ctrl+G Toggle grid.
Ctrl+T Toggle session tree.
Ctrl+I Toggle inspector.
Click Widget selection.
Ctrl+Click Multi-widget selection. Widgets can be toggled from selection by clicking on them individually.
Shift+Click+Drag Draw a selection rectangle and attempt to select widgets in it (starts by selecting the widget under the cursor). If Ctrl is pressed too, current selection is kept and will be merged with the new one if possible.
Ctrl+Z  Undo
Ctrl+Y
Ctrl+Shift+Z
 Redo
Del  Delete selected widgets
Ctrl+C  Copy selected widgets
Ctrl+X  Cut selected widgets
Ctrl+V  Paste clipboard in selected widget
Ctrl+Shift+V  Paste and increment id
Up
Down
Left
Right
 Move selected widgets (1 grid unit, hold Shift for 5 grid units)
Alt+Up
Alt+Down
Alt+Left
Alt+Right
Resize selected widgets (1 grid unit, hold Shift for 5 grid units)
Ctrl+A Select current widget's siblings and itself
Ctrl+Shift+A Cancel current widget selection
Ctrl+Up Select current widget's parent
Ctrl+Down Select current widget's first child
Ctrl+Right Select current widget's next sibling
Ctrl+Left Select current widget's previous sibling
Shortcut Description
Cmd+G Toggle grid.
Cmd+T Toggle session tree.
Cmd+I Toggle inspector.
Click Widget selection.
Cmd+Click Multi-widget selection. Widgets can be toggled from selection by clicking on them individually.
Shift+Click+Drag Draw a selection rectangle and attempt to select widgets in it (starts by selecting the widget under the cursor). If Cmd is pressed too, current selection is kept and will be merged with the new one if possible.
Cmd+Z  Undo
Cmd+Y
Cmd+Shift+Z
 Redo
Backspace  Delete selected widgets
Cmd+C  Copy selected widgets
Cmd+X  Cut selected widgets
Cmd+V  Paste clipboard in selected widget
Cmd+Shift+V  Paste and increment id
Up
Down
Left
Right
 Move selected widgets (1 grid unit, hold Shift for 5 grid units)
Alt+Up
Alt+Down
Alt+Left
Alt+Right
Resize selected widgets (1 grid unit, hold Shift for 5 grid units)
Cmd+A Select current widget's siblings and itself
Cmd+Shift+A Cancel current widget selection
Cmd+Up Select current widget's parent
Cmd+Down Select current widget's first child
Cmd+Right Select current widget's next sibling
Cmd+Left Select current widget's previous sibling