Merge branch 'main' into feat/per-side-border-width

.github/workflows/deploy_book.yml

@@ -19,6 +19,8 @@ jobs:
 
       - name: Setup mdBook
         uses: peaceiris/actions-mdbook@v2
+        with:
+          mdbook-version: '0.4.32'
 
       - run: mdbook build
         working-directory: book

Cargo.toml

@@ -14,6 +14,7 @@ hot-reload = ["freya/hot-reload"]
 custom-tokio-rt = ["freya/custom-tokio-rt"]
 performance-overlay = ["freya/performance-overlay"]
 fade-cached-incremental-areas = ["freya/fade-cached-incremental-areas"]
+disable-zoom-shortcuts = ["freya/disable-zoom-shortcuts"]
 
 [patch.crates-io]
 # dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
@@ -94,6 +95,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 }
 
 [profile.release]
 lto = true

README.md

@@ -10,6 +10,8 @@
 
 **Freya** is a cross-paltform GUI library for Rust powered by 🧬 [Dioxus](https://dioxuslabs.com) and 🎨 [Skia](https://skia.org/). 
 
+**It does not use any web tech**, check the [Differences with Dioxus](https://book.freyaui.dev/differences_with_dioxus.html). 
+
 ⚠️ It's currently work in progress, but you can already play with it! You can join the [Discord](https://discord.gg/sYejxCdewG) server if you have any question or issue. 
 
 <br/>

book/src/differences_with_dioxus.md

@@ -1,15 +1,32 @@
 # Differences with Dioxus
 
-**Freya** is built on top of the core crates from Dioxus, this means that you will effectively be creating Dioxus components, using RSX and hooks. But, you will **not** be using HTML, CSS, JS or any Web tech at all.
+**Freya** is built on top of the **core** crates from Dioxus, this means that you will effectively be creating Dioxus components, using RSX and hooks. 
 
-Here you can find a list of the main differences between Freya and the official Dioxus renderers for Desktop (WebView and Blitz):
+**But**, thanks to Dioxus being a renderer-agnostic library you will **NOT** be using JavaScript, HTML, OR CSS, or any other abstraction that ends up using one of those or anything close to web.
+
+ Freya does everything on its own when it comes to:
+- Elements
+- Styling
+- Layout
+- Events
+- Rendering
+- Testing
+- Built-in components and hooks,
+- Editing
+- Animating
+
+And more. Dioxus only is only used to run the app components (hooks, lifecycle, state, rsx), **everything else is managed by Freya**.
+
+**Freya is not mean to be drop-in alternative to Dioxus renderers but as GUI library on its own.**
+
+Here is the list of the main differences between Freya and the official Dioxus renderers for Desktop (WebView and Blitz):
 
 | Category                             | Freya            | Dioxus Renderers                |
 |--------------------------------------|------------------|---------------------------------|
 | **Elements, attributes and events**  | Custom           | HTML                            |
-| **Layout** | [`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin) | CSS or [`Taffy`](https://github.com/DioxusLabs/taffy) |
-| **Styling**                          | Custom           | CSS                             |
-| **Renderer**                         | Skia             | WebView or WGPU                 |
-| **Components library**               | Custom           | None, but can use HTML elements and CSS libraries |
-| **Devtools**                         | Custom           | Provided in Webview             |
-| **Headless testing runner**          | Custom           | None, but there is Playwright and similar   |
+| **Layout** | Custom ([`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin)) | CSS or [`Taffy`](https://github.com/DioxusLabs/taffy) |
+| **Styling**                          | Custom                    | CSS                             |
+| **Renderer**                         | Skia                      | WebView or WGPU                 |
+| **Components library**               | Custom ([`freya-comonents`](https://github.com/marc2332/freya/tree/main/crates/components))  | None, but can use HTML elements and CSS libraries |
+| **Devtools**                         | Custom ([`freya-devtools`](https://github.com/marc2332/freya/tree/main/crates/devtools))   | Provided in Webview             |
+| **Headless testing runner**          | Custom ([`freya-testing`](https://github.com/marc2332/freya/tree/main/crates/testing))    | None, but there is Playwright and similar   |

book/src/setup.md

@@ -31,6 +31,10 @@ sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
 sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
 ```
 
+#### NixOS
+
+Copy this [flake.nix](https://github.com/kuba375/freya-flake) into your project root. Then you can enter a dev shell by `nix develop`. 
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS

crates/components/src/button.rs

@@ -180,7 +180,6 @@ pub fn Button(
             height: "{height}",
             padding: "{padding}",
             margin: "{margin}",
-            a11y_focusable: "true",
             overflow: "clip",
             a11y_role:"button",
             color: "{font_theme.color}",
@@ -191,7 +190,6 @@ pub fn Button(
             text_align: "center",
             main_align: "center",
             cross_align: "center",
-            line_height: "1.1",
             {&children}
         }
     )
@@ -228,14 +226,22 @@ mod test {
 
         assert_eq!(label.get(0).text(), Some("true"));
 
+        utils.push_event(PlatformEvent::Touch {
+            name: EventName::TouchStart,
+            location: (15.0, 15.0).into(),
+            finger_id: 1,
+            phase: TouchPhase::Started,
+            force: None,
+        });
+        utils.wait_for_update().await;
+
         utils.push_event(PlatformEvent::Touch {
             name: EventName::TouchEnd,
             location: (15.0, 15.0).into(),
             finger_id: 1,
             phase: TouchPhase::Ended,
             force: None,
         });
-
         utils.wait_for_update().await;
 
         assert_eq!(label.get(0).text(), Some("false"));

crates/components/src/checkbox.rs

@@ -1,7 +1,11 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements::{
+    elements as dioxus_elements,
+    events::KeyboardEvent,
+};
 use freya_hooks::{
     use_applied_theme,
+    use_focus,
     CheckboxTheme,
     CheckboxThemeWith,
 };
@@ -68,30 +72,46 @@ pub fn Checkbox(
     /// Theme override.
     theme: Option<CheckboxThemeWith>,
 ) -> Element {
+    let focus = use_focus();
     let CheckboxTheme {
+        border_fill,
         unselected_fill,
         selected_fill,
         selected_icon_fill,
     } = use_applied_theme!(&theme, checkbox);
-    let (fill, border) = if selected {
+    let (inner_fill, outer_fill) = if selected {
         (selected_fill.as_ref(), selected_fill.as_ref())
     } else {
         ("transparent", unselected_fill.as_ref())
     };
+    let border = if focus.is_selected() {
+        format!("4 solid {}", border_fill)
+    } else {
+        "none".to_string()
+    };
+
+    let onkeydown = move |_: KeyboardEvent| {};
 
     rsx!(
         rect {
-            width: "18",
-            height: "18",
-            padding: "4",
-            main_align: "center",
-            cross_align: "center",
+            border,
+            border_align: "outer",
             corner_radius: "4",
-            border: "2 solid {border}",
-            background: "{fill}",
-            if selected {
-                TickIcon {
-                    fill: selected_icon_fill
+            rect {
+                a11y_id: focus.attribute(),
+                width: "18",
+                height: "18",
+                padding: "4",
+                main_align: "center",
+                cross_align: "center",
+                corner_radius: "4",
+                border: "2 solid {outer_fill}",
+                background: "{inner_fill}",
+                onkeydown,
+                if selected {
+                    TickIcon {
+                        fill: selected_icon_fill
+                    }
                 }
             }
         }
@@ -172,29 +192,29 @@ mod test {
         utils.wait_for_update().await;
 
         // If the inner square exists it means that the Checkbox is selected, otherwise it isn't
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((20., 50.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((10., 90.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
 
         utils.click_cursor((10., 10.)).await;
         utils.click_cursor((10., 50.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
     }
 }

crates/components/src/dropdown.rs

@@ -299,7 +299,7 @@ where
                         rect {
                             onglobalclick,
                             onglobalkeydown,
-                            layer: "-99",
+                            layer: "-1000",
                             margin: "{margin}",
                             border: "1 solid {border_fill}",
                             overflow: "clip",
@@ -379,7 +379,7 @@ mod test {
         utils.click_cursor((15., 15.)).await;
 
         // Click on the second option
-        utils.click_cursor((45., 100.)).await;
+        utils.click_cursor((45., 90.)).await;
         utils.wait_for_update().await;
         utils.wait_for_update().await;
 

crates/components/src/image.rs

@@ -0,0 +1,57 @@
+/// Generate a Dioxus component rendering the specified image.
+///
+/// Example:
+///
+/// ```no_run
+/// # use freya::prelude::*;
+///
+/// import_svg!(Ferris, "../../../examples/rust_logo.png", "100%", "100%");
+/// import_svg!(FerrisWithRequiredSize, "../../../examples/rust_logo.png");
+///
+/// fn app() -> Element {
+///     rsx!(Ferris {})
+/// }
+///
+/// fn another_app() -> Element {
+///     rsx!(FerrisWithRequiredSize {
+///         width: "150",
+///         height: "40%",
+///     })
+/// }
+/// ```
+#[macro_export]
+macro_rules! import_image {
+    ($component_name:ident, $path:expr, $width: expr, $height: expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(
+            #[props(default = $width.to_string())] width: String,
+            #[props(default = $height.to_string())] height: String,
+        ) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+    ($component_name:ident, $path:expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(width: String, height: String) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+}

crates/components/src/input.rs

@@ -176,7 +176,7 @@ pub fn Input(
     let (background, cursor_char) = if focus.is_focused() {
         (
             theme.hover_background,
-            editable.editor().read().visible_cursor_pos().to_string(),
+            editable.editor().read().cursor_pos().to_string(),
         )
     } else {
         (theme.background, "none".to_string())
@@ -217,11 +217,11 @@ pub fn Input(
             main_align: "center",
             cursor_reference,
             a11y_id,
-            a11y_focusable: "true",
             a11y_role: "textInput",
             a11y_auto_focus: "{auto_focus}",
             onkeydown,
             onkeyup,
+            overflow: "clip",
             paragraph {
                 margin: "8 12",
                 onglobalclick,

crates/components/src/lib.rs

@@ -15,6 +15,7 @@ mod gesture_area;
 mod graph;
 mod hooks;
 mod icons;
+mod image;
 mod input;
 mod link;
 mod loader;