Merge branch 'main' into feat/new-book

.github/workflows/rust.yml

@@ -57,7 +57,7 @@ jobs:
         rustup component add llvm-tools-preview 
         curl -L https://github.com/mozilla/grcov/releases/latest/download/grcov-x86_64-unknown-linux-gnu.tar.bz2 | tar jxf -
         ./grcov . --binary-path ./target/debug/deps -s . -t lcov --branch --ignore-not-existing --ignore "../*" --ignore "/*" -o cov.lcov
-    - uses: codecov/codecov-action@v4
+    - uses: codecov/codecov-action@v5
       if: runner.os == 'Linux'
       with:
         token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/sponsors.yml

@@ -5,6 +5,7 @@ on:
     - cron: 30 15 * * 0-6
 jobs:
   deploy:
+    if: github.repository == 'marc2332/freya'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️

.gitignore

@@ -3,4 +3,5 @@ Cargo.lock
 .idea
 snapshot_before.png
 snapshot_after.png
-documents_example
+documents_example
+bacon.toml

Cargo.toml

@@ -52,10 +52,9 @@ dioxus-signals = { version = "0.5" }
 dioxus-core = { version = "0.5" }
 dioxus-hot-reload = { version = "0.5", features = ["file_watcher"], default-features = false }
 dioxus-router = { version = "0.5", default-features = false }
-dioxus-sdk = { version = "0.5", features = ["clipboard"]}
-dioxus-i18n = "0.2"
+dioxus-clipboard = "0.1"
 
-skia-safe = { version = "0.75.0", features = ["gl", "textlayout", "svg"] }
+skia-safe = { version = "0.80.0", features = ["gl", "textlayout", "svg"] }
 
 gl = "0.14.0"
 glutin = "0.32.0"
@@ -86,7 +85,7 @@ freya-core = { workspace = true }
 freya-testing = { workspace = true }
 reqwest = { version = "0.12.0", features = ["json"] }
 serde = "1.0.189"
-dioxus-i18n = { workspace = true }
+dioxus-i18n = "0.3"
 rand = "0.8.5"
 dioxus-router = { workspace = true }
 itertools = "0.13.0"
@@ -98,7 +97,7 @@ tree-sitter-highlight = "0.23.0"
 tree-sitter-rust = "0.23.0"
 rfd = "0.14.1"
 bytes = "1.5.0"
-dioxus-sdk = { workspace = true }
+dioxus-clipboard = { workspace = true }
 winit = { workspace = true }
 
 [profile.release]

README.md

@@ -116,7 +116,7 @@ If you are interested in supporting the development of this project feel free to
 
 Thanks to my sponsors for supporting this project! 😄 
 
-<!-- sponsors --><a href="https://github.com/piny4man"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;8446285?u&#x3D;fd37db4dd9b4ba94dabe0bccc3a95ef2a35376ab&amp;v&#x3D;4" width="60px" alt="" /></a><a href="https://github.com/gqf2008"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;2295878?v&#x3D;4" width="60px" alt="高庆丰" /></a><!-- sponsors -->
+<!-- sponsors --><!-- sponsors -->
 
 ### Special thanks 💪
 

crates/components/src/activable_route.rs

@@ -5,7 +5,29 @@ use dioxus_router::{
 };
 use freya_hooks::ActivableRouteContext;
 
-/// Provide a context to the inner components so they can know whether the passed route is the current router in the Router or not.
+/// Sometimes you might want to know if a route is selected so you can style a specific UI element in a different way,
+/// like a button with a different color.
+/// To avoid cluttering your components with router-specific code you might instead want to wrap your component in an `ActivableRoute`
+/// and inside your component call `use_activable_route`.
+///
+/// This way, your component and all its desdendants will just know whether a route is activated or not, but not which one.
+///
+/// ```rs
+/// Link {
+///     to: Route::Home, // Direction route
+///     ActivableRoute {
+///         route: Route::Home, // Activation route
+///         SidebarItem {
+///             // `SidebarItem` will now appear "activated" when the route is `Route::Home`
+///             // `ActivableRoute` is letting it know whether `Route::Home` is enabled
+///             // or not, without the need to add router-specific logic in `SidebarItem`.
+///             label {
+///                 "Go to Hey ! 👋"
+///             }
+///         },
+///     }
+/// }
+/// ```
 #[allow(non_snake_case)]
 #[component]
 pub fn ActivableRoute<T: Clone + PartialEq + Routable + 'static>(

