refactor(core): 💡 simplify the structure of the text editing widget

CHANGELOG.md

@@ -51,7 +51,7 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 - **core**: ensure object safety of `StateReader`， `StateWatcher` and `StateWriter` (#692 @M-Adoo)
 - **core**: Support extend custom event. (#684 @wjian23)
 - **core**: Added `map_watcher` to `StateWatcher` (#684 @wjian23)
-- **core**: Added `ensure_visible` and ScrollableProvider to ScrollableWidget, to support descendant to be showed.(#684 @wjian23)
+- **core**: Added `visible_widget` and ScrollableProvider to ScrollableWidget, to support descendant to be showed.(#684 @wjian23)
 
 ### Changed
 

core/src/builtin_widgets/scrollable.rs

@@ -96,53 +96,67 @@ impl ScrollableWidget {
     Some(pos - base.to_vector())
   }
 
-  /// Ensure the given child is visible in the scroll view with the given anchor
+  pub fn map_to_content(&self, p: Point, child: WidgetId, wnd: &Window) -> Option<Point> {
+    let content_id = self
+      .view_id
+      .as_ref()?
+      .get()?
+      .single_child(wnd.tree())?;
+    let pos = wnd.map_to_global(p, child);
+    let base = wnd.map_to_global(Point::zero(), content_id);
+    Some(pos - base.to_vector())
+  }
+
+  /// Keep the content box visible in the scroll view with the given anchor
   /// relative to the view.
+  ///
   /// If Anchor.x is None,  it will anchor the widget to the closest edge of the
   /// view in horizontal direction, when the widget is out of the view.
   /// If Anchor.y is None, it will anchor the widget to the closest edge of the
   /// view in vertical direction, when the widget is out of the view.
-  pub fn ensure_visible(&mut self, child: WidgetId, anchor: Anchor, wnd: &Window) {
-    let Some(pos) = self.map_to_view(Point::zero(), child, wnd) else { return };
-    let Some(size) = wnd.widget_size(child) else { return };
-    let child_rect = Rect::new(pos, size);
+  pub fn visible_content_box(&mut self, rect: Rect, anchor: Anchor) {
     let view_size = self.scroll_view_size();
 
-    let best_auto_position_fn = |min: f32, max: f32, max_limit: f32| {
-      if (min < 0. && max_limit < max) || (0. < min && max < max_limit) {
-        min
-      } else if min.abs() < (max - max_limit).abs() {
-        0.
-      } else {
-        max_limit - (max - min)
-      }
-    };
-    let Anchor { x, y } = anchor;
-    let top_left = match (x, y) {
-      (Some(x), Some(y)) => Point::new(
-        x.into_pixel(child_rect.width(), view_size.width),
-        y.into_pixel(child_rect.height(), view_size.height),
-      ),
-      (Some(x), None) => {
-        let best_y =
-          best_auto_position_fn(child_rect.min_y(), child_rect.max_y(), view_size.height);
-        Point::new(x.into_pixel(child_rect.width(), view_size.width), best_y)
-      }
-      (None, Some(y)) => {
-        let best_x = best_auto_position_fn(child_rect.min_x(), child_rect.max_x(), view_size.width);
-        Point::new(best_x, y.into_pixel(child_rect.height(), view_size.height))
-      }
-      (None, None) => {
-        let best_x = best_auto_position_fn(child_rect.min_x(), child_rect.max_x(), view_size.width);
-        let best_y =
-          best_auto_position_fn(child_rect.min_y(), child_rect.max_y(), view_size.height);
-        Point::new(best_x, best_y)
-      }
-    };
+    let offset_x = anchor
+      .x
+      .or_else(|| {
+        if rect.min_x() > view_size.width {
+          Some(HAnchor::Right(0.0.into()))
+        } else if rect.max_x() < 0. {
+          Some(HAnchor::Left(0.0.into()))
+        } else {
+          None
+        }
+      })
+      .map_or(0., |x| rect.min_x() - x.into_pixel(rect.width(), view_size.width));
+
+    let offset_y = anchor
+      .y
+      .or_else(|| {
+        if rect.min_y() > view_size.height {
+          Some(VAnchor::Bottom(0.0.into()))
+        } else if rect.max_y() < 0. {
+          Some(VAnchor::Top(0.0.into()))
+        } else {
+          None
+        }
+      })
+      .map_or(0., |y| rect.min_y() - y.into_pixel(rect.height(), view_size.height));
+
+    self.jump_to(Point::new(offset_x, offset_y));
+  }
 
-    let old = self.get_scroll_pos();
-    let offset = child_rect.origin - top_left;
-    self.jump_to(old + offset);
+  /// Ensure the given child is visible in the scroll view with the given anchor
+  /// relative to the view.
+  /// If Anchor.x is None,  it will anchor the widget to the closest edge of the
+  /// view in horizontal direction, when the widget is out of the view.
+  /// If Anchor.y is None, it will anchor the widget to the closest edge of the
+  /// view in vertical direction, when the widget is out of the view.
+  pub fn visible_widget(&mut self, child: WidgetId, anchor: Anchor, wnd: &Window) {
+    let Some(pos) = self.map_to_content(Point::zero(), child, wnd) else { return };
+    let Some(size) = wnd.widget_size(child) else { return };
+    let show_box = Rect::new(pos, size);
+    self.visible_content_box(show_box, anchor);
   }
 
   pub fn scroll(&mut self, x: f32, y: f32) {

core/src/builtin_widgets/text.rs

@@ -182,6 +182,6 @@ mod tests {
       }
     })
     .with_wnd_size(WND_SIZE)
-    .with_comparison(0.00009)
+    .with_comparison(0.0001)
   );
 }

core/src/declare.rs

@@ -48,6 +48,16 @@ impl<V: 'static> DeclareInit<V> {
       }
     }
   }
