[iced-rs#348] feat: add horizontal text alignment to TextInput

Cargo.toml

@@ -68,6 +68,7 @@ members = [
     "examples/svg",
     "examples/todos",
     "examples/tour",
+    "examples/text_input_aligned",
 ]
 
 [dependencies]

examples/text_input_aligned/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "text_input_aligned"
+version = "0.1.0"
+authors = ["Subroto Biswas <sub14biswas@gmail.com>"]
+edition = "2018"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["async-std", "debug"] }
+log = "0.4.0"
+log4rs = "0.11.0"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+async-std = "1.0"
+
+[package.metadata.deb]
+assets = [
+    ["target/release/todos", "usr/bin/iced-todos", "755"],
+    ["iced-todos.desktop", "usr/share/applications/", "644"],
+]

examples/text_input_aligned/log4rs.yml

@@ -0,0 +1,20 @@
+refresh_rate: 30 seconds
+appenders:
+  stdout:
+    kind: console
+  requests:
+    kind: file
+    path: "log/requests.log"
+    encoder:
+      pattern: "{d} - {m}{n}"
+root:
+  level: debug
+  appenders:
+    - stdout
+loggers:
+  gfx_backend_metal:
+    level: warn
+  wgpu_core:
+    level: warn
+  iced_wgpu:
+    level: debug

examples/text_input_aligned/src/main.rs

