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