Add manual scrolling

egui/src/containers/scroll_area.rs

@@ -31,6 +31,7 @@ pub struct ScrollArea {
     max_height: f32,
     always_show_scroll: bool,
     id_source: Option<Id>,
+    offset: Option<Vec2>,
 }
 
 impl ScrollArea {
@@ -45,6 +46,7 @@ impl ScrollArea {
             max_height,
             always_show_scroll: false,
             id_source: None,
+            offset: None,
         }
     }
 
@@ -60,6 +62,15 @@ impl ScrollArea {
         self.id_source = Some(Id::new(id_source));
         self
     }
+
+    /// Set the scroll offset position.
+    ///
+    /// See also: [`Ui::scroll_to_here`](crate::ui::Ui::scroll_to_here) and
+    /// [`Response::scroll_to_me`](crate::types::Response::scroll_to_me)
+    pub fn scroll_offset(mut self, offset: Vec2) -> Self {
+        self.offset = Some(offset);
+        self
+    }
 }
 
 struct Prepared {
@@ -77,19 +88,24 @@ impl ScrollArea {
             max_height,
             always_show_scroll,
             id_source,
+            offset,
         } = self;
 
         let ctx = ui.ctx().clone();
 
         let id_source = id_source.unwrap_or_else(|| Id::new("scroll_area"));
         let id = ui.make_persistent_id(id_source);
-        let state = ctx
+        let mut state = ctx
             .memory()
             .scroll_areas
             .get(&id)
             .cloned()
             .unwrap_or_default();
 
+        if let Some(offset) = offset {
+            state.offset = offset;
+        }
+
         // content: size of contents (generally large; that's why we want scroll bars)
         // outer: size of scroll area including scroll bar(s)
         // inner: excluding scroll bar(s). The area we clip the contents to.
@@ -155,6 +171,27 @@ impl Prepared {
 
         let content_size = content_ui.min_size();
 
+        let scroll_target = content_ui.ctx().frame_state().scroll_target();
+        if let Some(scroll_target) = scroll_target {
+            let center_ratio = content_ui.ctx().frame_state().scroll_target_center_ratio();
+            let height_offset = content_ui.clip_rect().height() * center_ratio;
+            let top = content_ui.min_rect().top();
+            let offset_y = scroll_target - top - height_offset;
+            state.offset.y = offset_y;
+
+            // We need to clear the offset
+            // or else all the ScrollAreas will use this offset
+            content_ui.ctx().frame_state().set_scroll_target(None);
+        }
+
+        let inner_rect = Rect::from_min_size(
+            inner_rect.min,
+            vec2(
+                inner_rect.width().max(content_size.x), // Expand width to fit content
+                inner_rect.height(),
+            ),
+        );
+
         let width = if inner_rect.width().is_finite() {
             inner_rect.width().max(content_size.x) // Expand width to fit content
         } else {

egui/src/context.rs

@@ -38,6 +38,8 @@ pub(crate) struct FrameState {
 
     /// How much space is used by panels.
     used_by_panels: Rect,
+    scroll_target: Option<f32>,
+    scroll_target_center_factor: f32,
     // TODO: move some things from `Memory` to here
 }
 
@@ -47,6 +49,8 @@ impl Default for FrameState {
             available_rect: Rect::invalid(),
             unused_rect: Rect::invalid(),
             used_by_panels: Rect::invalid(),
+            scroll_target: None,
+            scroll_target_center_factor: 0.0,
         }
     }
 }
@@ -56,6 +60,8 @@ impl FrameState {
         self.available_rect = input.screen_rect();
         self.unused_rect = input.screen_rect();
         self.used_by_panels = Rect::nothing();
+        self.scroll_target = None;
+        self.scroll_target_center_factor = 0.0;
     }
 
     /// How much space is still available after panels has been added.
@@ -97,6 +103,25 @@ impl FrameState {
         self.unused_rect = Rect::nothing(); // Nothing left unused after this
         self.used_by_panels = self.used_by_panels.union(panel_rect);
     }
+
+    pub(crate) fn set_scroll_target(&mut self, scroll_target: Option<f32>) {
+        self.scroll_target = scroll_target;
+    }
+
+    pub(crate) fn scroll_target(&self) -> Option<f32> {
+        self.scroll_target
+    }
+
+    pub(crate) fn set_scroll_target_center_factor(&mut self, center_factor: f32) {
+        // This is the imgui aproach to set the scroll relative to the position
+        // 0.0: top of widget / 0.5: midle of widget / 1.0: bottom of widget
+        assert!(center_factor >= 0.0 && center_factor <= 1.0);
+        self.scroll_target_center_factor = center_factor;
+    }
+
+    pub(crate) fn scroll_target_center_ratio(&self) -> f32 {
+        self.scroll_target_center_factor
+    }
 }
 
 // ----------------------------------------------------------------------------

egui/src/demos/demo_window.rs

