Inheritance

local Node = require("ui.Node")

---@class Button : ui.Node
---@operator call: Button
local Button = Node + {}

local function nop() end

---@param params table
function Button:new(params)
    self.text = "Default text"
    self.on_click = nop
    self.width = 100
    self.height = 50
    Node.new(self, params)
end

---@param e ui.MouseClickEvent
function Button:onMouseClick(e)
    if e.button == 1 then
        self.on_click()
    end
end

function Button:draw()
    if self.mouse_over then
        love.graphics.setColor(0.3, 0.3, 0.3, 1)
    else
        love.graphics.setColor(0.2, 0.2, 0.2, 1)
    end

    love.graphics.draw("fill", 0, 0, self.width, self.height)
    love.graphics.setColor(1, 1, 1, 1)
    love.graphics.print(
        self.text, 
        self.width / 2, 
        self.height / 2, 
        0, 
        1, 
        1, 
        self.width / 2, 
        self.height / 2
    )
end

return Button

Anchors and origins

local Node = require("ui.Node")
local Rectangle = require("ui.Rectangle")

local root = Node({
	width = love.graphics.getWidth(),
	height = love.graphics.getHeight()
})

local container = root:add(Node({
	width_mode = Node.SizeMode.Fit,
	height_mode = Node.SizeMode.Fit,
	anchor = Node.Pivot.Center,
	origin = Node.Pivot.Center,
}))

container:add(Rectangle({
	width = 100,
	height = 100,
	color = { 1, 0, 1, 1 }
}))

container:add(Rectangle({
	x = 100,
	width = 100,
	height = 100,
	color = { 0, 1, 1, 1 }
}))

container:add(Rectangle({
	x = 200,
	width = 100,
	height = 100,
	color = { 1, 1, 0, 1 }
}))

Sugar

local Node = require("ui.Node")
local Rectangle = require("ui.Rectangle")

-- For the sugar in params
Node.TransformParams = require("ui.desugarizer")

-- Version with sugar:
local root = Node({
    size = { "fit", "fit" },
    arrange = "flow_h",
    padding = { 8, 8, 8, 8 }
})

-- And this is the version without it:
local root = Node({
    width_mode = Node.SizeMode.Fit,
    height_mode = Node.SizeMode.Fit,
    arrange = Node.Arrange.FlowH,
    padding_left = 8,
    padding_right = 8,
    padding_top = 8,
    padding_bottom = 8,
})

Layout

local Node = require("ui.Node")
local Rectangle = require("ui.Rectangle")

Node.TransformParams = require("ui.desugarizer")

local root = Node({
    size = { 800, "fit" },
    arrange = "flow_h",
    padding = { 8, 8, 8, 8 },
    child_gap = 8
})

root:add(Rectangle({
    size = { 100, 100 },
}))

root:add(Rectangle({
    size = { "grow", "grow" },
}))

root:add(Rectangle({
    size = { "grow", "grow" },
}))

root:add(Rectangle({
    size = { "grow", "grow" },
}))

root:add(Rectangle({
    size = { 100, 100 },
}))

If you are really lazy

local Node = require("ui.Node")

-- You can override every method when you pass params
-- Overriding new() method won't work
local a = Node({
    x = 100,
    y = 100
    load = function()
        local img = love.graphics.newImage("img.png")
        self.ps = love.graphics.newParticleSystem(img)
    end,
    update = function(dt)
        self.ps:update(dt)
    end,
    draw = function()
        self.ps:draw()
    end
})