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