Skip to content

Commit

Permalink
Make scroll animation configurable via Style and scroll_to_*_animatio…
Browse files Browse the repository at this point in the history
…n functions
  • Loading branch information
lucasmerlin committed Jul 4, 2024
1 parent 8bf498d commit 8c36ee7
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 17 deletions.
22 changes: 14 additions & 8 deletions crates/egui/src/containers/scroll_area.rs
Original file line number Diff line number Diff line change
Expand Up @@ -799,7 +799,8 @@ impl Prepared {

for d in 0..2 {
// FrameState::scroll_delta is inverted from the way we apply the delta, so we need to negate it.
let mut delta = -scroll_delta[d];
let mut delta = -scroll_delta.0[d];
let mut animation = scroll_delta.1;

// We always take both scroll targets regardless of which scroll axes are enabled. This
// is to avoid them leaking to other scroll areas.
Expand All @@ -808,7 +809,7 @@ impl Prepared {
.frame_state_mut(|state| state.scroll_target[d].take());

if scroll_enabled[d] {
delta += if let Some((target_range, align)) = scroll_target {
let update = if let Some((target_range, align, animation)) = scroll_target {
let min = content_ui.min_rect().min[d];
let clip_rect = content_ui.clip_rect();
let visible_range = min..=min + clip_rect.size()[d];
Expand All @@ -817,7 +818,7 @@ impl Prepared {
let clip_end = clip_rect.max[d];
let mut spacing = ui.spacing().item_spacing[d];

if let Some(align) = align {
let delta = if let Some(align) = align {
let center_factor = align.to_factor();

let offset =
Expand All @@ -834,11 +835,17 @@ impl Prepared {
} else {
// Ui is already in view, no need to adjust scroll.
0.0
}
};
Some((delta, animation))
} else {
0.0
None
};

if let Some((delta_update, animation_update)) = update {
delta += delta_update;
animation = animation_update;
}

if delta != 0.0 {
let target_offset = state.offset[d] + delta;

Expand All @@ -850,10 +857,9 @@ impl Prepared {
animation.target_offset = target_offset;
} else {
// The further we scroll, the more time we take.
// TODO(emilk): let users configure this in `Style`.
let now = ui.input(|i| i.time);
let points_per_second = 1000.0;
let animation_duration = (delta.abs() / points_per_second).clamp(0.1, 0.3);
let animation_duration = (delta.abs() / animation.points_per_second)
.clamp(animation.min_duration, animation.max_duration);
state.offset_target[d] = Some(ScrollTarget {
animation_time_span: (now, now + animation_duration as f64),
target_offset,
Expand Down
8 changes: 4 additions & 4 deletions crates/egui/src/frame_state.rs
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ pub struct FrameState {
pub used_by_panels: Rect,

/// The current scroll area should scroll to this range (horizontal, vertical).
pub scroll_target: [Option<(Rangef, Option<Align>)>; 2],
pub scroll_target: [Option<(Rangef, Option<Align>, style::ScrollAnimation)>; 2],

/// The current scroll area should scroll by this much.
///
Expand All @@ -90,7 +90,7 @@ pub struct FrameState {
///
/// A positive Y-value indicates the content is being moved down,
/// as when swiping down on a touch-screen or track-pad with natural scrolling.
pub scroll_delta: Vec2,
pub scroll_delta: (Vec2, style::ScrollAnimation),

#[cfg(feature = "accesskit")]
pub accesskit_state: Option<AccessKitFrameState>,
Expand All @@ -113,7 +113,7 @@ impl Default for FrameState {
unused_rect: Rect::NAN,
used_by_panels: Rect::NAN,
scroll_target: [None, None],
scroll_delta: Vec2::default(),
scroll_delta: (Vec2::default(), style::ScrollAnimation::none()),
#[cfg(feature = "accesskit")]
accesskit_state: None,
highlight_next_frame: Default::default(),
Expand Down Expand Up @@ -153,7 +153,7 @@ impl FrameState {
*unused_rect = screen_rect;
*used_by_panels = Rect::NOTHING;
*scroll_target = [None, None];
*scroll_delta = Vec2::default();
*scroll_delta = (Vec2::default(), style::ScrollAnimation::none());

#[cfg(debug_assertions)]
{
Expand Down
12 changes: 10 additions & 2 deletions crates/egui/src/response.rs
Original file line number Diff line number Diff line change
Expand Up @@ -846,9 +846,17 @@ impl Response {
/// # });
/// ```
pub fn scroll_to_me(&self, align: Option<Align>) {
self.scroll_to_me_animation(align, self.ctx.style().scroll_animation);
}

pub fn scroll_to_me_animation(
&self,
align: Option<Align>,
animation: crate::style::ScrollAnimation,
) {
self.ctx.frame_state_mut(|state| {
state.scroll_target[0] = Some((self.rect.x_range(), align));
state.scroll_target[1] = Some((self.rect.y_range(), align));
state.scroll_target[0] = Some((self.rect.x_range(), align, animation));
state.scroll_target[1] = Some((self.rect.y_range(), align, animation));
});
}

Expand Down
76 changes: 76 additions & 0 deletions crates/egui/src/style.rs
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,9 @@ pub struct Style {

/// If true and scrolling is enabled for only one direction, allow horizontal scrolling without pressing shift
pub always_scroll_the_only_direction: bool,

/// The animation that should be used when scrolling a [`crate::ScrollArea`] using e.g. [Ui::scroll_to_rect].
pub scroll_animation: ScrollAnimation,
}

#[test]
Expand Down Expand Up @@ -692,6 +695,76 @@ impl ScrollStyle {

// ----------------------------------------------------------------------------

#[derive(Copy, Clone, Debug, PartialEq, PartialOrd)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
#[cfg_attr(feature = "serde", serde(default))]
pub struct ScrollAnimation {
pub points_per_second: f32,
pub min_duration: f32,
pub max_duration: f32,
}

impl Default for ScrollAnimation {
fn default() -> Self {
Self {
points_per_second: 1000.0,
min_duration: 0.1,
max_duration: 0.3,
}
}
}

impl ScrollAnimation {
pub fn none() -> Self {
Self {
points_per_second: 0.0,
min_duration: 0.0,
max_duration: 0.0,
}
}

pub fn duration(t: f32) -> Self {
Self {
points_per_second: 0.0,
min_duration: t,
max_duration: t,
}
}

pub fn ui(&mut self, ui: &mut crate::Ui) {
crate::Grid::new("scroll_animation").show(ui, |ui| {
ui.label("Scroll animation:");
ui.add(
DragValue::new(&mut self.points_per_second)
.speed(100.0)
.range(0.0..=5000.0),
);
ui.label("points/second");
ui.end_row();

ui.label("Min duration:");
ui.add(
DragValue::new(&mut self.min_duration)
.speed(0.01)
.range(0.0..=self.max_duration),
);
ui.label("seconds");
ui.end_row();

ui.label("Max duration:");
ui.add(
DragValue::new(&mut self.max_duration)
.speed(0.01)
.range(0.0..=1.0),
);
ui.label("seconds");
ui.end_row();
});
}
}

// ----------------------------------------------------------------------------

/// How and when interaction happens.
#[derive(Clone, Debug, PartialEq)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
Expand Down Expand Up @@ -1129,6 +1202,7 @@ impl Default for Style {
explanation_tooltips: false,
url_in_tooltip: false,
always_scroll_the_only_direction: false,
scroll_animation: ScrollAnimation::default(),
}
}
}
Expand Down Expand Up @@ -1425,6 +1499,7 @@ impl Style {
explanation_tooltips,
url_in_tooltip,
always_scroll_the_only_direction,
scroll_animation,
} = self;

visuals.light_dark_radio_buttons(ui);
Expand Down Expand Up @@ -1488,6 +1563,7 @@ impl Style {
ui.collapsing("📏 Spacing", |ui| spacing.ui(ui));
ui.collapsing("☝ Interaction", |ui| interaction.ui(ui));
ui.collapsing("🎨 Visuals", |ui| visuals.ui(ui));
ui.collapsing("🔄 Scroll Animation", |ui| scroll_animation.ui(ui));

#[cfg(debug_assertions)]
ui.collapsing("🐛 Debug", |ui| debug.ui(ui));
Expand Down
31 changes: 28 additions & 3 deletions crates/egui/src/ui.rs
Original file line number Diff line number Diff line change
Expand Up @@ -1215,10 +1215,20 @@ impl Ui {
/// # });
/// ```
pub fn scroll_to_rect(&self, rect: Rect, align: Option<Align>) {
self.scroll_to_rect_animation(rect, align, self.style.scroll_animation);
}

/// Same as [`Self::scroll_to_rect`], but allows you to specify the [`ScrollAnimation`].
pub fn scroll_to_rect_animation(
&self,
rect: Rect,
align: Option<Align>,
animation: style::ScrollAnimation,
) {
for d in 0..2 {
let range = Rangef::new(rect.min[d], rect.max[d]);
self.ctx()
.frame_state_mut(|state| state.scroll_target[d] = Some((range, align)));
.frame_state_mut(|state| state.scroll_target[d] = Some((range, align, animation)));
}
}

Expand All @@ -1245,11 +1255,20 @@ impl Ui {
/// # });
/// ```
pub fn scroll_to_cursor(&self, align: Option<Align>) {
self.scroll_to_cursor_animation(align, self.style.scroll_animation);
}

/// Same as [`Self::scroll_to_cursor`], but allows you to specify the [`ScrollAnimation`].
pub fn scroll_to_cursor_animation(
&self,
align: Option<Align>,
animation: style::ScrollAnimation,
) {
let target = self.next_widget_position();
for d in 0..2 {
let target = Rangef::point(target[d]);
self.ctx()
.frame_state_mut(|state| state.scroll_target[d] = Some((target, align)));
.frame_state_mut(|state| state.scroll_target[d] = Some((target, align, animation)));
}
}

Expand Down Expand Up @@ -1283,8 +1302,14 @@ impl Ui {
/// # });
/// ```
pub fn scroll_with_delta(&self, delta: Vec2) {
self.scroll_with_delta_animation(delta, self.style.scroll_animation);
}

/// Same as [`Self::scroll_with_delta`], but allows you to specify the [`ScrollAnimation`].
pub fn scroll_with_delta_animation(&self, delta: Vec2, animation: style::ScrollAnimation) {
self.ctx().frame_state_mut(|state| {
state.scroll_delta += delta;
state.scroll_delta.0 += delta;
state.scroll_delta.1 = animation;
});
}
}
Expand Down

0 comments on commit 8c36ee7

Please sign in to comment.