[LIB] [FIXED] Grid Layout

[mar173]

Why does not it stick together? All sides should be equal. Blue Green has more width than Blue Pink Orange Red.

Where is problem? In my code or otclient?

local cell_count = 0

local Row
local Grid
local Column

Column = SDK_Class()

function Column:__init(args, parent)
    self.rows = {}
    self.type = 1
    cell_count = cell_count + 1
    self.root = SDK_UI:Widget('Panel')
    self.root:Set('root_' .. self.type .. '_' .. cell_count, parent)
    self.root:SetWidth(args.width)
    if args.background_color then
        self.root.Widget:setBackgroundColor(args.background_color)
    end
end

function Column:AddRow(args)
    local row = Row(args, self.root.Widget)
    table.insert(self.rows, row)
    return row
end

Row = SDK_Class()

function Row:__init(args, parent)
    self.columns = {}
    self.type = 2
    cell_count = cell_count + 1
    self.root = SDK_UI:Widget('Panel')
    self.root:Set('root_' .. self.type .. '_' .. cell_count, parent)
    self.root:SetHeight(args.height)
    if args.background_color then
        self.root.Widget:setBackgroundColor(args.background_color)
    end
end

function Row:AddColumn(args)
    local column = Column(args, self.root.Widget)
    table.insert(self.columns, column)
    return column
end

Grid = SDK_Class()

function Grid:__init(grid)
    self.cells = {}
    self.type = 3
    self.grid = grid
    self.root = grid.root
end

