The Layout Canvas is the visual workspace where all elements of a Layout are displayed. It provides a direct, graphical representation of the hierarchy defined in the Layers Tree and the properties configured in the Property Editor.

Any changes made in either the Layers Tree or Property Editor will be immediately reflected in the Layout Canvas. This is where you can visually select, move, rotate, and resize Layers.

Canvas Sections #

The canvas is split up into two sections, the “View space” and the “Empty space”.

Sections Image Reference #

The following image displays both sections, with a red “X” denoting the Empty space and the Selection Visual denoting the View space:

View Space #

This area is defined by the width and height of the Layout in its Layout Properties.

All Layers must be placed within this space in order to be visible, and will be clipped (not visible) outside of the area.

Empty Space #

No Layers are visible in this area.

This space denotes the area in which the View space is not.

Selecting Layers #

Click on any visible Layer in the Layout Canvas to select it.

• While selected, a Layer can be moved or resized using the mouse.

Clicking the Empty space within the Layout Canvas panel will deselect the current Layer and re-select the Layout file itself.

When a Layer is selected, any descendant Layers (children or grandchildren) become un-selectable in the Layout Canvas.

• This prevents accidentally selecting nested elements while moving or resizing a parent Layer.

Layer selection has a shared behavior and visual with the Layers Tree, where the selected Layer will be highlighted in both the Layers Tree and Layout Canvas.

Selection Visual #

When a Layer is selected, it will have an rectangular outline around its area. The outline will be rectangular no matter what the dimensions or shape of the Layer are.

Selection Handles #

1. Triangle Handle
   • This handle is used to rotate the Layer.
   • The default for this handle is 0° rotation, pointing straight up from the Layer.
2. Circle Handle
   • These are present at each corner of the Layer when it is selected.
   • Drag diagonally to resize in both directions at once.
   • Hold the Shift key while dragging to lock the Layer’s aspect ratio. The height and width will scale proportionally based on the ratio at the moment Shift was pressed.
     • This is useful for keeping shapes or images square or for scaling uniformly without distortion.
3. Rectangle Handle
   • Found in the middle of each side of the Layer.
   • Hold the Shift key while dragging to maintain the Layer’s current proportions. The opposite dimension will automatically adjust to keep the same aspect ratio.
     • For example, dragging a side handle outward while holding Shift will expand both the width and height in sync.

Adding Layers #

Any tool in the Tool Select Toolbar, other than the Select Layer tool, can be used to create new Layers.

With a tool selected, click anywhere in either the Empty or View space and drag your mouse. There will be an outline designating the area that the new Layer will encompass.

Moving and Resizing Layers #

A Layer must be selected before it can be moved or resized in the Layout Canvas.

Clicking on the body of a Layer and dragging the mouse will move the Layer and all of its children.

The handles of a Layer can be used to adjust its size.

Zooming and Panning #

Zoom:

• Hold Ctrl on your keyboard and use the scroll wheel on your mouse to zoom in or out.
• Zoom level can also be adjusted via the Layout Properties.

Pan:

• Use the horizontal and vertical scrollbars along the bottom and right sides of the Layout Canvas panel to navigate across the workspace.

Placement & Alignment #

Layers with no parent or that are a part of a Group Layer can be freely moved in the Layout Canvas.

• NOTE: No snapping is applied in the Layout Canvas. Any alignment constraints should be managed through each Layer’s Alignment, Width / Height, and XY position properties in the Property Editor.

Layers that are children of a Stack Layer or Grid Layer can constraints on where they are allowed to be move, but can otherwise be moved around the space of their parent Layer.

Layers will be clipped (not visible) outside of:

1. The Layout’s width and height boundaries, as defined in the Layout Properties.
2. Their parent Layer’s bounds, if they are children of another Layer.