crates/components/src/animated_position.rs

@@ -0,0 +1,163 @@
+use std::time::Duration;
+
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{
+    use_animation_with_dependencies,
+    use_node_signal_with_prev,
+    AnimDirection,
+    AnimNum,
+    Ease,
+    Function,
+};
+
+#[component]
+pub fn AnimatedPosition(
+    children: Element,
+    width: String,
+    height: String,
+    #[props(default = Function::default())] function: Function,
+    #[props(default = Duration::from_millis(250))] duration: Duration,
+    #[props(default = Ease::default())] ease: Ease,
+) -> Element {
+    let mut render_element = use_signal(|| false);
+    let (reference, size, old_size) = use_node_signal_with_prev();
+
+    let animations = use_animation_with_dependencies(
+        &(function, duration, ease),
+        move |ctx, (function, duration, ease)| {
+            let old_size = old_size().unwrap_or_default();
+            let size = size().unwrap_or_default();
+            (
+                ctx.with(
+                    AnimNum::new(size.area.origin.x, old_size.area.origin.x)
+                        .duration(duration)
+                        .ease(ease)
+                        .function(function),
+                ),
+                ctx.with(
+                    AnimNum::new(size.area.origin.y, old_size.area.origin.y)
+                        .duration(duration)
+                        .ease(ease)
+                        .function(function),
+                ),
+            )
+        },
+    );
+
+    use_effect(move || {
+        if animations.is_running() {
+            render_element.set(true);
+        }
+    });
+
+    use_effect(move || {
+        let has_size = size.read().is_some();
+        let has_old_size = old_size.read().is_some();
+        if has_size && has_old_size {
+            animations.run(AnimDirection::Reverse);
+        } else if has_size {
+            render_element.set(true);
+        }
+    });
+
+    let (offset_x, offset_y) = animations.get();
+    let offset_x = offset_x.read().as_f32();
+    let offset_y = offset_y.read().as_f32();
+
+    rsx!(
+        rect {
+            reference,
+            width: "{width}",
+            height: "{height}",
+            rect {
+                width: "0",
+                height: "0",
+                offset_x: "{offset_x}",
+                offset_y: "{offset_y}",
+                position: "global",
+                if render_element() {
+                    rect {
+                        width: "{size.read().as_ref().unwrap().area.width()}",
+                        height: "{size.read().as_ref().unwrap().area.height()}",
+                        {children}
+                    }
+                }
+            }
+        }
+    )
+}
+
+#[cfg(test)]
+mod test {
+    use std::time::Duration;
+
+    use freya::prelude::*;
+    use freya_testing::prelude::*;
+
+    #[tokio::test]
+    pub async fn animated_position() {
+        fn animated_position_app() -> Element {
+            let mut padding = use_signal(|| (100., 100.));
+
+            rsx!(
+                rect {
+                    padding: "{padding().0} {padding().1}",
+                    onclick: move |_| {
+                        padding.write().0 += 10.;
+                        padding.write().1 += 10.;
+                    },
+                    AnimatedPosition {
+                        width: "50",
+                        height: "50",
+                        function: Function::Linear
+                    }
+                }
+            )
+        }
+
+        let mut utils = launch_test(animated_position_app);
+
+        // Disable event loop ticker
+        utils.config().event_loop_ticker = false;
+
+        let root = utils.root();
+        utils.wait_for_update().await;
+        utils.wait_for_update().await;
+
+        let get_positions = || {
+            root.get(0)
+                .get(0)
+                .get(0)
+                .get(0)
+                .layout()
+                .unwrap()
+                .area
+                .origin
+        };
+
+        assert_eq!(get_positions().x, 100.);
+        assert_eq!(get_positions().y, 100.);
+
+        utils.click_cursor((5.0, 5.0)).await;
+        utils.wait_for_update().await;
+        utils.wait_for_update().await;
+        tokio::time::sleep(Duration::from_millis(125)).await;
+        utils.wait_for_update().await;
+        utils.wait_for_update().await;
+
+        assert!(get_positions().x < 106.);
+        assert!(get_positions().x > 105.);
+
+        assert!(get_positions().y < 106.);
+        assert!(get_positions().y > 105.);
+
+        utils.config().event_loop_ticker = true;
+
+        utils.wait_for_update().await;
+        tokio::time::sleep(Duration::from_millis(125)).await;
+        utils.wait_for_update().await;
+
+        assert_eq!(get_positions().x, 110.);
+    }
+}

