Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid Layout: Index out of bounds #115

Open
AnotherCoolDude opened this issue Jun 8, 2022 · 2 comments
Open

Grid Layout: Index out of bounds #115

AnotherCoolDude opened this issue Jun 8, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@AnotherCoolDude
Copy link

I try to display 15 Buttons as a grid. The layout works as column or row, but as soon as I change the layout to grid, the app crashes.
My code looks like this:

     let items_ui = Style {
        layout_type: StyleProp::Value(LayoutType::Grid), // LayoutType::Column works fine
        ..ui_props.clone().styles.unwrap_or_default()
    };

    rsx! {
        <Element styles={Some(items_ui)}>
        {VecTracker::from(handles.iter().map(|(_, h)| {
            constructor! {
                <Item event_type=
                {UIEventType::None}
                handle={Some(h.clone())} />
            }
        }))}
        </Element>
    }

The error I receive is this:

thread 'main' panicked at 'index out of bounds: the len is 2 but the index is 2', C:\Users\Admin.cargo\git\checkouts\morphorm-b1c9411b3870fca5\1243152\src\layout.rs:1374:37

the code at the described position in layout.rs is this:

let col_start = 2 * node.col_index(store).unwrap_or_default() + 1;
let col_span = 2 * node.col_span(store).unwrap_or(1) - 1;
let col_end = col_start + col_span;

let new_posx = col_widths[col_start].0;
let new_width = col_widths[col_end].0 - new_posx; // this is where the error occurs

let new_posy = row_heights[row_start].0;
let new_height = row_heights[row_end].0 - new_posy;

This looks like a bug to me, but maybe I don't fully understand the layout mechanism.
Any Idea on how to fix the error?

@StarArawn
Copy link
Owner

This looks like code inside of the layout library we use called morphorm. We might be able to update the dependency to fix.

@StarArawn StarArawn added the bug Something isn't working label Jun 12, 2022
@geom3trik
Copy link

When using the grid layout type you need to define your rows and columns for the parent and then each child needs a row_index, row_span, col_index, and col_span. The spans default to 1 if you don't specify them but you do need to specify the indices.

Looking at the Style struct in kayakui I can't see these grid properties so it's possible they're not supported. In case I am wrong though it works something like this (pseudocode):

// Properties on parent
layout_type(LayoutType::Grid);
grid_rows(vec[Stretch(1.0), Stretch(1.0), Stretch(1.0)]);  // Grid will have 3 stretch rows
grid_cols(vec[Pixels(300.0), Stretch(1.0), Stretch(1.0)]); // Grid will have one fixed column and 2 stretch columns

// Properties on children
col_index(0);
col_span(1);
row_index(0);
row_span(2);
^ child will be positioned in the first grid cell (top-left), span one column and 2 rows

The bug here is that the layout fails when these properties aren't set. Probably the defaults should be changed so that the layout doesn't fail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants