Merge branch 'main' into feat/website-enhancements

book/src/guides/font_style.md

@@ -61,8 +61,6 @@ Compatible elements: [`label`](/guides/elements.html#label), [`paragraph`](/guid
 
 With the `font_family` you can specify what font do you want to use for the inner text.
 
-Limitation: Only fonts installed in the system are supported for now.
-
 Example: 
 
 ```rust, no_run
@@ -76,6 +74,21 @@ fn app(cx: Scope) -> Element {
 }
 ```
 
+You can also specify multiple fonts in order of priority, if one is not found it will fallback to the next one.
+
+Example: 
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        label {
+            font_family: "DoesntExist Font, Impact",
+            "Hello, World!"
+        }
+    )
+}
+```
+
 Compatible elements: [`label`](/guides/elements.html#label), [`paragraph`](/guides/elements.html#paragraph-and-text), 
 
 ### font_size

crates/components/src/link.rs

@@ -13,7 +13,7 @@ pub enum LinkTooltip {
     None,
     /// Default tooltip.
     ///
-    /// - For a route, this is the same as [`None`](AnchorTooltip::None).
+    /// - For a route, this is the same as [`None`](crate::LinkTooltip::None).
     /// - For a URL, this is the value of that URL.
     Default,
     /// Custom tooltip to always show.

crates/components/src/menu.rs

@@ -10,9 +10,6 @@ use winit::window::CursorIcon;
 
 /// `Menu` component.
 ///
-/// # Styling
-/// Inherits the [`MenuTheme`](freya_hooks::MenuTheme) theme.
-///
 /// # Example
 ///
 /// ```no_run
@@ -127,6 +124,11 @@ pub enum MenuItemStatus {
     Hovering,
 }
 
