Packages

Multi-surface application runtime for Elixir. One TEA module renders to terminal, browser (LiveView), SSH, and MCP (agents). 30+ widgets, flexbox + CSS grid, AI agent runtime, distributed swarm with CRDTs, time-travel debugging, session recording, sandboxed REPL, and agentic commerce.

Current section

Files

Jump to
raxol lib raxol core renderer view layout flex.ex
Raw

lib/raxol/core/renderer/view/layout/flex.ex

defmodule Raxol.Core.Renderer.View.Layout.Flex do
@moduledoc """
Handles flex layout functionality for the Raxol view system.
Provides row and column layouts with various alignment and justification options.
"""
@doc """
Creates a row layout container that arranges its children horizontally.
## Options
* `:children` - List of child views to arrange horizontally
* `:align` - Alignment of children (:start, :center, :end)
* `:justify` - Justification of children (:start, :center, :end, :space_between)
* `:gap` - Space between children (integer)
## Examples
Flex.row(children: [view1, view2])
Flex.row(align: :center, justify: :space_between, children: [view1, view2])
"""
def row(opts \\ []) do
children = Keyword.get(opts, :children, [])
align = Keyword.get(opts, :align, :start)
justify = Keyword.get(opts, :justify, :start)
gap = Keyword.get(opts, :gap, 0)
style = Keyword.get(opts, :style, [])
%{
type: :flex,
direction: :row,
align: align,
justify: justify,
gap: gap,
style: style,
children: children
}
end
@doc """
Creates a flex container that arranges its children in the specified direction.
## Options
* `:direction` - Direction of flex layout (:row or :column)
* `:children` - List of child views
* `:align` - Alignment of children (:start, :center, :end)
* `:justify` - Justification of children (:start, :center, :end, :space_between)
* `:gap` - Space between children (integer)
* `:wrap` - Whether to wrap children (boolean)
## Examples
Flex.container(direction: :row, children: [view1, view2])
Flex.container(direction: :column, align: :center, children: [view1, view2])
"""
def container(opts) do
direction = Keyword.get(opts, :direction, :row)
# Get raw children from opts
raw_children = Keyword.get(opts, :children)
processed_children =
cond do
is_list(raw_children) -> raw_children
# Default to empty list if nil
is_nil(raw_children) -> []
# Wrap single child in a list
true -> [raw_children]
end
align = Keyword.get(opts, :align, :start)
justify = Keyword.get(opts, :justify, :start)
gap = Keyword.get(opts, :gap, 0)
wrap = Keyword.get(opts, :wrap, false)
style = Keyword.get(opts, :style, [])
%{
type: :flex,
direction: direction,
align: align,
justify: justify,
gap: gap,
wrap: wrap,
style: style,
# Use the processed list of children
children: processed_children
}
end
@doc """
Creates a column layout container that arranges its children vertically.
## Options
* `:children` - List of child views to arrange vertically
* `:align` - Alignment of children (:start, :center, :end)
* `:justify` - Justification of children (:start, :center, :end, :space_between)
* `:gap` - Space between children (integer)
## Examples
Flex.column(children: [view1, view2])
Flex.column(align: :center, justify: :space_between, children: [view1, view2])
"""
def column(opts \\ []) do
children = Keyword.get(opts, :children, [])
align = Keyword.get(opts, :align, :start)
justify = Keyword.get(opts, :justify, :start)
gap = Keyword.get(opts, :gap, 0)
style = Keyword.get(opts, :style, [])
%{
type: :flex,
direction: :column,
align: align,
justify: justify,
gap: gap,
style: style,
children: children
}
end
@doc """
Calculates the layout of flex children based on container size and options.
"""
def calculate_layout(_container, _size) do
# Implementation of flex layout algorithm
# This would handle:
# - Direction (row/column)
# - Alignment
# - Justification
# - Gap spacing
# - Wrapping
# Returns a list of positioned children
[]
end
end