resolve conflicts and clean up

.github/workflows/sponsors.yml

@@ -0,0 +1,23 @@
+name: Publish Sponsors
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: 30 15 * * 0-6
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Generate Sponsors 💖
+        uses: JamesIves/github-sponsors-readme-action@v1
+        with:
+          token: ${{ secrets.PAT }}
+          file: 'README.md'
+
+      - name: Deploy to GitHub Pages 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: main
+          folder: '.'

.gitignore

@@ -1,2 +1,3 @@
 target
-Cargo.lock
+Cargo.lock
+.idea

README.md

@@ -55,6 +55,12 @@ fn app(cx: Scope) -> Element {
 </td>
 </table>
 
+### Sponsors 🤗
+
+Thanks to my sponsors for supporting this project! 😄
+
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="Alberto Mendez" /></a><a href="https://github.com/dcrasch"><img src="https://github.com/dcrasch.png" width="60px" alt="David Rasch" /></a><!-- sponsors -->
+
 ### Want to try it? 🤔
 
 ⚠️ First, see [Environment setup](https://book.freyaui.dev/setup.html).

book/src/guides/components.md

@@ -1,22 +1,3 @@
 # Components
 
-Freya comes with a set of ready to use components:
-
-- [`Button`](https://docs.rs/freya/latest/freya/components/fn.Button.html)
-- [`Switch`](https://docs.rs/freya/latest/freya/components/fn.Switch.html)
-- [`ScrollView`](https://docs.rs/freya/latest/freya/components/fn.ScrollView.html)
-- [`VirtualScrollView`](https://docs.rs/freya/latest/freya/components/fn.VirtualScrollView.html)
-- [`Accordion`](https://docs.rs/freya/latest/freya/components/fn.Accordion.html)
-- [`Canvas`](https://docs.rs/freya/latest/freya/components/fn.Canvas.html)
-- [`CursorArea`](https://docs.rs/freya/latest/freya/components/fn.CursorArea.html)
-- [`Drag and Drop`](https://docs.rs/freya/latest/freya/components/fn.DragZone.html)
-- [`Dropdown`](https://docs.rs/freya/latest/freya/components/fn.Dropdown.html)
-- [`ExternalLink`](https://docs.rs/freya/latest/freya/components/fn.ExternalLink.html)
-- [`GestureArea`](https://docs.rs/freya/latest/freya/components/fn.GestureArea.html)
-- [`Graph`](https://docs.rs/freya/latest/freya/components/fn.Graph.html)
-- [`Input`](https://docs.rs/freya/latest/freya/components/fn.Input.html)
-- [`Loader`](https://docs.rs/freya/latest/freya/components/fn.Loader.html)
-- [`NetworkImage`](https://docs.rs/freya/latest/freya/components/fn.NetworkImage.html)
-- [`Slider`](https://docs.rs/freya/latest/freya/components/fn.Slider.html)
-- [`ThemeProvider`](https://docs.rs/freya/latest/freya/components/fn.ThemeProvider.html)
-- [`Tooltip`](https://docs.rs/freya/latest/freya/components/fn.Tooltip.html)
+Freya comes with a set of ready to use components. View the [API docs](https://docs.rs/freya/latest/freya/components/index.html#functions) for a full list.

book/src/guides/hot_reload.md

@@ -1,18 +1,20 @@
 # Hot reload
 
-Freya supports Dioxus hot reload, this means you can update the `layout` and `styling` of your app on the fly, without having to compile any rust code.
+Freya supports Dioxus hot reload, which means that you can update the `layout` and `styling` of your app on the fly, without having to recompile your project.
 
 ## Setup
 
-Just before launching your app, you need to initialize the hot-reload context:
+Before launching your app, you need to initialize the hot-reload context:
 
 ```rust, no_run
-fn main() {
+use freya::prelude::*;
+use freya::hot_reload::FreyaCtx;
 
+fn main() {
     dioxus_hot_reload::hot_reload_init!(Config::<FreyaCtx>::default());
 
     launch(app);
 }
 ```
 
-That's it!
+That's it!

book/src/guides/layout.md

@@ -85,7 +85,7 @@ fn app(cx: Scope) -> Element {
 ### Size Units
 
 #### Auto
-Will use it's inner children as size, so in this case, the `rect` width will be defined bu the width of `label`:
+Will use it's inner children as size, so in this case, the `rect` width will be equivalent to the width of `label`:
 
 ```rust, no_run
 fn app(cx: Scope) -> Element {
@@ -293,4 +293,4 @@ fn app(cx: Scope) -> Element {
         }
     )
 }
-```
+```

book/src/guides/style.md

@@ -139,7 +139,8 @@ The attributes that have colors as values can use the following syntax:
 #### rgb() / hsl()
 
 - With RGB: `rgb(150, 60, 20)`
-- With RGB and alpha: `rgb(150, 60, 20, 70)`
+- With RGB and alpha: `rgb(150, 60, 20, 0.7)` 
+    - Yyou can also use 0-255 for the alpha: `rgb(150, 60, 20, 70)` 
 - With HSL: `hsl(28deg, 80%, 50%)`
 - With HSL and alpha: `hsl(28deg, 80%, 50%, 25%)`
 

book/src/index.md

@@ -1,3 +1,5 @@
+> 👋 Note: This Book is being constantly updated, so, there might some features that have been added, removed or changed.
+
 # Welcome
 
 **Freya** is __work in progress__ cross-platform native GUI library for 🦀 Rust, built on top of 🧬 [Dioxus](https://dioxuslabs.com) and 🎨 [Skia](https://skia.org/) as graphics library. 

crates/components/src/accordion.rs

@@ -80,7 +80,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     use_on_unmount(cx, {
         to_owned![status, platform];
         move || {
-            if *status.get() == AccordionStatus::Hovering {
+            if *status.current() == AccordionStatus::Hovering {
                 platform.set_cursor(CursorIcon::default());
             }
         }

crates/components/src/button.rs

@@ -130,7 +130,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
             overflow: "clip",
             role: "button",
             color: "{color}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
             border: "1 solid {border_fill}",
             corner_radius: "{corner_radius}",
             background: "{background}",

crates/components/src/dropdown.rs

@@ -63,7 +63,7 @@ where
     use_on_unmount(cx, {
         to_owned![status, platform];
         move || {
-            if *status.get() == DropdownItemStatus::Hovering {
+            if *status.current() == DropdownItemStatus::Hovering {
                 platform.set_cursor(CursorIcon::default());
             }
         }
@@ -188,7 +188,7 @@ where
     use_on_unmount(cx, {
         to_owned![status, platform];
         move || {
-            if *status.get() == DropdownStatus::Hovering {
+            if *status.current() == DropdownStatus::Hovering {
                 platform.set_cursor(CursorIcon::default());
             }
         }
@@ -255,7 +255,7 @@ where
             corner_radius: "8",
             padding: "8 16",
             border: "1 solid {border_fill}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
             direction: "horizontal",
             main_align: "center",
             cross_align: "center",
@@ -282,7 +282,7 @@ where
                         overflow: "clip",
                         corner_radius: "8",
                         background: "{desplegable_background}",
-                        shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+                        shadow: "0 4 5 0 rgb(0, 0, 0, 0.3)",
                         padding: "6",
                         &cx.props.children
                     }

crates/components/src/input.rs

@@ -192,7 +192,7 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
             color: "{color}",
             background: "{background}",
             border: "1 solid {border_fill}",
-            shadow: "0 3 15 0 rgb(0, 0, 0, 70)",
+            shadow: "0 3 15 0 rgb(0, 0, 0, 0.3)",
             corner_radius: "10",
             margin: "{margin}",
             cursor_reference: cursor_attr,

crates/components/src/progress_bar.rs

@@ -64,7 +64,7 @@ pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
                 corner_radius: "999",
                 width: "100%",
                 height: "100%",
-                shadow: "0 2 10 1 rgb(0, 0, 0, 45)",
+                shadow: "0 2 10 1 rgb(0, 0, 0, 0.2)",
                 background: "{background}",
                 font_size: "13",
                 direction: "horizontal",

crates/components/src/tooltip.rs

@@ -31,7 +31,7 @@ pub fn Tooltip<'a>(cx: Scope<'a, TooltipProps<'a>>) -> Element {
     render!(
         rect {
             padding: "4 10",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
             border: "1 solid {border_fill}",
             corner_radius: "10",
             background: "{background}",

crates/core/src/layout/layers.rs

@@ -2,8 +2,10 @@ use std::vec::IntoIter;
 
 use dioxus_native_core::prelude::ElementNode;
 use dioxus_native_core::real_dom::NodeImmutable;
+use dioxus_native_core::tree::TreeRef;
 use dioxus_native_core::{node::NodeType, NodeId};
 use freya_common::NodeReferenceLayout;
+use freya_dom::dom::DioxusNode;
 use freya_dom::prelude::{DioxusDOM, FreyaDOM};
 use itertools::sorted;
 
@@ -15,6 +17,20 @@ use uuid::Uuid;
 
 use crate::layout::*;
 
+fn traverse_dom(rdom: &DioxusDOM, mut f: impl FnMut(DioxusNode) -> bool) {
+    let mut stack = vec![rdom.root_id()];
+    let tree = rdom.tree_ref();
+    while let Some(id) = stack.pop() {
+        if let Some(node) = rdom.get(id) {
+            let traverse_children = f(node);
+            if traverse_children {
+                let children = tree.children_ids_advanced(id, true);
+                stack.extend(children.iter().copied().rev());
+            }
+        }
+    }
+}
+
 #[derive(Default, Clone)]
 pub struct Layers {
     pub layers: FxHashMap<i16, Vec<NodeId>>,
@@ -31,9 +47,10 @@ impl Layers {
         let mut layers = Layers::default();
         let mut inherit_layers = FxHashMap::default();
 
-        rdom.traverse_depth_first(|node| {
+        traverse_dom(rdom, |node| {
             let areas = layout.get(node.id());
 
+            // Some elements like placeholders are not measured
             if let Some(areas) = areas {
                 // Add the Node to a Layer
                 let node_style = node.get::<Style>().unwrap();
@@ -54,24 +71,31 @@ impl Layers {
 
                 // Register paragraph elements
 
-                if let NodeType::Element(ElementNode { tag, .. }) = &*node.node_type() {
-                    if tag == "paragraph" {
-                        let cursor_settings = node.get::<CursorSettings>().unwrap();
-                        let is_editable = CursorMode::Editable == cursor_settings.mode;
-
-                        let references = node.get::<References>().unwrap();
-                        if is_editable {
-                            if let Some(cursor_ref) = &references.cursor_ref {
-                                let text_group = layers
-                                    .paragraph_elements
-                                    .entry(cursor_ref.text_id)
-                                    .or_default();
-
-                                text_group.push(node.id());
+                let traverse_inner_children =
+                    if let NodeType::Element(ElementNode { tag, .. }) = &*node.node_type() {
+                        let is_paragraph = tag == "paragraph";
+                        if is_paragraph {
+                            let cursor_settings = node.get::<CursorSettings>().unwrap();
+                            let is_editable = CursorMode::Editable == cursor_settings.mode;
+
+                            let references = node.get::<References>().unwrap();
+                            if is_editable {
+                                if let Some(cursor_ref) = &references.cursor_ref {
+                                    let text_group = layers
+                                        .paragraph_elements
+                                        .entry(cursor_ref.text_id)
+                                        .or_default();
+
+                                    text_group.push(node.id());
+                                }
                             }
                         }
-                    }
-                }
+
+                        // Traverse all elements except paragraphs
+                        !is_paragraph
+                    } else {
+                        false
+                    };
 
                 // Notify layout references
 
@@ -85,6 +109,10 @@ impl Layers {
                     node_layout.div(scale_factor);
                     reference.send(node_layout).ok();
                 }
+
+                traverse_inner_children
+            } else {
+                false
             }
         });
 

crates/core/src/plugins.rs

@@ -20,14 +20,26 @@ impl PluginsManager {
     }
 }
 
+/// Event emitted to Plugins.
 pub enum PluginEvent<'a> {
+    /// The Window just got created.
     WindowCreated(&'a Window),
-    StartedRender(&'a Canvas, &'a FontCollection),
-    FinishedRender(&'a Canvas, &'a FontCollection),
+
+    /// Just before starting to render the app to the Canvas.
+    BeforeRender(&'a Canvas, &'a FontCollection),
+
+    /// Just after rendering the app to the Canvas.
+    AfterRender(&'a Canvas, &'a FontCollection),
+
+    /// Just before starting to measure the layout.
     StartedLayout(&'a Torin<NodeId>),
+
+    /// Just fater measuring the layout.
     FinishedLayout(&'a Torin<NodeId>),
 }
 
+/// Skeleton for Freya plugins.
 pub trait FreyaPlugin {
+    /// React on events emitted by Freya.
     fn on_event(&mut self, event: &PluginEvent);
 }

crates/devtools/src/tab.rs

@@ -69,7 +69,7 @@ pub fn TabButton<'a>(cx: Scope<'a, TabButtonProps<'a>>) -> Element<'a> {
             height: "100%",
             color: "{color}",
             padding: "6 14",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.3)",
             border: "1 solid {border_fill}",
             main_align: "center",
             label {

crates/engine/src/mocked.rs

@@ -1344,7 +1344,7 @@ impl From<(i32, i32)> for Size {
 pub struct Surface;
 
 impl Surface {
-    pub fn canvas(&mut self) -> Canvas {
+    pub fn canvas(&mut self) -> &Canvas {
         unimplemented!("This is mocked")
     }
 

crates/freya/src/plugins/performance_overlay.rs

@@ -18,10 +18,10 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
             PluginEvent::FinishedLayout(_) => {
                 self.finished_layout = Some(self.started_layout.unwrap().elapsed())
             }
-            PluginEvent::StartedRender(_canvas, _font_collection) => {
+            PluginEvent::BeforeRender(_canvas, _font_collection) => {
                 self.started_render = Some(Instant::now())
             }
-            PluginEvent::FinishedRender(canvas, font_collection) => {
+            PluginEvent::AfterRender(canvas, font_collection) => {
                 let started_render = self.started_render.take().unwrap();
                 let finished_layout = self.finished_layout.unwrap();