+/// `MenuItem` component.
+/// 
+/// # Styling
+/// Inherits the [`MenuItemTheme`](freya_hooks::MenuItemTheme) theme.
+/// 
 #[allow(non_snake_case)]
 #[component]
 pub fn MenuItem(

crates/components/src/network_image.rs

@@ -13,7 +13,7 @@ pub struct NetworkImageProps {
     pub theme: Option<NetworkImageThemeWith>,
 
     /// URL of the image
-    pub url: Url,
+    pub url: ReadOnlySignal<Url>,
 
     /// Fallback element
     pub fallback: Option<Element>,
@@ -46,11 +46,12 @@ pub enum ImageStatus {
 /// # Example
 ///  
 /// ```rust,no_run
+/// # use reqwest::Url;
 /// # use freya::prelude::*;
 /// fn app() -> Element {
 ///     rsx!(
 ///         NetworkImage {
-///             url: "https://raw.githubusercontent.com/jigsawpieces/dog-api-images/main/greyhound/Cordelia.jpg".parse().unwrap()
+///             url: "https://raw.githubusercontent.com/jigsawpieces/dog-api-images/main/greyhound/Cordelia.jpg".parse::<Url>().unwrap()
 ///         }
 ///     )
 /// }
@@ -65,7 +66,8 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
     let NetworkImageTheme { width, height } = use_applied_theme!(&props.theme, network_image);
     let alt = props.alt.as_deref();
 
-    use_effect(use_reactive(&props.url, move |url| {
+    use_memo(move || {
+        let url = props.url.read().clone();
         spawn(async move {
             // Loading image
             status.set(ImageStatus::Loading);
@@ -80,7 +82,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
                 status.set(ImageStatus::Errored)
             }
         });
-    }));
+    });
 
     if *status.read() == ImageStatus::Loading {
         if let Some(loading_element) = &props.loading {

crates/components/src/scroll_views/scroll_thumb.rs

@@ -47,6 +47,7 @@ pub fn ScrollThumb(
             onmouseenter: move |_| { state.set(ScrollThumbState::Hovering) },
             onmouseleave: move |_| { state.set(ScrollThumbState::Idle) },
             onmousedown: move |e| {
+                e.stop_propagation();
                 onmousedown.call(e);
             },
             width: "{width}",

crates/components/src/tile.rs

@@ -20,14 +20,14 @@ pub enum TileStatus {
 ///
 /// # Example
 ///
-/// Tile is meant to be used with other components, take a look at [`Radio`](freya_components::Radio) for instance.
+/// Tile is meant to be used with other components, take a look at [`Radio`](crate::Radio) for instance.
 ///
 #[allow(non_snake_case)]
 #[component]
 pub fn Tile(
     /// Inner children for the Tile.
     children: Element,
-    /// Optional element to be placed before the inner children of the Tile. Such as a [`Radio`]
+    /// Optional element to be placed before the inner children of the Tile. Such as a [`Radio`](crate::Radio)
     leading: Option<Element>,
     /// Event handler for when the Tile is selected, e.g when clicking on it.
     onselect: Option<EventHandler<()>>,

crates/core/src/render.rs

@@ -5,20 +5,12 @@ use freya_engine::prelude::*;
 use torin::prelude::LayoutNode;
 
 /// Call the render function for the nodes that should be rendered.
-pub fn process_render<RenderOptions>(
+pub fn process_render(
     viewports: &Viewports,
     fdom: &FreyaDOM,
     font_collection: &mut FontCollection,
     layers: &Layers,
-    render_options: &mut RenderOptions,
-    render_fn: impl Fn(
-        &FreyaDOM,
-        &NodeId,
-        &LayoutNode,
-        &mut FontCollection,
-        &Viewports,
-        &mut RenderOptions,
-    ),
+    mut render_fn: impl FnMut(&FreyaDOM, &NodeId, &LayoutNode, &mut FontCollection, &Viewports),
 ) {
     // Render all the layers from the bottom to the top
     for (_, layer) in layers.layers() {
@@ -41,14 +33,7 @@ pub fn process_render<RenderOptions>(
                 }
 
                 // Render the element
-                render_fn(
-                    fdom,
-                    node_id,
-                    layout_node,
-                    font_collection,
-                    viewports,
-                    render_options,
-                )
+                render_fn(fdom, node_id, layout_node, font_collection, viewports)
             }
         }
     }

crates/elements/src/_docs/attributes/font_style.md

@@ -19,3 +19,19 @@ fn app() -> Element {
     )
 }
 ```
+
+You can also specify multiple fonts in order of priority, if one is not found it will fallback to the next one.
+
+Example: 
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        label {
+            font_family: "DoesntExist Font, Impact",
+            "Hello, World!"
+        }
+    )
+}
+```

crates/renderer/src/app.rs

@@ -350,8 +350,7 @@ impl<State: 'static + Clone> App<State> {
             &fdom,
             &mut self.font_collection,
             &self.layers,
-            &mut (canvas, &mut matrices, &mut opacities),
-            |dom, node_id, area, font_collection, viewports, (canvas, matrices, opacities)| {
+            |dom, node_id, area, font_collection, viewports| {
                 let render_wireframe = if let Some(hovered_node) = &hovered_node {
                     hovered_node
                         .lock()
@@ -370,8 +369,8 @@ impl<State: 'static + Clone> App<State> {
                         &self.font_mgr,
                         viewports,
                         render_wireframe,
-                        matrices,
-                        opacities,
+                        &mut matrices,
+                        &mut opacities,
                     );
                 }
             },

examples/alignment.rs

@@ -55,7 +55,7 @@ fn app() -> Element {
                 }
                 rect {
                     cross_align: "end",
-                    width: "100%%",
+                    width: "10%%",
                     height: "50%",
                     rect {
                         main_align: "start",

examples/floating_editors.rs

@@ -7,15 +7,7 @@ use freya::events::MouseEvent;
 use freya::prelude::*;
 
 fn main() {
-    launch_cfg(
-        app,
-        LaunchConfig::<()>::builder()
-            .with_title("Performance Overlay Plugin")
-            .with_width(700.)
-            .with_height(500.)
-            .with_plugin(PerformanceOverlayPlugin::default())
-            .build(),
-    )
+    launch_with_title(app, "Floating Editors")
 }
 
 fn app() -> Element {