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