Merge pull request #2535 from bungoboingo/text-input-alignment

Implement `align_x` for `TextInput`

examples/todos/src/main.rs

@@ -202,7 +202,8 @@ impl Todos {
                     .on_input(Message::InputChanged)
                     .on_submit(Message::CreateTask)
                     .padding(15)
-                    .size(30);
+                    .size(30)
+                    .align_x(Center);
 
                 let controls = view_controls(tasks, *filter);
                 let filtered_tasks =

widget/src/text_input.rs

@@ -19,7 +19,7 @@ use crate::core::keyboard::key;
 use crate::core::layout;
 use crate::core::mouse::{self, click};
 use crate::core::renderer;
-use crate::core::text::paragraph;
+use crate::core::text::paragraph::{self, Paragraph as _};
 use crate::core::text::{self, Text};
 use crate::core::time::{Duration, Instant};
 use crate::core::touch;
@@ -74,6 +74,7 @@ pub struct TextInput<
     padding: Padding,
     size: Option<Pixels>,
     line_height: text::LineHeight,
+    alignment: alignment::Horizontal,
     on_input: Option<Box<dyn Fn(String) -> Message + 'a>>,
     on_paste: Option<Box<dyn Fn(String) -> Message + 'a>>,
     on_submit: Option<Message>,
@@ -103,6 +104,7 @@ where
             padding: DEFAULT_PADDING,
             size: None,
             line_height: text::LineHeight::default(),
+            alignment: alignment::Horizontal::Left,
             on_input: None,
             on_paste: None,
             on_submit: None,
@@ -193,6 +195,15 @@ where
         self
     }
 
+    /// Sets the horizontal alignment of the [`TextInput`].
+    pub fn align_x(
+        mut self,
+        alignment: impl Into<alignment::Horizontal>,
+    ) -> Self {
+        self.alignment = alignment.into();
+        self
+    }
+
     /// Sets the style of the [`TextInput`].
     #[must_use]
     pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
@@ -457,9 +468,21 @@ where
         };
 
         let draw = |renderer: &mut Renderer, viewport| {
+            let paragraph = if text.is_empty() {
+                state.placeholder.raw()
+            } else {
+                state.value.raw()
+            };
+
+            let alignment_offset = alignment_offset(
+                text_bounds.width,
+                paragraph.min_width(),
+                self.alignment,
+            );
+
             if let Some((cursor, color)) = cursor {
                 renderer.with_translation(
-                    Vector::new(-offset, 0.0),
+                    Vector::new(alignment_offset - offset, 0.0),
                     |renderer| {
                         renderer.fill_quad(cursor, color);
                     },
@@ -469,13 +492,9 @@ where
             }
 
             renderer.fill_paragraph(
-                if text.is_empty() {
-                    state.placeholder.raw()
-                } else {
-                    state.value.raw()
-                },
+                paragraph,
                 Point::new(text_bounds.x, text_bounds.center_y())
-                    - Vector::new(offset, 0.0),
+                    + Vector::new(alignment_offset - offset, 0.0),
                 if text.is_empty() {
                     style.placeholder
                 } else {
@@ -600,7 +619,18 @@ where
 
                 if let Some(cursor_position) = click_position {
                     let text_layout = layout.children().next().unwrap();
-                    let target = cursor_position.x - text_layout.bounds().x;
+
+                    let target = {
+                        let text_bounds = text_layout.bounds();
+
+                        let alignment_offset = alignment_offset(
+                            text_bounds.width,
+                            state.value.raw().min_width(),
+                            self.alignment,
+                        );
+
+                        cursor_position.x - text_bounds.x - alignment_offset
+                    };
 
                     let click =
                         mouse::Click::new(cursor_position, state.last_click);
@@ -677,7 +707,18 @@ where
 
                 if state.is_dragging {
                     let text_layout = layout.children().next().unwrap();
-                    let target = position.x - text_layout.bounds().x;
+
+                    let target = {
+                        let text_bounds = text_layout.bounds();
+
+                        let alignment_offset = alignment_offset(
+                            text_bounds.width,
+                            state.value.raw().min_width(),
+                            self.alignment,
+                        );
+
+                        position.x - text_bounds.x - alignment_offset
+                    };
 
                     let value = if self.is_secure {
                         self.value.secure()
@@ -1486,3 +1527,21 @@ pub fn default(theme: &Theme, status: Status) -> Style {
         },
     }
 }
+
+fn alignment_offset(
+    text_bounds_width: f32,
+    text_min_width: f32,
+    alignment: alignment::Horizontal,
+) -> f32 {
+    if text_min_width > text_bounds_width {
+        0.0
+    } else {
+        match alignment {
+            alignment::Horizontal::Left => 0.0,
+            alignment::Horizontal::Center => {
+                (text_bounds_width - text_min_width) / 2.0
+            }
+            alignment::Horizontal::Right => text_bounds_width - text_min_width,
+        }
+    }
+}