+
+  pub fn map<F, U: 'static>(self, f: F) -> DeclareInit<U>
+  where
+    F: Fn(V) -> U + 'static,
+  {
+    match self {
+      Self::Value(v) => DeclareInit::Value(f(v)),
+      Self::Pipe(v) => v.into_pipe().map(f).declare_into(),
+    }
+  }
 }
 
 impl<T: Default> Default for DeclareInit<T> {

core/src/window.rs

@@ -181,6 +181,11 @@ impl Window {
     self.once_on_lifecycle(f, |msg| matches!(msg, FrameMsg::BeforeLayout(_)))
   }
 
+  /// Execute the callback when the layout is ready.
+  pub fn once_layout_ready(&self, f: impl FnOnce() + 'static) {
+    self.once_on_lifecycle(f, |msg| matches!(msg, FrameMsg::LayoutReady(_)))
+  }
+
   /// Return an `rxRust` Scheduler, which will guarantee all task add to the
   /// scheduler will finished before current frame finished.
   #[inline]

examples/todos/src/ui.rs

@@ -118,10 +118,6 @@ fn input(
       }
       @ $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());

themes/material/src/classes/input_cls.rs

@@ -1,28 +1,52 @@
 use ribir_core::prelude::*;
-use ribir_widgets::input::{TEXT_CARET, TEXT_HIGH_LIGHT};
+use ribir_widgets::input::{INPUT, TEXT_CARET, TEXT_SELECTION, TEXTAREA};
 
 use crate::md;
 
 pub(super) fn init(classes: &mut Classes) {
-  classes.insert(TEXT_CARET, |_w| {
-    fn_widget! {
-      let mut w = @ FittedBox {
-        box_fit: BoxFit::CoverY,
-        @ { svgs::TEXT_CARET }
-      };
+  classes.insert(TEXT_CARET, |w| {
+    rdl! {
+      let mut w = FatObj::new(w);
       let blink_interval = Duration::from_millis(500);
       let u = interval(blink_interval, AppCtx::scheduler())
-          .subscribe(move |idx| $w.write().opacity = (idx % 2) as f32);
-
+        .subscribe(move |idx| $w.write().opacity = (idx % 2) as f32);
+      let border = BuildCtx::color()
+        .map(|color| Border::only_left(BorderSide::new(2., color.into())));
       @ $w {
+        clamp: BoxClamp::fixed_width(2.),
+        border,
         on_disposed: move |_| u.unsubscribe()
       }
     }
     .into_widget()
   });
 
-  classes.insert(TEXT_HIGH_LIGHT, style_class! {
-    background: Color::from_rgb(181, 215, 254),
-    radius: md::RADIUS_2,
+  classes.insert(TEXT_SELECTION, style_class! {
+    background: {
+      let color = BuildCtx::color();
+      color.into_container_color(BuildCtx::get()).map(|c| c.with_alpha(0.8))
+    }
   });
+
+  fn input_border(w: Widget) -> Widget {
+    let mut w = FatObj::new(w);
+    let blur = Palette::of(BuildCtx::get()).on_surface_variant();
+    let border = match BuildCtx::color() {
+      Variant::Stateful(v) => pipe! {
+        let color = if $w.has_focus() { *$v } else { blur };
+        Border::all(BorderSide::new(1., color.into()))
+      }
+      .declare_into(),
+      Variant::Value(c) => pipe! {
+        let color = if $w.has_focus() { c } else { blur };
+        Border::all(BorderSide::new(1., color.into()))
+      }
+      .declare_into(),
+    };
+    w.border(border)
+      .radius(md::RADIUS_2)
+      .into_widget()
+  }
+  classes.insert(INPUT, input_border);
+  classes.insert(TEXTAREA, input_border);
 }

themes/material/src/md.rs

@@ -86,8 +86,9 @@ pub const SIZE_36: Size = Size::new(36., 36.);
 pub const SIZE_48: Size = Size::new(48., 48.);
 pub const SIZE_64: Size = Size::new(64., 64.);
 
+pub const EDGES_2: EdgeInsets = EdgeInsets::all(2.);
+
 pub const EDGES_4: EdgeInsets = EdgeInsets::all(4.);
-pub const EDGES_10: EdgeInsets = EdgeInsets::all(10.);
 pub const EDGES_HOR_4: EdgeInsets = EdgeInsets::horizontal(4.);
 pub const EDGES_VER_4: EdgeInsets = EdgeInsets::vertical(4.);
 pub const EDGES_LEFT_4: EdgeInsets = EdgeInsets::only_left(4.);
@@ -97,6 +98,9 @@ pub const EDGES_BOTTOM_4: EdgeInsets = EdgeInsets::only_bottom(4.);
 
 pub const EDGES_HOR_6: EdgeInsets = EdgeInsets::horizontal(6.);
 pub const EDGES_HOR_8: EdgeInsets = EdgeInsets::horizontal(8.);
+
+pub const EDGES_10: EdgeInsets = EdgeInsets::all(10.);
+
 pub const EDGES_HOR_12: EdgeInsets = EdgeInsets::horizontal(12.);
 
 pub const EDGES_16: EdgeInsets = EdgeInsets::all(16.);