Merge branch 'main' into feat/image-aspect-ratio

Cargo.toml

@@ -11,7 +11,6 @@ members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements",
 tracing-subscriber = ["freya/tracing-subscriber"]
 devtools = ["freya/devtools"]
 use_camera = ["freya/use_camera"]
-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"]
@@ -25,7 +24,6 @@ docs = ["freya/docs"]
 # dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
 # dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
 # dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
 # dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
 
 [workspace.dependencies]
@@ -46,12 +44,11 @@ freya-native-core-macro = { path = "crates/native-core-macro", version = "0.3.0-
 freya-native-core = { path = "crates/native-core", version = "0.3.0-rc.0" }
 
 dioxus = { version = "0.5", default-features = false, features = ["macro", "signals", "hooks"]}
-dioxus-rsx = { version = "0.5", features = ["hot_reload"] }
+dioxus-rsx = { version = "0.5" }
 dioxus-core-macro = { version = "0.5" }
 dioxus-hooks = { version = "0.5" }
 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-clipboard = "0.1"
 dioxus-i18n = "0.3"

book/src/setup.md

@@ -3,8 +3,8 @@
 Make sure you have [Rust](https://www.rust-lang.org/) and your OS dependencies installed.
 
 ### Windows
-
-You will need C++ build tools which you can get through Visual Studio 2022, learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
+Install Visual Studio 2022 with the `Desktop Development with C++` workflow. 
+You can learn learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
 
 ### Linux
 

crates/components/src/dropdown.rs

@@ -14,6 +14,7 @@ use freya_hooks::{
     use_applied_theme,
     use_focus,
     use_platform,
+    DropdownItemTheme,
     DropdownItemThemeWith,
     DropdownTheme,
     DropdownThemeWith,
@@ -70,13 +71,25 @@ where
     let is_focused = focus.is_focused();
     let is_selected = *selected.read() == value;
 
+    let DropdownItemTheme {
+        font_theme,
+        background,
+        hover_background,
+        select_background,
+        border_fill,
+        select_border_fill,
+    } = &theme;
+
     let background = match *status.read() {
-        _ if is_selected => theme.select_background,
-        _ if is_focused => theme.hover_background,
-        DropdownItemStatus::Hovering => theme.hover_background,
-        DropdownItemStatus::Idle => theme.background,
+        _ if is_selected => select_background,
+        DropdownItemStatus::Hovering => hover_background,
+        DropdownItemStatus::Idle => background,
+    };
+    let border = if focus.is_selected() {
+        format!("2 inner {select_border_fill}")
+    } else {
+        format!("1 inner {border_fill}")
     };
-    let color = theme.font_theme.color;
 
     use_drop(move || {
         if *status.peek() == DropdownItemStatus::Hovering {
@@ -114,10 +127,11 @@ where
     rsx!(
         rect {
             width: "fill-min",
-            color: "{color}",
+            color: "{font_theme.color}",
             a11y_id,
-            a11y_role:"button",
+            a11y_role: "button",
             background: "{background}",
+            border,
             padding: "6 22 6 16",
             corner_radius: "6",
             main_align: "center",
@@ -249,13 +263,19 @@ where
         background_button,
         hover_background,
         border_fill,
+        focus_border_fill,
         arrow_fill,
     } = &theme;
 
-    let button_background = match *status.read() {
+    let background = match *status.read() {
         DropdownStatus::Hovering => hover_background,
         DropdownStatus::Idle => background_button,
     };
+    let border = if focus.is_selected() {
+        format!("2 inner {focus_border_fill}")
+    } else {
+        format!("1 inner {border_fill}")
+    };
 
     let selected = selected.read().to_string();
 
@@ -270,11 +290,11 @@ where
                 onglobalkeydown,
                 margin: "{margin}",
                 a11y_id,
-                background: "{button_background}",
+                background: "{background}",
                 color: "{font_theme.color}",
                 corner_radius: "8",
                 padding: "8 16",
-                border: "1 inner {border_fill}",
+                border,
                 shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
                 direction: "horizontal",
                 main_align: "center",

crates/components/src/network_image.rs

@@ -2,13 +2,10 @@ use bytes::Bytes;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{
-    use_applied_theme,
     use_asset_cacher,
     use_focus,
     AssetAge,
     AssetConfiguration,
-    NetworkImageTheme,
-    NetworkImageThemeWith,
 };
 use freya_node_state::dynamic_bytes;
 use reqwest::Url;
@@ -18,18 +15,18 @@ use crate::Loader;
 /// Properties for the [`NetworkImage`] component.
 #[derive(Props, Clone, PartialEq)]
 pub struct NetworkImageProps {
-    /// Theme override.
-    pub theme: Option<NetworkImageThemeWith>,
-
+    /// Width of the image container. Default to `fill`.
+    #[props(default = "fill".into())]
+    pub width: String,
+    /// Height of the image container. Default to `fill`.
+    #[props(default = "fill".into())]
+    pub height: String,
     /// URL of the image.
     pub url: ReadOnlySignal<Url>,
-
     /// Fallback element.
     pub fallback: Option<Element>,
-
     /// Loading element.
     pub loading: Option<Element>,
-
     /// Information about the image.
     pub alt: Option<String>,
 
@@ -65,19 +62,26 @@ pub enum ImageState {
 ///     )
 /// }
 #[allow(non_snake_case)]
-pub fn NetworkImage(props: NetworkImageProps) -> Element {
+pub fn NetworkImage(
+    NetworkImageProps {
+        width,
+        height,
+        url,
+        fallback,
+        loading,
+        alt,
+    }: NetworkImageProps,
+) -> Element {
     let mut asset_cacher = use_asset_cacher();
     let focus = use_focus();
     let mut status = use_signal(|| ImageState::Loading);
     let mut cached_assets = use_signal::<Vec<AssetConfiguration>>(Vec::new);
     let mut assets_tasks = use_signal::<Vec<Task>>(Vec::new);
 
     let a11y_id = focus.attribute();
-    let NetworkImageTheme { width, height } = use_applied_theme!(&props.theme, network_image);
-    let alt = props.alt.as_deref();
 
     use_effect(move || {
-        let url = props.url.read().clone();
+        let url = url.read().clone();
         // Cancel previous asset fetching requests
         for asset_task in assets_tasks.write().drain(..) {
             asset_task.cancel();
@@ -135,7 +139,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
             })
         }
         ImageState::Loading => {
-            if let Some(loading_element) = props.loading {
+            if let Some(loading_element) = loading {
                 rsx!({ loading_element })
             } else {
                 rsx!(
@@ -150,7 +154,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
             }
         }
         _ => {
-            if let Some(fallback_element) = props.fallback {
+            if let Some(fallback_element) = fallback {
                 rsx!({ fallback_element })
             } else {
                 rsx!(

crates/components/src/overflowed_content.rs

@@ -128,6 +128,7 @@ mod test {
         utils.wait_for_update().await;
         utils.wait_for_update().await;
         utils.wait_for_update().await;
+        utils.wait_for_update().await;
         assert_ne!(label.layout().unwrap().area.min_x(), 50.);
     }
 }

crates/core/Cargo.toml

@@ -15,7 +15,7 @@ categories = ["gui", "asynchronous"]
 features = ["freya-engine/mocked-engine"]
 
 [features]
-shared = []
+rc-dom = []
 skia-engine = ["freya-engine/skia-engine"]
 fade-cached-incremental-areas = []
 

crates/core/src/dom/doms.rs

@@ -1,7 +1,15 @@
-use std::sync::{
-    Arc,
-    Mutex,
-    MutexGuard,
+use std::{
+    cell::{
+        Ref,
+        RefCell,
+        RefMut,
+    },
+    rc::Rc,
+    sync::{
+        Arc,
+        Mutex,
+        MutexGuard,
+    },
 };
 
 use dioxus_core::VirtualDom;
@@ -52,14 +60,14 @@ pub type DioxusNode<'a> = NodeRef<'a, CustomAttributeValues>;
 /// Tiny wrapper over [FreyaDOM] to make it thread-safe if desired.
 /// This is primarily used by the Devtools and Testing renderer.
 pub struct SafeDOM {
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fdom: FreyaDOM,
 
-    #[cfg(feature = "shared")]
-    pub fdom: Arc<Mutex<FreyaDOM>>,
+    #[cfg(feature = "rc-dom")]
+    pub fdom: Rc<RefCell<FreyaDOM>>,
 }
 
-#[cfg(feature = "shared")]
+#[cfg(feature = "rc-dom")]
 impl Clone for SafeDOM {
     fn clone(&self) -> Self {
         Self {
@@ -69,52 +77,46 @@ impl Clone for SafeDOM {
 }
 
 impl SafeDOM {
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn new(fdom: FreyaDOM) -> Self {
         Self { fdom }
     }
 
-    #[cfg(feature = "shared")]
+    #[cfg(feature = "rc-dom")]
     pub fn new(fdom: FreyaDOM) -> Self {
         Self {
-            fdom: Arc::new(Mutex::new(fdom)),
+            fdom: Rc::new(RefCell::new(fdom)),
         }
     }
 
     /// Get a reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn get(&self) -> &FreyaDOM {
         &self.fdom
     }
 
     /// Get a reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn try_get(&self) -> Option<&FreyaDOM> {
         Some(&self.fdom)
     }
 
     /// Get a mutable reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn get_mut(&mut self) -> &mut FreyaDOM {
         &mut self.fdom
     }
 
     /// Get a reference to the DOM.
-    #[cfg(feature = "shared")]
-    pub fn get(&self) -> MutexGuard<FreyaDOM> {
-        return self.fdom.lock().unwrap();
-    }
-
-    /// Get a reference to the DOM.
-    #[cfg(feature = "shared")]
-    pub fn try_get(&self) -> Option<MutexGuard<FreyaDOM>> {
-        return self.fdom.try_lock().ok();
+    #[cfg(feature = "rc-dom")]
+    pub fn get(&self) -> Ref<FreyaDOM> {
+        return self.fdom.borrow();
     }
 
     /// Get a mutable reference to the dom.
-    #[cfg(feature = "shared")]
-    pub fn get_mut(&self) -> MutexGuard<FreyaDOM> {
-        return self.fdom.lock().unwrap();
+    #[cfg(feature = "rc-dom")]
+    pub fn get_mut(&self) -> RefMut<FreyaDOM> {
+        return self.fdom.borrow_mut();
     }
 }
 

crates/core/src/events/nodes_state.rs

@@ -41,6 +41,7 @@ impl NodesState {
         let recent_mouse_press_event = any_event_of(events, |e| e.was_cursor_pressed_or_released());
 
         // Pressed Nodes
+        #[allow(unused_variables)]
         self.pressed_nodes.retain(|node_id, _| {
             // Always unmark as pressed when there has been a new mouse down or click event
             if recent_mouse_press_event.is_some() {

crates/core/src/node.rs

@@ -1,6 +1,7 @@
 use freya_engine::prelude::*;
 use freya_native_core::real_dom::NodeImmutable;
 use freya_node_state::{
+    AccessibilityNodeState,
     Border,
     CornerRadius,
     CursorState,
@@ -34,6 +35,7 @@ pub struct NodeState {
     pub size: LayoutState,
     pub style: StyleState,
     pub transform: TransformState,
+    pub accessibility: AccessibilityNodeState,
 }
 
 pub fn get_node_state(node: &DioxusNode) -> NodeState {
@@ -67,6 +69,11 @@ pub fn get_node_state(node: &DioxusNode) -> NodeState {
         .as_deref()
         .cloned()
         .unwrap_or_default();
+    let accessibility = node
+        .get::<AccessibilityNodeState>()
+        .as_deref()
+        .cloned()
+        .unwrap_or_default();
 
     NodeState {
         cursor,
@@ -75,6 +82,7 @@ pub fn get_node_state(node: &DioxusNode) -> NodeState {
         size,
         style,
         transform,
+        accessibility,
     }
 }
 

crates/core/src/render/skia_measurer.rs

@@ -9,7 +9,6 @@ use freya_native_core::{
     prelude::{
         ElementNode,
         NodeType,
-        SendAnyMap,
     },
     real_dom::NodeImmutable,
     tags::TagName,
@@ -20,6 +19,7 @@ use torin::prelude::{
     Area,
     LayoutMeasurer,
     Node,
+    SendAnyMap,
     Size2D,
 };