From 14fb7e13fb272a43b9924d5d2823b0c105d781b0 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 5 Dec 2019 03:09:39 +0100 Subject: Place `TextInput` cursor position on click --- native/src/renderer/null.rs | 4 ++ native/src/widget/text_input.rs | 78 ++++++++++++++++++++++++++++++++-- wgpu/src/renderer/widget/text_input.rs | 37 +++++++++------- 3 files changed, 100 insertions(+), 19 deletions(-) diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs index da0e5159..02f033a5 100644 --- a/native/src/renderer/null.rs +++ b/native/src/renderer/null.rs @@ -89,6 +89,10 @@ impl text_input::Renderer for Null { 20 } + fn measure_value(&self, _value: &str, _size: u16) -> f32 { + 0.0 + } + fn draw( &mut self, _bounds: Rectangle, diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index f97ed424..764f87cf 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -160,7 +160,7 @@ where layout: Layout<'_>, cursor_position: Point, messages: &mut Vec, - _renderer: &Renderer, + renderer: &Renderer, ) { match event { Event::Mouse(mouse::Event::Input { @@ -170,8 +170,22 @@ where self.state.is_focused = layout.bounds().contains(cursor_position); - if self.state.cursor_position(&self.value) == 0 { - self.state.move_cursor_to_end(&self.value); + if self.state.is_focused { + let text_layout = layout.children().next().unwrap(); + let target = cursor_position.x - text_layout.bounds().x; + + if target < 0.0 { + self.state.cursor_position = 0; + } else { + self.state.cursor_position = find_cursor_position( + renderer, + target, + &self.value, + self.size.unwrap_or(renderer.default_size()), + 0, + self.value.len(), + ); + } } } Event::Keyboard(keyboard::Event::CharacterReceived(c)) @@ -275,6 +289,11 @@ pub trait Renderer: crate::Renderer + Sized { /// [`TextInput`]: struct.TextInput.html fn default_size(&self) -> u16; + /// Returns the width of the value of the [`TextInput`]. + /// + /// [`TextInput`]: struct.TextInput.html + fn measure_value(&self, value: &str, size: u16) -> f32; + /// Draws a [`TextInput`]. /// /// It receives: @@ -437,3 +456,56 @@ impl Value { let _ = self.0.remove(index); } } + +// TODO: Reduce allocations +fn find_cursor_position( + renderer: &Renderer, + target: f32, + value: &Value, + size: u16, + start: usize, + end: usize, +) -> usize { + if start >= end { + if start == 0 { + return 0; + } + + let prev = value.until(start - 1); + let next = value.until(start); + + let prev_width = renderer.measure_value(&prev.to_string(), size); + let next_width = renderer.measure_value(&next.to_string(), size); + + if (target - next_width).abs() > (target - prev_width).abs() { + return start - 1; + } else { + return start; + } + } + + let index = (end - start) / 2; + let subvalue = value.until(start + index); + + let width = renderer.measure_value(&subvalue.to_string(), size); + + if width > target { + find_cursor_position( + renderer, + target, + value, + size, + start, + start + index, + ) + } else { + find_cursor_position( + renderer, + target, + value, + size, + start + index + 1, + end, + ) + } +} diff --git a/wgpu/src/renderer/widget/text_input.rs b/wgpu/src/renderer/widget/text_input.rs index d64fca6d..c6c64b88 100644 --- a/wgpu/src/renderer/widget/text_input.rs +++ b/wgpu/src/renderer/widget/text_input.rs @@ -12,6 +12,24 @@ impl text_input::Renderer for Renderer { 20 } + fn measure_value(&self, value: &str, size: u16) -> f32 { + let (mut width, _) = self.text_pipeline.measure( + value, + f32::from(size), + Font::Default, + Size::INFINITY, + ); + + let spaces_at_the_end = value.len() - value.trim_end().len(); + + if spaces_at_the_end > 0 { + let space_width = self.text_pipeline.space_width(size as f32); + width += spaces_at_the_end as f32 * space_width; + } + + width + } + fn draw( &mut self, bounds: Rectangle, @@ -48,7 +66,6 @@ impl text_input::Renderer for Renderer { border_radius: 4, }; - let size = f32::from(size); let text = value.to_string(); let text_value = Primitive::Text { @@ -68,7 +85,7 @@ impl text_input::Renderer for Renderer { width: f32::INFINITY, ..text_bounds }, - size, + size: f32::from(size), horizontal_alignment: HorizontalAlignment::Left, vertical_alignment: VerticalAlignment::Center, }; @@ -77,20 +94,8 @@ impl text_input::Renderer for Renderer { let text_before_cursor = value.until(state.cursor_position(value)).to_string(); - let (mut text_value_width, _) = self.text_pipeline.measure( - &text_before_cursor, - size, - Font::Default, - Size::new(f32::INFINITY, text_bounds.height), - ); - - let spaces_at_the_end = - text_before_cursor.len() - text_before_cursor.trim_end().len(); - - if spaces_at_the_end > 0 { - let space_width = self.text_pipeline.space_width(size); - text_value_width += spaces_at_the_end as f32 * space_width; - } + let text_value_width = + self.measure_value(&text_before_cursor, size); let cursor = Primitive::Quad { bounds: Rectangle { -- cgit From ef987ae2ec2b2fed3e22fda89625483d15d79927 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 5 Dec 2019 03:14:32 +0100 Subject: Remove unnecessary use of `abs` --- native/src/widget/text_input.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 764f87cf..122f8973 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -477,7 +477,7 @@ fn find_cursor_position( let prev_width = renderer.measure_value(&prev.to_string(), size); let next_width = renderer.measure_value(&next.to_string(), size); - if (target - next_width).abs() > (target - prev_width).abs() { + if next_width - target > target - prev_width { return start - 1; } else { return start; -- cgit From 7c8799e4936ccea35ad936e4098df75bf3257639 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 5 Dec 2019 03:16:50 +0100 Subject: Support `Home` and `End` keys for `TextInput` --- native/src/widget/text_input.rs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 122f8973..dae772bc 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -238,6 +238,12 @@ where keyboard::KeyCode::Right => { self.state.move_cursor_right(&self.value); } + keyboard::KeyCode::Home => { + self.state.cursor_position = 0; + } + keyboard::KeyCode::End => { + self.state.move_cursor_to_end(&self.value); + } _ => {} }, _ => {} -- cgit From 31b0b7f58071b42224fd56e9bb13ad67e7ffeff0 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 5 Dec 2019 03:33:36 +0100 Subject: Update native `CHANGELOG` --- native/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/native/CHANGELOG.md b/native/CHANGELOG.md index cf5b79dd..27bae1aa 100644 --- a/native/CHANGELOG.md +++ b/native/CHANGELOG.md @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - `image::Handle` type with `from_path` and `from_memory` methods. [#90] - `image::Data` enum representing different kinds of image data. [#90] +- `text_input::Renderer::measure_value` required method to measure the width of a `TextInput` value. [#108] +- Click-based cursor positioning for `TextInput`. [#108] +- `Home` and `End` keys support for `TextInput`. [#108] ### Changed - `Image::new` takes an `Into` now instead of an `Into`. [#90] @@ -17,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `Image` widget not keeping aspect ratio consistently. [#90] [#90]: https://github.com/hecrj/iced/pull/90 +[#108]: https://github.com/hecrj/iced/pull/108 ## [0.1.0] - 2019-11-25 ### Added -- cgit From 65cac922b3ff6cf289319b9c12aab68aabea844a Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 6 Dec 2019 04:01:48 +0100 Subject: Add `ModifiersState` to `keyboard::Event::Input` --- native/src/input/keyboard.rs | 2 ++ native/src/input/keyboard/event.rs | 7 +++++-- native/src/input/keyboard/modifiers_state.rs | 15 +++++++++++++++ native/src/widget/text_input.rs | 1 + winit/src/application.rs | 2 ++ winit/src/conversion.rs | 20 +++++++++++++++++++- 6 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 native/src/input/keyboard/modifiers_state.rs diff --git a/native/src/input/keyboard.rs b/native/src/input/keyboard.rs index 57c24484..432e75ba 100644 --- a/native/src/input/keyboard.rs +++ b/native/src/input/keyboard.rs @@ -1,6 +1,8 @@ //! Build keyboard events. mod event; mod key_code; +mod modifiers_state; pub use event::Event; pub use key_code::KeyCode; +pub use modifiers_state::ModifiersState; diff --git a/native/src/input/keyboard/event.rs b/native/src/input/keyboard/event.rs index 8118f112..862f30c4 100644 --- a/native/src/input/keyboard/event.rs +++ b/native/src/input/keyboard/event.rs @@ -1,13 +1,13 @@ -use super::KeyCode; +use super::{KeyCode, ModifiersState}; use crate::input::ButtonState; -#[derive(Debug, Clone, Copy, PartialEq)] /// A keyboard event. /// /// _**Note:** This type is largely incomplete! If you need to track /// additional events, feel free to [open an issue] and share your use case!_ /// /// [open an issue]: https://github.com/hecrj/iced/issues +#[derive(Debug, Clone, Copy, PartialEq)] pub enum Event { /// A keyboard key was pressed or released. Input { @@ -16,6 +16,9 @@ pub enum Event { /// The key identifier key_code: KeyCode, + + /// The state of the modifier keys + modifiers: ModifiersState, }, /// A unicode character was received. diff --git a/native/src/input/keyboard/modifiers_state.rs b/native/src/input/keyboard/modifiers_state.rs new file mode 100644 index 00000000..4e3794b3 --- /dev/null +++ b/native/src/input/keyboard/modifiers_state.rs @@ -0,0 +1,15 @@ +/// The current state of the keyboard modifiers. +#[derive(Debug, Clone, Copy, PartialEq)] +pub struct ModifiersState { + /// Whether a shift key is pressed + pub shift: bool, + + /// Whether a control key is pressed + pub control: bool, + + /// Whether an alt key is pressed + pub alt: bool, + + /// Whether a logo key is pressed (e.g. windows key, command key...) + pub logo: bool, +} diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index dae772bc..cfa8b0f4 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -202,6 +202,7 @@ where Event::Keyboard(keyboard::Event::Input { key_code, state: ButtonState::Pressed, + modifiers, }) if self.state.is_focused => match key_code { keyboard::KeyCode::Enter => { if let Some(on_submit) = self.on_submit.clone() { diff --git a/winit/src/application.rs b/winit/src/application.rs index 3772a667..85d06d9b 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -319,6 +319,7 @@ pub trait Application: Sized { winit::event::KeyboardInput { virtual_keycode: Some(virtual_keycode), state, + modifiers, .. }, .. @@ -334,6 +335,7 @@ pub trait Application: Sized { events.push(Event::Keyboard(keyboard::Event::Input { key_code: conversion::key_code(virtual_keycode), state: conversion::button_state(state), + modifiers: conversion::modifiers_state(modifiers), })); } WindowEvent::CloseRequested => { diff --git a/winit/src/conversion.rs b/winit/src/conversion.rs index 03d583fb..0537d853 100644 --- a/winit/src/conversion.rs +++ b/winit/src/conversion.rs @@ -3,7 +3,10 @@ //! [`winit`]: https://github.com/rust-windowing/winit //! [`iced_native`]: https://github.com/hecrj/iced/tree/master/native use crate::{ - input::{keyboard::KeyCode, mouse, ButtonState}, + input::{ + keyboard::{KeyCode, ModifiersState}, + mouse, ButtonState, + }, MouseCursor, }; @@ -47,6 +50,21 @@ pub fn button_state(element_state: winit::event::ElementState) -> ButtonState { } } +/// Convert some `ModifiersState` from [`winit`] to an [`iced_native`] modifiers state. +/// +/// [`winit`]: https://github.com/rust-windowing/winit +/// [`iced_native`]: https://github.com/hecrj/iced/tree/master/native +pub fn modifiers_state( + modifiers: winit::event::ModifiersState, +) -> ModifiersState { + ModifiersState { + shift: modifiers.shift, + control: modifiers.ctrl, + alt: modifiers.alt, + logo: modifiers.logo, + } +} + /// Convert a `VirtualKeyCode` from [`winit`] to an [`iced_native`] key code. /// /// [`winit`]: https://github.com/rust-windowing/winit -- cgit From 114a759d2cb6740c2dce405cbc96ed7874a8842c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 6 Dec 2019 04:01:54 +0100 Subject: Implement word movement in `TextInput` --- native/src/widget/text_input.rs | 83 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 76 insertions(+), 7 deletions(-) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index cfa8b0f4..0620e928 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -234,10 +234,18 @@ where } } keyboard::KeyCode::Left => { - self.state.move_cursor_left(&self.value); + if modifiers.control { + self.state.move_cursor_left_by_words(&self.value); + } else { + self.state.move_cursor_left(&self.value); + } } keyboard::KeyCode::Right => { - self.state.move_cursor_right(&self.value); + if modifiers.control { + self.state.move_cursor_right_by_words(&self.value); + } else { + self.state.move_cursor_right(&self.value); + } } keyboard::KeyCode::Home => { self.state.cursor_position = 0; @@ -382,6 +390,17 @@ impl State { self.cursor_position.min(value.len()) } + /// Moves the cursor of a [`TextInput`] to the left. + /// + /// [`TextInput`]: struct.TextInput.html + pub(crate) fn move_cursor_left(&mut self, value: &Value) { + let current = self.cursor_position(value); + + if current > 0 { + self.cursor_position = current - 1; + } + } + /// Moves the cursor of a [`TextInput`] to the right. /// /// [`TextInput`]: struct.TextInput.html @@ -393,15 +412,22 @@ impl State { } } - /// Moves the cursor of a [`TextInput`] to the left. + /// Moves the cursor of a [`TextInput`] to the previous start of a word. /// /// [`TextInput`]: struct.TextInput.html - pub(crate) fn move_cursor_left(&mut self, value: &Value) { + pub(crate) fn move_cursor_left_by_words(&mut self, value: &Value) { let current = self.cursor_position(value); - if current > 0 { - self.cursor_position = current - 1; - } + self.cursor_position = value.previous_start_of_word(current); + } + + /// Moves the cursor of a [`TextInput`] to the next end of a word. + /// + /// [`TextInput`]: struct.TextInput.html + pub(crate) fn move_cursor_right_by_words(&mut self, value: &Value) { + let current = self.cursor_position(value); + + self.cursor_position = value.next_end_of_word(current); } /// Moves the cursor of a [`TextInput`] to the end. @@ -434,6 +460,49 @@ impl Value { self.0.len() } + /// Returns the position of the previous start of a word from the given + /// `index`. + /// + /// [`Value`]: struct.Value.html + pub fn previous_start_of_word(&self, mut index: usize) -> usize { + let mut skip_space = true; + + while index > 0 { + if skip_space { + skip_space = self.0[index - 1] == ' '; + } else { + if self.0[index - 1] == ' ' { + break; + } + } + + index -= 1; + } + + index + } + + /// Returns the position of the next end of a word from the given `index`. + /// + /// [`Value`]: struct.Value.html + pub fn next_end_of_word(&self, mut index: usize) -> usize { + let mut skip_space = true; + + while index < self.0.len() { + if skip_space { + skip_space = self.0[index] == ' '; + } else { + if self.0[index] == ' ' { + break; + } + } + + index += 1; + } + + index + } + /// Returns a new [`Value`] containing the `char` until the given `index`. /// /// [`Value`]: struct.Value.html -- cgit From a56eef0fecff3ef39576327c042927724e21b760 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 6 Dec 2019 04:46:53 +0100 Subject: Use `unicode-segmentation` for `text_input::Value` --- native/Cargo.toml | 1 + native/src/widget/text_input.rs | 51 ++++++++++++++++++++++++++--------------- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/native/Cargo.toml b/native/Cargo.toml index 7993676e..6ece36e4 100644 --- a/native/Cargo.toml +++ b/native/Cargo.toml @@ -11,3 +11,4 @@ repository = "https://github.com/hecrj/iced" iced_core = { version = "0.1.0", path = "../core", features = ["command"] } twox-hash = "1.5" raw-window-handle = "0.3" +unicode-segmentation = "1.6" diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 0620e928..6ab90bf4 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -9,6 +9,7 @@ use crate::{ layout, Element, Event, Hasher, Layout, Length, Point, Rectangle, Size, Widget, }; +use unicode_segmentation::UnicodeSegmentation; /// A field that can be filled with text. /// @@ -441,23 +442,29 @@ impl State { /// The value of a [`TextInput`]. /// /// [`TextInput`]: struct.TextInput.html -// TODO: Use `unicode-segmentation` +// TODO: Reduce allocations, cache results (?) #[derive(Debug)] -pub struct Value(Vec); +pub struct Value { + graphemes: Vec, +} impl Value { /// Creates a new [`Value`] from a string slice. /// /// [`Value`]: struct.Value.html pub fn new(string: &str) -> Self { - Self(string.chars().collect()) + let graphemes = UnicodeSegmentation::graphemes(string, true) + .map(String::from) + .collect(); + + Self { graphemes } } - /// Returns the total amount of `char` in the [`Value`]. + /// Returns the total amount of graphemes in the [`Value`]. /// /// [`Value`]: struct.Value.html pub fn len(&self) -> usize { - self.0.len() + self.graphemes.len() } /// Returns the position of the previous start of a word from the given @@ -469,9 +476,9 @@ impl Value { while index > 0 { if skip_space { - skip_space = self.0[index - 1] == ' '; + skip_space = self.graphemes[index - 1] == " "; } else { - if self.0[index - 1] == ' ' { + if self.graphemes[index - 1] == " " { break; } } @@ -488,11 +495,11 @@ impl Value { pub fn next_end_of_word(&self, mut index: usize) -> usize { let mut skip_space = true; - while index < self.0.len() { + while index < self.graphemes.len() { if skip_space { - skip_space = self.0[index] == ' '; + skip_space = self.graphemes[index] == " "; } else { - if self.0[index] == ' ' { + if self.graphemes[index] == " " { break; } } @@ -503,33 +510,41 @@ impl Value { index } - /// Returns a new [`Value`] containing the `char` until the given `index`. + /// Returns a new [`Value`] containing the graphemes until the given `index`. /// /// [`Value`]: struct.Value.html pub fn until(&self, index: usize) -> Self { - Self(self.0[..index.min(self.len())].to_vec()) + let graphemes = self.graphemes[..index.min(self.len())].to_vec(); + + Self { graphemes } } /// Converts the [`Value`] into a `String`. /// /// [`Value`]: struct.Value.html pub fn to_string(&self) -> String { - use std::iter::FromIterator; - String::from_iter(self.0.iter()) + self.graphemes.concat() } - /// Inserts a new `char` at the given `index`. + /// Inserts a new `char` at the given grapheme `index`. /// /// [`Value`]: struct.Value.html pub fn insert(&mut self, index: usize, c: char) { - self.0.insert(index, c); + self.graphemes.insert(index, c.to_string()); + + self.graphemes = UnicodeSegmentation::graphemes( + self.graphemes.concat().as_ref() as &str, + true, + ) + .map(String::from) + .collect(); } - /// Removes the `char` at the given `index`. + /// Removes the grapheme at the given `index`. /// /// [`Value`]: struct.Value.html pub fn remove(&mut self, index: usize) { - let _ = self.0.remove(index); + let _ = self.graphemes.remove(index); } } -- cgit From 69590bcf7219ca21a8f78623bff7cb81253f8a20 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 6 Dec 2019 05:37:28 +0100 Subject: Consider word bounds in `TextInput` cursor jumps --- native/src/widget/text_input.rs | 85 +++++++++++++++++++++-------------------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 6ab90bf4..c57b80aa 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -468,46 +468,49 @@ impl Value { } /// Returns the position of the previous start of a word from the given - /// `index`. + /// grapheme `index`. /// /// [`Value`]: struct.Value.html - pub fn previous_start_of_word(&self, mut index: usize) -> usize { - let mut skip_space = true; - - while index > 0 { - if skip_space { - skip_space = self.graphemes[index - 1] == " "; - } else { - if self.graphemes[index - 1] == " " { - break; - } - } - - index -= 1; - } - - index - } - - /// Returns the position of the next end of a word from the given `index`. + pub fn previous_start_of_word(&self, index: usize) -> usize { + let previous_string = + &self.graphemes[..index.min(self.graphemes.len())].concat(); + + UnicodeSegmentation::split_word_bound_indices(&previous_string as &str) + .filter(|(_, word)| !word.trim_start().is_empty()) + .next_back() + .map(|(i, previous_word)| { + index + - UnicodeSegmentation::graphemes(previous_word, true) + .count() + - UnicodeSegmentation::graphemes( + &previous_string[i + previous_word.len()..] as &str, + true, + ) + .count() + }) + .unwrap_or(0) + } + + /// Returns the position of the next end of a word from the given grapheme + /// `index`. /// /// [`Value`]: struct.Value.html - pub fn next_end_of_word(&self, mut index: usize) -> usize { - let mut skip_space = true; - - while index < self.graphemes.len() { - if skip_space { - skip_space = self.graphemes[index] == " "; - } else { - if self.graphemes[index] == " " { - break; - } - } - - index += 1; - } - - index + pub fn next_end_of_word(&self, index: usize) -> usize { + let next_string = &self.graphemes[index..].concat(); + + UnicodeSegmentation::split_word_bound_indices(&next_string as &str) + .filter(|(_, word)| !word.trim_start().is_empty()) + .next() + .map(|(i, next_word)| { + index + + UnicodeSegmentation::graphemes(next_word, true).count() + + UnicodeSegmentation::graphemes( + &next_string[..i] as &str, + true, + ) + .count() + }) + .unwrap_or(self.len()) } /// Returns a new [`Value`] containing the graphemes until the given `index`. @@ -532,12 +535,10 @@ impl Value { pub fn insert(&mut self, index: usize, c: char) { self.graphemes.insert(index, c.to_string()); - self.graphemes = UnicodeSegmentation::graphemes( - self.graphemes.concat().as_ref() as &str, - true, - ) - .map(String::from) - .collect(); + self.graphemes = + UnicodeSegmentation::graphemes(&self.to_string() as &str, true) + .map(String::from) + .collect(); } /// Removes the grapheme at the given `index`. -- cgit From 4268556edbf7616fe65aca178b9029ed7db61b07 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 6 Dec 2019 06:03:56 +0100 Subject: Update `CHANGELOG` --- native/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/native/CHANGELOG.md b/native/CHANGELOG.md index 27bae1aa..463b2dbe 100644 --- a/native/CHANGELOG.md +++ b/native/CHANGELOG.md @@ -11,17 +11,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `text_input::Renderer::measure_value` required method to measure the width of a `TextInput` value. [#108] - Click-based cursor positioning for `TextInput`. [#108] - `Home` and `End` keys support for `TextInput`. [#108] +- `Ctrl+Left` and `Ctrl+Right` cursor word jump for `TextInput`. [#108] +- `keyboard::ModifiersState` struct which contains the state of the keyboard modifiers. [#108] ### Changed - `Image::new` takes an `Into` now instead of an `Into`. [#90] - `Button::background` takes an `Into` now instead of a `Background`. +- `keyboard::Event::Input` now contains key modifiers state. [#108] ### Fixed - `Image` widget not keeping aspect ratio consistently. [#90] +- `TextInput` not taking grapheme clusters into account. [#108] [#90]: https://github.com/hecrj/iced/pull/90 [#108]: https://github.com/hecrj/iced/pull/108 + ## [0.1.0] - 2019-11-25 ### Added - First release! :tada: -- cgit From 749722fca6eb9c85901e80060583559317f2af79 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 7 Dec 2019 05:47:14 +0100 Subject: Add `custom_widget` example It showcases how to build a simple native custom widget that draws a circle. --- Cargo.toml | 2 + examples/custom_widget.rs | 149 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 examples/custom_widget.rs diff --git a/Cargo.toml b/Cargo.toml index 888a1c07..f6f1158a 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -41,6 +41,8 @@ serde_json = "1.0" directories = "2.0" reqwest = "0.9" rand = "0.7" +iced_native = { version = "0.1", path = "./native" } +iced_wgpu = { version = "0.1", path = "./wgpu" } [target.'cfg(target_arch = "wasm32")'.dev-dependencies] wasm-bindgen = "0.2.51" diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs new file mode 100644 index 00000000..d51753e2 --- /dev/null +++ b/examples/custom_widget.rs @@ -0,0 +1,149 @@ +//! This example showcases a simple native custom widget that draws a circle. +mod circle { + // For now, to implement a custom native widget you will need to add + // `iced_native` and `iced_wgpu` to your dependencies. + // + // Then, you simply need to define your widget type and implement the + // `iced_native::Widget` trait with the `iced_wgpu::Renderer`. + // + // Of course, you can choose to make the implementation renderer-agnostic, + // if you wish to, by creating your own `Renderer` trait, which could be + // implemented by `iced_wgpu` and other renderers. + use iced_native::{ + layout, Background, Color, Element, Hasher, Layout, Length, + MouseCursor, Point, Size, Widget, + }; + use iced_wgpu::{Primitive, Renderer}; + + pub struct Circle { + radius: u16, + } + + impl Circle { + pub fn new(radius: u16) -> Self { + Self { radius } + } + } + + impl Widget for Circle { + fn width(&self) -> Length { + Length::Shrink + } + + fn height(&self) -> Length { + Length::Shrink + } + + fn layout( + &self, + _renderer: &Renderer, + limits: &layout::Limits, + ) -> layout::Node { + let size = limits + .width(Length::Units(self.radius * 2)) + .height(Length::Units(self.radius * 2)) + .resolve(Size::ZERO); + + layout::Node::new(size) + } + + fn hash_layout(&self, state: &mut Hasher) { + use std::hash::Hash; + + self.radius.hash(state); + } + + fn draw( + &self, + _renderer: &mut Renderer, + layout: Layout<'_>, + _cursor_position: Point, + ) -> (Primitive, MouseCursor) { + let bounds = layout.bounds(); + + ( + Primitive::Quad { + bounds, + background: Background::Color(Color::BLACK), + border_radius: self.radius, + }, + MouseCursor::OutOfBounds, + ) + } + } + + impl<'a, Message> Into> for Circle { + fn into(self) -> Element<'a, Message, Renderer> { + Element::new(self) + } + } +} + +use circle::Circle; +use iced::{ + slider, Align, Column, Container, Element, Length, Sandbox, Settings, + Slider, Text, +}; + +pub fn main() { + Example::run(Settings::default()) +} + +struct Example { + radius: u16, + slider: slider::State, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + RadiusChanged(f32), +} + +impl Sandbox for Example { + type Message = Message; + + fn new() -> Self { + Example { + radius: 50, + slider: slider::State::new(), + } + } + + fn title(&self) -> String { + String::from("Custom widget - Iced") + } + + fn update(&mut self, message: Message) { + match message { + Message::RadiusChanged(radius) => { + self.radius = radius.round() as u16; + } + } + } + + fn view(&mut self) -> Element { + let content = Column::new() + .padding(20) + .spacing(20) + .max_width(500) + .align_items(Align::Center) + .push(Circle::new(self.radius)) + .push( + Text::new(format!("Radius: {}", self.radius.to_string())) + .width(Length::Shrink), + ) + .push(Slider::new( + &mut self.slider, + 1.0..=100.0, + f32::from(self.radius), + Message::RadiusChanged, + )); + + Container::new(content) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .into() + } +} -- cgit From 34bdfe941613d4bb51848eec1dc0f99f2a59ff21 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 7 Dec 2019 07:18:15 +0100 Subject: Implement `TextInput::password` for secure data --- native/src/widget/text_input.rs | 65 ++++++++++++++++++++++++++++++++++------- 1 file changed, 54 insertions(+), 11 deletions(-) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index c57b80aa..985d1b80 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -39,6 +39,7 @@ pub struct TextInput<'a, Message> { state: &'a mut State, placeholder: String, value: Value, + is_secure: bool, width: Length, max_width: Length, padding: u16, @@ -71,6 +72,7 @@ impl<'a, Message> TextInput<'a, Message> { state, placeholder: String::from(placeholder), value: Value::new(value), + is_secure: false, width: Length::Fill, max_width: Length::Shrink, padding: 0, @@ -80,6 +82,14 @@ impl<'a, Message> TextInput<'a, Message> { } } + /// Converts the [`TextInput`] into a secure password input. + /// + /// [`TextInput`]: struct.TextInput.html + pub fn password(mut self) -> Self { + self.is_secure = true; + self + } + /// Sets the width of the [`TextInput`]. /// /// [`TextInput`]: struct.TextInput.html @@ -177,6 +187,15 @@ where if target < 0.0 { self.state.cursor_position = 0; + } else if self.is_secure { + self.state.cursor_position = find_cursor_position( + renderer, + target, + &self.value.secure(), + self.size.unwrap_or(renderer.default_size()), + 0, + self.value.len(), + ); } else { self.state.cursor_position = find_cursor_position( renderer, @@ -235,14 +254,14 @@ where } } keyboard::KeyCode::Left => { - if modifiers.control { + if modifiers.control && !self.is_secure { self.state.move_cursor_left_by_words(&self.value); } else { self.state.move_cursor_left(&self.value); } } keyboard::KeyCode::Right => { - if modifiers.control { + if modifiers.control && !self.is_secure { self.state.move_cursor_right_by_words(&self.value); } else { self.state.move_cursor_right(&self.value); @@ -269,15 +288,27 @@ where let bounds = layout.bounds(); let text_bounds = layout.children().next().unwrap().bounds(); - renderer.draw( - bounds, - text_bounds, - cursor_position, - self.size.unwrap_or(renderer.default_size()), - &self.placeholder, - &self.value, - &self.state, - ) + if self.is_secure { + renderer.draw( + bounds, + text_bounds, + cursor_position, + self.size.unwrap_or(renderer.default_size()), + &self.placeholder, + &self.value.secure(), + &self.state, + ) + } else { + renderer.draw( + bounds, + text_bounds, + cursor_position, + self.size.unwrap_or(renderer.default_size()), + &self.placeholder, + &self.value, + &self.state, + ) + } } fn hash_layout(&self, state: &mut Hasher) { @@ -547,6 +578,18 @@ impl Value { pub fn remove(&mut self, index: usize) { let _ = self.graphemes.remove(index); } + + /// Returns a new [`Value`] with all its graphemes replaced with the + /// dot ('•') character. + /// + /// [`Value`]: struct.Value.html + pub fn secure(&self) -> Self { + Self { + graphemes: std::iter::repeat(String::from("•")) + .take(self.graphemes.len()) + .collect(), + } + } } // TODO: Reduce allocations -- cgit From cdee847cea47b84568048ff8f48194a24dab80f1 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 7 Dec 2019 07:19:05 +0100 Subject: Showcase new `TextInput::password` in `tour` --- examples/tour.rs | 44 +++++++++++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/examples/tour.rs b/examples/tour.rs index b06fbc37..77ed21ab 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -140,6 +140,7 @@ impl Steps { Step::Scrollable, Step::TextInput { value: String::new(), + is_secure: false, state: text_input::State::new(), }, Step::Debugger, @@ -210,6 +211,7 @@ enum Step { Scrollable, TextInput { value: String, + is_secure: bool, state: text_input::State, }, Debugger, @@ -226,6 +228,7 @@ pub enum StepMessage { LanguageSelected(Language), ImageWidthChanged(f32), InputChanged(String), + ToggleSecureInput(bool), DebugToggled(bool), } @@ -277,6 +280,12 @@ impl<'a> Step { *value = new_value; } } + + StepMessage::ToggleSecureInput(toggle) => { + if let Step::TextInput { is_secure, .. } = self { + *is_secure = toggle; + } + } }; } @@ -328,7 +337,11 @@ impl<'a> Step { spacing, } => Self::rows_and_columns(*layout, spacing_slider, *spacing), Step::Scrollable => Self::scrollable(), - Step::TextInput { value, state } => Self::text_input(value, state), + Step::TextInput { + value, + is_secure, + state, + } => Self::text_input(value, *is_secure, state), Step::Debugger => Self::debugger(debug), Step::End => Self::end(), } @@ -582,22 +595,31 @@ impl<'a> Step { fn text_input( value: &str, + is_secure: bool, state: &'a mut text_input::State, ) -> Column<'a, StepMessage> { + let text_input = TextInput::new( + state, + "Type something to continue...", + value, + StepMessage::InputChanged, + ) + .padding(10) + .size(30); Self::container("Text input") .push(Text::new( "Use a text input to ask for different kinds of information.", )) - .push( - TextInput::new( - state, - "Type something to continue...", - value, - StepMessage::InputChanged, - ) - .padding(10) - .size(30), - ) + .push(if is_secure { + text_input.password() + } else { + text_input + }) + .push(Checkbox::new( + is_secure, + "Enable password mode", + StepMessage::ToggleSecureInput, + )) .push(Text::new( "A text input produces a message every time it changes. It is \ very easy to keep track of its contents:", -- cgit From c59ff694734ba8bfc0f8e5bd2da3e23acfbe3bc4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 7 Dec 2019 07:24:55 +0100 Subject: Change `TextInput` word-jump modifier key on macOS --- native/src/widget/text_input.rs | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 985d1b80..f0bb9f87 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -254,14 +254,26 @@ where } } keyboard::KeyCode::Left => { - if modifiers.control && !self.is_secure { + let jump_modifier_pressed = if cfg!(target_os = "macos") { + modifiers.alt + } else { + modifiers.control + }; + + if jump_modifier_pressed && !self.is_secure { self.state.move_cursor_left_by_words(&self.value); } else { self.state.move_cursor_left(&self.value); } } keyboard::KeyCode::Right => { - if modifiers.control && !self.is_secure { + let jump_modifier_pressed = if cfg!(target_os = "macos") { + modifiers.alt + } else { + modifiers.control + }; + + if jump_modifier_pressed && !self.is_secure { self.state.move_cursor_right_by_words(&self.value); } else { self.state.move_cursor_right(&self.value); -- cgit From f5d316490898d4a5a27d9f5f9bb68796f5278c70 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 7 Dec 2019 07:46:31 +0100 Subject: Simplify `custom_widget` example --- examples/custom_widget.rs | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs index d51753e2..cf2f7792 100644 --- a/examples/custom_widget.rs +++ b/examples/custom_widget.rs @@ -37,14 +37,12 @@ mod circle { fn layout( &self, _renderer: &Renderer, - limits: &layout::Limits, + _limits: &layout::Limits, ) -> layout::Node { - let size = limits - .width(Length::Units(self.radius * 2)) - .height(Length::Units(self.radius * 2)) - .resolve(Size::ZERO); - - layout::Node::new(size) + layout::Node::new(Size::new( + f32::from(self.radius) * 2.0, + f32::from(self.radius) * 2.0, + )) } fn hash_layout(&self, state: &mut Hasher) { @@ -59,11 +57,9 @@ mod circle { layout: Layout<'_>, _cursor_position: Point, ) -> (Primitive, MouseCursor) { - let bounds = layout.bounds(); - ( Primitive::Quad { - bounds, + bounds: layout.bounds(), background: Background::Color(Color::BLACK), border_radius: self.radius, }, -- cgit From a7694e0112d45cffa0d25e3f19fc0289c3804c47 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sun, 8 Dec 2019 06:24:47 +0100 Subject: Update native `CHANGELOG` --- examples/tour.rs | 1 - native/CHANGELOG.md | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/tour.rs b/examples/tour.rs index 77ed21ab..da05b396 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -280,7 +280,6 @@ impl<'a> Step { *value = new_value; } } - StepMessage::ToggleSecureInput(toggle) => { if let Step::TextInput { is_secure, .. } = self { *is_secure = toggle; diff --git a/native/CHANGELOG.md b/native/CHANGELOG.md index 463b2dbe..cdf02c4b 100644 --- a/native/CHANGELOG.md +++ b/native/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `Home` and `End` keys support for `TextInput`. [#108] - `Ctrl+Left` and `Ctrl+Right` cursor word jump for `TextInput`. [#108] - `keyboard::ModifiersState` struct which contains the state of the keyboard modifiers. [#108] +- `TextInput::password` method to enable secure password input mode. [#113] ### Changed - `Image::new` takes an `Into` now instead of an `Into`. [#90] @@ -25,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [#90]: https://github.com/hecrj/iced/pull/90 [#108]: https://github.com/hecrj/iced/pull/108 +[#113]: https://github.com/hecrj/iced/pull/113 ## [0.1.0] - 2019-11-25 -- cgit