Merge pull request #37 from hecrj/feature/text-input

Text input widget

6 files changed, 211 insertions, 31 deletions

diff --git a/wgpu/src/primitive.rs b/wgpu/src/primitive.rs
index 354b0851..8e40e3a6 100644
--- a/wgpu/src/primitive.rs
+++ b/wgpu/src/primitive.rs
@@ -1,4 +1,4 @@
-use iced_native::{text, Background, Color, Rectangle};
+use iced_native::{text, Background, Color, Rectangle, Vector};
 
 #[derive(Debug, Clone)]
 pub enum Primitive {
@@ -25,7 +25,7 @@ pub enum Primitive {
     },
     Clip {
         bounds: Rectangle,
-        offset: u32,
+        offset: Vector<u32>,
         content: Box<Primitive>,
     },
 }
diff --git a/wgpu/src/renderer.rs b/wgpu/src/renderer.rs
index a70693af..ca4cbb58 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, Rectangle, Widget,
+    MouseCursor, Point, Rectangle, Vector, Widget,
 };
 
 use raw_window_handle::HasRawWindowHandle;
@@ -23,6 +23,7 @@ mod row;
 mod scrollable;
 mod slider;
 mod text;
+mod text_input;
 
 pub struct Renderer {
     surface: Surface,
@@ -43,17 +44,17 @@ pub struct Target {
 
 pub struct Layer<'a> {
     bounds: Rectangle<u32>,
-    y_offset: u32,
+    offset: Vector<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 {
+    pub fn new(bounds: Rectangle<u32>, offset: Vector<u32>) -> Self {
         Self {
             bounds,
-            y_offset,
+            offset,
             quads: Vec::new(),
             images: Vec::new(),
             text: Vec::new(),
@@ -148,18 +149,18 @@ impl Renderer {
         });
 
         let mut layers = Vec::new();
-        let mut current = Layer::new(
+
+        layers.push(Layer::new(
             Rectangle {
                 x: 0,
                 y: 0,
                 width: u32::from(target.width),
                 height: u32::from(target.height),
             },
-            0,
-        );
+            Vector::new(0, 0),
+        ));
 
-        self.draw_primitive(primitive, &mut current, &mut layers);
-        layers.push(current);
+        self.draw_primitive(primitive, &mut layers);
 
         for layer in layers {
             self.flush(
@@ -178,15 +179,16 @@ impl Renderer {
     fn draw_primitive<'a>(
         &mut self,
         primitive: &'a Primitive,
-        layer: &mut Layer<'a>,
         layers: &mut Vec<Layer<'a>>,
     ) {
+        let layer = layers.last_mut().unwrap();
+
         match primitive {
             Primitive::None => {}
             Primitive::Group { primitives } => {
                 // TODO: Inspect a bit and regroup (?)
                 for primitive in primitives {
-                    self.draw_primitive(primitive, layer, layers)
+                    self.draw_primitive(primitive, layers)
                 }
             }
             Primitive::Text {
@@ -255,7 +257,10 @@ impl Renderer {
                 border_radius,
             } => {
                 layer.quads.push(Quad {
-                    position: [bounds.x, bounds.y - layer.y_offset as f32],
+                    position: [
+                        bounds.x - layer.offset.x as f32,
+                        bounds.y - layer.offset.y as f32,
+                    ],
                     scale: [bounds.width, bounds.height],
                     color: match background {
                         Background::Color(color) => color.into_linear(),
@@ -275,18 +280,22 @@ impl Renderer {
                 offset,
                 content,
             } => {
-                let mut new_layer = Layer::new(
+                let clip_layer = Layer::new(
                     Rectangle {
-                        x: bounds.x as u32,
-                        y: bounds.y as u32 - layer.y_offset,
+                        x: bounds.x as u32 - layer.offset.x,
+                        y: bounds.y as u32 - layer.offset.y,
                         width: bounds.width as u32,
                         height: bounds.height as u32,
                     },
-                    layer.y_offset + offset,
+                    layer.offset + *offset,
                 );
 
+                let new_layer = Layer::new(layer.bounds, layer.offset);
+
+                layers.push(clip_layer);
+
                 // TODO: Primitive culling
-                self.draw_primitive(content, &mut new_layer, layers);
+                self.draw_primitive(content, layers);
 
                 layers.push(new_layer);
             }
@@ -301,7 +310,10 @@ impl Renderer {
         target: &wgpu::TextureView,
     ) {
         let translated = transformation
-            * Transformation::translate(0.0, -(layer.y_offset as f32));
+            * Transformation::translate(
+                -(layer.offset.x as f32),
+                -(layer.offset.y as f32),
+            );
 
         if layer.quads.len() > 0 {
             self.quad_pipeline.draw(
diff --git a/wgpu/src/renderer/checkbox.rs b/wgpu/src/renderer/checkbox.rs
index fd3f08b1..ea7a4c0b 100644
--- a/wgpu/src/renderer/checkbox.rs
+++ b/wgpu/src/renderer/checkbox.rs
@@ -10,6 +10,7 @@ const SIZE: f32 = 28.0;
 impl checkbox::Renderer for Renderer {
     fn node<Message>(&self, checkbox: &Checkbox<Message>) -> Node {
         Row::<(), Self>::new()
+            .width(Length::Fill)
             .spacing(15)
             .align_items(Align::Center)
             .push(
diff --git a/wgpu/src/renderer/scrollable.rs b/wgpu/src/renderer/scrollable.rs
index e812a7e1..360759a5 100644
--- a/wgpu/src/renderer/scrollable.rs
+++ b/wgpu/src/renderer/scrollable.rs
@@ -1,7 +1,7 @@
 use crate::{Primitive, Renderer};
 use iced_native::{
     scrollable, Background, Color, Layout, MouseCursor, Point, Rectangle,
-    Scrollable, Widget,
+    Scrollable, Vector, Widget,
 };
 
 const SCROLLBAR_WIDTH: u16 = 10;
@@ -56,9 +56,9 @@ impl scrollable::Renderer for Renderer {
         let (content, mouse_cursor) =
             scrollable.content.draw(self, content, cursor_position);
 
-        let primitive = Primitive::Clip {
+        let clip = Primitive::Clip {
             bounds,
-            offset,
+            offset: Vector::new(0, offset),
             content: Box::new(content),
         };
 
@@ -107,19 +107,15 @@ impl scrollable::Renderer for Renderer {
                     };
 
                     Primitive::Group {
-                        primitives: vec![
-                            primitive,
-                            scrollbar_background,
-                            scrollbar,
-                        ],
+                        primitives: vec![clip, scrollbar_background, scrollbar],
                     }
                 } else {
                     Primitive::Group {
-                        primitives: vec![primitive, scrollbar],
+                        primitives: vec![clip, scrollbar],
                     }
                 }
             } else {
-                primitive
+                clip
             },
             if is_mouse_over_scrollbar
                 || scrollable.state.is_scrollbar_grabbed()
diff --git a/wgpu/src/renderer/text.rs b/wgpu/src/renderer/text.rs
index 8fbade4e..82f75f09 100644
--- a/wgpu/src/renderer/text.rs
+++ b/wgpu/src/renderer/text.rs
@@ -47,7 +47,7 @@ impl text::Renderer for Renderer {
                 let (width, height) = if let Some(bounds) =
                     glyph_brush.borrow_mut().glyph_bounds(&text)
                 {
-                    (bounds.width(), bounds.height())
+                    (bounds.width().ceil(), bounds.height().ceil())
                 } else {
                     (0.0, 0.0)
                 };
diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs
new file mode 100644
index 00000000..cff8bf23
--- /dev/null
+++ b/wgpu/src/renderer/text_input.rs
@@ -0,0 +1,171 @@
+use crate::{Primitive, Renderer};
+
+use iced_native::{
+    text::HorizontalAlignment, text::VerticalAlignment, text_input, Background,
+    Color, MouseCursor, Point, Rectangle, TextInput, Vector,
+};
+use std::f32;
+
+impl text_input::Renderer for Renderer {
+    fn default_size(&self) -> u16 {
+        // TODO: Make this configurable
+        20
+    }
+
+    fn draw<Message>(
+        &mut self,
+        text_input: &TextInput<Message>,
+        bounds: Rectangle,
+        text_bounds: Rectangle,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let is_mouse_over = bounds.contains(cursor_position);
+
+        let border = Primitive::Quad {
+            bounds,
+            background: Background::Color(
+                if is_mouse_over || text_input.state.is_focused {
+                    Color {
+                        r: 0.5,
+                        g: 0.5,
+                        b: 0.5,
+                        a: 1.0,
+                    }
+                } else {
+                    Color {
+                        r: 0.7,
+                        g: 0.7,
+                        b: 0.7,
+                        a: 1.0,
+                    }
+                },
+            ),
+            border_radius: 5,
+        };
+
+        let input = Primitive::Quad {
+            bounds: Rectangle {
+                x: bounds.x + 1.0,
+                y: bounds.y + 1.0,
+                width: bounds.width - 2.0,
+                height: bounds.height - 2.0,
+            },
+            background: Background::Color(Color::WHITE),
+            border_radius: 5,
+        };
+
+        let size = f32::from(text_input.size.unwrap_or(self.default_size()));
+        let text = text_input.value.to_string();
+
+        let value = Primitive::Text {
+            content: if text.is_empty() {
+                text_input.placeholder.clone()
+            } else {
+                text.clone()
+            },
+            color: if text.is_empty() {
+                Color {
+                    r: 0.7,
+                    g: 0.7,
+                    b: 0.7,
+                    a: 1.0,
+                }
+            } else {
+                Color {
+                    r: 0.3,
+                    g: 0.3,
+                    b: 0.3,
+                    a: 1.0,
+                }
+            },
+            bounds: Rectangle {
+                width: f32::INFINITY,
+                ..text_bounds
+            },
+            size,
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Center,
+        };
+
+        let (contents_primitive, offset) = if text_input.state.is_focused {
+            use wgpu_glyph::{GlyphCruncher, Scale, Section};
+
+            let text_before_cursor = &text_input
+                .value
+                .until(text_input.state.cursor_position(&text_input.value))
+                .to_string();
+
+            let mut text_value_width = self
+                .glyph_brush
+                .borrow_mut()
+                .glyph_bounds(Section {
+                    text: text_before_cursor,
+                    bounds: (f32::INFINITY, text_bounds.height),
+                    scale: Scale { x: size, y: size },
+                    ..Default::default()
+                })
+                .map(|bounds| bounds.width().round())
+                .unwrap_or(0.0);
+
+            let spaces_at_the_end =
+                text_before_cursor.len() - text_before_cursor.trim_end().len();
+
+            if spaces_at_the_end > 0 {
+                let space_width = {
+                    let glyph_brush = self.glyph_brush.borrow();
+
+                    // TODO: Select appropriate font
+                    let font = &glyph_brush.fonts()[0];
+
+                    font.glyph(' ')
+                        .scaled(Scale { x: size, y: size })
+                        .h_metrics()
+                        .advance_width
+                };
+
+                text_value_width += spaces_at_the_end as f32 * space_width;
+            }
+
+            let cursor = Primitive::Quad {
+                bounds: Rectangle {
+                    x: text_bounds.x + text_value_width,
+                    y: text_bounds.y,
+                    width: 1.0,
+                    height: text_bounds.height,
+                },
+                background: Background::Color(Color::BLACK),
+                border_radius: 0,
+            };
+
+            (
+                Primitive::Group {
+                    primitives: vec![value, cursor],
+                },
+                Vector::new(
+                    ((text_value_width + 5.0) - text_bounds.width).max(0.0)
+                        as u32,
+                    0,
+                ),
+            )
+        } else {
+            (value, Vector::new(0, 0))
+        };
+
+        let contents = Primitive::Clip {
+            bounds: text_bounds,
+            offset,
+            content: Box::new(contents_primitive),
+        };
+
+        (
+            Primitive::Group {
+                primitives: vec![border, input, contents],
+            },
+            if is_mouse_over {
+                MouseCursor::Text
+            } else {
+                MouseCursor::OutOfBounds
+            },
+        )
+    }
+}