Implement `Widget::draw` for `Scrollable`

Rendering the scroller is still WIP

4 files changed, 116 insertions, 51 deletions

diff --git a/native/src/renderer.rs b/native/src/renderer.rs
index ca0aecec..5a7a0067 100644
--- a/native/src/renderer.rs
+++ b/native/src/renderer.rs
@@ -29,7 +29,7 @@ mod null;
 pub use null::Null;
 
 use crate::layout;
-use crate::{Element, Rectangle};
+use crate::{Element, Rectangle, Vector};
 
 /// A component that can take the state of a user interface and produce an
 /// output for its users.
@@ -51,7 +51,12 @@ pub trait Renderer: Sized {
         element.layout(self, limits)
     }
 
-    fn with_layer(&mut self, bounds: Rectangle, f: impl FnOnce(&mut Self));
+    fn with_layer(
+        &mut self,
+        bounds: Rectangle,
+        offset: Vector<u32>,
+        f: impl FnOnce(&mut Self),
+    );
 
     fn clear(&mut self);
 }
diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs
index da758ebb..b8e01b80 100644
--- a/native/src/renderer/null.rs
+++ b/native/src/renderer/null.rs
@@ -10,7 +10,7 @@ use crate::slider;
 use crate::text;
 use crate::text_input;
 use crate::toggler;
-use crate::{Font, Padding, Point, Rectangle, Size};
+use crate::{Font, Padding, Point, Rectangle, Size, Vector};
 
 /// A renderer that does nothing.
 ///
@@ -28,7 +28,13 @@ impl Null {
 impl Renderer for Null {
     type Defaults = ();
 
-    fn with_layer(&mut self, _bounds: Rectangle, _f: impl FnOnce(&mut Self)) {}
+    fn with_layer(
+        &mut self,
+        _bounds: Rectangle,
+        _offset: Vector<u32>,
+        _f: impl FnOnce(&mut Self),
+    ) {
+    }
 
     fn clear(&mut self) {}
 }
diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs
index c80aaf44..eb57670d 100644
--- a/native/src/user_interface.rs
+++ b/native/src/user_interface.rs
@@ -1,7 +1,7 @@
 use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
-use crate::{Clipboard, Element, Layout, Point, Rectangle, Size};
+use crate::{Clipboard, Element, Layout, Point, Rectangle, Size, Vector};
 
 use std::hash::Hasher;
 
@@ -347,14 +347,18 @@ where
 
             let overlay_bounds = layer.layout.bounds();
 
-            renderer.with_layer(overlay_bounds, |renderer| {
-                overlay.draw(
-                    renderer,
-                    &Renderer::Defaults::default(),
-                    Layout::new(&layer.layout),
-                    cursor_position,
-                );
-            });
+            renderer.with_layer(
+                overlay_bounds,
+                Vector::new(0, 0),
+                |renderer| {
+                    overlay.draw(
+                        renderer,
+                        &Renderer::Defaults::default(),
+                        Layout::new(&layer.layout),
+                        cursor_position,
+                    );
+                },
+            );
 
             self.overlay = Some(layer);
 
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 1c897dc5..ba3d3dd6 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -381,44 +381,94 @@ where
         cursor_position: Point,
         _viewport: &Rectangle,
     ) {
-        // TODO
-        // let bounds = layout.bounds();
-        // 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,
-        //     self.scrollbar_width,
-        //     self.scrollbar_margin,
-        //     self.scroller_width,
-        // );
-
-        // let is_mouse_over = bounds.contains(cursor_position);
-        // let is_mouse_over_scrollbar = scrollbar
-        //     .as_ref()
-        //     .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
-        //     .unwrap_or(false);
-
-        // let content = {
-        //     let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
-        //         Point::new(cursor_position.x, cursor_position.y + offset as f32)
-        //     } else {
-        //         Point::new(cursor_position.x, -1.0)
-        //     };
-
-        //     self.content.draw(
-        //         renderer,
-        //         defaults,
-        //         content_layout,
-        //         cursor_position,
-        //         &Rectangle {
-        //             y: bounds.y + offset as f32,
-        //             ..bounds
-        //         },
-        //     )
-        // };
+        let bounds = layout.bounds();
+        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,
+            self.scrollbar_width,
+            self.scrollbar_margin,
+            self.scroller_width,
+        );
+
+        let is_mouse_over = bounds.contains(cursor_position);
+        let is_mouse_over_scrollbar = scrollbar
+            .as_ref()
+            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+            .unwrap_or(false);
+
+        let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+            Point::new(cursor_position.x, cursor_position.y + offset as f32)
+        } else {
+            Point::new(cursor_position.x, -1.0)
+        };
+
+        if let Some(scrollbar) = scrollbar {
+            renderer.with_layer(bounds, Vector::new(0, offset), |renderer| {
+                self.content.draw(
+                    renderer,
+                    defaults,
+                    content_layout,
+                    cursor_position,
+                    &Rectangle {
+                        y: bounds.y + offset as f32,
+                        ..bounds
+                    },
+                );
+            });
+
+            // TODO: Draw scroller
+            // let style = if self.state.is_scroller_grabbed() {
+            //     style_sheet.dragging()
+            // } else if is_mouse_over_scrollbar {
+            //     style_sheet.hovered()
+            // } else {
+            //     style_sheet.active()
+            // };
+
+            // let is_scrollbar_visible =
+            //     style.background.is_some() || style.border_width > 0.0;
+
+            // if is_mouse_over
+            //     || self.state.is_scroller_grabbed()
+            //     || is_scrollbar_visible
+            // {
+            //     // Primitive::Quad {
+            //     //     bounds: scrollbar.scroller.bounds,
+            //     //     background: Background::Color(style.scroller.color),
+            //     //     border_radius: style.scroller.border_radius,
+            //     //     border_width: style.scroller.border_width,
+            //     //     border_color: style.scroller.border_color,
+            //     // }
+            // };
+
+            // TODO: Draw scrollbar
+            // if is_scrollbar_visible {
+            //    Primitive::Quad {
+            //        bounds: scrollbar.bounds,
+            //        background: style
+            //            .background
+            //            .unwrap_or(Background::Color(Color::TRANSPARENT)),
+            //        border_radius: style.border_radius,
+            //        border_width: style.border_width,
+            //        border_color: style.border_color,
+            //    }
+            //}
+        } else {
+            self.content.draw(
+                renderer,
+                defaults,
+                content_layout,
+                cursor_position,
+                &Rectangle {
+                    y: bounds.y + offset as f32,
+                    ..bounds
+                },
+            );
+        }
     }
 
     fn hash_layout(&self, state: &mut Hasher) {