diff options
| -rw-r--r-- | core/src/widget.rs | 8 | ||||
| -rw-r--r-- | core/src/widget/text_input.rs | 86 | ||||
| -rw-r--r-- | examples/todos.rs | 116 | ||||
| -rw-r--r-- | native/src/mouse_cursor.rs | 3 | ||||
| -rw-r--r-- | native/src/widget.rs | 3 | ||||
| -rw-r--r-- | native/src/widget/text_input.rs | 122 | ||||
| -rw-r--r-- | src/winit.rs | 5 | ||||
| -rw-r--r-- | wgpu/src/renderer.rs | 22 | ||||
| -rw-r--r-- | wgpu/src/renderer/checkbox.rs | 1 | ||||
| -rw-r--r-- | wgpu/src/renderer/scrollable.rs | 14 | ||||
| -rw-r--r-- | wgpu/src/renderer/text.rs | 2 | ||||
| -rw-r--r-- | wgpu/src/renderer/text_input.rs | 140 | ||||
| -rw-r--r-- | winit/src/application.rs | 25 | ||||
| -rw-r--r-- | winit/src/conversion.rs | 1 |
14 files changed, 522 insertions, 26 deletions
diff --git a/core/src/widget.rs b/core/src/widget.rs index 3ee8e347..41c4c6a8 100644 --- a/core/src/widget.rs +++ b/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 scrollable::Scrollable; #[doc(no_inline)] pub use slider::Slider; - #[doc(no_inline)] pub use text::Text; - #[doc(no_inline)] -pub use scrollable::Scrollable; +pub use text_input::TextInput; pub use checkbox::Checkbox; pub use column::Column; diff --git a/core/src/widget/text_input.rs b/core/src/widget/text_input.rs new file mode 100644 index 00000000..e0f0744b --- /dev/null +++ b/core/src/widget/text_input.rs @@ -0,0 +1,86 @@ +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 { + pub is_focused: bool, +} + +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() + } +} diff --git a/examples/todos.rs b/examples/todos.rs new file mode 100644 index 00000000..6189c8db --- /dev/null +++ b/examples/todos.rs @@ -0,0 +1,116 @@ +use iced::{ + scrollable, text::HorizontalAlignment, text_input, Align, Application, + Checkbox, Color, Column, Element, Length, Scrollable, Text, TextInput, +}; + +pub fn main() { + Todos::default().run() +} + +#[derive(Debug, Default)] +struct Todos { + scroll: scrollable::State, + input: text_input::State, + input_value: String, + tasks: Vec<Task>, +} + +#[derive(Debug)] +struct Task { + description: String, + completed: bool, +} + +impl Task { + fn new(description: String) -> Self { + Task { + description, + completed: false, + } + } + + fn view(&mut self) -> Element<bool> { + Checkbox::new(self.completed, &self.description, |checked| checked) + .into() + } +} + +#[derive(Debug, Clone)] +pub enum Message { + InputChanged(String), + CreateTask, + TaskChanged(usize, bool), +} + +impl Application for Todos { + type Message = Message; + + fn update(&mut self, message: Message) { + match message { + Message::InputChanged(value) => { + self.input_value = value; + } + Message::CreateTask => { + if !self.input_value.is_empty() { + self.tasks.push(Task::new(self.input_value.clone())); + self.input_value = String::new(); + } + } + Message::TaskChanged(i, completed) => { + if let Some(task) = self.tasks.get_mut(i) { + task.completed = completed; + } + } + } + + dbg!(self); + } + + 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); + + let tasks = self.tasks.iter_mut().enumerate().fold( + Column::new().spacing(20), + |column, (i, task)| { + column.push( + task.view() + .map(move |state| Message::TaskChanged(i, state)), + ) + }, + ); + + let content = Column::new() + .max_width(Length::Units(800)) + .align_self(Align::Center) + .spacing(20) + .push(title) + .push(input) + .push(tasks); + + Scrollable::new(&mut self.scroll) + .padding(40) + .push(content) + .into() + } +} + +// Colors +const GRAY: Color = Color { + r: 0.5, + g: 0.5, + b: 0.5, + a: 1.0, +}; diff --git a/native/src/mouse_cursor.rs b/native/src/mouse_cursor.rs index 291e57a6..a4740a27 100644 --- a/native/src/mouse_cursor.rs +++ b/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, } diff --git a/native/src/widget.rs b/native/src/widget.rs index c04f3377..01f5c92e 100644 --- a/native/src/widget.rs +++ b/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}; diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs new file mode 100644 index 00000000..976ca995 --- /dev/null +++ b/native/src/widget/text_input.rs @@ -0,0 +1,122 @@ +use crate::{ + input::{keyboard, mouse, ButtonState}, + 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, + ) { + match event { + Event::Mouse(mouse::Event::Input { + button: mouse::Button::Left, + state: ButtonState::Pressed, + }) => { + self.state.is_focused = + layout.bounds().contains(cursor_position); + } + Event::Keyboard(keyboard::Event::CharacterReceived(c)) + if self.state.is_focused && !c.is_control() => + { + self.value.push(c); + + let message = (self.on_change)(self.value.clone()); + messages.push(message); + } + Event::Keyboard(keyboard::Event::Input { + key_code: keyboard::KeyCode::Backspace, + state: ButtonState::Pressed, + }) => { + let _ = self.value.pop(); + + let message = (self.on_change)(self.value.clone()); + messages.push(message); + } + Event::Keyboard(keyboard::Event::Input { + key_code: keyboard::KeyCode::Enter, + state: ButtonState::Pressed, + }) => { + if let Some(on_submit) = self.on_submit.clone() { + messages.push(on_submit); + } + } + _ => {} + } + } + + 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( + text_input: TextInput<'a, Message>, + ) -> Element<'a, Message, Renderer> { + Element::new(text_input) + } +} diff --git a/src/winit.rs b/src/winit.rs index b2200551..51ae1c1f 100644 --- a/src/winit.rs +++ b/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, - Color, Image, Justify, Length, Radio, Scrollable, Slider, Text, + button, scrollable, slider, text, text_input, winit, Align, Background, + Checkbox, Color, Image, Justify, Length, Radio, Scrollable, Slider, Text, + TextInput, }; pub type Element<'a, Message> = iced_winit::Element<'a, Message, Renderer>; diff --git a/wgpu/src/renderer.rs b/wgpu/src/renderer.rs index a70693af..fbc39327 100644 --- a/wgpu/src/renderer.rs +++ b/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); - 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 { @@ -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); } 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 7bce3a68..f1d87857 100644 --- a/wgpu/src/renderer/scrollable.rs +++ b/wgpu/src/renderer/scrollable.rs @@ -5,7 +5,7 @@ use iced_native::{ }; const SCROLLBAR_WIDTH: u16 = 10; -const SCROLLBAR_MARGIN: u16 = 10; +const SCROLLBAR_MARGIN: u16 = 5; fn scrollbar_bounds(bounds: Rectangle) -> Rectangle { Rectangle { @@ -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![ - 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..606ebe9f 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().round(), bounds.height().round()) } 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..30e06878 --- /dev/null +++ b/wgpu/src/renderer/text_input.rs @@ -0,0 +1,140 @@ +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 || 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 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.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, + }), + }; + + ( + Primitive::Group { + primitives: if text_input.state.is_focused { + use wgpu_glyph::{GlyphCruncher, Scale, Section}; + + let mut text_value_width = self + .glyph_brush + .borrow_mut() + .glyph_bounds(Section { + text: &text_input.value, + 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_input.value.len() + - text_input.value.trim_end().len(); + + if spaces_at_the_end > 0 { + text_value_width += spaces_at_the_end as f32 * 5.0; + } + + 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, + }; + + vec![border, input, value, cursor] + } else { + vec![border, input, value] + }, + }, + if is_mouse_over { + MouseCursor::Text + } else { + MouseCursor::OutOfBounds + }, + ) + } +} diff --git a/winit/src/application.rs b/winit/src/application.rs index c8748199..b90b5eef 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -1,6 +1,8 @@ use crate::{ - column, conversion, input::mouse, renderer::Windowed, Cache, Column, - Element, Event, Length, MouseCursor, UserInterface, + column, conversion, + input::{keyboard, mouse}, + renderer::Windowed, + Cache, Column, Element, Event, Length, MouseCursor, UserInterface, }; pub trait Application { @@ -167,6 +169,25 @@ pub trait Application { )); } }, + WindowEvent::ReceivedCharacter(c) => { + events.push(Event::Keyboard( + keyboard::Event::CharacterReceived(c), + )); + } + WindowEvent::KeyboardInput { + input: + winit::event::KeyboardInput { + virtual_keycode: Some(virtual_keycode), + state, + .. + }, + .. + } => { + events.push(Event::Keyboard(keyboard::Event::Input { + key_code: conversion::key_code(virtual_keycode), + state: conversion::button_state(state), + })); + } WindowEvent::CloseRequested => { *control_flow = ControlFlow::Exit; } diff --git a/winit/src/conversion.rs b/winit/src/conversion.rs index bb0d252e..e73fa008 100644 --- a/winit/src/conversion.rs +++ b/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, } } |