Draft TextInput widget structure

Also started a `todos` example to showcase it!

core/src/widget.rs

@@ -17,18 +17,18 @@ pub mod button;
 pub mod scrollable;
 pub mod slider;
 pub mod text;
+pub mod text_input;
 
 #[doc(no_inline)]
 pub use button::Button;
-
-#[doc(no_inline)]
-pub use slider::Slider;
-
-#[doc(no_inline)]
-pub use text::Text;
-
 #[doc(no_inline)]
 pub use scrollable::Scrollable;
+#[doc(no_inline)]
+pub use slider::Slider;
+#[doc(no_inline)]
+pub use text::Text;
+#[doc(no_inline)]
+pub use text_input::TextInput;
 
 pub use checkbox::Checkbox;
 pub use column::Column;

core/src/widget/text_input.rs

@@ -0,0 +1,84 @@
+use crate::Length;
+
+pub struct TextInput<'a, Message> {
+    pub state: &'a mut State,
+    pub placeholder: String,
+    pub value: String,
+    pub width: Length,
+    pub max_width: Length,
+    pub padding: u16,
+    pub size: Option<u16>,
+    pub on_change: Box<dyn Fn(String) -> Message>,
+    pub on_submit: Option<Message>,
+}
+
+#[derive(Debug, Default)]
+pub struct State {}
+
+impl<'a, Message> TextInput<'a, Message> {
+    pub fn new<F>(
+        state: &'a mut State,
+        placeholder: &str,
+        value: &str,
+        on_change: F,
+    ) -> Self
+    where
+        F: 'static + Fn(String) -> Message,
+    {
+        Self {
+            state,
+            placeholder: String::from(placeholder),
+            value: String::from(value),
+            width: Length::Fill,
+            max_width: Length::Shrink,
+            padding: 0,
+            size: None,
+            on_change: Box::new(on_change),
+            on_submit: None,
+        }
+    }
+
+    /// Sets the width of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the maximum width of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn max_width(mut self, max_width: Length) -> Self {
+        self.max_width = max_width;
+        self
+    }
+
+    /// Sets the padding of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn padding(mut self, units: u16) -> Self {
+        self.padding = units;
+        self
+    }
+
+    pub fn size(mut self, size: u16) -> Self {
+        self.size = Some(size);
+        self
+    }
+
+    pub fn on_submit(mut self, message: Message) -> Self {
+        self.on_submit = Some(message);
+        self
+    }
+}
+
+impl<'a, Message> std::fmt::Debug for TextInput<'a, Message>
+where
+    Message: std::fmt::Debug,
+{
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        // TODO: Complete once stabilized
+        f.debug_struct("TextInput").finish()
+    }
+}

examples/todos.rs

@@ -0,0 +1,69 @@
+use iced::{
+    text::HorizontalAlignment, text_input, Align, Application, Color, Column,
+    Element, Justify, Length, Text, TextInput,
+};
+
+pub fn main() {
+    Todos::default().run()
+}
+
+#[derive(Default)]
+struct Todos {
+    input: text_input::State,
+    input_value: String,
+}
+
+#[derive(Debug, Clone)]
+pub enum Message {
+    InputChanged(String),
+    CreateTask,
+}
+
+impl Application for Todos {
+    type Message = Message;
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::InputChanged(value) => {
+                self.input_value = value;
+            }
+            Message::CreateTask => {}
+        }
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let title = Text::new("todos")
+            .size(100)
+            .color(GRAY)
+            .horizontal_alignment(HorizontalAlignment::Center);
+
+        let input = TextInput::new(
+            &mut self.input,
+            "What needs to be done?",
+            &self.input_value,
+            Message::InputChanged,
+        )
+        .padding(15)
+        .size(30)
+        .on_submit(Message::CreateTask);
+
+        Column::new()
+            .max_width(Length::Units(800))
+            .height(Length::Fill)
+            .align_self(Align::Center)
+            .justify_content(Justify::Center)
+            .spacing(20)
+            .padding(20)
+            .push(title)
+            .push(input)
+            .into()
+    }
+}
+
+// Colors
+const GRAY: Color = Color {
+    r: 0.5,
+    g: 0.5,
+    b: 0.5,
+    a: 1.0,
+};

native/src/mouse_cursor.rs

@@ -18,4 +18,7 @@ pub enum MouseCursor {
 
     /// The cursor is grabbing a widget.
     Grabbing,
+
+    /// The cursor is over a text widget.
+    Text,
 }

native/src/widget.rs

@@ -29,6 +29,7 @@ pub mod row;
 pub mod scrollable;
 pub mod slider;
 pub mod text;
+pub mod text_input;
 
 #[doc(no_inline)]
 pub use button::Button;
@@ -48,6 +49,8 @@ pub use scrollable::Scrollable;
 pub use slider::Slider;
 #[doc(no_inline)]
 pub use text::Text;
+#[doc(no_inline)]
+pub use text_input::TextInput;
 
 use crate::{Event, Hasher, Layout, Node, Point};
 

native/src/widget/text_input.rs

