reivilibre/iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into feature/event-subscriptions

Browse Source
This commit is contained in:
Héctor Ramón Jiménez 2019-12-08 06:53:54 +01:00
commit 9b84b6e403
13 changed files with 510 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Cargo.toml
View File

@ -43,6 +43,8 @@ reqwest = "0.9"
rand = "0.7"
chrono = "0.4"
futures = "0.3"
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"

145
examples/custom_widget.rs Normal file
View File

@ -0,0 +1,145 @@
//! 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<Message> Widget<Message, Renderer> for Circle {
fn width(&self) -> Length {
Length::Shrink
}
fn height(&self) -> Length {
Length::Shrink
}
fn layout(
&self,
_renderer: &Renderer,
_limits: &layout::Limits,
) -> layout::Node {
layout::Node::new(Size::new(
f32::from(self.radius) * 2.0,
f32::from(self.radius) * 2.0,
))
}
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) {
(
Primitive::Quad {
bounds: layout.bounds(),
background: Background::Color(Color::BLACK),
border_radius: self.radius,
},
MouseCursor::OutOfBounds,
)
}
}
impl<'a, Message> Into<Element<'a, Message, Renderer>> 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<Message> {
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()
}
}

43
examples/tour.rs
View File

@ -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,11 @@ impl<'a> Step {
*value = new_value;
}
}
StepMessage::ToggleSecureInput(toggle) => {
if let Step::TextInput { is_secure, .. } = self {
*is_secure = toggle;
}
}
};
}
@ -328,7 +336,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 +594,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:",

11
native/CHANGELOG.md
View File

@ -8,15 +8,26 @@ 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]
- `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<image::Handle>` now instead of an `Into<String>`. [#90]
- `Button::background` takes an `Into<Background>` 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
[#113]: https://github.com/hecrj/iced/pull/113
## [0.1.0] - 2019-11-25
### Added

1
native/Cargo.toml
View File

@ -11,3 +11,4 @@ repository = "https://github.com/hecrj/iced"
iced_core = { version = "0.1.0", path = "../core", features = ["command", "subscription"] }
twox-hash = "1.5"
raw-window-handle = "0.3"
unicode-segmentation = "1.6"

2
native/src/input/keyboard.rs
View File

@ -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;

7
native/src/input/keyboard/event.rs
View File

@ -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.

15
native/src/input/keyboard/modifiers_state.rs Normal file
View File

@ -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,
}

4
native/src/renderer/null.rs
View File

@ -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,

283
native/src/widget/text_input.rs
View File

@ -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.
///
@ -38,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,
@ -70,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,
@ -79,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
@ -160,7 +171,7 @@ where
layout: Layout<'_>,
cursor_position: Point,
messages: &mut Vec<Message>,
_renderer: &Renderer,
renderer: &Renderer,
) {
match event {
Event::Mouse(mouse::Event::Input {
@ -170,8 +181,31 @@ 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 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,
target,
&self.value,
self.size.unwrap_or(renderer.default_size()),
0,
self.value.len(),
);
}
}
}
Event::Keyboard(keyboard::Event::CharacterReceived(c))
@ -188,6 +222,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() {
@ -219,10 +254,36 @@ where
}
}
keyboard::KeyCode::Left => {
self.state.move_cursor_left(&self.value);
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 => {
self.state.move_cursor_right(&self.value);
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);
}
}
keyboard::KeyCode::Home => {
self.state.cursor_position = 0;
}
keyboard::KeyCode::End => {
self.state.move_cursor_to_end(&self.value);
}
_ => {}
},
@ -239,15 +300,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) {
@ -275,6 +348,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:
@ -356,6 +434,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
@ -367,15 +456,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.
@ -389,51 +485,174 @@ 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<char>);
pub struct Value {
graphemes: Vec<String>,
}
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 a new [`Value`] containing the `char` until the given `index`.
/// Returns the position of the previous start of a word from the given
/// grapheme `index`.
///
/// [`Value`]: struct.Value.html
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, 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`.
///
/// [`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.to_string() 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);
}
/// 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
fn find_cursor_position<Renderer: self::Renderer>(
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 next_width - target > target - prev_width {
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,
)
}
}

37
wgpu/src/renderer/widget/text_input.rs
View File

@ -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 {

2
winit/src/application.rs
View File

@ -334,6 +334,7 @@ pub trait Application: Sized {
winit::event::KeyboardInput {
virtual_keycode: Some(virtual_keycode),
state,
modifiers,
..
},
..
@ -349,6 +350,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 => {

20
winit/src/conversion.rs
View File

@ -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