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
166 type PrepaintState = Hitbox;
167
168 fn id(&self) -> Option<ElementId> {
169 None
170 }
171
172 fn request_layout(
173 &mut self,
174 _id: Option<&GlobalElementId>,
175 window: &mut Window,
176 cx: &mut App,
177 ) -> (LayoutId, Self::RequestLayoutState) {
178 let mut style = Style::default();
179 style.flex_grow = 1.;
180 style.flex_shrink = 1.;
181
182 if self.kind == ScrollbarAxis::Vertical {
183 style.size.width = px(12.).into();
184 style.size.height = relative(1.).into();
185 } else {
186 style.size.width = relative(1.).into();
187 style.size.height = px(12.).into();
188 }
189
190 (window.request_layout(style, None, cx), ())
191 }
192
193 fn prepaint(
194 &mut self,
195 _id: Option<&GlobalElementId>,
196 bounds: Bounds<Pixels>,
197 _request_layout: &mut Self::RequestLayoutState,
198 window: &mut Window,
199 _: &mut App,
200 ) -> Self::PrepaintState {
201 window.with_content_mask(Some(ContentMask { bounds }), |window| {
202 window.insert_hitbox(bounds, false)
203 })
204 }
205
206 fn paint(
207 &mut self,
208 _id: Option<&GlobalElementId>,
209 bounds: Bounds<Pixels>,
210 _request_layout: &mut Self::RequestLayoutState,
211 _prepaint: &mut Self::PrepaintState,
212 window: &mut Window,
213 cx: &mut App,
214 ) {
215 const EXTRA_PADDING: Pixels = px(5.0);
216 window.with_content_mask(Some(ContentMask { bounds }), |window| {
217 let axis = self.kind;
218 let colors = cx.theme().colors();
219 let thumb_background = colors
220 .surface_background
221 .blend(colors.scrollbar_thumb_background);
222
223 let padded_bounds = Bounds::from_corners(
224 bounds
225 .origin
226 .apply_along(axis, |origin| origin + EXTRA_PADDING),
227 bounds
228 .bottom_right()
229 .apply_along(axis, |track_end| track_end - 3.0 * EXTRA_PADDING),
230 );
231
232 let thumb_offset = self.thumb.start * padded_bounds.size.along(axis);
233 let thumb_end = self.thumb.end * padded_bounds.size.along(axis);
234
235 let thumb_bounds = Bounds::new(
236 padded_bounds
237 .origin
238 .apply_along(axis, |origin| origin + thumb_offset),
239 padded_bounds
240 .size
241 .apply_along(axis, |_| thumb_end - thumb_offset)
242 .apply_along(axis.invert(), |width| width / 1.5),
243 );
244
245 let corners = Corners::all(thumb_bounds.size.along(axis.invert()) / 2.0);
246
247 window.paint_quad(quad(
248 thumb_bounds,
249 corners,
250 thumb_background,
251 Edges::default(),
252 Hsla::transparent_black(),
253 BorderStyle::default(),
254 ));
255
256 let scroll = self.state.scroll_handle.clone();
257
258 enum ScrollbarMouseEvent {
259 GutterClick,
260 ThumbDrag(Pixels),
261 }
262
263 let compute_click_offset =
264 move |event_position: Point<Pixels>,
265 item_size: Size<Pixels>,
266 event_type: ScrollbarMouseEvent| {
267 let viewport_size = padded_bounds.size.along(axis);
268
269 let thumb_size = thumb_bounds.size.along(axis);
270
271 let thumb_offset = match event_type {
272 ScrollbarMouseEvent::GutterClick => thumb_size / 2.,
273 ScrollbarMouseEvent::ThumbDrag(thumb_offset) => thumb_offset,
274 };
275
276 let thumb_start = (event_position.along(axis)
277 - padded_bounds.origin.along(axis)
278 - thumb_offset)
279 .clamp(px(0.), viewport_size - thumb_size);
280
281 let max_offset = (item_size.along(axis) - viewport_size).max(px(0.));
282 let percentage = if viewport_size > thumb_size {
283 thumb_start / (viewport_size - thumb_size)
284 } else {
285 0.
286 };
287
288 -max_offset * percentage
289 };
290
291 window.on_mouse_event({
292 let scroll = scroll.clone();
293 let state = self.state.clone();
294 move |event: &MouseDownEvent, phase, _, _| {
295 if !(phase.bubble() && bounds.contains(&event.position)) {
296 return;
297 }
298
299 scroll.drag_started();
300
301 if thumb_bounds.contains(&event.position) {
302 let offset = event.position.along(axis) - thumb_bounds.origin.along(axis);
303 state.drag.set(Some(offset));
304 } else {
305 let click_offset = compute_click_offset(
306 event.position,
307 scroll.content_size(),
308 ScrollbarMouseEvent::GutterClick,
309 );
310 scroll.set_offset(scroll.offset().apply_along(axis, |_| click_offset));
311 }
312 }
313 });
314
315 window.on_mouse_event({
316 let scroll = scroll.clone();
317 move |event: &ScrollWheelEvent, phase, window, _| {
318 if phase.bubble() && bounds.contains(&event.position) {
319 let current_offset = scroll.offset();
320 scroll.set_offset(
321 current_offset + event.delta.pixel_delta(window.line_height()),
322 );
323 }
324 }
325 });
326
327 let state = self.state.clone();
328 window.on_mouse_event(move |event: &MouseMoveEvent, _, window, cx| {
329 if let Some(drag_state) = state.drag.get().filter(|_| event.dragging()) {
330 let drag_offset = compute_click_offset(
331 event.position,
332 scroll.content_size(),
333 ScrollbarMouseEvent::ThumbDrag(drag_state),
334 );
335 scroll.set_offset(scroll.offset().apply_along(axis, |_| drag_offset));
336 window.refresh();
337 if let Some(id) = state.parent_id {
338 cx.notify(id);
339 }
340 } else {
341 state.drag.set(None);
342 }
343 });
344 let state = self.state.clone();
345 let scroll = self.state.scroll_handle.clone();
346 window.on_mouse_event(move |_event: &MouseUpEvent, phase, _, cx| {
347 if phase.bubble() {
348 state.drag.take();
349 scroll.drag_ended();
350 if let Some(id) = state.parent_id {
351 cx.notify(id);
352 }
353 }
354 });
355 })
356 }
357}
358
359impl IntoElement for Scrollbar {
360 type Element = Self;
361
362 fn into_element(self) -> Self::Element {
363 self
364 }
365}