resolve conflicts

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.0.0"
 edition = "2021"
 
 [workspace]
-members = ["crates/layout", "crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/dom", "crates/torin", "crates/engine"]
+members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/dom", "crates/torin", "crates/engine"]
 
 [features]
 log = ["freya/log"]
@@ -15,7 +15,6 @@ use_camera = ["freya/use_camera"]
 freya = { path = "crates/freya", version = "0.1" }
 freya-devtools = { path = "crates/devtools", version = "0.1" }
 freya-node-state = { path = "crates/state", version = "0.1" }
-freya-layout = { path = "crates/layout", version = "0.1" }
 freya-renderer = { path = "crates/renderer", version = "0.1" }
 freya-elements = { path = "crates/elements", version = "0.1" }
 freya-common = { path = "crates/common", version = "0.1" }

book/src/guides/layout.md

@@ -6,13 +6,16 @@ Learn how the layout attributes work.
 - [`min_width & min_height`](#min_width--min_height)
 - [`max_width & max_height`](#max_width--max_height)
 - [`Size units`](#size_units)
+  - [`auto`](#auto)
   - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
   - [`calc()`](#calc)
+  - [`fill`](#fill)
 - [`direction`](#direction)
 - [`padding`](#padding)
-- [`margin`](#margin)
 - [`main_align & cross_align`](#main_align--cross_align)
+- [`margin`](#margin)
+- [`position`](#position)
 
 > ⚠️ Freya's layout is still somewhat limited.
 
@@ -81,6 +84,23 @@ 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`:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "auto",
+            height: "33",
+            label {
+                "hello!"
+            }
+        }
+    )
+}
+```
+
 #### Logical pixels
 
 ```rust, no_run
@@ -108,6 +128,28 @@ fn app(cx: Scope) -> Element {
 }
 ```
 
+#### fill
+Use the remaining available space from the parent area:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "100%",
+            height: "100%",
+            rect {
+                height: "200",
+                width: "100%",
+            }
+            rect {
+                height: "fill", // This is the same as calc(100% - 200)
+                width: "100%",
+            }
+        }
+    )
+}
+```
+
 #### `calc()`
 
 For more complex logic you can use the `calc()` function.
@@ -214,4 +256,41 @@ fn app(cx: Scope) -> Element {
         }
     )
 }
+```
+
+### position
+
+Specify how you want the element to be positioned inside it's parent Area
+
+Possible values for `position`:
+- `stacked` (default)
+- `absolute`
+
+When using the `absolute` mode, you can also combine it with the following attributes:
+- `position_top`
+- `position_right`
+- `position_bottom`
+- `position_left`
+
+These only support pixels.
+
+Example:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "100%",
+            height: "100%",
+            rect {
+                position: "absolute",
+                position_bottom: "15",
+                position_right: "15",
+                background: "black",
+                width: "100",
+                height: "100",
+            }
+        }
+    )
+}
 ```

crates/common/src/event_messages.rs

@@ -15,6 +15,8 @@ pub enum EventMessage {
     RequestRelayout,
     /// Request a rerender
     RequestRerender,
+    /// Request a redraw
+    RequestRedraw,
     /// Remeasure a text elements group
     RemeasureTextGroup(Uuid),
     /// Change the cursor icon

crates/components/src/button.rs

@@ -1,7 +1,8 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_focus, use_get_theme};
+use freya_hooks::{use_focus, use_get_theme, use_platform};
+use winit::window::CursorIcon;
 
 /// [`Button`] component properties.
 #[derive(Props)]
@@ -67,6 +68,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     let focus = use_focus(cx);
     let theme = use_get_theme(cx);
     let status = use_state(cx, ButtonStatus::default);
+    let platform = use_platform(cx);
 
     let focus_id = focus.attribute(cx);
 
@@ -77,11 +79,25 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         }
     };
 
-    let onmouseenter = move |_| {
-        status.set(ButtonStatus::Hovering);
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.get() == ButtonStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseenter = {
+        to_owned![status, platform];
+        move |_| {
+            platform.set_cursor(CursorIcon::Hand);
+            status.set(ButtonStatus::Hovering);
+        }
     };
 
     let onmouseleave = move |_| {
+        platform.set_cursor(CursorIcon::default());
         status.set(ButtonStatus::default());
     };
 

crates/components/src/scroll_views/scroll_bar.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{use_get_theme, ScrollbarTheme};
+use freya_hooks::use_get_theme;
 
 #[derive(Props)]
 pub struct ScrollBarProps<'a> {
@@ -17,12 +17,29 @@ pub struct ScrollBarProps<'a> {
 
     #[props(default = "0".to_string(), into)]
     offset_y: String,
+
+    clicking_scrollbar: bool,
+}
+
+enum ScrollBarStatus {
+    Idle,
+    Hovering,
 }
 
 #[allow(non_snake_case)]
 pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
+    let status = use_state(cx, || ScrollBarStatus::Idle);
     let theme = use_get_theme(cx);
-    let ScrollbarTheme { background, .. } = &theme.scrollbar;
+
+    let onmouseenter = |_| status.set(ScrollBarStatus::Hovering);
+
+    let onmouseleave = |_| status.set(ScrollBarStatus::Idle);
+
+    let background = match status.get() {
+        _ if cx.props.clicking_scrollbar => theme.scrollbar.background,
+        ScrollBarStatus::Hovering => theme.scrollbar.background,
+        ScrollBarStatus::Idle => "transparent",
+    };
 
     render!(
         rect {
@@ -33,6 +50,8 @@ pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
             offset_x: "{cx.props.offset_x}",
             offset_y: "{cx.props.offset_y}",
             background: "{background}",
+            onmouseenter: onmouseenter,
+            onmouseleave: onmouseleave,
             &cx.props.children
         }
     )

crates/components/src/scroll_views/scroll_view.rs

@@ -296,6 +296,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
                     width: "100%",
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
+                    clicking_scrollbar: is_scrolling_x,
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
@@ -308,6 +309,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
                 width: "{vertical_scrollbar_size}",
                 height: "100%",
                 offset_y: "{scrollbar_y}",
+                clicking_scrollbar: is_scrolling_y,
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,

crates/components/src/scroll_views/virtual_scroll_view.rs

@@ -49,6 +49,9 @@ pub struct VirtualScrollViewProps<'a, T: 'a> {
     /// Enable scrolling with arrow keys.
     #[props(default = true, into)]
     pub scroll_with_arrows: bool,
+    /// Tracker for the vertical scroll.
+    #[props(optional)]
+    pub scrolled_y: Option<UseRef<i32>>,
 }
 
 fn get_render_range(
@@ -347,6 +350,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) ->
                     width: "100%",
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
+                    clicking_scrollbar: is_scrolling_x,
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
@@ -359,6 +363,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) ->
                 width: "{vertical_scrollbar_size}",
                 height: "100%",
                 offset_y: "{scrollbar_y}",
+                clicking_scrollbar: is_scrolling_y,
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,

crates/components/src/slider.rs

@@ -1,8 +1,9 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{MouseEvent, WheelEvent};
-use freya_hooks::{use_get_theme, use_node_ref};
+use freya_hooks::{use_get_theme, use_node_ref, use_platform};
 use tracing::info;
+use winit::window::CursorIcon;
 
 /// [`Slider`] component properties.
 #[derive(Props)]
@@ -28,6 +29,16 @@ fn ensure_correct_slider_range(value: f64) -> f64 {
     }
 }
 
+/// Describes the current status of the Slider.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum SliderStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the slider.
+    Hovering,
+}
+
 /// Controlled `Slider` component.
 ///
 /// You must pass a percentage from 0.0 to 100.0 and listen for value changes with `onmoved` and then decide if this changes are applicable,
@@ -63,22 +74,39 @@ fn ensure_correct_slider_range(value: f64) -> f64 {
 pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
     let theme = use_get_theme(cx);
     let theme = &theme.slider;
-    let hovering = use_state(cx, || false);
+    let status = use_ref(cx, SliderStatus::default);
     let clicking = use_state(cx, || false);
+    let platform = use_platform(cx);
+
     let value = ensure_correct_slider_range(cx.props.value);
     let (node_reference, size) = use_node_ref(cx);
     let width = cx.props.width + 14.0;
 
     let progress = (value / 100.0) * cx.props.width + 0.5;
 
-    let onmouseleave = |_: MouseEvent| {
-        if !(*clicking.get()) {
-            hovering.set(false);
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.read() == SliderStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseleave = {
+        to_owned![platform, status];
+        move |_: MouseEvent| {
+            *status.write_silent() = SliderStatus::Idle;
+            platform.set_cursor(CursorIcon::default());
         }
     };
 
+    let onmouseenter = move |_: MouseEvent| {
+        *status.write_silent() = SliderStatus::Hovering;
+        platform.set_cursor(CursorIcon::Hand);
+    };
+
     let onmouseover = move |e: MouseEvent| {
-        hovering.set(true);
         if *clicking.get() {
             let coordinates = e.get_element_coordinates();
             let mut x = coordinates.x - 7.5 - size.read().area.min_x() as f64;
@@ -119,6 +147,7 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
             height: "20",
             onmousedown: onmousedown,
             onglobalclick: onclick,
+            onmouseenter: onmouseenter,
             onglobalmouseover: onmouseover,
             onmouseleave: onmouseleave,
             onwheel: onwheel,