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