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