Refactor/icon

CHANGELOG.md

@@ -33,6 +33,10 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 - **core**: Added `OverrideClass` to override a single class within a subtree. (#657 @M-Adoo)
 - **widgets**: Added `LinearProgress` and `SpinnerProgress` widgets along with their respective material themes. (#630 @wjian23 @M-Adoo)
 
+### Changed
+
+- **widgets**: The `Icon` widget utilizes classes to configure its style, and it does not have a size property. (#660 @M-Adoo)
+
 ### Fixed
 
 - **core**: The size of the `Root` container is too small, which could lead to potential missed hits. (#654 @M-Adoo)

Cargo.toml

@@ -43,15 +43,15 @@ ahash = "0.8.11"
 arboard = "3.2.0"
 bitflags = "2.6.0"
 blake3 = "1.3.3"
-colored = "2.0.0"
+colored = "2.1.0"
 derive_more = "1.0.0"
 dssim-core="3.2.9"
 env_logger = "0.7.1"
 euclid = "0.22.6"
-fontdb = "0.22.0"
+fontdb = "0.23.0"
 futures = "0.3.26"
 guillotiere = "0.6.0"
-image = { version = "0.24.5", default-features = false }
+image = { version = "0.24.5" }
 indextree = "4.7.3"
 log = "0.4.14"
 lyon_algorithms = "1.0.1"
@@ -61,33 +61,31 @@ lyon_tessellation = "1.0.1"
 material-color-utilities-rs = "0.2.1"
 icrate = "0.0.4"
 paste = "1.0"
-pin-project-lite = "0.2.9"
-proc-macro2 = "1.0.81"
-quote = "1.0.16"
-rayon = "1.5.1"
-rctree = "0.5.0"
-rustybuzz = "0.11.0"
+pin-project-lite = "0.2.15"
+proc-macro2 = "1.0.89"
+quote = "1.0.37"
+rayon = "1.10.0"
+rustybuzz = "0.20.1"
 rxrust = { version="1.0.0-beta.9", default-features = false, features = ["futures-scheduler"]}
 scoped_threadpool = "0.1.9"
 triomphe = "0.1.12"
 serde = "1.0"
 serde_json = "1.0.82"
 smallvec = "1.8.0"
-syn = "2.0.38"
-tiny-skia-path = {version = "0.11.0"}
+syn = "2.0.87"
 unicode-bidi = "0.3.7"
 unicode-script = "0.5.4"
 unicode-segmentation = "1.9.0"
-usvg = { version= "0.36.0", default-features = false }
+usvg = { version= "0.44.0", default-features = false }
 webbrowser = "0.8.8"
 wgpu = {version = "0.20.0", features=["webgl"]}
 winit = { version="0.29.5", default-features = false, features = ["x11", "wayland", "wayland-dlopen", "rwh_06"]}
 zerocopy = "0.7.3"
-quick-xml = "0.31.0"
+quick-xml = "0.37.1"
 macos-accessibility-client = { version = "0.0.1" }
 tokio = { version = "1.0" }
 tokio-stream = { version = "0.1" }
-priority-queue = "1.3.2"
+priority-queue = "2.1.1"
 phf = "0.11.2"
 web-sys = { version = "0.3.69", features = ["HtmlCollection"] }
 web-time = "1.1.0"

core/src/builtin_widgets/theme.rs

@@ -85,8 +85,19 @@ pub struct Theme {
   pub transitions_theme: TransitionTheme,
   pub compose_decorators: ComposeDecorators,
   pub custom_styles: CustomStyles,
-  pub font_bytes: Option<Vec<Vec<u8>>>,
-  pub font_files: Option<Vec<String>>,
+  pub font_bytes: Vec<Vec<u8>>,
+  pub font_files: Vec<String>,
+  /// This font is used for icons to display text as icons through font
+  /// ligatures. It is crucial to ensure that this font is included in either
+  /// `font_bytes` or `font_files`.
+  ///
+  /// Theme makers may not know which icons the application will utilize, making
+  /// it challenging to provide a default icon font. Additionally, offering a
+  /// vast selection of icons in a single font file can result in a large file
+  /// size, which is not ideal for web platforms. Therefore, this configuration
+  /// allows the application developer to supply the font file. Certainly, the
+  /// icon also works with `SVG` and [`named_svgs`](super::named_svgs).
+  pub icon_font: FontFace,
 }
 
 impl Theme {
@@ -107,16 +118,13 @@ impl Theme {
   fn load_fonts(&mut self) {
     let mut font_db = AppCtx::font_db().borrow_mut();
     let Theme { font_bytes, font_files, .. } = self;
-    if let Some(font_bytes) = font_bytes {
-      font_bytes
-        .iter()
-        .for_each(|data| font_db.load_from_bytes(data.clone()));
-    }
-    if let Some(font_files) = font_files {
-      font_files.iter().for_each(|path| {
-        let _ = font_db.load_font_file(path);
-      });
-    }
+    font_bytes
+      .iter()
+      .for_each(|data| font_db.load_from_bytes(data.clone()));
+
+    font_files.iter().for_each(|path| {
+      let _ = font_db.load_font_file(path);
+    });
   }
 }
 
@@ -232,13 +240,14 @@ impl Default for Theme {
     Theme {
       palette: Palette::default(),
       typography_theme: typography_theme(),
-      classes: <_>::default(),
       icon_theme,
+      classes: <_>::default(),
       transitions_theme: Default::default(),
       compose_decorators: Default::default(),
       custom_styles: Default::default(),
-      font_bytes: None,
-      font_files: None,
+      font_bytes: vec![],
+      font_files: vec![],
+      icon_font: Default::default(),
     }
   }
 }

core/src/test_helper.rs

@@ -355,15 +355,21 @@ impl LayoutCase {
 pub struct WidgetTester {
   pub widget: GenWidget,
   pub wnd_size: Option<Size>,
+  pub env_init: Option<Box<dyn FnOnce()>>,
   pub on_initd: Option<InitdFn>,
   pub comparison: Option<f64>,
 }
 
-type InitdFn = Box<dyn Fn(&mut TestWindow)>;
+type InitdFn = Box<dyn FnOnce(&mut TestWindow)>;
 
 impl WidgetTester {
   pub fn new(widget: impl Into<GenWidget>) -> Self {
-    Self { wnd_size: None, widget: widget.into(), on_initd: None, comparison: None }
+    Self { wnd_size: None, widget: widget.into(), on_initd: None, env_init: None, comparison: None }
+  }
+
+  pub fn with_env_init(mut self, env_init: impl Fn() + 'static) -> Self {
+    self.env_init = Some(Box::new(env_init));
+    self
   }
 
   /// This callback runs after creating the window and drawing the first frame.
@@ -382,19 +388,23 @@ impl WidgetTester {
     self
   }
 
-  pub fn create_wnd(&self) -> TestWindow {
+  pub fn create_wnd(&mut self) -> TestWindow {
+    if let Some(env_init) = self.env_init.take() {
+      env_init();
+    }
+
     let wnd_size = self.wnd_size.unwrap_or(Size::new(1024., 1024.));
     let mut wnd = TestWindow::new_with_size(self.widget.clone(), wnd_size);
     wnd.draw_frame();
-    if let Some(initd) = self.on_initd.as_ref() {
+    if let Some(initd) = self.on_initd.take() {
       initd(&mut wnd);
       wnd.draw_frame();
     }
     wnd
   }
 
   #[track_caller]
-  pub fn layout_check(&self, cases: &[LayoutCase]) {
+  pub fn layout_check(mut self, cases: &[LayoutCase]) {
     let wnd = self.create_wnd();
     cases.iter().for_each(|c| c.check(&wnd));
   }

core/src/widget_children/child_convert.rs

@@ -1,3 +1,4 @@
+use super::{DeclareInit, DeclareInto};
 use crate::{pipe::*, widget::*};
 
 /// Trait for conversions type as a child of widget.
@@ -94,3 +95,19 @@ where
   #[inline]
   fn into_child(self) -> FnWidget<'w> { FnWidget::new(self) }
 }
+
+impl<U, T> IntoChild<DeclareInit<U>, RENDER> for T
+where
+  T: DeclareInto<U, 1>,
+{
+  #[inline]
+  fn into_child(self) -> DeclareInit<U> { self.declare_into() }
+}
+
+impl<U, T> IntoChild<DeclareInit<U>, COMPOSE> for T
+where
+  T: DeclareInto<U, 2>,
+{
+  #[inline]
+  fn into_child(self) -> DeclareInit<U> { self.declare_into() }
+}

dev-helper/src/widget_test.rs

@@ -50,9 +50,14 @@ macro_rules! widget_layout_test {
 #[macro_export]
 macro_rules! widget_image_tests {
   ($name:ident, $widget_tester:expr) => {
-    widget_image_tests!(gen_test: $name, with_default_by_wgpu, Theme::default(), $widget_tester);
-    widget_image_tests!(gen_test:
-      $name,
+    widget_image_tests!(
+      gen_test: $name,
+      with_default_by_wgpu,
+      ribir_slim::purple(),
+      $widget_tester
+    );
+    widget_image_tests!(
+      gen_test: $name,
       with_material_by_wgpu,
       ribir_material::purple::light(),
       $widget_tester

examples/counter/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.6"

examples/counter/src/lib.rs

@@ -25,7 +25,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/messages/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.6"

examples/messages/src/messages.rs

@@ -53,7 +53,7 @@ impl Compose for MessageList {
           align_items: Align::Center,
           @Row {
             item_gap: 10.,
-            @TinyIcon { @{ svgs::MENU } }
+            @Icon { @{ svgs::MENU } }
             @Text {
               text: "Message",
               foreground: palette.on_surface(),
@@ -62,8 +62,8 @@ impl Compose for MessageList {
           }
           @Row {
             item_gap: 10.,
-            @TinyIcon { @{ svgs::SEARCH } }
-            @TinyIcon { @{ svgs::MORE_VERT } }
+            @Icon { @{ svgs::SEARCH } }
+            @Icon { @{ svgs::MORE_VERT } }
           }
         }
         @Tabs {
@@ -116,7 +116,7 @@ impl Compose for MessageList {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/storybook/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/storybook/src/storybook.rs

@@ -26,7 +26,6 @@ fn content() -> Widget<'static> {
               clamp: BoxClamp::fixed_height(30.),
               @Text { text: "Common buttons" }
               @Icon {
-                size: Size::splat(16.),
                 @ { material_svgs::INFO }
               }
             }
@@ -96,7 +95,6 @@ fn content() -> Widget<'static> {
               @Row {
                 @Text { text: "Floating action buttons" }
                 @Icon {
-                  size: Size::splat(16.),
                   @ { material_svgs::INFO }
                 }
               }
@@ -129,7 +127,6 @@ fn content() -> Widget<'static> {
               @Row {
                 @Text { text: "Icon buttons" }
                 @Icon {
-                  size: Size::splat(16.),
                   @ { material_svgs::INFO }
                 }
               }
@@ -201,7 +198,6 @@ fn content() -> Widget<'static> {
             h_align: HAlign::Center,
             @Text { text: "Divider" }
             @Icon {
-              size: Size::splat(16.),
               @ { material_svgs::INFO }
             }
           }

examples/todos/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 serde = {workspace = true, features = ["derive"]}
 serde_json = {workspace = true}
 

examples/todos/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/wordle_game/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 
 [dependencies]
 paste.workspace = true
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 csv = "1.3.0"
 rand = "0.8.5"
 getrandom = { workspace = true }

examples/wordle_game/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

macros/src/lib.rs

@@ -156,12 +156,12 @@ pub fn pipe(input: TokenStream) -> TokenStream {
 pub fn style_class(input: TokenStream) -> TokenStream {
   let input: proc_macro2::TokenStream = input.into();
   quote! {
-    move |widget: Widget| {
+    (move |widget: Widget| {
       fn_widget! {
         let widget = FatObj::new(widget);
         @ $widget { #input }
       }.into_widget()
-    }
+    }) as fn(Widget) -> Widget
   }
   .into()
 }

painter/Cargo.toml

@@ -19,12 +19,10 @@ log.workspace = true
 lyon_algorithms = {version = "1.0.3", features = ["serialization"]}
 lyon_tessellation = {version = "1.0.3", features = ["serialization"], optional = true}
 material-color-utilities-rs = {workspace = true}
-rctree.workspace = true
 ribir_algo = {path = "../algo", version = "0.4.0-alpha.15" }
 ribir_geom = {path = "../geom", version = "0.4.0-alpha.15" }
 serde = {version = "1.0", features = ["derive"]}
 serde_json.workspace = true
-tiny-skia-path = {workspace = true}
 usvg.workspace = true
 zerocopy = {workspace = true, optional = true, features = ["derive"]}
 derive_more= {workspace = true, features = ["add", "add_assign", "not", "mul"]} 

painter/src/path_builder.rs

@@ -5,6 +5,7 @@ use lyon_algorithms::path::{
   path::Builder as LyonBuilder,
 };
 use ribir_geom::{Angle, Point, Rect, Transform, Vector};
+use usvg::tiny_skia_path;
 
 use crate::{LineCap, LineJoin, Path, Radius, StrokeOptions};