Merge pull request #35 from hecrj/feature/scrollables

Scrollable widget

7 files changed, 326 insertions, 72 deletions

diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index cac5e113..04fae248 100644
--- a/wgpu/Cargo.toml
+++ b/wgpu/Cargo.toml
@@ -9,8 +9,9 @@ repository = "https://github.com/hecrj/iced"
 
 [dependencies]
 iced_native = { version = "0.1.0-alpha", path = "../native" }
-wgpu = { version = "0.3", git = "https://github.com/gfx-rs/wgpu-rs", rev = "cb25914b95b58fee0dc139b400867e7a731d98f4" }
-wgpu_glyph = { version = "0.4", git = "https://github.com/hecrj/wgpu_glyph", rev = "48daa98f5f785963838b4345e86ac40eac095ba9" }
-raw-window-handle = "0.1"
+wgpu = { version = "0.3", git = "https://github.com/gfx-rs/wgpu-rs", rev = "ed2c67f762970d0099c1e6c6e078fb645afbf964" }
+wgpu_glyph = { version = "0.4", git = "https://github.com/hecrj/wgpu_glyph", rev = "954ac865ca1b7f6b97bf403f8c6174a7120e667c" }
+raw-window-handle = "0.3"
 image = "0.22"
+glam = "0.8"
 log = "0.4"
diff --git a/wgpu/src/image.rs b/wgpu/src/image.rs
index c883eaa8..75cfa166 100644
--- a/wgpu/src/image.rs
+++ b/wgpu/src/image.rs
@@ -1,4 +1,5 @@
 use crate::Transformation;
+use iced_native::Rectangle;
 
 use std::cell::RefCell;
 use std::collections::HashMap;
@@ -218,13 +219,12 @@ impl Pipeline {
         encoder: &mut wgpu::CommandEncoder,
         instances: &[Image],
         transformation: Transformation,
+        bounds: Rectangle<u32>,
         target: &wgpu::TextureView,
     ) {
-        let matrix: [f32; 16] = transformation.into();
-
         let transform_buffer = device
             .create_buffer_mapped(16, wgpu::BufferUsage::COPY_SRC)
-            .fill_from_slice(&matrix[..]);
+            .fill_from_slice(transformation.as_ref());
 
         encoder.copy_buffer_to_buffer(
             &transform_buffer,
@@ -291,6 +291,12 @@ impl Pipeline {
                     0,
                     &[(&self.vertices, 0), (&self.instances, 0)],
                 );
+                render_pass.set_scissor_rect(
+                    bounds.x,
+                    bounds.y,
+                    bounds.width,
+                    bounds.height,
+                );
 
                 render_pass.draw_indexed(
                     0..QUAD_INDICES.len() as u32,
diff --git a/wgpu/src/primitive.rs b/wgpu/src/primitive.rs
index 0b9e2c41..354b0851 100644
--- a/wgpu/src/primitive.rs
+++ b/wgpu/src/primitive.rs
@@ -23,4 +23,9 @@ pub enum Primitive {
         path: String,
         bounds: Rectangle,
     },
+    Clip {
+        bounds: Rectangle,
+        offset: u32,
+        content: Box<Primitive>,
+    },
 }
diff --git a/wgpu/src/quad.rs b/wgpu/src/quad.rs
index adb294f0..bfbd7e2d 100644
--- a/wgpu/src/quad.rs
+++ b/wgpu/src/quad.rs
@@ -1,4 +1,5 @@
 use crate::Transformation;
+use iced_native::Rectangle;
 
 use std::mem;
 
@@ -22,14 +23,12 @@ impl Pipeline {
                 }],
             });
 
-        let matrix: [f32; 16] = Transformation::identity().into();
-
         let transform = device
             .create_buffer_mapped(
                 16,
                 wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
             )
