Unify logic by introducing scrollable::Scrollbar

native/src/renderer/null.rs

@@ -61,17 +61,13 @@ impl text::Renderer for Null {
 }
 
 impl scrollable::Renderer for Null {
-    fn scrollbar_bounds(_bounds: Rectangle) -> Rectangle {
+    fn scrollbar(
-        Default::default()
+        &self,
-    }
-
-    fn scroller_bounds(
         _bounds: Rectangle,
         _content_bounds: Rectangle,
-        _scrollbar_bounds: Rectangle,
         _offset: u32,
-    ) -> Rectangle {
+    ) -> Option<scrollable::Scrollbar> {
-        Default::default()
+        None
     }
 
     fn draw(
@@ -81,8 +77,7 @@ impl scrollable::Renderer for Null {
         _content_bounds: Rectangle,
         _is_mouse_over: bool,
         _is_mouse_over_scrollbar: bool,
-        _scrollbar_bounds: Rectangle,
+        _scrollbar: Option<scrollable::Scrollbar>,
-        _scroller_bounds: Rectangle,
         _offset: u32,
         _content: Self::Output,
     ) {

native/src/widget/scrollable.rs

@@ -102,17 +102,6 @@ impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer> {
     }
 }
 
-fn scroll_percentage(
-    bounds: Rectangle,
-    scroller_bounds: Rectangle,
-    scroller_grabbed_at: f32,
-    cursor_position: Point,
-) -> f32 {
-    (cursor_position.y + bounds.y
-        - scroller_bounds.height * scroller_grabbed_at)
-        / (bounds.height - scroller_bounds.height)
-}
-
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Scrollable<'a, Message, Renderer>
 where
@@ -161,22 +150,6 @@ where
         let content = layout.children().next().unwrap();
         let content_bounds = content.bounds();
 
-        let offset = self.state.offset(bounds, content_bounds);
-        let scrollbar_bounds = Renderer::scrollbar_bounds(bounds);
-        let scroller_bounds = Renderer::scroller_bounds(
-            bounds,
-            content_bounds,
-            scrollbar_bounds,
-            offset,
-        );
-        let scrollbar_grab = ScrollbarItem::from_cursor_position(
-            bounds,
-            content_bounds,
-            scrollbar_bounds,
-            scroller_bounds,
-            cursor_position,
-        );
-
         // TODO: Event capture. Nested scrollables should capture scroll events.
         if is_mouse_over {
             match event {
@@ -195,48 +168,27 @@ where
             }
         }
 
-        if self.state.is_scroller_grabbed() || scrollbar_grab.is_some() {
+        let offset = self.state.offset(bounds, content_bounds);
+        let scrollbar = renderer.scrollbar(bounds, content_bounds, offset);
+        let is_mouse_over_scrollbar = scrollbar
+            .as_ref()
+            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+            .unwrap_or(false);
+
+        if self.state.is_scroller_grabbed() {
             match event {
                 Event::Mouse(mouse::Event::Input {
                     button: mouse::Button::Left,
-                    state,
+                    state: ButtonState::Released,
-                }) => match state {
+                }) => {
-                    ButtonState::Pressed => {
+                    self.state.scroller_grabbed_at = None;
-                        let scroller_grabbed_at = match scrollbar_grab.unwrap()
+                }
-                        {
-                            ScrollbarItem::Background => 0.5,
-                            ScrollbarItem::Scroller => {
-                                (cursor_position.y - scroller_bounds.y)
-                                    / scroller_bounds.height
-                            }
-                        };
-
-                        self.state.scroll_to(
-                            scroll_percentage(
-                                bounds,
-                                scroller_bounds,
-                                scroller_grabbed_at,
-                                cursor_position,
-                            ),
-                            bounds,
-                            content_bounds,
-                        );
-
-                        self.state.scroller_grabbed_at =
-                            Some(scroller_grabbed_at);
-                    }
-                    ButtonState::Released => {
-                        self.state.scroller_grabbed_at = None;
-                    }
-                },
                 Event::Mouse(mouse::Event::CursorMoved { .. }) => {
-                    if let Some(scroller_grabbed_at) =
+                    if let (Some(scrollbar), Some(scroller_grabbed_at)) =
-                        self.state.scroller_grabbed_at
+                        (scrollbar, self.state.scroller_grabbed_at)
                     {
                         self.state.scroll_to(
-                            scroll_percentage(
+                            scrollbar.scroll_percentage(
-                                bounds,
-                                scroller_bounds,
                                 scroller_grabbed_at,
                                 cursor_position,
                             ),
@@ -247,11 +199,35 @@ where
                 }
                 _ => {}
             }
+        } else if is_mouse_over_scrollbar {
+            match event {
+                Event::Mouse(mouse::Event::Input {
+                    button: mouse::Button::Left,
+                    state: ButtonState::Pressed,
+                }) => {
+                    if let Some(scrollbar) = scrollbar {
+                        if let Some(scroller_grabbed_at) =
+                            scrollbar.grab_scroller(cursor_position)
+                        {
+                            self.state.scroll_to(
+                                scrollbar.scroll_percentage(
+                                    scroller_grabbed_at,
+                                    cursor_position,
+                                ),
+                                bounds,
+                                content_bounds,
+                            );
+
+                            self.state.scroller_grabbed_at =
+                                Some(scroller_grabbed_at);
+                        }
+                    }
+                }
+                _ => {}
+            }
         }
 
-        let cursor_position = if is_mouse_over
+        let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
-            && !(scrollbar_grab.is_some() || self.state.is_scroller_grabbed())
-        {
             Point::new(
                 cursor_position.x,
                 cursor_position.y
@@ -284,23 +260,13 @@ where
         let content_layout = layout.children().next().unwrap();
         let content_bounds = content_layout.bounds();
         let offset = self.state.offset(bounds, content_bounds);
+        let scrollbar = renderer.scrollbar(bounds, content_bounds, offset);
 
         let is_mouse_over = bounds.contains(cursor_position);
-        let scrollbar_bounds = Renderer::scrollbar_bounds(bounds);
+        let is_mouse_over_scrollbar = scrollbar
-        let scroller_bounds = Renderer::scroller_bounds(
+            .as_ref()
-            bounds,
+            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
-            content_bounds,
+            .unwrap_or(false);
-            scrollbar_bounds,
-            offset,
-        );
-        let is_mouse_over_scrollbar = ScrollbarItem::from_cursor_position(
-            bounds,
-            content_bounds,
-            scrollbar_bounds,
-            scroller_bounds,
-            cursor_position,
-        )
-        .is_some();
 
         let content = {
             let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
@@ -319,8 +285,7 @@ where
             content_layout.bounds(),
             is_mouse_over,
             is_mouse_over_scrollbar,
-            scrollbar_bounds,
+            scrollbar,
-            scroller_bounds,
             offset,
             content,
         )
@@ -409,33 +374,60 @@ impl State {
     }
 }
 
-#[derive(Debug, Clone, Copy)]
+/// The scrollbar of a [`Scrollable`].
-enum ScrollbarItem {
+///
-    Background,
+/// [`Scrollable`]: struct.Scrollable.html
-    Scroller,
+#[derive(Debug)]
+pub struct Scrollbar {
+    /// The bounds of the [`Scrollbar`].
+    ///
+    /// [`Scrollbar`]: struct.Scrollbar.html
+    pub bounds: Rectangle,
+
+    /// The bounds of the [`Scroller`].
+    ///
+    /// [`Scroller`]: struct.Scroller.html
+    pub scroller: Scroller,
 }
 
-impl ScrollbarItem {
+impl Scrollbar {
-    /// `None` means the cursor is not over any item
+    fn is_mouse_over(&self, cursor_position: Point) -> bool {
-    fn from_cursor_position(
+        self.bounds.contains(cursor_position)
-        bounds: Rectangle,
+    }
-        content_bounds: Rectangle,
+
-        scrollbar_bounds: Rectangle,
+    fn grab_scroller(&self, cursor_position: Point) -> Option<f32> {
-        scroller_bounds: Rectangle,
+        if self.bounds.contains(cursor_position) {
-        cursor_position: Point,
+            Some(if self.scroller.bounds.contains(cursor_position) {
-    ) -> Option<ScrollbarItem> {
+                (cursor_position.y - self.scroller.bounds.y)
-        if content_bounds.height > bounds.height
+                    / self.scroller.bounds.height
-            && scrollbar_bounds.contains(cursor_position)
-        {
-            Some(if scroller_bounds.contains(cursor_position) {
-                ScrollbarItem::Scroller
             } else {
-                ScrollbarItem::Background
+                0.5
             })
         } else {
             None
         }
     }
+
+    fn scroll_percentage(
+        &self,
+        grabbed_at: f32,
+        cursor_position: Point,
+    ) -> f32 {
+        (cursor_position.y + self.bounds.y
+            - self.scroller.bounds.height * grabbed_at)
+            / (self.bounds.height - self.scroller.bounds.height)
+    }
+}
+
+/// The handle of a [`Scrollbar`].
+///
+/// [`Scrollbar`]: struct.Scrollbar.html
+#[derive(Debug, Clone, Copy)]
+pub struct Scroller {
+    /// The bounds of the [`Scroller`].
+    ///
+    /// [`Scroller`]: struct.Scrollbar.html
+    pub bounds: Rectangle,
 }
 
 /// The renderer of a [`Scrollable`].
@@ -446,17 +438,17 @@ impl ScrollbarItem {
 /// [`Scrollable`]: struct.Scrollable.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer + Sized {
-    /// Returns the bounds of the scrollbar
+    /// Returns the [`Scrollbar`] given the bounds and content bounds of a
-    fn scrollbar_bounds(bounds: Rectangle) -> Rectangle;
+    /// [`Scrollable`].
-
+    ///
-    /// Returns the bounds of the scroller
+    /// [`Scrollbar`]: struct.Scrollbar.html
-    /// "The part that you can drag around with your mouse to scroll"
+    /// [`Scrollable`]: struct.Scrollable.html
-    fn scroller_bounds(
+    fn scrollbar(
+        &self,
         bounds: Rectangle,
         content_bounds: Rectangle,
-        scrollbar_bounds: Rectangle,
         offset: u32,
-    ) -> Rectangle;
+    ) -> Option<Scrollbar>;
 
     /// Draws the [`Scrollable`].
     ///
@@ -477,8 +469,7 @@ pub trait Renderer: crate::Renderer + Sized {
         content_bounds: Rectangle,
         is_mouse_over: bool,
         is_mouse_over_scrollbar: bool,
-        scrollbar_bounds: Rectangle,
+        scrollbar: Option<Scrollbar>,
-        scroller_bounds: Rectangle,
         offset: u32,
         content: Self::Output,
     ) -> Self::Output;

wgpu/src/renderer/widget/scrollable.rs

@@ -5,30 +5,40 @@ const SCROLLBAR_WIDTH: u16 = 10;
 const SCROLLBAR_MARGIN: u16 = 2;
 
 impl scrollable::Renderer for Renderer {
-    fn scrollbar_bounds(bounds: Rectangle) -> Rectangle {
+    fn scrollbar(
-        Rectangle {
+        &self,
-            x: bounds.x + bounds.width
-                - f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-            y: bounds.y,
-            width: f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-            height: bounds.height,
-        }
-    }
-
-    fn scroller_bounds(
         bounds: Rectangle,
         content_bounds: Rectangle,
-        scrollbar_bounds: Rectangle,
         offset: u32,
-    ) -> Rectangle {
+    ) -> Option<scrollable::Scrollbar> {
-        let ratio = bounds.height / content_bounds.height;
+        if content_bounds.height > bounds.height {
-        let scrollbar_height = bounds.height * ratio;
+            let scrollbar_bounds = Rectangle {
-        let y_offset = offset as f32 * ratio;
+                x: bounds.x + bounds.width
-        Rectangle {
+                    - f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-            x: scrollbar_bounds.x + f32::from(SCROLLBAR_MARGIN),
+                y: bounds.y,
-            y: scrollbar_bounds.y + y_offset,
+                width: f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-            width: scrollbar_bounds.width - f32::from(2 * SCROLLBAR_MARGIN),
+                height: bounds.height,
-            height: scrollbar_height,
+            };
+
+            let ratio = bounds.height / content_bounds.height;
+            let scrollbar_height = bounds.height * ratio;
+            let y_offset = offset as f32 * ratio;
+
+            let scroller_bounds = Rectangle {
+                x: scrollbar_bounds.x + f32::from(SCROLLBAR_MARGIN),
+                y: scrollbar_bounds.y + y_offset,
+                width: scrollbar_bounds.width - f32::from(2 * SCROLLBAR_MARGIN),
+                height: scrollbar_height,
+            };
+
+            Some(scrollable::Scrollbar {
+                bounds: scrollbar_bounds,
+                scroller: scrollable::Scroller {
+                    bounds: scroller_bounds,
+                },
+            })
+        } else {
+            None
         }
     }
 
@@ -36,16 +46,13 @@ impl scrollable::Renderer for Renderer {
         &mut self,
         state: &scrollable::State,
         bounds: Rectangle,
-        content_bounds: Rectangle,
+        _content_bounds: Rectangle,
         is_mouse_over: bool,
         is_mouse_over_scrollbar: bool,
-        scrollbar_bounds: Rectangle,
+        scrollbar: Option<scrollable::Scrollbar>,
-        scroller_bounds: Rectangle,
         offset: u32,
         (content, mouse_cursor): Self::Output,
     ) -> Self::Output {
-        let is_content_overflowing = content_bounds.height > bounds.height;
-
         let clip = Primitive::Clip {
             bounds,
             offset: Vector::new(0, offset),
@@ -53,36 +60,41 @@ impl scrollable::Renderer for Renderer {
         };
 
         (
-            if is_content_overflowing
+            if let Some(scrollbar) = scrollbar {
-                && (is_mouse_over || state.is_scroller_grabbed())
+                if is_mouse_over || state.is_scroller_grabbed() {
-            {
+                    let scroller = Primitive::Quad {
-                let scrollbar = Primitive::Quad {
+                        bounds: scrollbar.scroller.bounds,
-                    bounds: scroller_bounds,
-                    background: Background::Color([0.0, 0.0, 0.0, 0.7].into()),
-                    border_radius: 5,
-                };
-
-                if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
-                    let scrollbar_background = Primitive::Quad {
-                        bounds: Rectangle {
-                            x: scrollbar_bounds.x + f32::from(SCROLLBAR_MARGIN),
-                            width: scrollbar_bounds.width
-                                - f32::from(2 * SCROLLBAR_MARGIN),
-                            ..scrollbar_bounds
-                        },
                         background: Background::Color(
-                            [0.0, 0.0, 0.0, 0.3].into(),
+                            [0.0, 0.0, 0.0, 0.7].into(),
                         ),
                         border_radius: 5,
                     };
 
-                    Primitive::Group {
+                    if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
-                        primitives: vec![clip, scrollbar_background, scrollbar],
+                        let scrollbar = Primitive::Quad {
+                            bounds: Rectangle {
+                                x: scrollbar.bounds.x
+                                    + f32::from(SCROLLBAR_MARGIN),
+                                width: scrollbar.bounds.width
+                                    - f32::from(2 * SCROLLBAR_MARGIN),
+                                ..scrollbar.bounds
+                            },
+                            background: Background::Color(
+                                [0.0, 0.0, 0.0, 0.3].into(),
+                            ),
+                            border_radius: 5,
+                        };
+
+                        Primitive::Group {
+                            primitives: vec![clip, scrollbar, scroller],
+                        }
+                    } else {
+                        Primitive::Group {
+                            primitives: vec![clip, scroller],
+                        }
                     }
                 } else {
-                    Primitive::Group {
+                    clip
-                        primitives: vec![clip, scrollbar],
-                    }
                 }
             } else {
                 clip