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