Page Editor

Edit Mode

Press Ctrl+E, or click the Edit Mode button on the small runtime toolbar (Ctrl+B), to start editing the page. The page moves below a toolbar at the top of the window, a horizontal and a vertical ruler appear along the page, and a status bar appears at the bottom. Click Exit edit mode in the toolbar, or press Ctrl+E again, to return to runtime.

The small runtime toolbar can be dragged to another place on the screen, and the arrow at its bottom minimizes it. Its position and its minimized state are both kept per browser, so it stays where you put it and stays minimized when you open another page. Press Ctrl+B to bring it back.

Everything described here is editing chrome only. It is shown around the page while you edit and is never part of the page that is saved, so operators see the page exactly as before.

Toolbar

The toolbar groups the editing actions from left to right. Buttons that need a selection are dimmed until enough objects are selected. Every button shows its name and shortcut as a tooltip.

Selection

A selected object shows a thin solid outline with eight resize handles and a size chip below it. The size chip shows the width (W), the height (H) and the layer (L, the z-index) of the object. W and H use the same labels as the Selection item in the status bar. When the layer has a name or a colour in the Z-Index Layers Viewer, the chip also shows that name and a dot in that colour. The outline is drawn on top of the page and never changes the object itself, so an object keeps its own border and position while it is selected. While the object is dragged, the chip also shows its X and Y position. With several objects selected, the chip shows the number of objects and the size of the whole selection, followed by the layer when all selected objects are on the same layer. A selected Polyline shows its points and a highlighted stroke instead of the outline, with the same size chip. A click on the size chip keeps the selection and moves the cursor out of the text of a Label or Input, so Del deletes the object and the arrow keys move it.

Moving the mouse over an object shows a lighter outline around the object a click would select. Inside a group this is the group, exactly as a click selects it; hold Alt to see and select the object inside, or Shift for the first group inside.

• Ctrl+Click adds an object to the selection, Shift+Click on a selected object removes it.
• With more than one object selected, each object keeps its outline and a dashed box shows the bounds of the whole selection with the number of objects and the total size.
• Dragging on an empty part of the page draws a selection rectangle; every object it touches is selected.
• Double-click an object to open its properties panel. Double-click inside a selected Group or Container to step into it: the object under the pointer is selected on its own. Esc clears the whole selection, also when the selected object sits inside a group. With nothing selected it closes the properties panel. It also cancels an Insert that is waiting for a click on the page.
• Ctrl+A selects every object on the page level.
• Hold Alt and move the pointer over another object to measure: the distance between the selection and that object is drawn on each side they do not overlap on, in page pixels. When one object lies inside the other, the four insets are shown.

Properties Panel

The properties panel is docked on the right and follows the selection. A single click on an object shows its properties, a selection of several objects shows the settings they share, and a click on an empty part of the page shows the page properties. The panel stays open while you work; the Properties button in the toolbar hides or shows it, the Close button (X) at the top right of the panel hides it, and the choice is remembered per browser. Double-click and the Properties entry of the context menu show the panel when it is hidden.

The strip at the top of the panel holds Move Object Up and Move Object Down, Move Element To Upper Group and Move Element To Group, and for a group also Move Element In Group Up and Move Element In Group Down. Lock / Unlock, the align actions, Duplicate and Delete are in the toolbar.

Delete and the arrow keys act on the selected objects while the panel is open, unless a field in the panel has the focus, in which case they act on that field. Each change committed in the panel is its own undo step (Ctrl+Z). After a move, resize or align, the Position / Size fields show the new values. The Object Viewer uses the same panel: it opens with the selected objects highlighted and the groups above them expanded, and while it is open, clicks select in the tree instead of switching to properties; close it (the Object Viewer button) to return to the properties of the selection.

A label that is drawn as a button with a chevron (Master, UDT Instance, Library Path, the variable pickers) opens a picker for its field.

Context Menu

A right-click on an object selects it, exactly as a left click would, and opens the context menu at the pointer. A right-click on an empty part of the page clears the selection and opens the page menu. Entries that need a selection are dimmed until enough objects are selected. Shift+right-click opens the properties panel directly, and Ctrl+right-click on a group still opens the Object Viewer.

Rulers and Guides

The rulers show page pixels, with 0 at the top-left corner of the page, so a value on a ruler is the value of the Top and Left fields in the properties panel. The rulers follow zoom and pan, shade the extent of the selection and mark the position of the mouse pointer. Click the square where the rulers meet, or the Rulers button in the toolbar, to hide or show them.

Press on a ruler and drag onto the page to create a guide. Drag a guide back onto its ruler to remove it. Guides are drawn in cyan with their position, they snap objects that are dragged near them, and the Guides button hides or shows them. Guides are stored per page in the browser, so they belong to the workstation and are not saved with the page.

Grid and Snapping

The grid is drawn with a stronger line every five cells. Click the Grid item or the Legend item in the status bar to open the grid settings and the legend of shortcuts. The grid settings hold the cell size, the colour and the Major grid lines checkbox, which shows or hides the stronger line every five cells. These settings are remembered per browser; Major grid lines is checked by default. The Grid button in the toolbar hides or shows the grid without changing the cell size.

While an object is dragged, its position snaps in this order: to a guide, then to the edge or centre of a nearby object in the same group or page (a magenta line shows which one), then to the same spacing two neighbours keep between them (two magenta dimension lines show both gaps, beside the neighbours or centred between them), then to the nearest grid line. Resize handles snap to the nearest grid line as well. Hold Ctrl while dragging to move freely, or switch Snap off in the toolbar or in the status bar.

Status Bar

The status bar at the bottom of the window replaces the floating readouts that used to surround a selected object.

Keyboard

The arrow keys move the selection by one grid cell. The complete list of shortcuts is in the Shortcuts article and in the legend, which the Legend item in the status bar opens.