fdehau / tui-rs

Build terminal user interfaces and dashboards using Rust
MIT License
10.83k stars 483 forks source link

Is the Documentation for module such as "layout" left empty intentionally? #587

Closed rishadbaniya closed 1 year ago

rishadbaniya commented 2 years ago

I got confused on how the constraint method works on layout::Layout. I was expecting some explanation about layout::Layout struct and its methods. Is the documentation left empty intentionally for developers to figure out themself, or is the library easy to use and it's the problem with me actually for being not so mature in Rust?

liabri commented 2 years ago

Confuses the hell out of me too, like what is a constraint even doing ? If I don't have one I get index out of bounds error, but I dont know how to use them...

rishadbaniya commented 2 years ago

Confuses the hell out of me too, like what is a constraint even doing ? If I don't have one I get index out of bounds error, but I dont know how to use them...

If you figure out what that constraint does, please fire a PR documenting what it does, i wanna know properly

TomSchammo commented 2 years ago

I'm just guessing here trying to figure some of there things out myself, but I assume it kind of works similar to constraint layout in android and I think they have a pretty good documentation.

But again, I have no idea, I've just got it to work for something simple I'm working on. I'm stuck on something else myself, but maybe it helps.

DarrienG commented 2 years ago

Constraint is a way of shaping the size of nodes in a group. For instance, if you have one layout and a number of percentage constraints, you can shape what percentage of the layout each node (say a number of tui::text::Text) objects take up.

In my projects, I use it to size nodes (a number of different text objects) to different sizes and wired up here. Because I can specify constraint, I use different sizes for different screen sizes. So I am able to make resize nodes to take up more or less space.

Play around with Constraint sizes and watch how the size of your layouts change, it should become more apparent then :)

I use constraints and a number features of tui-rs in my terminal typeracer project which may help: https://gitlab.com/ttyperacer/terminal-typeracer

@TomSchammo if you would like an apt analogy, the layouts used by tui-rs are more similar to the good old Linear Layout: https://developer.android.com/guide/topics/ui/layout/linear Layouts are given an orientation (although size is optional in Android Linear Layout) and placed one after another. Layouts can and should be nested in Linear Layout. Constraint Layout is intended to have all View nodes in one flat layout which like Linear Layout, tui's view system is not intended to do.

invokermain commented 2 years ago

I find this so confusing as well, why is it not documented, its non obvious and this library is obvious popular enough (7k stars) to warrant proper documentation no? Am I just too stupid to figure it out?

Also mixing Min and Max (which seems natural to me) seems to be broken, seems to be a long standing issue: https://github.com/fdehau/tui-rs/issues/39. Not sure this was ever fixed?

choikangjae commented 1 year ago

I will leave some explanations for who got so confused like me. Let me show an example first.

    let chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints(
            [
                Constraint::Length(3),
                Constraint::Min(10),
                Constraint::Length(3),
            ]
            .as_ref(),
        )
        .split(size);
  1. .direction(Direction::Vertical) meaning that we will use the frame in vertical-wise, so horizontally long rectangles will be displayed.
  2. .constraints([...]) is showing that how many rectangles will be used in this specific frame. So in this example, you can see that I will use 3 rectangles since I have 3 Constraint, and the first one will have the length of 3, the second one is will have the length of 10 in minimum (so you can guess it might be the main frame) and so on.
  3. .split(size), you can think it is like .build() in Builder pattern, it will split the frame by your Layout and returns a vector having chunk. Now you got 1 vector chunks which has 3 elements in it in this example. You don't need to use any of them, but if you try to use 4th or more element, you will get index out of bound error.

I guess the naming of Constraint got me so confused and I hope it helps anyone.