-            .fill_from_slice(&matrix[..]);
+            .fill_from_slice(Transformation::identity().as_ref());
 
         let constants = device.create_bind_group(&wgpu::BindGroupDescriptor {
             layout: &constant_layout,
@@ -165,13 +164,12 @@ impl Pipeline {
         encoder: &mut wgpu::CommandEncoder,
         instances: &[Quad],
         transformation: Transformation,
+        bounds: Rectangle<u32>,
         target: &wgpu::TextureView,
     ) {
-        let matrix: [f32; 16] = transformation.into();
-
         let transform_buffer = device
             .create_buffer_mapped(16, wgpu::BufferUsage::COPY_SRC)
-            .fill_from_slice(&matrix[..]);
+            .fill_from_slice(transformation.as_ref());
 
         encoder.copy_buffer_to_buffer(
             &transform_buffer,
@@ -227,6 +225,12 @@ impl Pipeline {
                     0,
                     &[(&self.vertices, 0), (&self.instances, 0)],
                 );
+                render_pass.set_scissor_rect(
+                    bounds.x,
+                    bounds.y,
+                    bounds.width,
+                    bounds.height,
+                );
 
                 render_pass.draw_indexed(
                     0..QUAD_INDICES.len() as u32,
diff --git a/wgpu/src/renderer.rs b/wgpu/src/renderer.rs
index ab6f744f..a70693af 100644
--- a/wgpu/src/renderer.rs
+++ b/wgpu/src/renderer.rs
@@ -1,7 +1,7 @@
 use crate::{quad, Image, Primitive, Quad, Transformation};
 use iced_native::{
     renderer::Debugger, renderer::Windowed, Background, Color, Layout,
-    MouseCursor, Point, Widget,
+    MouseCursor, Point, Rectangle, Widget,
 };
 
 use raw_window_handle::HasRawWindowHandle;
@@ -20,19 +20,17 @@ mod column;
 mod image;
 mod radio;
 mod row;
+mod scrollable;
 mod slider;
 mod text;
 
 pub struct Renderer {
     surface: Surface,
-    adapter: Adapter,
     device: Device,
     queue: Queue,
     quad_pipeline: quad::Pipeline,
     image_pipeline: crate::image::Pipeline,
 
-    quads: Vec<Quad>,
-    images: Vec<Image>,
     glyph_brush: Rc<RefCell<GlyphBrush<'static, ()>>>,
 }
 
@@ -43,6 +41,26 @@ pub struct Target {
     swap_chain: SwapChain,
 }
 
+pub struct Layer<'a> {
+    bounds: Rectangle<u32>,
+    y_offset: u32,
+    quads: Vec<Quad>,
+    images: Vec<Image>,
+    text: Vec<wgpu_glyph::Section<'a>>,
+}
+
+impl<'a> Layer<'a> {
+    pub fn new(bounds: Rectangle<u32>, y_offset: u32) -> Self {
+        Self {
+            bounds,
+            y_offset,
+            quads: Vec::new(),
+            images: Vec::new(),
+            text: Vec::new(),
+        }
+    }
+}
+
 impl Renderer {
     fn new<W: HasRawWindowHandle>(window: &W) -> Self {
         let adapter = Adapter::request(&RequestAdapterOptions {
@@ -55,7 +73,7 @@ impl Renderer {
             extensions: Extensions {
                 anisotropic_filtering: false,
             },
-            limits: Limits { max_bind_groups: 1 },
+            limits: Limits { max_bind_groups: 2 },
         });
 
         let surface = Surface::create(window);
@@ -73,14 +91,11 @@ impl Renderer {
 
         Self {
             surface,
-            adapter,
             device,
             queue,
             quad_pipeline,
             image_pipeline,
 
-            quads: Vec::new(),
-            images: Vec::new(),
             glyph_brush: Rc::new(RefCell::new(glyph_brush)),
         }
     }
@@ -132,51 +147,46 @@ impl Renderer {
             depth_stencil_attachment: None,
         });
 
-        self.draw_primitive(primitive);
-
-        self.quad_pipeline.draw(
-            &mut self.device,
-            &mut encoder,
-            &self.quads,
-            target.transformation,
-            &frame.view,
-        );
-
-        self.quads.clear();
-
-        self.image_pipeline.draw(
-            &mut self.device,
-            &mut encoder,
-            &self.images,
-            target.transformation,
-            &frame.view,
+        let mut layers = Vec::new();
+        let mut current = Layer::new(
+            Rectangle {
+                x: 0,
+                y: 0,
+                width: u32::from(target.width),
+                height: u32::from(target.height),
+            },
+            0,
         );
 
-        self.images.clear();
+        self.draw_primitive(primitive, &mut current, &mut layers);
+        layers.push(current);
 
-        self.glyph_brush
-            .borrow_mut()
-            .draw_queued(
-                &mut self.device,
+        for layer in layers {
+            self.flush(
+                target.transformation,
+                &layer,
                 &mut encoder,
                 &frame.view,
-                u32::from(target.width),
-                u32::from(target.height),
-            )
-            .expect("Draw text");
+            );
+        }
 
         self.queue.submit(&[encoder.finish()]);
 
         *mouse_cursor
     }
 
-    fn draw_primitive(&mut self, primitive: &Primitive) {
+    fn draw_primitive<'a>(
+        &mut self,
+        primitive: &'a Primitive,
+        layer: &mut Layer<'a>,
+        layers: &mut Vec<Layer<'a>>,
+    ) {
         match primitive {
             Primitive::None => {}
             Primitive::Group { primitives } => {
                 // TODO: Inspect a bit and regroup (?)
                 for primitive in primitives {
-                    self.draw_primitive(primitive)
+                    self.draw_primitive(primitive, layer, layers)
                 }
             }
             Primitive::Text {
@@ -207,7 +217,7 @@ impl Renderer {
                     }
                 };
 
-                self.glyph_brush.borrow_mut().queue(Section {
+                layer.text.push(Section {
                     text: &content,
                     screen_position: (x, y),
                     bounds: (bounds.width, bounds.height),
@@ -244,8 +254,8 @@ impl Renderer {
                 background,
                 border_radius,
             } => {
-                self.quads.push(Quad {
-                    position: [bounds.x, bounds.y],
+                layer.quads.push(Quad {
+                    position: [bounds.x, bounds.y - layer.y_offset as f32],
                     scale: [bounds.width, bounds.height],
                     color: match background {
                         Background::Color(color) => color.into_linear(),
@@ -254,12 +264,88 @@ impl Renderer {
                 });
             }
             Primitive::Image { path, bounds } => {
-                self.images.push(Image {
+                layer.images.push(Image {
                     path: path.clone(),
                     position: [bounds.x, bounds.y],
                     scale: [bounds.width, bounds.height],
                 });
             }
+            Primitive::Clip {
+                bounds,
+                offset,
+                content,
+            } => {
+                let mut new_layer = Layer::new(
+                    Rectangle {
+                        x: bounds.x as u32,
+                        y: bounds.y as u32 - layer.y_offset,
+                        width: bounds.width as u32,
+                        height: bounds.height as u32,
+                    },
+                    layer.y_offset + offset,
+                );
+
+                // TODO: Primitive culling
+                self.draw_primitive(content, &mut new_layer, layers);
+
+                layers.push(new_layer);
+            }
+        }
+    }
+
+    fn flush(
+        &mut self,
+        transformation: Transformation,
+        layer: &Layer,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+    ) {
+        let translated = transformation
+            * Transformation::translate(0.0, -(layer.y_offset as f32));
+
+        if layer.quads.len() > 0 {
+            self.quad_pipeline.draw(
+                &mut self.device,
+                encoder,
+                &layer.quads,
+                transformation,
+                layer.bounds,
+                target,
+            );
+        }
+
+        if layer.images.len() > 0 {
+            self.image_pipeline.draw(
+                &mut self.device,
+                encoder,
+                &layer.images,
+                translated,
+                layer.bounds,
+                target,
+            );
+        }
+
+        if layer.text.len() > 0 {
+            let mut glyph_brush = self.glyph_brush.borrow_mut();
+
+            for text in layer.text.iter() {
+                glyph_brush.queue(text);
+            }
+
+            glyph_brush
+                .draw_queued_with_transform_and_scissoring(
+                    &mut self.device,
+                    encoder,
+                    target,
+                    translated.into(),
+                    wgpu_glyph::Region {
+                        x: layer.bounds.x,
+                        y: layer.bounds.y,
+                        width: layer.bounds.width,
+                        height: layer.bounds.height,
+                    },
+                )
+                .expect("Draw text");
         }
     }
 }
diff --git a/wgpu/src/renderer/scrollable.rs b/wgpu/src/renderer/scrollable.rs
new file mode 100644
index 00000000..e812a7e1
--- /dev/null
+++ b/wgpu/src/renderer/scrollable.rs
@@ -0,0 +1,133 @@
+use crate::{Primitive, Renderer};
+use iced_native::{
+    scrollable, Background, Color, Layout, MouseCursor, Point, Rectangle,
+    Scrollable, Widget,
+};
+
+const SCROLLBAR_WIDTH: u16 = 10;
+const SCROLLBAR_MARGIN: u16 = 2;
+
+fn scrollbar_bounds(bounds: Rectangle) -> Rectangle {
+    Rectangle {
+        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,
+    }
+}
+
+impl scrollable::Renderer for Renderer {
+    fn is_mouse_over_scrollbar(
+        &self,
+        bounds: Rectangle,
+        content_bounds: Rectangle,
+        cursor_position: Point,
+    ) -> bool {
+        content_bounds.height > bounds.height
+            && scrollbar_bounds(bounds).contains(cursor_position)
+    }
+
+    fn draw<Message>(
+        &mut self,
+        scrollable: &Scrollable<'_, Message, Self>,
+        bounds: Rectangle,
+        content: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let is_mouse_over = bounds.contains(cursor_position);
+        let content_bounds = content.bounds();
+
+        let offset = scrollable.state.offset(bounds, content_bounds);
+        let is_content_overflowing = content_bounds.height > bounds.height;
+        let scrollbar_bounds = scrollbar_bounds(bounds);
+        let is_mouse_over_scrollbar = self.is_mouse_over_scrollbar(
+            bounds,
+            content_bounds,
+            cursor_position,
+        );
+
+        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)
+        };
+
+        let (content, mouse_cursor) =
+            scrollable.content.draw(self, content, cursor_position);
+
+        let primitive = Primitive::Clip {
+            bounds,
+            offset,
+            content: Box::new(content),
+        };
+
+        (
+            if is_content_overflowing
+                && (is_mouse_over || scrollable.state.is_scrollbar_grabbed())
+            {
+                let ratio = bounds.height / content_bounds.height;
+                let scrollbar_height = bounds.height * ratio;
+                let y_offset = offset as f32 * ratio;
+
+                let scrollbar = Primitive::Quad {
+                    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,
+                    },
+                    background: Background::Color(Color {
+                        r: 0.0,
+                        g: 0.0,
+                        b: 0.0,
+                        a: 0.7,
+                    }),
+                    border_radius: 5,
+                };
+
+                if is_mouse_over_scrollbar
+                    || scrollable.state.is_scrollbar_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(Color {
+                            r: 0.0,
+                            g: 0.0,
+                            b: 0.0,
+                            a: 0.3,
+                        }),
+                        border_radius: 5,
+                    };
+
+                    Primitive::Group {
+                        primitives: vec![
+                            primitive,
+                            scrollbar_background,
+                            scrollbar,
+                        ],
+                    }
+                } else {
+                    Primitive::Group {
+                        primitives: vec![primitive, scrollbar],
+                    }
+                }
+            } else {
+                primitive
+            },
+            if is_mouse_over_scrollbar
+                || scrollable.state.is_scrollbar_grabbed()
+            {
+                MouseCursor::Idle
+            } else {
+                mouse_cursor
+            },
+        )
+    }
+}
diff --git a/wgpu/src/transformation.rs b/wgpu/src/transformation.rs
index 1101e135..b0d14cc8 100644
--- a/wgpu/src/transformation.rs
+++ b/wgpu/src/transformation.rs
@@ -1,30 +1,49 @@
-#[derive(Debug, Clone, Copy)]
-pub struct Transformation([f32; 16]);
+use glam::{Mat4, Vec3, Vec4};
+use std::ops::Mul;
+
+/// A 2D transformation matrix.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Transformation(Mat4);
 
 impl Transformation {
-    #[rustfmt::skip]
-    pub fn identity() -> Self {
-        Transformation([
-            1.0, 0.0, 0.0, 0.0,
-            0.0, 1.0, 0.0, 0.0,
-            0.0, 0.0, 1.0, 0.0,
-            0.0, 0.0, 0.0, 1.0,
-        ])
+    /// Get the identity transformation.
+    pub fn identity() -> Transformation {
+        Transformation(Mat4::identity())
     }
 
+    /// Creates an orthographic projection.
     #[rustfmt::skip]
-    pub fn orthographic(width: u16, height: u16) -> Self {
-        Transformation([
-            2.0 / width as f32, 0.0, 0.0, 0.0,
-            0.0, 2.0 / height as f32, 0.0, 0.0,
-            0.0, 0.0, 1.0, 0.0,
-            -1.0, -1.0, 0.0, 1.0,
-        ])
+    pub fn orthographic(width: u16, height: u16) -> Transformation {
+        Transformation(Mat4::from_cols(
+            Vec4::new(2.0 / f32::from(width), 0.0, 0.0, 0.0),
+            Vec4::new(0.0, 2.0 / f32::from(height), 0.0, 0.0),
+            Vec4::new(0.0, 0.0, -1.0, 0.0),
+            Vec4::new(-1.0, -1.0, 0.0, 1.0)
+        ))
+    }
+
+    /// Creates a translate transformation.
+    pub fn translate(x: f32, y: f32) -> Transformation {
+        Transformation(Mat4::from_translation(Vec3::new(x, y, 0.0)))
+    }
+}
+
+impl Mul for Transformation {
+    type Output = Self;
+
+    fn mul(self, rhs: Self) -> Self {
+        Transformation(self.0 * rhs.0)
+    }
+}
+
+impl AsRef<[f32; 16]> for Transformation {
+    fn as_ref(&self) -> &[f32; 16] {
+        self.0.as_ref()
     }
 }
 
 impl From<Transformation> for [f32; 16] {
-    fn from(transformation: Transformation) -> [f32; 16] {
-        transformation.0
+    fn from(t: Transformation) -> [f32; 16] {
+        t.as_ref().clone()
     }
 }