Giter Club home page Giter Club logo

Comments (4)

emilk avatar emilk commented on May 14, 2024

There are two scenarios we want to cover:

A) Setting the offset before layout
B) Setting the offset during or after layout

A) Setting the offset before layout

This could be solved with extending the ScrollArea builder like this:

ScrollArea::auto_sized().set_center_offset(500.0).show(...)

where set_center_offset(500) would scroll so that the center of the scroll area focuses 500 points down in the contents.

The downside with this is that one needs to anticipate how many points we want the offset to be ahead of time, which only works for trivial content (e.g. rows of single-line labels).

This should be fairly easy to implement

B) Setting the offset during or after layout

Dear ImGui has a very useful SetScrollHere() function that you can call from within the layout. This will signal the surrounding scroll area to scroll down to that line the next frame.

I think this could be accomplished by something like this:

egui::ScrollArea::auto_sized().show(ui, |ui| {
    for (i, line) in my_text.iter().enumerate() {
        if i == selected_line {
            ui.scroll_to_here();
        }
        ui.label(line);
    }
});

scroll_to_here would set a scroll_offset: Option<f32> in struct FrameState in Context. The scroll area logic would look for that after doing the layout, and store in its own State and use the next frame. The implementation becomes a bit hairy perhaps, but it would be very convenient for the user. In particular, one could call scroll_to_here on any ui deep down far away from any surrounding ScrollArea, and it would still work.

Other considerations

Sometimes one want to center on a particular line, sometimes make it the top of the layout. For centering one also needs to take into account the size of the widget one is centering on, so that we center on the center of the widget. Perhaps:

let response = ui.label(line);
if i == selected_line {        
    response.scroll_to_me(Align::CENTER);
}

Having it part of Response would be neat, as it contains the Rect of the widget we want to center on.

from egui.

lucaspoffo avatar lucaspoffo commented on May 14, 2024

I'm working on an implementation for this, got the basics from B) done, and works pretty well, this design is pretty good, gets the job done, in my case, with a few lines. Just don't know the best way to achieve:

In particular, one could call scroll_to_here on any ui deep down far away from any surrounding ScrollArea, and it would still work.

Currently you need to call scroll_to_here from the ScrollArea.content_uiin the add_contents callback. What do you think is the ideal way to do that?

from egui.

emilk avatar emilk commented on May 14, 2024

Currently you need to call scroll_to_here from the ScrollArea.content_uiin the add_contents callback.

Why? Do you have a branch I can look at?

from egui.

lucaspoffo avatar lucaspoffo commented on May 14, 2024

@emilk #81

from egui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.