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

Clipping issues with layer+reflow+scrolling dropdown #149

Open
msparkles opened this issue Apr 11, 2024 · 6 comments
Open

Clipping issues with layer+reflow+scrolling dropdown #149

msparkles opened this issue Apr 11, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@msparkles
Copy link
Contributor

image

The expected strategy of a layer+reflow+scrolling container should work. If not, there's a bug in one of those components that we gotta look at

@msparkles
Copy link
Contributor Author

image

@LPGhatguy LPGhatguy added the bug Something isn't working label Apr 11, 2024
msparkles added a commit to automancy/yakui that referenced this issue Apr 12, 2024
msparkles added a commit to automancy/yakui that referenced this issue Apr 12, 2024
msparkles added a commit to automancy/yakui that referenced this issue Apr 12, 2024
@msparkles
Copy link
Contributor Author

msparkles commented Apr 12, 2024

reprod:

use yakui::widgets::{Layer, Scrollable};
use yakui::{button, column, reflow, use_state, widgets::Pad, Alignment, Dim2};
use yakui::{constrained, row, Constraints, Vec2};
use yakui_core::Pivot;

pub fn run() {
    let open = use_state(|| false);
    let options = ["Hello", "World", "Foobar", "Foobar", "Foobar", "Foobar"];
    let selected = use_state(|| 0);

    row(|| {
        button("bbbbbbbbbbbbb");

        constrained(Constraints::loose(Vec2::new(f32::INFINITY, 100.0)), || {
            Scrollable::vertical().show(|| {
                column(|| {
                    if button(options[selected.get()]).clicked {
                        open.modify(|x| !x);
                    }

                    if open.get() {
                        Pad::ZERO.show(|| {
                            Layer::new().show(|| {
                                reflow(Alignment::BOTTOM_LEFT, Pivot::TOP_LEFT, Dim2::ZERO, || {
                                    constrained(
                                        Constraints::loose(Vec2::new(f32::INFINITY, 80.0)),
                                        || {
                                            Scrollable::vertical().show(|| {
                                                column(|| {
                                                    let current = selected.get();
                                                    for (i, option) in options.iter().enumerate() {
                                                        if i != current {
                                                            if button(*option).clicked {
                                                                selected.set(i);
                                                                open.set(false);
                                                            }
                                                        }
                                                    }
                                                });
                                            });
                                        },
                                    );
                                });
                            });
                        });
                    }
                });
            });
        });
    });
}

fn main() {
    bootstrap::start(run as fn());
}

@msparkles
Copy link
Contributor Author

simpler version:

pub fn run() {
    let open = use_state(|| false);
    let options = ["Hello", "World", "Foobar", "Foobar", "Foobar", "Foobar"];
    let selected = use_state(|| 0);

    row(|| {
        button("abcde");

        Scrollable::vertical().show(|| {
            reflow(Alignment::BOTTOM_LEFT, Pivot::TOP_LEFT, Dim2::ZERO, || {
                constrained(Constraints::loose(Vec2::new(f32::INFINITY, 80.0)), || {
                    Scrollable::vertical().show(|| {
                        column(|| {
                            let current = selected.get();
                            for (i, option) in options.iter().enumerate() {
                                if i != current {
                                    if button(*option).clicked {
                                        selected.set(i);
                                        open.set(false);
                                    }
                                }
                            }
                        });
                    });
                });
            });
        });
    });
}

fn main() {
    bootstrap::start(run as fn());
}

@msparkles
Copy link
Contributor Author

We figured out the issue.
The current clip rect getting clipped by the previous clip produces bogus result.

Previous: Rect { pos: Vec2(0.0, 0.0), size: Vec2(125.0, 50.0) } Unscaled: Rect { pos: Vec2(0.0, 50.0), size: Vec2(84.0, 0.0) }

Because the clip rects inherently don't intersect correctly (it being on a new layer, reflowed, etc...) this breaks the clipping

@msparkles
Copy link
Contributor Author

@LPGhatguy We're not sure how to fix this, do you have any ideas?

msparkles added a commit to automancy/yakui that referenced this issue Apr 17, 2024
msparkles added a commit to automancy/yakui that referenced this issue Apr 17, 2024
msparkles added a commit to automancy/yakui that referenced this issue Apr 17, 2024
…n pushing new clip rect, more sophisticated example for dropdown to test SecondHalfGames#149
msparkles added a commit to automancy/yakui that referenced this issue Apr 17, 2024
…n pushing new clip rect, more sophisticated example for dropdown to test SecondHalfGames#149
msparkles added a commit to automancy/yakui that referenced this issue Apr 18, 2024
…n pushing new clip rect, more sophisticated example for dropdown to test SecondHalfGames#149
msparkles added a commit to automancy/yakui that referenced this issue Apr 18, 2024
…n pushing new clip rect, more sophisticated example for dropdown to test SecondHalfGames#149
@msparkles
Copy link
Contributor Author

We've successfully implemented a fix for this, after the discussions on rust gamedev discord! please look at our fork for if it's a suitable fix, then we'll extract it into a separate PR

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

2 participants