refactor(widgets): 💡 refactor input widget

CHANGELOG.md

@@ -28,6 +28,13 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 ### Features
 
 - **core**: ensure object safety of `StateReader`， `StateWatcher` and `StateWriter` (#692 @M-Adoo)
+- **core**: Support extend custom event. (#pr @wjian23)
+- **core**: Added `map_watcher` to `StateWatcher` (#pr @wjian23)
+- **core**: Added `ensure_visible` and ScrollableProvider to ScrollableWidget, to support descendant to be showed.(#pr @wjian23)
+
+### Changed
+
+- **widgets**: Refactor `Input` Widget. (#pr @wjian23)
 
 ## [0.4.0-alpha.23] - 2025-01-15
 
@@ -39,9 +46,6 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 - **core**: Added `Variant` to support building widgets with variables across `Providers`. (#690 @M-Adoo)
 - **macros**: Added the `part_reader!` macro to generate a partial reader from a reference of a reader. (#688 @M-Adoo)
 - **macros**: The `simple_declare` now supports the `stateless` meta attribute, `#[simple_declare(stateless)]`. (#688 @M-Adoo)
-- **core**: Support extend custom event. (#pr @wjian23)
-- **core**: Added `map_watcher` to `StateWatcher` (#pr @wjian23)
-- **core**: Added `ensure_visible` and ScrollableProvider to ScrollableWidget, to support descendant to be showed.(#pr @wjian23)
 
 ### Changed
 

core/src/builtin_widgets/text.rs

@@ -16,6 +16,36 @@ pub struct Text {
   glyphs: RefCell<Option<VisualGlyphs>>,
 }
 
+pub fn text_glyph(
+  text: Substr, text_style: &TextStyle, text_align: TextAlign, bounds: Size,
+) -> VisualGlyphs {
+  AppCtx::typography_store()
+    .borrow_mut()
+    .typography(
+      text,
+      text_style,
+      bounds,
+      text_align,
+      GlyphBaseline::Middle,
+      PlaceLineDirection::TopToBottom,
+    )
+}
+
+pub fn paint_text(
+  painter: &mut Painter, glyphs: &VisualGlyphs, style: PaintingStyle, box_rect: Rect,
+) {
+  if let PaintingStyle::Stroke(options) = style {
+    painter
+      .set_style(PathStyle::Stroke)
+      .set_strokes(options);
+  } else {
+    painter.set_style(PathStyle::Fill);
+  }
+
+  let font_db = AppCtx::font_db().clone();
+  painter.draw_glyphs_in_rect(glyphs, box_rect, &font_db.borrow());
+}
+
 impl Render for Text {
   fn perform_layout(&self, clamp: BoxClamp, ctx: &mut LayoutCtx) -> Size {
     let style = Provider::of::<TextStyle>(ctx).unwrap();
@@ -50,18 +80,8 @@ impl Render for Text {
     };
 
     let style = Provider::of::<PaintingStyle>(ctx).map(|p| p.clone());
-    let painter = ctx.painter();
-    if let Some(PaintingStyle::Stroke(options)) = style {
-      painter
-        .set_style(PathStyle::Stroke)
-        .set_strokes(options);
-    } else {
-      painter.set_style(PathStyle::Fill);
-    }
-
     let visual_glyphs = self.glyphs().unwrap();
-    let font_db = AppCtx::font_db().clone();
-    painter.draw_glyphs_in_rect(&visual_glyphs, box_rect, &font_db.borrow());
+    paint_text(ctx.painter(), &visual_glyphs, style.unwrap_or(PaintingStyle::Fill), box_rect);
   }
 }
 

core/src/widget_tree/layout_info.rs

@@ -57,6 +57,11 @@ impl BoxClamp {
     self
   }
 
+  pub fn with_max_size(mut self, size: Size) -> Self {
+    self.max = size.max(self.min);
+    self
+  }
+
   pub const fn with_fixed_height(mut self, height: f32) -> Self {
     self.min.height = height;
     self.max.height = height;

docs/en/practice_todos_app/develop_a_todos_app.md

@@ -589,7 +589,7 @@ impl Compose for Todos {
                 $input.write().set_text("");
               }
             },
-            @{ Placeholder::new("What do you want to do ?") }
+            @Text { text:"What do you want to do ?" }
           }
         }
         @Tabs {

docs/zh/practice_todos_app/develop_a_todos_app.md

@@ -592,7 +592,7 @@ impl Compose for Todos {
                 $input.write().set_text("");
               }
             },
-            @{ Placeholder::new("What do you want to do ?") }
+            @Text { text: "What do you want to do ?" }
           }
         }
         @Tabs {

examples/todos/src/ui.rs

@@ -109,20 +109,26 @@ fn input(
     if let Some(text) = text {
       $input.write().set_text(&text);
     }
-    @ $input {
-      margin: EdgeInsets::horizontal(24.),
-      h_align: HAlign::Stretch,
-      border: {
-        let color = Palette::of(BuildCtx::get()).surface_variant().into();
-        Border::only_bottom(BorderSide { width: 2., color })
-      },
-      on_key_down: move |e| {
-        if e.key_code() == &PhysicalKey::Code(KeyCode::Enter) {
-          on_submit($input.text().clone());
-          $input.write().set_text("");
-        }
-      },
-      @{ Placeholder::new("What do you want to do ?") }
+    @ Stack {
+      padding: EdgeInsets::horizontal(24.),
+      @Text {
+        h_align: HAlign::Stretch,
+        visible: pipe!($input.text().is_empty()),
+        text: "What do you want to do ?"
+      }
+      @ $input {
+        h_align: HAlign::Stretch,
+        border: {
+          let color = Palette::of(BuildCtx::get()).surface_variant().into();
+          Border::only_bottom(BorderSide { width: 2., color })
+        },
+        on_key_down: move |e| {
+          if e.key_code() == &PhysicalKey::Code(KeyCode::Enter) {
+            on_submit($input.text().clone());
+            $input.write().set_text("");
+          }
+        },
+      }
     }
   }
   .into_widget()

painter/src/text.rs

@@ -19,16 +19,6 @@ mod typography_store;
 pub use typography_store::{TypographyStore, VisualGlyphs};
 mod svg_glyph_cache;
 
-mod text_writer;
-pub use text_writer::{
-  CharacterCursor, TextWriter, select_next_word, select_prev_word, select_word,
-};
-
-mod grapheme_cursor;
-pub use grapheme_cursor::GraphemeCursor;
-
-pub mod unicode_help;
-
 // Enum value descriptions are from the CSS spec.
 /// A [font family](https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family).
 #[derive(Clone, Debug, PartialEq, Eq, Hash)]