1use std::{any::Any, cell::Cell, fmt::Debug, ops::Range, rc::Rc, sync::Arc};
2
3use crate::{IntoElement, prelude::*, px, relative};
4use gpui::{
5 Along, App, Axis as ScrollbarAxis, BorderStyle, Bounds, ContentMask, Corners, Edges, Element,
6 ElementId, Entity, EntityId, GlobalElementId, Hitbox, HitboxBehavior, Hsla, IsZero, LayoutId,
7 ListState, MouseDownEvent, MouseMoveEvent, MouseUpEvent, Pixels, Point, ScrollHandle,
8 ScrollWheelEvent, Size, Style, UniformListScrollHandle, Window, quad,
9};
10
11pub struct Scrollbar {
12 thumb: Range<f32>,
13 state: ScrollbarState,
14 kind: ScrollbarAxis,
15}
16
17#[derive(Default, Debug, Clone, Copy)]
18enum ThumbState {
19 #[default]
20 Inactive,
21 Hover,
22 Dragging(Pixels),
23}
24
25impl ScrollableHandle for UniformListScrollHandle {
26 fn content_size(&self) -> Size<Pixels> {
27 self.0.borrow().base_handle.content_size()
28 }
29
30 fn set_offset(&self, point: Point<Pixels>) {
31 self.0.borrow().base_handle.set_offset(point);
32 }
33
34 fn offset(&self) -> Point<Pixels> {
35 self.0.borrow().base_handle.offset()
36 }
37
38 fn viewport(&self) -> Bounds<Pixels> {
39 self.0.borrow().base_handle.bounds()
40 }
41}
42
43impl ScrollableHandle for ListState {
44 fn content_size(&self) -> Size<Pixels> {
45 self.content_size_for_scrollbar()
46 }
47
48 fn set_offset(&self, point: Point<Pixels>) {
49 self.set_offset_from_scrollbar(point);
50 }
51
52 fn offset(&self) -> Point<Pixels> {
53 self.scroll_px_offset_for_scrollbar()
54 }
55
56 fn drag_started(&self) {
57 self.scrollbar_drag_started();
58 }
59
60 fn drag_ended(&self) {
61 self.scrollbar_drag_ended();
62 }
63
64 fn viewport(&self) -> Bounds<Pixels> {
65 self.viewport_bounds()
66 }
67}
68
69impl ScrollableHandle for ScrollHandle {
70 fn content_size(&self) -> Size<Pixels> {
71 self.padded_content_size()
72 }
73
74 fn set_offset(&self, point: Point<Pixels>) {
75 self.set_offset(point);
76 }
77
78 fn offset(&self) -> Point<Pixels> {
79 self.offset()
80 }
81
82 fn viewport(&self) -> Bounds<Pixels> {
83 self.bounds()
84 }
85}
86
87pub trait ScrollableHandle: Any + Debug {
88 fn content_size(&self) -> Size<Pixels>;
89 fn set_offset(&self, point: Point<Pixels>);
90 fn offset(&self) -> Point<Pixels>;
91 fn viewport(&self) -> Bounds<Pixels>;
92 fn drag_started(&self) {}
93 fn drag_ended(&self) {}
94}
95
96/// A scrollbar state that should be persisted across frames.
97#[derive(Clone, Debug)]
98pub struct ScrollbarState {
99 thumb_state: Rc<Cell<ThumbState>>,
100 parent_id: Option<EntityId>,
101 scroll_handle: Arc<dyn ScrollableHandle>,
102}
103
104impl ScrollbarState {
105 pub fn new(scroll: impl ScrollableHandle) -> Self {
106 Self {
107 thumb_state: Default::default(),
108 parent_id: None,
109 scroll_handle: Arc::new(scroll),
110 }
111 }
112
113 /// Set a parent model which should be notified whenever this Scrollbar gets a scroll event.
114 pub fn parent_entity<V: 'static>(mut self, v: &Entity<V>) -> Self {
115 self.parent_id = Some(v.entity_id());
116 self
117 }
118
119 pub fn scroll_handle(&self) -> &Arc<dyn ScrollableHandle> {
120 &self.scroll_handle
121 }
122
123 pub fn is_dragging(&self) -> bool {
124 matches!(self.thumb_state.get(), ThumbState::Dragging(_))
125 }
126
127 fn set_dragging(&self, drag_offset: Pixels) {
128 self.set_thumb_state(ThumbState::Dragging(drag_offset));
129 self.scroll_handle.drag_started();
130 }
131
132 fn set_thumb_hovered(&self, hovered: bool) {
133 self.set_thumb_state(if hovered {
134 ThumbState::Hover
135 } else {
136 ThumbState::Inactive
137 });
138 }
139
140 fn set_thumb_state(&self, state: ThumbState) {
141 self.thumb_state.set(state);
142 }
143
144 fn thumb_range(&self, axis: ScrollbarAxis) -> Option<Range<f32>> {
145 const MINIMUM_THUMB_SIZE: Pixels = px(25.);
146 let content_size = self.scroll_handle.content_size().along(axis);
147 let viewport_size = self.scroll_handle.viewport().size.along(axis);
148 if content_size.is_zero() || viewport_size.is_zero() || content_size <= viewport_size {
149 return None;
150 }
151 let visible_percentage = viewport_size / content_size;
152 let thumb_size = MINIMUM_THUMB_SIZE.max(viewport_size * visible_percentage);
153 if thumb_size > viewport_size {
154 return None;
155 }
156 let max_offset = content_size - viewport_size;
157 let current_offset = self
158 .scroll_handle
159 .offset()
160 .along(axis)
161 .clamp(-max_offset, Pixels::ZERO)
162 .abs();
163 let start_offset = (current_offset / max_offset) * (viewport_size - thumb_size);
164 let thumb_percentage_start = start_offset / viewport_size;
165 let thumb_percentage_end = (start_offset + thumb_size) / viewport_size;
166 Some(thumb_percentage_start..thumb_percentage_end)
167 }
168}
169
170impl Scrollbar {
171 pub fn vertical(state: ScrollbarState) -> Option<Self> {
172 Self::new(state, ScrollbarAxis::Vertical)
173 }
174
175 pub fn horizontal(state: ScrollbarState) -> Option<Self> {
176 Self::new(state, ScrollbarAxis::Horizontal)
177 }
178
179 fn new(state: ScrollbarState, kind: ScrollbarAxis) -> Option<Self> {
180 let thumb = state.thumb_range(kind)?;
181 Some(Self { thumb, state, kind })
182 }
183}
184
185impl Element for Scrollbar {
186 type RequestLayoutState = ();
187 type PrepaintState = Hitbox;
188
189 fn id(&self) -> Option<ElementId> {
190 None
191 }
192
193 fn source_location(&self) -> Option<&'static core::panic::Location<'static>> {
194 None
195 }
196
197 fn request_layout(
198 &mut self,
199 _id: Option<&GlobalElementId>,
200 _inspector_id: Option<&gpui::InspectorElementId>,
201 window: &mut Window,
202 cx: &mut App,
203 ) -> (LayoutId, Self::RequestLayoutState) {
204 let mut style = Style::default();
205 style.flex_grow = 1.;
206 style.flex_shrink = 1.;
207
208 if self.kind == ScrollbarAxis::Vertical {
209 style.size.width = px(12.).into();
210 style.size.height = relative(1.).into();
211 } else {
212 style.size.width = relative(1.).into();
213 style.size.height = px(12.).into();
214 }
215
216 (window.request_layout(style, None, cx), ())
217 }
218
219 fn prepaint(
220 &mut self,
221 _id: Option<&GlobalElementId>,
222 _inspector_id: Option<&gpui::InspectorElementId>,
223 bounds: Bounds<Pixels>,
224 _request_layout: &mut Self::RequestLayoutState,
225 window: &mut Window,
226 _: &mut App,
227 ) -> Self::PrepaintState {
228 window.with_content_mask(Some(ContentMask { bounds }), |window| {
229 window.insert_hitbox(bounds, HitboxBehavior::Normal)
230 })
231 }
232
233 fn paint(
234 &mut self,
235 _id: Option<&GlobalElementId>,
236 _inspector_id: Option<&gpui::InspectorElementId>,
237 bounds: Bounds<Pixels>,
238 _request_layout: &mut Self::RequestLayoutState,
239 _prepaint: &mut Self::PrepaintState,
240 window: &mut Window,
241 cx: &mut App,
242 ) {
243 const EXTRA_PADDING: Pixels = px(5.0);
244 window.with_content_mask(Some(ContentMask { bounds }), |window| {
245 let axis = self.kind;
246 let colors = cx.theme().colors();
247 let thumb_base_color = match self.state.thumb_state.get() {
248 ThumbState::Dragging(_) => colors.scrollbar_thumb_active_background,
249 ThumbState::Hover => colors.scrollbar_thumb_hover_background,
250 ThumbState::Inactive => colors.scrollbar_thumb_background,
251 };
252
253 let thumb_background = colors.surface_background.blend(thumb_base_color);
254
255 let padded_bounds = Bounds::from_corners(
256 bounds
257 .origin
258 .apply_along(axis, |origin| origin + EXTRA_PADDING),
259 bounds
260 .bottom_right()
261 .apply_along(axis, |track_end| track_end - 3.0 * EXTRA_PADDING),
262 );
263
264 let thumb_offset = self.thumb.start * padded_bounds.size.along(axis);
265 let thumb_end = self.thumb.end * padded_bounds.size.along(axis);
266
267 let thumb_bounds = Bounds::new(
268 padded_bounds
269 .origin
270 .apply_along(axis, |origin| origin + thumb_offset),
271 padded_bounds
272 .size
273 .apply_along(axis, |_| thumb_end - thumb_offset)
274 .apply_along(axis.invert(), |width| width / 1.5),
275 );
276
277 let corners = Corners::all(thumb_bounds.size.along(axis.invert()) / 2.0);
278
279 window.paint_quad(quad(
280 thumb_bounds,
281 corners,
282 thumb_background,
283 Edges::default(),
284 Hsla::transparent_black(),
285 BorderStyle::default(),
286 ));
287
288 let scroll = self.state.scroll_handle.clone();
289
290 enum ScrollbarMouseEvent {
291 GutterClick,
292 ThumbDrag(Pixels),
293 }
294
295 let compute_click_offset =
296 move |event_position: Point<Pixels>,
297 item_size: Size<Pixels>,
298 event_type: ScrollbarMouseEvent| {
299 let viewport_size = padded_bounds.size.along(axis);
300
301 let thumb_size = thumb_bounds.size.along(axis);
302
303 let thumb_offset = match event_type {
304 ScrollbarMouseEvent::GutterClick => thumb_size / 2.,
305 ScrollbarMouseEvent::ThumbDrag(thumb_offset) => thumb_offset,
306 };
307
308 let thumb_start = (event_position.along(axis)
309 - padded_bounds.origin.along(axis)
310 - thumb_offset)
311 .clamp(px(0.), viewport_size - thumb_size);
312
313 let max_offset = (item_size.along(axis) - viewport_size).max(px(0.));
314 let percentage = if viewport_size > thumb_size {
315 thumb_start / (viewport_size - thumb_size)
316 } else {
317 0.
318 };
319
320 -max_offset * percentage
321 };
322
323 window.on_mouse_event({
324 let scroll = scroll.clone();
325 let state = self.state.clone();
326 move |event: &MouseDownEvent, phase, _, _| {
327 if !(phase.bubble() && bounds.contains(&event.position)) {
328 return;
329 }
330
331 if thumb_bounds.contains(&event.position) {
332 let offset = event.position.along(axis) - thumb_bounds.origin.along(axis);
333 state.set_dragging(offset);
334 } else {
335 let click_offset = compute_click_offset(
336 event.position,
337 scroll.content_size(),
338 ScrollbarMouseEvent::GutterClick,
339 );
340 scroll.set_offset(scroll.offset().apply_along(axis, |_| click_offset));
341 }
342 }
343 });
344
345 window.on_mouse_event({
346 let scroll = scroll.clone();
347 move |event: &ScrollWheelEvent, phase, window, _| {
348 if phase.bubble() && bounds.contains(&event.position) {
349 let current_offset = scroll.offset();
350 scroll.set_offset(
351 current_offset + event.delta.pixel_delta(window.line_height()),
352 );
353 }
354 }
355 });
356
357 let state = self.state.clone();
358 window.on_mouse_event(move |event: &MouseMoveEvent, _, window, cx| {
359 match state.thumb_state.get() {
360 ThumbState::Dragging(drag_state) if event.dragging() => {
361 let drag_offset = compute_click_offset(
362 event.position,
363 scroll.content_size(),
364 ScrollbarMouseEvent::ThumbDrag(drag_state),
365 );
366 scroll.set_offset(scroll.offset().apply_along(axis, |_| drag_offset));
367 window.refresh();
368 if let Some(id) = state.parent_id {
369 cx.notify(id);
370 }
371 }
372 _ => state.set_thumb_hovered(thumb_bounds.contains(&event.position)),
373 }
374 });
375 let state = self.state.clone();
376 let scroll = self.state.scroll_handle.clone();
377 window.on_mouse_event(move |event: &MouseUpEvent, phase, _, cx| {
378 if phase.bubble() {
379 if state.is_dragging() {
380 state.set_thumb_hovered(thumb_bounds.contains(&event.position));
381 }
382 scroll.drag_ended();
383 if let Some(id) = state.parent_id {
384 cx.notify(id);
385 }
386 }
387 });
388 })
389 }
390}
391
392impl IntoElement for Scrollbar {
393 type Element = Self;
394
395 fn into_element(self) -> Self::Element {
396 self
397 }
398}