@@ -7,6 +7,7 @@ pub struct DemoWindow {
     num_columns: usize,
 
     widgets: Widgets,
+    scrolls: Scrolls,
     colors: ColorWidgets,
     layout: LayoutDemo,
     tree: Tree,
@@ -18,6 +19,7 @@ impl Default for DemoWindow {
         DemoWindow {
             num_columns: 2,
 
+            scrolls: Default::default(),
             widgets: Default::default(),
             colors: Default::default(),
             layout: Default::default(),
@@ -68,9 +70,7 @@ impl DemoWindow {
         CollapsingHeader::new("Scroll area")
             .default_open(false)
             .show(ui, |ui| {
-                ScrollArea::from_max_height(200.0).show(ui, |ui| {
-                    ui.label(LOREM_IPSUM_LONG);
-                });
+                self.scrolls.ui(ui);
             });
 
         CollapsingHeader::new("Resize")

egui/src/demos/mod.rs

@@ -12,6 +12,7 @@ pub mod font_contents_emoji;
 pub mod font_contents_ubuntu;
 mod fractal_clock;
 mod painting;
+mod scrolls;
 mod sliders;
 mod tests;
 pub mod toggle_switch;
@@ -20,7 +21,7 @@ mod widgets;
 pub use {
     app::*, color_test::ColorTest, dancing_strings::DancingStrings, demo_window::DemoWindow,
     demo_windows::*, drag_and_drop::*, font_book::FontBook, fractal_clock::FractalClock,
-    painting::Painting, sliders::Sliders, tests::Tests, widgets::Widgets,
+    painting::Painting, scrolls::Scrolls, sliders::Sliders, tests::Tests, widgets::Widgets,
 };
 
 pub const LOREM_IPSUM: &str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

egui/src/demos/scrolls.rs

@@ -0,0 +1,74 @@
+use crate::{color::*, *};
+
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "serde", serde(default))]
+pub struct Scrolls {
+    track_item: usize,
+    tracking: bool,
+    offset: f32,
+    center_factor: f32,
+}
+
+impl Default for Scrolls {
+    fn default() -> Self {
+        Self {
+            track_item: 25,
+            tracking: true,
+            offset: 0.0,
+            center_factor: 0.3,
+        }
+    }
+}
+
+impl Scrolls {
+    pub fn ui(&mut self, ui: &mut Ui) {
+        ui.horizontal(|ui| {
+            ui.checkbox(&mut self.tracking, "Track")
+                .on_hover_text("The scroll position will track the selected item");
+            ui.add(Slider::usize(&mut self.track_item, 1..=50).text("Track Item"));
+        });
+        ui.add(Slider::f32(&mut self.center_factor, 0.0..=1.0).text("Custom scroll center factor"));
+        let (scroll_offset, _) = ui.horizontal(|ui| {
+            let scroll_offset = ui.small_button("Scroll Offset").clicked;
+            ui.add(DragValue::f32(&mut self.offset).speed(1.0).suffix("px"));
+            scroll_offset
+        });
+
+        const TITLES: [&str; 6] = ["Top", "25%", "Middle", "75%", "Bottom", "Custom"];
+        ui.columns(6, |cols| {
+            for (i, col) in cols.iter_mut().enumerate() {
+                col.colored_label(WHITE, TITLES[i]);
+                let mut scroll_area = ScrollArea::from_max_height(200.0).id_source(i);
+                if scroll_offset {
+                    self.tracking = false;
+                    scroll_area = scroll_area.scroll_offset(Vec2::new(0.0, self.offset));
+                }
+
+                let (current_scroll, max_scroll) = scroll_area.show(col, |ui| {
+                    ui.vertical(|ui| {
+                        for item in 1..=50 {
+                            if self.tracking && item == self.track_item {
+                                let response = ui.colored_label(YELLOW, format!("Item {}", item));
+                                let scroll_center_factor = if i == 5 {
+                                    self.center_factor
+                                } else {
+                                    0.25 * i as f32
+                                };
+                                response.scroll_to_me(scroll_center_factor);
+                            } else {
+                                ui.label(format!("Item {}", item));
+                            }
+                        }
+                    });
+
+                    let margin = ui.style().visuals.clip_rect_margin;
+                    (
+                        ui.clip_rect().top() - ui.min_rect().top() + margin,
+                        ui.min_rect().height() - ui.clip_rect().height() + 2.0 * margin,
+                    )
+                });
+                col.colored_label(WHITE, format!("{:.0}/{:.0}", current_scroll, max_scroll));
+            }
+        });
+    }
+}

egui/src/types.rs

@@ -1,4 +1,4 @@
-use crate::{math::Rect, CtxRef, Id, LayerId, Ui};
+use crate::{lerp, math::Rect, CtxRef, Id, LayerId, Ui};
 
 // ----------------------------------------------------------------------------
 
@@ -159,6 +159,19 @@ impl Response {
         self.ctx
             .interact_with_hovered(self.layer_id, self.id, self.rect, sense, self.hovered)
     }
+
+    /// Move the scroll to this UI.
+    /// The scroll centering is based on the `center_factor`:
+    /// * 0.0 - top  
+    /// * 0.5 - middle
+    /// * 1.0 - bottom
+    pub fn scroll_to_me(&self, center_factor: f32) {
+        let scroll_target = lerp(self.rect.y_range(), center_factor);
+
+        let mut frame_state = self.ctx.frame_state();
+        frame_state.set_scroll_target(Some(scroll_target));
+        frame_state.set_scroll_target_center_factor(center_factor);
+    }
 }
 
 impl Response {

egui/src/ui.rs

@@ -584,6 +584,19 @@ impl Ui {
         let painter = Painter::new(self.ctx().clone(), self.layer_id(), clip_rect);
         (response, painter)
     }
+
+    /// Move the scroll to this position.
+    /// The scroll centering is based on the `center_factor`:
+    /// * 0.0 - top  
+    /// * 0.5 - middle
+    /// * 1.0 - bottom
+    pub fn scroll_to_here(&mut self, center_factor: f32) {
+        let scroll_target = self.min_rect().bottom();
+
+        let mut frame_state = self.ctx().frame_state();
+        frame_state.set_scroll_target(Some(scroll_target));
+        frame_state.set_scroll_target_center_factor(center_factor);
+    }
 }
 
 /// # Adding widgets