@@ -0,0 +1,84 @@
+use crate::{
+    Element, Event, Hasher, Layout, Length, Node, Point, Rectangle, Style,
+    Widget,
+};
+
+pub use iced_core::{text_input::State, TextInput};
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for TextInput<'a, Message>
+where
+    Renderer: self::Renderer,
+    Message: Clone + std::fmt::Debug,
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        let text_bounds =
+            Node::new(Style::default().width(Length::Fill).height(
+                Length::Units(self.size.unwrap_or(renderer.default_size())),
+            ));
+
+        Node::with_children(
+            Style::default()
+                .width(self.width)
+                .max_width(self.width)
+                .padding(self.padding),
+            vec![text_bounds],
+        )
+    }
+
+    fn on_event(
+        &mut self,
+        _event: Event,
+        _layout: Layout<'_>,
+        _cursor_position: Point,
+        _messages: &mut Vec<Message>,
+        _renderer: &Renderer,
+    ) {
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Renderer::Output {
+        let bounds = layout.bounds();
+        let text_bounds = layout.children().next().unwrap().bounds();
+
+        renderer.draw(&self, bounds, text_bounds, cursor_position)
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        use std::any::TypeId;
+        use std::hash::Hash;
+
+        TypeId::of::<TextInput<'static, ()>>().hash(state);
+
+        self.width.hash(state);
+        self.max_width.hash(state);
+        self.padding.hash(state);
+        self.size.hash(state);
+    }
+}
+
+pub trait Renderer: crate::Renderer + Sized {
+    fn default_size(&self) -> u16;
+
+    fn draw<Message>(
+        &mut self,
+        text_input: &TextInput<'_, Message>,
+        bounds: Rectangle,
+        text_bounds: Rectangle,
+        cursor_position: Point,
+    ) -> Self::Output;
+}
+
+impl<'a, Message, Renderer> From<TextInput<'a, Message>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: 'static + self::Renderer,
+    Message: 'static + Clone + std::fmt::Debug,
+{
+    fn from(button: TextInput<'a, Message>) -> Element<'a, Message, Renderer> {
+        Element::new(button)
+    }
+}

src/winit.rs

@@ -1,8 +1,9 @@
 pub use iced_wgpu::{Primitive, Renderer};
 
 pub use iced_winit::{
-    button, scrollable, slider, text, winit, Align, Background, Checkbox,
+    button, scrollable, slider, text, text_input, winit, Align, Background,
-    Color, Image, Justify, Length, Radio, Scrollable, Slider, Text,
+    Checkbox, Color, Image, Justify, Length, Radio, Scrollable, Slider, Text,
+    TextInput,
 };
 
 pub type Element<'a, Message> = iced_winit::Element<'a, Message, Renderer>;

wgpu/src/renderer.rs

@@ -23,6 +23,7 @@ mod row;
 mod scrollable;
 mod slider;
 mod text;
+mod text_input;
 
 pub struct Renderer {
     surface: Surface,
@@ -148,7 +149,8 @@ impl Renderer {
         });
 
         let mut layers = Vec::new();
-        let mut current = Layer::new(
+
+        layers.push(Layer::new(
             Rectangle {
                 x: 0,
                 y: 0,
@@ -156,10 +158,9 @@ impl Renderer {
                 height: u32::from(target.height),
             },
             0,
-        );
+        ));
 
-        self.draw_primitive(primitive, &mut current, &mut layers);
+        self.draw_primitive(primitive, &mut layers);
-        layers.push(current);
 
         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 {
@@ -275,7 +277,7 @@ 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,
@@ -285,8 +287,12 @@ impl Renderer {
                     layer.y_offset + offset,
                 );
 
+                let new_layer = Layer::new(layer.bounds, layer.y_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);
             }

wgpu/src/renderer/scrollable.rs

@@ -56,7 +56,7 @@ 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,
             content: Box::new(content),
@@ -107,19 +107,15 @@ impl scrollable::Renderer for Renderer {
                     };
 
                     Primitive::Group {
-                        primitives: vec![
+                        primitives: vec![clip, scrollbar_background, scrollbar],
-                            primitive,
-                            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()

wgpu/src/renderer/text_input.rs

@@ -0,0 +1,100 @@
+use crate::{Primitive, Renderer};
+
+use iced_native::{
+    text::HorizontalAlignment, text::VerticalAlignment, text_input, Background,
+    Color, MouseCursor, Point, Rectangle, TextInput,
+};
+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 {
+                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 value = Primitive::Clip {
+            bounds: text_bounds,
+            offset: 0,
+            content: Box::new(Primitive::Text {
+                content: if text_input.value.is_empty() {
+                    text_input.placeholder.clone()
+                } else {
+                    text_input.value.clone()
+                },
+                color: if text_input.value.is_empty() {
+                    Color {
+                        r: 0.7,
+                        g: 0.7,
+                        b: 0.7,
+                        a: 1.0,
+                    }
+                } else {
+                    Color {
+                        r: 0.9,
+                        g: 0.9,
+                        b: 0.9,
+                        a: 1.0,
+                    }
+                },
+                bounds: Rectangle {
+                    width: f32::INFINITY,
+                    ..text_bounds
+                },
+                size: f32::from(text_input.size.unwrap_or(self.default_size())),
+                horizontal_alignment: HorizontalAlignment::Left,
+                vertical_alignment: VerticalAlignment::Center,
+            }),
+        };
+
+        (
+            Primitive::Group {
+                primitives: vec![border, input, value],
+            },
+            if is_mouse_over {
+                MouseCursor::Text
+            } else {
+                MouseCursor::OutOfBounds
+            },
+        )
+    }
+}

winit/src/conversion.rs

@@ -9,6 +9,7 @@ pub fn mouse_cursor(mouse_cursor: MouseCursor) -> winit::window::CursorIcon {
         MouseCursor::Working => winit::window::CursorIcon::Progress,
         MouseCursor::Grab => winit::window::CursorIcon::Grab,
         MouseCursor::Grabbing => winit::window::CursorIcon::Grabbing,
+        MouseCursor::Text => winit::window::CursorIcon::Text,
     }
 }