Backer

A library for straight-forward UI layout.

Dependency free & framework-agnostic. Backer can be used in an index-based layout approach or with inline drawing code.

This library only implements layout & could be integrated with a range of UI crates.

Features

• Declarative API
• Minimal interface
• Single pass layout

Preview

Backer relies on simple rules that can compose to create complex, flexible layouts.

    // #1
    row_spaced(
        10.,
        vec![
            // Custom draw nodes
            draw_a(ui),
            draw_b(ui).size(Size::new().height(150.).width(50.).y_align(YAlign::Bottom)),
            draw_c(ui),
        ],
    )
    .pad(10.)
    // #2
    column_spaced(
        10.,
        vec![
            draw_a(ui),
            draw_b(ui).size(
                Size::new()
                    .height(100.)
                    .width(150.)
                    .x_align(XAlign::Leading),
            ),
            draw_c(ui),
        ],
    )
    .pad(10.)
    // #3 & #4
    column_spaced(
        10.,
        vec![
            draw_a(ui),
            row_spaced(
                10.,
                vec![
                    draw_b(ui).size(Size::new().width(180.).x_align(XAlign::Leading)),
                    column_spaced(10., vec![draw_a(ui), draw_b(ui), draw_c(ui)]),
                ],
            ),
            draw_c(ui),
        ],
    )
    .pad(10.)

Quick Start

1. Create a Layout struct with your layout function.

use backer::layout::Layout;
use backer::layout::Node;

let layout = Layout::new(my_layout_fn);

fn my_layout_fn(state: &mut MyState) -> Node<MyState> { todo!() }

2. Combine nodes to define your layout

fn my_layout_fn(state: &mut MyState) -> Node<MyState> {
  row(vec![
    ...
  ])
}

3. Implement a draw node

For reuse, you can construct your drawable in a function

fn my_drawable(state: &mut MyState) -> Node<MyState> {
  draw(move |area: Area, state: &mut MyState| {
    // The `area` parameter is the space alotted for your view after layout is calculated
    // The `state` parameter is *your* mutable state that you pass when you call layout.
    // This closure should draw UI based on the alotted area or update state so that drawing can be performed later.
  })
}

4. Run your layout

// UI libraries generally will expose methods to get the available screen size
// In a real implementation this should use the real screen size!
let available_area = Area {
        x: todo!(),
        y: todo!(),
        width: todo!(),
        height: todo!().
    };
let mut my_state = MyState::new();

let layout = Layout::new(my_layout_fn);
// Perform layout & draw all of your drawable nodes.
layout.draw(available_area, &mut my_state);

Status

The crate is currently usable but is very new! Currently lacks testing & will likely publish breaking changes often.

Contributions are always welcome 🤗