Skip to content

dobrite/flexbox-rs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What is this?

Some sort of minimal implementation of flexbox in Rust.

What is this not?

Spec compliant flexbox implementation suitable for anything.

How does it work?

Given a tree:

    let root = Root::new(Style::new().with_width(width).with_height(height).with_bg(RGB::new(0, 0, 0)), vec![
        Renderable::View(View::new(Style::new().with_bg(RGB::new(0, 0, 0)).with_flex_direction(FlexDirection::Column), vec![
            Renderable::View(View::new(Style::new().with_width(50).with_height(100).with_bg(RGB::new(255, 0, 0)).with_fg(RGB::new(0, 0, 0)), vec![])),
            Renderable::View(View::new(Style::new().with_width(50).with_height(100).with_bg(RGB::new(0, 255, 0)).with_fg(RGB::new(0, 0, 0)), vec![
                Renderable::View(View::new(Style::new().with_width(15).with_height(50).with_bg(RGB::new(0, 125, 125)).with_fg(RGB::new(0, 0, 0)), vec![])),
                Renderable::View(View::new(Style::new().with_width(15).with_height(50).with_bg(RGB::new(125, 125, 0)).with_fg(RGB::new(0, 0, 0)), vec![])),
            ])),
        ]))
    ]);

It outputs a Vec<Command>

    Command { bg: RGB { r: 0, g: 0, b: 0 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 0, top: 0, width: 800, height: 600 } }
    Command { bg: RGB { r: 0, g: 0, b: 0 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 0, top: 0, width: 0, height: 600 } }
    Command { bg: RGB { r: 255, g: 0, b: 0 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 0, top: 0, width: 50, height: 100 } }
    Command { bg: RGB { r: 0, g: 255, b: 0 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 0, top: 100, width: 50, height: 100 } }
    Command { bg: RGB { r: 0, g: 125, b: 125 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 0, top: 100, width: 15, height: 50 } }
    Command { bg: RGB { r: 125, g: 125, b: 0 }, fg: RGB { r: 0, g: 0, b: 0 }, rect: Rect { left: 15, top: 100, width: 15, height: 50 } }

Suitable for input into a user-supplied Renderer implementing the Render trait. A simple SDL2 renderer is in the backend folder and used in the sdl2 example.

flexbox-rs sdl2 example

Running the example

NOTE: you'll need SDL2 and SDL2_ttf installed. Installation is platform specific. Please consult the docs.

$ cargo run --example sdl2 --features backend

Running the tests

NOTE: you'll need SDL2 and SDL2_ttf installed. Installation is platform specific. Please consult the docs.

$ cargo test --features backend

Disclaimer

The game loop and input boilerplate was taken from ArcadeRS by jadpole. Much <3 for such a great series.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages