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