From 63cd0fd8eb1eebae8de7d5141c846fc4ea55d702 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 30 Oct 2019 03:31:07 +0100 Subject: Draft `TextInput` widget structure Also started a `todos` example to showcase it! --- wgpu/src/renderer/text_input.rs | 100 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 wgpu/src/renderer/text_input.rs (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs new file mode 100644 index 00000000..bcb55d50 --- /dev/null +++ b/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( + &mut self, + text_input: &TextInput, + 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 + }, + ) + } +} -- cgit From fedcab6f4f5ffd3a6dfffe7dd41c58df2e314099 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 30 Oct 2019 05:00:12 +0100 Subject: Handle some `TextInput` events --- wgpu/src/renderer/text_input.rs | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index bcb55d50..f7a93465 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -23,21 +23,23 @@ impl text_input::Renderer for Renderer { 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, - } - }), + 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, }; @@ -70,9 +72,9 @@ impl text_input::Renderer for Renderer { } } else { Color { - r: 0.9, - g: 0.9, - b: 0.9, + r: 0.3, + g: 0.3, + b: 0.3, a: 1.0, } }, -- cgit From 43f348dc4abc44baa3794ffd12cf080396aa958d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 30 Oct 2019 05:20:41 +0100 Subject: Show text cursor in `TextInput` --- wgpu/src/renderer/text_input.rs | 42 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index f7a93465..30e06878 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -54,6 +54,8 @@ impl text_input::Renderer for Renderer { border_radius: 5, }; + let size = f32::from(text_input.size.unwrap_or(self.default_size())); + let value = Primitive::Clip { bounds: text_bounds, offset: 0, @@ -82,7 +84,7 @@ impl text_input::Renderer for Renderer { width: f32::INFINITY, ..text_bounds }, - size: f32::from(text_input.size.unwrap_or(self.default_size())), + size, horizontal_alignment: HorizontalAlignment::Left, vertical_alignment: VerticalAlignment::Center, }), @@ -90,7 +92,43 @@ impl text_input::Renderer for Renderer { ( Primitive::Group { - primitives: vec![border, input, value], + 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 -- cgit From 51a0e99097f9ecb63eeb7f2ea7c38089977eb4d0 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 31 Oct 2019 03:50:40 +0100 Subject: Implement cursor movement in `TextInput` --- wgpu/src/renderer/text_input.rs | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index 30e06878..f119ae6a 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -55,17 +55,18 @@ impl text_input::Renderer for Renderer { }; let size = f32::from(text_input.size.unwrap_or(self.default_size())); + let text = text_input.value.to_string(); let value = Primitive::Clip { bounds: text_bounds, offset: 0, content: Box::new(Primitive::Text { - content: if text_input.value.is_empty() { + content: if text.is_empty() { text_input.placeholder.clone() } else { - text_input.value.clone() + text.clone() }, - color: if text_input.value.is_empty() { + color: if text.is_empty() { Color { r: 0.7, g: 0.7, @@ -95,11 +96,18 @@ impl text_input::Renderer for Renderer { primitives: 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_input.value, + text: text_before_cursor, bounds: (f32::INFINITY, text_bounds.height), scale: Scale { x: size, y: size }, ..Default::default() @@ -107,11 +115,24 @@ impl text_input::Renderer for Renderer { .map(|bounds| bounds.width().round()) .unwrap_or(0.0); - let spaces_at_the_end = text_input.value.len() - - text_input.value.trim_end().len(); + let spaces_at_the_end = text_before_cursor.len() + - text_before_cursor.trim_end().len(); if spaces_at_the_end > 0 { - text_value_width += spaces_at_the_end as f32 * 5.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 { -- cgit From d3cdee1d9bcd9f7fe22eeccce93ab5a26faf18e8 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 31 Oct 2019 04:43:29 +0100 Subject: Render `TextInput` cursor inside the clipping area --- wgpu/src/renderer/text_input.rs | 173 ++++++++++++++++++++-------------------- 1 file changed, 87 insertions(+), 86 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index f119ae6a..deb8eae7 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -57,99 +57,100 @@ impl text_input::Renderer for Renderer { let size = f32::from(text_input.size.unwrap_or(self.default_size())); let text = text_input.value.to_string(); - let value = Primitive::Clip { + 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 content = Primitive::Clip { bounds: text_bounds, offset: 0, - content: Box::new(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, + content: Box::new(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], + } + } else { + value }), }; ( Primitive::Group { - primitives: 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, - }; - - vec![border, input, value, cursor] - } else { - vec![border, input, value] - }, + primitives: vec![border, input, content], }, if is_mouse_over { MouseCursor::Text -- cgit From 470266f54069a1c9b6147026d018b437b6457f7b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 5 Nov 2019 03:16:46 +0100 Subject: Add horizontal offset to `Primitive::Clip` --- wgpu/src/renderer/text_input.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index deb8eae7..95ea964e 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -2,7 +2,7 @@ use crate::{Primitive, Renderer}; use iced_native::{ text::HorizontalAlignment, text::VerticalAlignment, text_input, Background, - Color, MouseCursor, Point, Rectangle, TextInput, + Color, MouseCursor, Point, Rectangle, TextInput, Vector, }; use std::f32; @@ -89,7 +89,7 @@ impl text_input::Renderer for Renderer { let content = Primitive::Clip { bounds: text_bounds, - offset: 0, + offset: Vector::new(0, 0), content: Box::new(if text_input.state.is_focused { use wgpu_glyph::{GlyphCruncher, Scale, Section}; -- cgit From a2161586dab6837d8c641b6f93ad476f861d8580 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 5 Nov 2019 03:33:24 +0100 Subject: Implement state-less scrolling in `TextInput` --- wgpu/src/renderer/text_input.rs | 121 +++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 56 deletions(-) (limited to 'wgpu/src/renderer/text_input.rs') diff --git a/wgpu/src/renderer/text_input.rs b/wgpu/src/renderer/text_input.rs index 95ea964e..cff8bf23 100644 --- a/wgpu/src/renderer/text_input.rs +++ b/wgpu/src/renderer/text_input.rs @@ -87,70 +87,79 @@ impl text_input::Renderer for Renderer { vertical_alignment: VerticalAlignment::Center, }; - let content = Primitive::Clip { - bounds: text_bounds, - offset: Vector::new(0, 0), - content: Box::new(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, + 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], - } - } else { - value - }), + }, + 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, content], + primitives: vec![border, input, contents], }, if is_mouse_over { MouseCursor::Text -- cgit