Incorrect row ordering in UI when using FlexColumn

[Kyarigwo]

Bevy version

0.4.0

Operating system & version

Ubuntu 20.04

What you did

When using the UI code, I found that the column flex direction appeared to give the opposite behaviour to what I expected (like ColumnReverse) and ColumnReverse appears to work like I would expect Column to do. This is based on my understanding of how the CSS flex box works.

The following is a small example of the code that appears to have the issue:

use bevy::prelude::*;

fn main() {
    App::build()
        .add_plugins(DefaultPlugins)
        .add_startup_system(startup.system())
        .run();
}

fn startup(commands: &mut Commands, asset_server: Res<AssetServer>) {
    let font: Handle<Font> = asset_server.load("FiraMono-Medium.ttf");

    commands
        .spawn(CameraUiBundle::default())
        .spawn(NodeBundle {
            style: Style {
                flex_direction: FlexDirection::Column,
                ..Default::default()
            },
            ..Default::default()
        })
        .with_children(|parent| {
            spawn_text(parent, "first", font.clone());
            spawn_text(parent, "second", font.clone());
        });
}

fn spawn_text(parent: &mut ChildBuilder, str: &str, font: Handle<Font>) {
    parent.spawn(TextBundle {
        text: Text {
            value: str.to_owned(),
            font: font.clone(),
            style: TextStyle {
                font_size: 30.0,
                color: Color::BLACK,
                ..Default::default()
            },
            ..Default::default()
        },
        ..Default::default()
    });
}

What you expected to happen

I expected the text to be arranged in a column, with first above second. Like:

What actually happened

The order of the rows was reversed, with second above first. Below is a screen shot.

Additional information

I'm not sure if this is an issue with my understanding of my code, Bevy, or the upstream flex implementation. Perhaps this is only occurring on my machine?

Using Flex column reverse:

style: Style {
                flex_direction: FlexDirection::ColumnReverse,
                ..Default::default()
            },

gives:

[TheRawMeatball]

I believe this is because in bevy the origin is the bottom left corner, and y increases as you go up.

[Kyarigwo]

That is probably what is happening, but I wonder if this is the best behaviour?

I do agree that the bottom left corner is the correct place for the origin, and of course the co-ordinates of the UI should be the same as for the 2d camera, etc. On the other hand, should the flex behaviour behave like the CSS flex? I (obviously) thought that it would, but if not should this be documented? (of course I understand that documentation is not the priority now, but it did confuse me a bit).

[callym]

I also had this problem with expecting it to work like CSS - didn't even think of coordinates starting bottom-left when going through my code to try and find the issue.

[djeedai]

There is actually an underlying bug, that may or may not be hit. I believe from experimenting that it depends how children are inserted. If using with_children() then the bug doesn't trigger, but directly adding the Parent component triggers the bug. The bug itself is that the children order is not guaranteed. So yes, in the original example here with with_children() the issue was that Bevy uses a reversed vertical direction so for top-to-bottom ordering one should use FlexDirection::ColumnReverse. But in addition of that, one can use FlexDirection::ColumnReverse and still get random row ordering if inserting some children by adding the Parent component manually. And in that case, there's no way to control the order, and it makes the UI unusable. The only workaround seem to be somehow to insert ALL children with with_children(), which somehow seems to be the only way that gives (for now, on 0.6) reliable ordering.

EDIT: Logged that other bug as #4397 to separate from the doc-only one here.

[mockersf]

order has been reversed in #6000