ci24037645/gpui-native-kit
1
0
Fork 0
forked from reya/gpui-native-kit
Code Pull Requests Activity

feat: add scrollbar for virtualized lists

Browse Source
This commit is contained in:
reya
2026-11-04 13:05:39 +07:00
parent 4bfc816cbe
commit 50da1d4a9d
10 changed files with 1033 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/core/src/scroll_area.rs
+195 -14
View File
@@ -1,8 +1,12 @@
use std::time::Duration;
use std::time::Instant;
use gpui::prelude::FluentBuilder as _;
use gpui::{
App, Bounds, DispatchPhase, ElementId, InteractiveElement as _, IntoElement, MouseDownEvent,
MouseMoveEvent, ParentElement, Pixels, RenderOnce, ScrollHandle, SharedString,
StatefulInteractiveElement as _, Styled, Window, canvas, div, fill, point,
App, Bounds, DispatchPhase, ElementId, Entity, EntityId, InteractiveElement as _, IntoElement,
MouseDownEvent, MouseMoveEvent, MouseUpEvent, ParentElement, Pixels, RenderOnce, ScrollEvent,
ScrollHandle, SharedString, StatefulInteractiveElement as _, Styled, Task, Window, canvas, div,
fill, point,
};
use gpui_native_theme::ActiveTheme as _;
@@ -20,12 +24,115 @@ pub enum ScrollAxes {
Both,
}
/// When an overlay scrollbar shows.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
pub enum ScrollbarVisibility {
/// The running platform's behavior, from the theme.
#[default]
Platform,
Always,
Autohide,
}
/// How long an autohide thumb stays fully visible before its fade begins.
const AUTOHIDE_DELAY: Duration = Duration::from_millis(700);
/// How long the autohide fade runs.
const AUTOHIDE_FADE: Duration = Duration::from_millis(250);
/// How often the fade repaints while it runs.
const AUTOHIDE_FADE_STEP: Duration = Duration::from_millis(50);
/// The shared autohide timeline for an overlay scrollbar.
#[derive(Clone)]
pub(crate) struct Autohide {
view: EntityId,
state: Entity<AutohideState>,
}
struct AutohideState {
last_activity: Option<Instant>,
hide_task: Option<Task<()>>,
}
impl Autohide {
pub(crate) fn new(window: &mut Window, cx: &mut App) -> Self {
let view = window.current_view();
let state = window.use_keyed_state("scrollbar-autohide", cx, |_, _| AutohideState {
last_activity: None,
hide_task: None,
});
Self { view, state }
}
/// Marks interaction.
pub(crate) fn touch(&self, window: &mut Window, cx: &mut App) {
let view = self.view;
let reduce_motion = cx.theme().accessibility.reduce_motion;
let task = window.spawn(cx, async move |cx| {
if reduce_motion {
cx.background_executor()
.timer(AUTOHIDE_DELAY + AUTOHIDE_FADE)
.await;
cx.update(|_, cx| cx.notify(view)).ok();
return;
}
let steps = (AUTOHIDE_FADE.as_millis() / AUTOHIDE_FADE_STEP.as_millis()).max(1);
cx.background_executor().timer(AUTOHIDE_DELAY).await;
for _ in 0..steps {
cx.update(|_, cx| cx.notify(view)).ok();
cx.background_executor().timer(AUTOHIDE_FADE_STEP).await;
}
cx.update(|_, cx| cx.notify(view)).ok();
});
self.state.update(cx, |state, _| {
state.last_activity = Some(Instant::now());
state.hide_task = Some(task);
});
}
/// The thumb's opacity.
pub(crate) fn alpha(&self, cx: &App, dragging: bool) -> f32 {
if dragging {
return 1.0;
}
let Some(activity) = self.state.read(cx).last_activity else {
return 0.0;
};
let idle = activity.elapsed();
if idle <= AUTOHIDE_DELAY {
return 1.0;
}
let fade = idle.saturating_sub(AUTOHIDE_DELAY);
if fade >= AUTOHIDE_FADE {
return 0.0;
}
1.0 - fade.as_secs_f32() / AUTOHIDE_FADE.as_secs_f32()
}
}
/// An overlay scrollbar thumb's style for one paint: `None` hides it.
pub(crate) fn thumb_style(color: gpui::Hsla, alpha: f32) -> Option<gpui::Hsla> {
(alpha > 0.0).then_some(gpui::Hsla {
a: color.a * alpha,
..color
})
}
/// A scrollable container with an overlay scrollbar.
#[derive(IntoElement)]
pub struct ScrollArea {
id: ElementId,
handle: Option<ScrollHandle>,
axes: ScrollAxes,
visibility: ScrollbarVisibility,
a11y_label: Option<SharedString>,
style: gpui::StyleRefinement,
children: Vec<gpui::AnyElement>,
@@ -53,6 +160,7 @@ impl ScrollArea {
id: id.into(),
handle: None,
axes: ScrollAxes::Vertical,
visibility: ScrollbarVisibility::default(),
a11y_label: None,
style: gpui::StyleRefinement::default(),
children: Vec::new(),
@@ -65,6 +173,12 @@ impl ScrollArea {
self
}
/// Overrides when the scrollbar shows, instead of the platform default.
pub fn visibility(mut self, visibility: ScrollbarVisibility) -> Self {
self.visibility = visibility;
self
}
/// Scrolls with a handle held on the owning view.
pub fn handle(mut self, handle: ScrollHandle) -> Self {
self.handle = Some(handle);
@@ -101,7 +215,7 @@ pub(crate) fn thumb_geometry(
}
impl RenderOnce for ScrollArea {
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let mut pane = div()
.id(self.id.clone())
.overflow_hidden()
@@ -128,11 +242,16 @@ impl RenderOnce for ScrollArea {
wrapper.extend(std::iter::once(pane.into_any_element()));
if let Some(handle) = self.handle {
let autohide = match self.visibility {
ScrollbarVisibility::Platform => cx.theme().scrollbar.autohide,
ScrollbarVisibility::Always => false,
ScrollbarVisibility::Autohide => true,
};
wrapper.extend(std::iter::once(
canvas(|_, _, _| {}, {
let handle = handle.clone();
move |_, _, window, cx| {
paint_scrollbar(&handle, window, cx);
paint_scrollbar(&handle, autohide, window, cx);
}
})
.absolute()
@@ -146,8 +265,10 @@ impl RenderOnce for ScrollArea {
}
/// Paints the overlay scrollbar thumb.
fn paint_scrollbar(handle: &ScrollHandle, window: &mut Window, cx: &mut App) {
fn paint_scrollbar(handle: &ScrollHandle, autohide: bool, window: &mut Window, cx: &mut App) {
let theme = cx.theme();
let view = window.current_view();
let color = theme.colors.scrollbar_thumb;
let width = theme.scrollbar.width;
let inset = theme.scrollbar.inset;
@@ -155,10 +276,22 @@ fn paint_scrollbar(handle: &ScrollHandle, window: &mut Window, cx: &mut App) {
let max_offset = handle.max_offset().y;
let bounds = handle.bounds();
if max_offset <= Pixels::ZERO || bounds.size.height <= Pixels::ZERO {
return;
}
let autohide_state = autohide.then(|| Autohide::new(window, cx));
let drag = window.use_keyed_state("scrollbar-thumb-drag", cx, |_, _| {
Option::<(Pixels, Pixels)>::None
});
let dragging = drag.read(cx).is_some();
let alpha = match (&autohide_state, autohide) {
(Some(state), true) => state.alpha(cx, dragging),
_ => 1.0,
};
let track = bounds.size.height - inset * 2.0;
let (thumb_length, thumb_top) = thumb_geometry(
bounds.size.height,
@@ -177,16 +310,27 @@ fn paint_scrollbar(handle: &ScrollHandle, window: &mut Window, cx: &mut App) {
),
);
window.paint_quad(fill(thumb_bounds, color).corner_radii(width / 2.0));
if let Some(color) = thumb_style(color, alpha) {
window.paint_quad(fill(thumb_bounds, color).corner_radii(width / 2.0));
}
let drag = window.use_keyed_state("scrollbar-thumb-drag", cx, |_, _| {
Option::<(Pixels, Pixels)>::None
});
if let Some(state) = &autohide_state {
window.on_mouse_event({
let state = state.clone();
move |event: &ScrollEvent, phase, window, cx| {
if phase != DispatchPhase::Bubble || !bounds.contains(&event.position) {
return;
}
state.touch(window, cx);
}
});
}
window.on_mouse_event({
let handle = handle.clone();
let drag = drag.clone();
move |event: &MouseDownEvent, phase, _window, cx| {
let autohide_state = autohide_state.clone();
move |event: &MouseDownEvent, phase, window, cx| {
if phase != DispatchPhase::Bubble
|| event.button != gpui::MouseButton::Left
|| !thumb_bounds.contains(&event.position)
@@ -197,17 +341,53 @@ fn paint_scrollbar(handle: &ScrollHandle, window: &mut Window, cx: &mut App) {
drag.update(cx, |drag, _| {
*drag = Some((event.position.y, handle.offset().y));
});
if let Some(state) = &autohide_state {
state.touch(window, cx);
}
cx.stop_propagation();
}
});
window.on_mouse_event({
let drag = drag.clone();
let autohide_state = autohide_state.clone();
move |event: &MouseUpEvent, phase, window, cx| {
if phase != DispatchPhase::Bubble || event.button != gpui::MouseButton::Left {
return;
}
if drag.read(cx).is_none() {
return;
}
drag.update(cx, |drag, _| {
*drag = None;
});
if let Some(state) = &autohide_state {
state.touch(window, cx);
}
}
});
window.on_mouse_event({
let handle = handle.clone();
let drag = drag.clone();
move |event: &MouseMoveEvent, phase, _window, cx| {
if phase != DispatchPhase::Bubble
|| event.pressed_button != Some(gpui::MouseButton::Left)
let autohide_state = autohide_state.clone();
move |event: &MouseMoveEvent, phase, window, cx| {
if phase != DispatchPhase::Bubble {
return;
}
if let Some(state) = &autohide_state
&& drag.read(cx).is_some()
{
state.touch(window, cx);
}
if event.pressed_button != Some(gpui::MouseButton::Left) {
return;
}
@@ -220,6 +400,7 @@ fn paint_scrollbar(handle: &ScrollHandle, window: &mut Window, cx: &mut App) {
let offset = (start_offset - (event.position.y - start_y) * scale)
.clamp(-max_offset, Pixels::ZERO);
handle.set_offset(point(handle.offset().x, offset));
cx.notify(view);
}
}
});