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