18 releases (9 breaking)

0.10.1 Oct 20, 2024
0.9.0 Sep 29, 2024

#135 in GUI

Download history 107/week @ 2024-09-01 869/week @ 2024-09-08 709/week @ 2024-09-15 358/week @ 2024-09-22 207/week @ 2024-09-29 10/week @ 2024-10-06 207/week @ 2024-10-13 183/week @ 2024-10-20 5/week @ 2024-10-27

409 downloads per month

MIT license

120KB
3K SLoC

Backer

rust crates.io downloads license

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 & would be most useful along with a GUI library that can do GUI things (like macroquad or egui).

Features ✨

  • Declarative API: The code should look like the structure it defines
  • Minimal interface: No confusing overloads or magic, cascading effects
  • Intuitive constraints: Backer adheres to & smoothly resolves size constraints with an advanced algorithm
  • Performant: Layout can be comfortably recalculated every frame
  • Easy integration & compatibility: Backer should work with just about any UI library with a bit of glue - so it isn't really fine-tuned for any specific UI solution.

This project intends to be a flexible layout tool & not much else.

Preview

Check out the demo site: a mock page showcasing layout capabilities in a realistic interface. Built with egui!

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

stretched

See some code
    column_spaced(
        10.,
        vec![
            draw_a(ui),
            row_spaced(
                10.,
                vec![
                    draw_b(ui).width(180.).align(Align::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. 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.
  })
}

3. Combine nodes to define & customize your layout

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

4. Draw 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 new! Breaking changes may be relatively frequent as the crate matures.

Contributions are always welcome 🤗

No runtime deps