function Grid:AddRows(rows)
    local prev = false
    local total = 0
    for i = 1, #rows do
        local args = rows[i]
        local height = self.root:GetHeight()
        if i == #rows then
            args.height = height - total
        else
            args.height = math.floor(args.grid_percent and (height * args.grid_percent) or (height / #rows))
            total = total + args.height
        end
        local cell = self.grid:AddRow(args)
        cell.root:SetAnchors({
            [modules.corelib.AnchorLeft] = modules.corelib.AnchorLeft,
            [modules.corelib.AnchorRight] = modules.corelib.AnchorRight,
            --[modules.corelib.AnchorTop] = modules.corelib.AnchorTop,
            --[modules.corelib.AnchorBottom] = modules.corelib.AnchorBottom
        })
        cell.root:SetAnchorsTop(prev and 'prev' or 'parent', prev and modules.corelib.AnchorBottom or modules.corelib.AnchorTop)
        if args.cells then
            local grid = Grid(cell)
            grid:AddCells(args.cells)
            self.cells[args.id] = grid
        else
            self.cells[args.id] = cell
        end
        prev = true
    end
end

function Grid:AddColumns(columns)
    local prev = false
    local total = 0
    for i = 1, #columns do
        local args = columns[i]
        local width = self.root:GetWidth()
        if i == #columns then
            args.width = width - total
        else
            args.width = math.floor(args.grid_percent and (width * args.grid_percent) or (width / #columns))
            total = total + args.width
        end
        local cell = self.grid:AddColumn(args)
        cell.root:SetAnchors({
            --[modules.corelib.AnchorLeft] = modules.corelib.AnchorLeft,
            --[modules.corelib.AnchorRight] = modules.corelib.AnchorRight,
            [modules.corelib.AnchorTop] = modules.corelib.AnchorTop,
            [modules.corelib.AnchorBottom] = modules.corelib.AnchorBottom
        })
        cell.root:SetAnchorsLeft(prev and 'prev' or 'parent', prev and modules.corelib.AnchorRight or modules.corelib.AnchorLeft)
        if args.cells then
            local grid = Grid(cell)
            grid:AddCells(args.cells)
            self.cells[args.id] = grid
        else
            self.cells[args.id] = cell
        end
        prev = true
    end
end

function Grid:AddCells(cells)
    if self.grid.type == 1 then
        self:AddRows(cells)
    elseif self.grid.type == 2 then
        self:AddColumns(cells)
    end
end

local layoutBota = Grid(Row({
    height = 200,
}, panel))

layoutBota:AddCells({
    {grid_percent = 0.2, id = 'blue', background_color = 'blue'},
    {grid_percent = 0.8, id = 'testGrid', cells = {
        {grid_percent = 0.3, id = 'green', background_color = 'green'},
        {grid_percent = 0.7, id = 'testGrid', cells = {
            {grid_percent = 0.2, id = 'testGrid', cells = {
                {grid_percent = 0.4, id = 'pink', background_color = 'pink'},
                {grid_percent = 0.6, id = 'yellow', background_color = 'yellow'},
            }},
            {grid_percent = 0.3, id = 'orange', background_color = 'orange'},
            {grid_percent = 0.5, id = 'red', background_color = 'red'},
        }},
    }},
})

SDK_UI:Widget

function UI:Widget(type)
    local i = {Type = type}
    function i:Set(id, parent)
        local widget
        if parent == nil then
            parent = g_ui.getRootWidget()
            widget = parent:recursiveGetChildById(id)
        else
            widget = parent:getChildById(id)
        end
        if widget == nil then
            widget = g_ui.createWidget(self.Type, parent)
            widget:setId(id)
        end
        self.Id = id
        self.Widget = widget
        self.Parent = parent
    end
    function i:Show()
        self.Widget:show()
    end
    function i:Raise()
        self.Widget:raise()
    end
    function i:Enable()
        self.Widget:enable()
    end
    function i:SetAnchors(anchors)
        for anchorFrom, anchorTo in pairs(anchors) do
            self.Widget:addAnchor(anchorFrom, 'parent', anchorTo)
        end
    end
    function i:SetAnchorsLeft(parent, anchor)
        self.Widget:addAnchor(modules.corelib.AnchorLeft, parent, anchor)
    end
    function i:SetAnchorsRight(parent, anchor)
        self.Widget:addAnchor(modules.corelib.AnchorRight, parent, anchor)
    end
    function i:SetAnchorsTop(parent, anchor)
        self.Widget:addAnchor(modules.corelib.AnchorTop, parent, anchor)
    end
    function i:SetAnchorsBottom(parent, anchor)
        self.Widget:addAnchor(modules.corelib.AnchorBottom, parent, anchor)
    end
    function i:Resize(width, height)
        self.Widget:resize(width, height)
    end
    function i:SetWidth(width)
        self.Widget:setWidth(width)
    end
    function i:SetHeight(height)
        self.Widget:setHeight(height)
    end
    function i:GetWidth()
        return self.Widget:getWidth()
    end
    function i:GetHeight()
        return self.Widget:getHeight()
    end
    function i:SetMarginTop(margin)
        self.Widget:setMarginTop(margin)
    end
    function i:SetMarginRight(margin)
        self.Widget:setMarginRight(margin)
    end
    function i:SetMarginBottom(margin)
        self.Widget:setMarginBottom(margin)
    end
    function i:SetMarginLeft(margin)
        self.Widget:setMarginLeft(margin)
    end
    return i
end

 

[mar173]

fixed, improved code

local Grid
local Cell

local cell_count = 0

local AnchorTop = modules.corelib.AnchorTop
local AnchorLeft = modules.corelib.AnchorLeft
local AnchorRight = modules.corelib.AnchorRight
local AnchorBottom = modules.corelib.AnchorBottom

Cell = SDK_Class()

function Cell:__init(args, parent)
    self.cells = {}
    self.type = args.type
    cell_count = cell_count + 1
    self.id = args.id
    self.widget_id = 'root_' .. cell_count
    self.sdk_widget = SDK_UI:Widget('Panel')
    self.sdk_widget:Set(self.widget_id, parent)
    if args.type == 'column' then
        self.sdk_widget:SetWidth(args.size)
    elseif args.type == 'row' then
        self.sdk_widget:SetHeight(args.size)
    end
    self.widget = self.sdk_widget.Widget
    if args.background_color then
        self.widget:setBackgroundColor(args.background_color)
    end
end

function Cell:Add(args)
    local cell = Cell(args, self.widget)
    table.insert(self.cells, cell)
    return cell
end

Grid = SDK_Class()

function Grid:__init(cell)
    self.cells = {}
    self.cell = cell
    self.type = cell.type
    self.widget = cell.widget
    self.sdk_widget = cell.sdk_widget
end

function Grid:AddCells(cells)
    local prev = false
    local total = 0
    local isRow = self.type == 'column'
    for i = 1, #cells do
        local args = cells[i]
        local size = isRow and self.sdk_widget:GetHeight() or self.sdk_widget:GetWidth()
        if i == #cells then
            args.size = size - total + (--[[:::FIX:::]]isRow and 1 or 2--[[:::FIX:::]])
        else
            args.size = math.floor(args.grid_percent and (size * args.grid_percent) or (size / #cells))
            total = total + args.size
        end
        args.type = isRow and 'row' or 'column'
        local cell = self.cell:Add(args)
        if isRow then
            cell.sdk_widget:SetAnchors({
                [AnchorLeft] = AnchorLeft,
                [AnchorRight] = AnchorRight,
            })
            cell.sdk_widget:SetAnchorsTop(prev and AnchorBottom or AnchorTop, prev and 'prev' or 'parent')
        else
            cell.sdk_widget:SetAnchors({
                [AnchorTop] = AnchorTop,
                [AnchorBottom] = AnchorBottom
            })
            cell.sdk_widget:SetAnchorsLeft(prev and AnchorRight or AnchorLeft, prev and 'prev' or 'parent')
        end
        if args.cells then
            local grid = Grid(cell)
            grid:AddCells(args.cells)
            self.cells[args.id] = grid
        else
            self.cells[args.id] = cell
        end
        prev = true
    end
end

function Grid:GetCellByPath(path)
    path = SDK_Split(path, '.')
    local cell = self.cells[path[1]]
    for i = 2, #path do
        cell = cell.cells[path[i]]
    end
    return cell
end

local grid = Grid(Cell({
    type = 'row',
    size = 200,
}, panel))

grid:AddCells({
    {grid_percent = 0.2, id = 'blue', background_color = 'blue'},
    {grid_percent = 0.8, id = 'a', cells = {
        {grid_percent = 0.3, id = 'green', background_color = 'green'},
        {grid_percent = 0.7, id = 'b', cells = {
            {grid_percent = 0.2, id = 'c', cells = {
                {grid_percent = 0.4, id = 'pink', background_color = 'pink'},
                {grid_percent = 0.6, id = 'yellow', background_color = 'yellow'},
            }},
            {grid_percent = 0.3, id = 'orange', background_color = 'orange'},
            {grid_percent = 0.5, id = 'red', background_color = 'red'},
        }},
    }},
})

print(grid:GetCellByPath('blue').id)
print(grid:GetCellByPath('a.green').id)
print(grid:GetCellByPath('a.b.c.pink').id)
print(grid:GetCellByPath('a.b.c.yellow').id)
print(grid:GetCellByPath('a.b.orange').id)
print(grid:GetCellByPath('a.b.red').id)