📏 Line

The Line widget is a lightweight vector component used to draw paths, separators, or connections between other UI elements. Unlike a Container with a border, the Line is defined by a set of coordinates, allowing for diagonal and multi-segment paths.

---

⚙️ Properties (Props)

The Line configuration is defined by the LineWidget interface. It is unique because its shape is determined by an array of point coordinates rather than a simple width/height box.

Property	Type	Description
Points	Point[]	An array of {x, y} coordinates defining the path of the line.
Line Width	number	The thickness of the line in pixels.
Rounded	boolean	If enabled, the joints and ends of the line are rounded for a smoother look.

---

🛠 Vector Paths

The Line widget renders coordinates relative to its own origin (the widget's X/Y position). This makes it highly flexible for:

• Separators: A simple two-point horizontal or vertical line to divide UI sections.
• Connectors: Drawing paths between active components in a schematic or flow view.
• Custom Shapes: Creating simple open-path polygons without the overhead of a Canvas.

---

🎨 Visual Styles

In the Inspector Panel, you can control the aesthetic of the vector stroke:

• Main Color: Set the HEX color of the line.
• Opacity: Control the transparency for "ghost" lines or background grids.
• Line Dash: (Advanced) If supported by your engine build, you can create dashed or dotted lines for grid overlays.

---

⚡ Runtime API (Lua)

Lines can be updated dynamically to reflect changing data or to provide visual connections in a dynamic UI.

-- Define a new path for a line (e.g., a triangle-like path)
local new_points = {
    {x = 0, y = 0},
    {x = 50, y = 100},
    {x = 100, y = 0}
}
line_path:set_points(new_points)

-- Change the thickness based on a selection state
line_path:set_style_line_width(4)

-- Change the color to indicate a connection error
line_status:set_style_line_color(0xFF0000)

---

PERFORMANCE

Lines are extremely efficient. Since they are rendered using vector math rather than bitmap data, they use almost zero Flash memory compared to image-based separators.

---

🚀 Next Steps

• Canvas — Use this for more complex drawing including fills and circles.
• Chart — Use if you need to plot lines specifically for data visualization.
• Logic and Events — Learn how to move line coordinates in response to user drag events.