Layout Editor

Welcome to the BetterLyrics Custom Layout Editor! This powerful visual tool allows you to freely design the typography of your lyrics window. Whether adjusting the grid, dragging and dropping components, or fine-tuning properties, you can easily accomplish it all through intuitive interactions.

Canvas and Grid Management

The foundation of the layout is the Grid System. You can think of the entire lyrics window as a table where you can freely divide rows and columns.

Global Settings

In the “Canvas” properties panel of the editor, you can control the base shape of the entire grid:

Row/Column Spacing: Adjust the global Row Spacing and Column Spacing to give components some breathing room.
Canvas Padding: Set the top, bottom, left, and right padding of the canvas individually to control the distance between the content and the window edges.

Quick Grid Actions

Click on the Row Headers (numbers on the left) or Column Headers (numbers on the top) in the central canvas area to bring up the advanced settings menu:

Insert and Delete: Insert new rows/columns before or after the current one, or delete the current row/column directly.
Adjust Size: Supports precisely setting the size of the current row or column, offering three modes:
- Auto: Automatically expands based on the content of the components inside.
- *: Proportionally divides the remaining available space.
- px: Sets a fixed pixel size.

Component Addition and Management

The interface includes a “Component Toolbox” and a “Placed Components” list.

Pending Components: This lists all available UI elements. Simply click and drag a component onto the central canvas grid to place it in the desired location.
Placed Components: This displays a list of all components currently existing on the canvas. Clicking an item in the list will quickly select it on the canvas, which is very useful when components overlap or are obscured.

Component Properties and Adjustments

When you click to select a component on the canvas, it will be highlighted (with a white border and resize handles), and the properties panel will automatically switch to “Component”.

Adjusting Position and Span

Drag to Move: Simply click and drag the selected component to move it to a new grid cell.
Handle Resizing: Drag the resize handles on the right, bottom, or bottom-right corner of the component to quickly change the number of rows and columns it spans.
Exact Values: You can also manually input the Row, Column, Row Span, and Column Span in the properties panel.

Size, Alignment, and Margins

Fixed Size: Toggle the width and height of the component between Auto (adaptive) and px (fixed pixels) and specify values.
Margins: Set the top, bottom, left, and right margins of the component to fine-tune its exact position within the grid cell.
Alignment: Supports horizontal (Left, Center, Right, Stretch) and vertical (Top, Center, Bottom, Stretch) alignment to determine how the component docks within the cell.

Canvas View and History Controls

To facilitate editing complex layouts, the editor provides a range of view and history control features:

Hand Tool: Click the hand icon on the top toolbar to activate. Once activated, you can freely pan the view by dragging the canvas.
Zoom Controls: Use the magnifying glass icons on the top toolbar to adjust the canvas scale, or click “Reset Zoom” to make the canvas automatically fit the current available space.
Minimap Navigation: When the canvas is zoomed in and exceeds the current visible window area, a minimap will automatically hover in the bottom right corner. Drag the highlighted box in the minimap to quickly pan the view across large areas of the canvas.
Undo & Redo: The editor automatically records every step of your modifications, allowing you to undo mistaken actions at any time using keyboard shortcuts.

Keyboard Shortcuts Reference

Mastering keyboard shortcuts can significantly increase your layout building efficiency. Press F1 or Ctrl + / at any time to bring up the shortcut help menu within the editor.

Action	Shortcut
Temporarily Activate Hand Tool	Hold `Spacebar`
Zoom Canvas	`Ctrl` + Mouse Wheel
Horizontal Scroll	`Shift` + Mouse Wheel
Undo	`Ctrl` + `Z`
Redo	`Ctrl` + `Y` or `Ctrl` + `Shift` + `Z`

Component Operations

Action	Shortcut
Select Next Component	`Tab`
Select Previous Component	`Shift` + `Tab`
Focus on Selected Component	`F`
Move Selected Component	Arrow Keys or `W` `A` `S` `D`
Change Component Span (Size)	`Shift` + Arrow Keys or `W` `A` `S` `D`
Delete Selected Component	`Delete` or `Backspace`
Deselect	`Esc`