@@ -0,0 +1,79 @@
+use iced::{
+    text_input, Application, Column, Command, Container, Element,
+    HorizontalAlignment, Length, Settings, Text, TextInput,
+};
+
+struct State {
+    message: String,
+
+    // Local Element States
+    input_state: text_input::State,
+}
+
+#[derive(Debug, Clone)]
+enum Event {
+    OnChange(String),
+}
+
+impl Application for State {
+    type Executor = iced::executor::Default;
+    type Message = Event;
+    type Flags = ();
+
+    fn new(_flags: ()) -> (Self, Command<Event>) {
+        (
+            State {
+                message: "Hello World".to_owned(),
+                input_state: text_input::State::focused(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        "Hello World Example".to_owned()
+    }
+
+    fn update(&mut self, event: Event) -> Command<Event> {
+        match event {
+            Event::OnChange(message) => {
+                self.message = message;
+            }
+        };
+
+        Command::none()
+    }
+
+    fn view(&mut self) -> Element<Event> {
+        let input = TextInput::new(
+            &mut self.input_state,
+            "Type a Message",
+            &self.message,
+            Event::OnChange,
+        )
+        .padding(15)
+        .size(30)
+        .horizontal_alignment(HorizontalAlignment::Left);
+
+        let text = Text::new(self.message.to_string())
+            .width(Length::Fill)
+            .size(100)
+            .color([0.5, 0.5, 0.5])
+            .horizontal_alignment(HorizontalAlignment::Center);
+
+        let column = Column::new().push(input).push(text);
+
+        Container::new(column)
+            .padding(100)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .into()
+    }
+}
+
+fn main() {
+    log4rs::init_file("examples/hello_world/log4rs.yml", Default::default())
+        .unwrap();
+
+    State::run(Settings::default());
+}

graphics/src/widget/text_input.rs

@@ -84,6 +84,7 @@ where
         size: u16,
         placeholder: &str,
         value: &text_input::Value,
+        horizontal_alignment: HorizontalAlignment,
         state: &text_input::State,
         style_sheet: &Self::Style,
     ) -> Self::Output {
@@ -107,6 +108,34 @@ where
 
         let text = value.to_string();
 
+        let current_text_bounds = {
+            if text.is_empty() {
+                let placeholder_visual_width =
+                    self.measure_value(&placeholder.to_string(), size, font);
+                Rectangle {
+                    x: match horizontal_alignment {
+                        HorizontalAlignment::Left => text_bounds.x,
+                        HorizontalAlignment::Center => {
+                            text_bounds.x - (placeholder_visual_width / 2.0)
+                        }
+                        HorizontalAlignment::Right => {
+                            text_bounds.x - placeholder_visual_width
+                        }
+                    },
+                    y: text_bounds.center_y(),
+                    width: f32::INFINITY,
+                    ..text_bounds
+                }
+            } else {
+                Rectangle {
+                    x: text_bounds.x,
+                    y: text_bounds.center_y(),
+                    width: f32::INFINITY,
+                    ..text_bounds
+                }
+            }
+        };
+
         let text_value = Primitive::Text {
             content: if text.is_empty() {
                 placeholder.to_string()
@@ -119,11 +148,7 @@ where
                 style_sheet.value_color()
             },
             font,
-            bounds: Rectangle {
-                y: text_bounds.center_y(),
-                width: f32::INFINITY,
-                ..text_bounds
-            },
+            bounds: current_text_bounds,
             size: f32::from(size),
             horizontal_alignment: HorizontalAlignment::Left,
             vertical_alignment: VerticalAlignment::Center,

native/src/renderer/null.rs

@@ -134,6 +134,7 @@ impl text_input::Renderer for Null {
         _size: u16,
         _placeholder: &str,
         _value: &text_input::Value,
+        _horizontal_alignment: HorizontalAlignment,
         _state: &text_input::State,
         _style: &Self::Style,
     ) -> Self::Output {

native/src/widget/text_input.rs

@@ -17,8 +17,8 @@ use editor::Editor;
 use crate::{
     keyboard, layout,
     mouse::{self, click},
-    Clipboard, Element, Event, Hasher, Layout, Length, Point, Rectangle, Size,
-    Widget,
+    Clipboard, Element, Event, Hasher, HorizontalAlignment, Layout, Length,
+    Point, Rectangle, Size, Widget,
 };
 
 use std::u32;
@@ -58,6 +58,7 @@ pub struct TextInput<'a, Message, Renderer: self::Renderer> {
     max_width: u32,
     padding: u16,
     size: Option<u16>,
+    horizontal_alignment: HorizontalAlignment,
     on_change: Box<dyn Fn(String) -> Message>,
     on_submit: Option<Message>,
     style: Renderer::Style,
@@ -93,6 +94,7 @@ impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
             max_width: u32::MAX,
             padding: 0,
             size: None,
+            horizontal_alignment: HorizontalAlignment::Left,
             on_change: Box::new(on_change),
             on_submit: None,
             style: Renderer::Style::default(),
@@ -147,6 +149,20 @@ impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
         self
     }
 
+    /// Sets the [`HorizontalAlignment`] of the [`Text`] and
+    /// placeholder text inside the [`TextInput`]
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    /// [`Text`]: struct.Text.html
+    /// [`HorizontalAlignment`]: enum.HorizontalAlignment.html
+    pub fn horizontal_alignment(
+        mut self,
+        alignment: HorizontalAlignment,
+    ) -> Self {
+        self.horizontal_alignment = alignment;
+        self
+    }
+
     /// Sets the message that should be produced when the [`TextInput`] is
     /// focused and the enter key is pressed.
     ///
@@ -193,8 +209,38 @@ where
             .max_width(self.max_width)
             .height(Length::Units(text_size));
 
+        let text_visual_size = renderer.measure_value(
+            &self.value.to_string(),
+            text_size,
+            self.font,
+        );
+
         let mut text = layout::Node::new(limits.resolve(Size::ZERO));
-        text.move_to(Point::new(padding, padding));
+
+        let x = {
+            let width = limits.max().width;
+            let center = (width / 2.0) - (text_visual_size / 2.0);
+            let right = width - text_visual_size;
+            match self.horizontal_alignment {
+                HorizontalAlignment::Left => padding,
+                HorizontalAlignment::Center => {
+                    if center < padding {
+                        padding
+                    } else {
+                        center
+                    }
+                }
+                HorizontalAlignment::Right => {
+                    if right < padding {
+                        padding
+                    } else {
+                        right
+                    }
+                }
+            }
+        };
+
+        text.move_to(Point::new(x, padding));
 
         layout::Node::with_children(text.size().pad(padding), vec![text])
     }
@@ -494,6 +540,7 @@ where
                 self.size.unwrap_or(renderer.default_size()),
                 &self.placeholder,
                 &self.value.secure(),
+                self.horizontal_alignment,
                 &self.state,
                 &self.style,
             )
@@ -506,6 +553,7 @@ where
                 self.size.unwrap_or(renderer.default_size()),
                 &self.placeholder,
                 &self.value,
+                self.horizontal_alignment,
                 &self.state,
                 &self.style,
             )
@@ -589,6 +637,7 @@ pub trait Renderer: crate::Renderer + Sized {
         size: u16,
         placeholder: &str,
         value: &Value,
+        horizontal_alignment: HorizontalAlignment,
         state: &State,
         style: &Self::Style,
     ) -> Self::Output;