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
232 .surface_background
233 .blend(colors.scrollbar_thumb_background);
234 let is_vertical = self.kind == ScrollbarAxis::Vertical;
235 let extra_padding = px(5.0);
236 let padded_bounds = if is_vertical {
237 Bounds::from_corners(
238 bounds.origin + point(Pixels::ZERO, extra_padding),
239 bounds.lower_right() - point(Pixels::ZERO, extra_padding * 3),
240 )
241 } else {
242 Bounds::from_corners(
243 bounds.origin + point(extra_padding, Pixels::ZERO),
244 bounds.lower_right() - point(extra_padding * 3, Pixels::ZERO),
245 )
246 };
247
248 let mut thumb_bounds = if is_vertical {
249 let thumb_offset = self.thumb.start * padded_bounds.size.height;
250 let thumb_end = self.thumb.end * padded_bounds.size.height;
251 let thumb_upper_left = point(
252 padded_bounds.origin.x,
253 padded_bounds.origin.y + thumb_offset,
254 );
255 let thumb_lower_right = point(
256 padded_bounds.origin.x + padded_bounds.size.width,
257 padded_bounds.origin.y + thumb_end,
258 );
259 Bounds::from_corners(thumb_upper_left, thumb_lower_right)
260 } else {
261 let thumb_offset = self.thumb.start * padded_bounds.size.width;
262 let thumb_end = self.thumb.end * padded_bounds.size.width;
263 let thumb_upper_left = point(
264 padded_bounds.origin.x + thumb_offset,
265 padded_bounds.origin.y,
266 );
267 let thumb_lower_right = point(
268 padded_bounds.origin.x + thumb_end,
269 padded_bounds.origin.y + padded_bounds.size.height,
270 );
271 Bounds::from_corners(thumb_upper_left, thumb_lower_right)
272 };
273 let corners = if is_vertical {
274 thumb_bounds.size.width /= 1.5;
275 Corners::all(thumb_bounds.size.width / 2.0)
276 } else {
277 thumb_bounds.size.height /= 1.5;
278 Corners::all(thumb_bounds.size.height / 2.0)
279 };
280 cx.paint_quad(quad(
281 thumb_bounds,
282 corners,
283 thumb_background,
284 Edges::default(),
285 Hsla::transparent_black(),
286 ));
287
288 let scroll = self.state.scroll_handle.clone();
289 let kind = self.kind;
290 let thumb_percentage_size = self.thumb.end - self.thumb.start;
291
292 cx.on_mouse_event({
293 let scroll = scroll.clone();
294 let state = self.state.clone();
295 let axis = self.kind;
296 move |event: &MouseDownEvent, phase, _cx| {
297 if !(phase.bubble() && bounds.contains(&event.position)) {
298 return;
299 }
300
301 if thumb_bounds.contains(&event.position) {
302 let thumb_offset = (event.position.along(axis)
303 - thumb_bounds.origin.along(axis))
304 / bounds.size.along(axis);
305 state.drag.set(Some(thumb_offset));
306 } else if let Some(ContentSize {
307 size: item_size, ..
308 }) = scroll.content_size()
309 {
310 match kind {
311 ScrollbarAxis::Horizontal => {
312 let percentage =
313 (event.position.x - bounds.origin.x) / bounds.size.width;
314 let max_offset = item_size.width;
315 let percentage = percentage.min(1. - thumb_percentage_size);
316 scroll
317 .set_offset(point(-max_offset * percentage, scroll.offset().y));
318 }
319 ScrollbarAxis::Vertical => {
320 let percentage =
321 (event.position.y - bounds.origin.y) / bounds.size.height;
322 let max_offset = item_size.height;
323 let percentage = percentage.min(1. - thumb_percentage_size);
324 scroll
325 .set_offset(point(scroll.offset().x, -max_offset * percentage));
326 }
327 }
328 }
329 }
330 });
331 cx.on_mouse_event({
332 let scroll = scroll.clone();
333 move |event: &ScrollWheelEvent, phase, cx| {
334 if phase.bubble() && bounds.contains(&event.position) {
335 let current_offset = scroll.offset();
336 scroll
337 .set_offset(current_offset + event.delta.pixel_delta(cx.line_height()));
338 }
339 }
340 });
341 let state = self.state.clone();
342 let kind = self.kind;
343 cx.on_mouse_event(move |event: &MouseMoveEvent, _, cx| {
344 if let Some(drag_state) = state.drag.get().filter(|_| event.dragging()) {
345 if let Some(ContentSize {
346 size: item_size, ..
347 }) = scroll.content_size()
348 {
349 match kind {
350 ScrollbarAxis::Horizontal => {
351 let max_offset = item_size.width;
352 let percentage = (event.position.x - bounds.origin.x)
353 / bounds.size.width
354 - drag_state;
355
356 let percentage = percentage.min(1. - thumb_percentage_size);
357 scroll
358 .set_offset(point(-max_offset * percentage, scroll.offset().y));
359 }
360 ScrollbarAxis::Vertical => {
361 let max_offset = item_size.height;
362 let percentage = (event.position.y - bounds.origin.y)
363 / bounds.size.height
364 - drag_state;
365
366 let percentage = percentage.min(1. - thumb_percentage_size);
367 scroll
368 .set_offset(point(scroll.offset().x, -max_offset * percentage));
369 }
370 };
371
372 if let Some(id) = state.parent_id {
373 cx.notify(Some(id));
374 }
375 }
376 } else {
377 state.drag.set(None);
378 }
379 });
380 let state = self.state.clone();
381 cx.on_mouse_event(move |_event: &MouseUpEvent, phase, cx| {
382 if phase.bubble() {
383 state.drag.take();
384 if let Some(id) = state.parent_id {
385 cx.notify(Some(id));
386 }
387 }
388 });
389 })
390 }
391}
392
393impl IntoElement for Scrollbar {
394 type Element = Self;
395
396 fn into_element(self) -> Self::Element {
397 self
398 }
399}