Layout Editor

Welcome to the BetterLyrics Custom Layout Editor! This powerful visual tool allows you to design your lyrics window layout with total freedom. Whether you are adjusting grids, dragging components, or fine-tuning properties, everything can be achieved through intuitive interaction.

Canvas & Grid Management

The foundation of your layout is the Grid System. Think of the entire lyrics window as a table where you can freely define rows and columns.

Global Settings

In the “Canvas Settings” area on the left, you can control the base structure of the grid:

Add/Remove Rows & Columns: Use the top buttons to quickly append or remove entire rows/columns at the end of the grid.
Gap Settings: Adjust global row and column spacing to give your components some “breathing room.”
Canvas Padding: Set the top, bottom, left, and right padding to control the distance between the content and the window edges.

Click or right-click on the Row Headers (numbers on the left) or Column Headers (numbers at the top) in the central canvas to bring up the advanced menu:

Insert: Insert a new row/column before or after the current one.
Delete: Remove the selected row/column directly.
Toggle Sizing Mode: Click the star icon to switch between “Auto-fit” and “Proportional” sizing.

Adding Components & Layer Management

The left interface contains your “Component Toolbox” and “Layer List.”

Available Components: This section lists all usable UI elements. Simply click and drag a component into a grid cell on the canvas to place it.
Placed Components: This displays all components currently on the canvas in a list format. Clicking an item here allows you to quickly select it on the canvas—ideal for when components are overlapping or hidden.

Component Properties & Adjustments

When you click to select a component on the canvas, it will be highlighted with a blue border and adjustment handles. The “Property Panel” on the right will then become active.

Adjusting Position & Size

Drag to Move: Click and hold the selected component to move it to a different grid cell.
Resize Handles: Drag the handles on the right, bottom, or bottom-right corner to change how many rows or columns the component spans.
Manual Precision: You can also manually input the Start Row, Start Column, Row Span, and Column Span in the right property panel.

Alignment & Margins

Margins: Set the top, bottom, left, and right margins in the property panel to fine-tune the component’s position within its cell.
Alignment: Supports horizontal (Left, Center, Right, Stretch) and vertical (Top, Center, Bottom, Stretch) alignment to determine how the component sits within the grid area.

Canvas View Controls

To help you manage complex layouts, the top toolbar provides several view control features:

Hand Tool: Click the hand icon to activate. Once active, drag the canvas to pan your view freely.
Zoom In / Out: Use the magnifying glass icons to adjust the canvas scale, or click “Reset Zoom” to automatically fit the canvas to the available space.

Keyboard Shortcuts Quick Reference

Using shortcuts can significantly speed up your workflow. You can also press F1 or Ctrl + / within the editor to call up this help menu.

Action	Shortcut
Temporarily Activate Hand Tool	Long press `Space`
Zoom Canvas	`Ctrl` + Mouse Wheel
Horizontal Scroll	`Shift` + Mouse Wheel

Component Operations

Action	Shortcut
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`

Tip: All modifications are previewed in real-time. Feel free to drag, drop, and adjust until you achieve the perfect look!