Reactive System

The reactive system in Basalt allows you to create dynamic property values using expressions. These expressions automatically update when related values change.

Basic Usage

local basalt = require("basalt")

-- Create a simple label and center it horizontally
local main = basalt.getMainFrame()
    :addLabel()
    :setText("Hello World")
    :setX("{parent.width / 2 - self.width / 2}")  -- Centers the label horizontally

-- Create a progress bar that takes 80% of parent width
main:addProgressbar()
    :setWidth("{parent.width * 0.8}")
    :setX("{parent.width * 0.1}")  -- 10% margin on both sides

Available Variables

In reactive expressions, you have access to:

• self - The current element
• parent - The parent element
• elementName - A given name of a element
• Any property of these elements (width, height, value, text, etc.)

Common Use Cases

Responsive Layout

local frame = basalt.getMainFrame()
    :addFrame()
    :setSize("{parent.width * 0.5}", "{parent.height * 0.5}")  -- Takes half of parent size
    :setPosition("{parent.width / 2 - self.width / 2}",        -- Centers the frame
                 "{parent.height / 2 - self.height / 2}")

Dynamic Sizing

local label = frame:addLabel()
    :setText("Dynamic width based on text")
    :setWidth("{#self.text}")  -- Width equals text length

Linked Properties

local slider = frame:addSlider("mySlider")
    :setPosition(2, 2)
    :setSize(10, 1)

local progress = frame:addProgressBar()
    :setPosition(2, 4)
    :setSize(10, 1)
    :setProgress("{mySlider.value}")  -- Progress syncs with slider value

Syntax

• Use curly braces {} to define a reactive expression
• Basic math operators are supported (+, -, *, /, %)
• Access properties using dot notation (element.property)
• Can use basic functions and comparisons

Best Practices

1. Keep expressions simple and readable
2. Use meaningful variable names in complex calculations
3. Test expressions with different parent sizes
4. Consider edge cases (minimum/maximum sizes)