crates/components/src/button.rs

@@ -273,7 +273,7 @@ pub fn ButtonBase(
             border: "{border}",
             corner_radius: "{corner_radius}",
             background: "{background}",
-            text_align: "center",
+            text_height: "disable-least-ascent",
             main_align: "center",
             cross_align: "center",
             {&children}

crates/components/src/drag_drop.rs

@@ -115,14 +115,21 @@ pub struct DropZoneProps<T: 'static + PartialEq + Clone> {
     children: Element,
     /// Handler for the `ondrop` event.
     ondrop: EventHandler<T>,
+    /// Width of the [DropZone].
+    #[props(default = "auto".to_string())]
+    width: String,
+    /// Height of the [DropZone].
+    #[props(default = "auto".to_string())]
+    height: String,
 }
 
 /// Elements from [`DragZone`]s can be dropped here.
 #[allow(non_snake_case)]
 pub fn DropZone<T: 'static + Clone + PartialEq>(props: DropZoneProps<T>) -> Element {
     let mut drags = use_context::<Signal<Option<T>>>();
 
-    let onmouseup = move |_: MouseEvent| {
+    let onmouseup = move |e: MouseEvent| {
+        e.stop_propagation();
         if let Some(current_drags) = &*drags.read() {
             props.ondrop.call(current_drags.clone());
         }
@@ -134,6 +141,8 @@ pub fn DropZone<T: 'static + Clone + PartialEq>(props: DropZoneProps<T>) -> Elem
     rsx!(
         rect {
             onmouseup,
+            width: props.width,
+            height: props.height,
             {props.children}
         }
     )

crates/components/src/lib.rs

@@ -3,6 +3,7 @@
 
 mod accordion;
 mod activable_route;
+mod animated_position;
 mod animated_router;
 mod body;
 mod button;
@@ -23,9 +24,11 @@ mod menu;
 mod native_container;
 mod native_router;
 mod network_image;
+mod overflowed_content;
 mod popup;
 mod progress_bar;
 mod radio;
+mod resizable_container;
 mod scroll_views;
 mod sidebar;
 mod slider;
@@ -42,6 +45,7 @@ mod window_drag_area;
 
 pub use accordion::*;
 pub use activable_route::*;
+pub use animated_position::*;
 pub use animated_router::*;
 pub use body::*;
 pub use button::*;
@@ -61,9 +65,11 @@ pub use menu::*;
 pub use native_container::*;
 pub use native_router::*;
 pub use network_image::*;
+pub use overflowed_content::*;
 pub use popup::*;
 pub use progress_bar::*;
 pub use radio::*;
+pub use resizable_container::*;
 pub use scroll_views::*;
 pub use sidebar::*;
 pub use slider::*;

crates/components/src/native_container.rs

@@ -2,7 +2,13 @@ use dioxus::prelude::*;
 use freya_core::prelude::EventMessage;
 use freya_elements::{
     elements as dioxus_elements,
-    events::KeyboardEvent,
+    events::{
+        keyboard::{
+            Key,
+            Modifiers,
+        },
+        KeyboardEvent,
+    },
 };
 use freya_hooks::{
     use_init_native_platform,