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