Merge branch 'main' into feat/support-percentage-of-auto-layout

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @marc2332

.vscode/settings.json

@@ -4,4 +4,4 @@
         "log",
         "use_camera"
     ]
-}
+}

README.md

@@ -68,11 +68,13 @@ fn app() -> Element {
 
 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" /></a><!-- sponsors -->
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="Alberto" /></a><a href="https://github.com/albinekb"><img src="https://github.com/albinekb.png" width="60px" alt="Albin Ekblom" /></a><!-- sponsors -->
 
 ### Want to try it? 🤔
 
-⚠️ First, see [Setup guide](https://book.freyaui.dev/setup.html).
+👋 Make sure to check the [Setup guide](https://book.freyaui.dev/setup.html) first.
+
+> ⚠️ If you happen to be on Windows using `windows-gnu` and get compile errors, maybe go check this [issue](https://github.com/marc2332/freya/issues/794).
 
 Clone this repo and run:
 

book/src/setup.md

@@ -22,6 +22,15 @@ Install these packages:
 sudo pacman -S base-devel openssl cmake gtk3 clang
 ```
 
+#### Fedora
+
+Install these packages:
+
+```sh
+sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
+sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
+```
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS
@@ -34,4 +43,4 @@ The following custom linkers are not supported at the moment:
 
 - `mold`
 
-If there is another one not supported don't hesitate to add it here.
+If there is another one not supported don't hesitate to add it here.

crates/components/src/lib.rs

@@ -29,6 +29,7 @@ mod scroll_views;
 mod sidebar;
 mod slider;
 mod snackbar;
+mod svg;
 mod switch;
 mod table;
 mod tabs;

crates/components/src/scroll_views/mod.rs

@@ -1,6 +1,7 @@
 mod scroll_bar;
 mod scroll_thumb;
 mod scroll_view;
+mod use_scroll_controller;
 mod virtual_scroll_view;
 
 use freya_elements::events::{
@@ -10,6 +11,7 @@ use freya_elements::events::{
 pub use scroll_bar::*;
 pub use scroll_thumb::*;
 pub use scroll_view::*;
+pub use use_scroll_controller::*;
 pub use virtual_scroll_view::*;
 
 // Holding alt while scrolling makes it 5x faster (VSCode behavior).

crates/components/src/scroll_views/scroll_view.rs

@@ -16,6 +16,7 @@ use freya_hooks::{
     ScrollViewThemeWith,
 };
 
+use super::use_scroll_controller::ScrollController;
 use crate::{
     get_container_size,
     get_corrected_scroll_position,
@@ -24,6 +25,10 @@ use crate::{
     get_scrollbar_pos_and_size,
     is_scrollbar_visible,
     manage_key_event,
+    scroll_views::use_scroll_controller::{
+        use_scroll_controller,
+        ScrollConfig,
+    },
     Axis,
     ScrollBar,
     ScrollThumb,
@@ -48,6 +53,8 @@ pub struct ScrollViewProps {
     /// Enable scrolling with arrow keys.
     #[props(default = true, into)]
     pub scroll_with_arrows: bool,
+
+    pub scroll_controller: Option<ScrollController>,
 }
 
 /// Scrollable area with bidirectional support and scrollbars.
@@ -59,28 +66,66 @@ pub struct ScrollViewProps {
 /// fn app() -> Element {
 ///     rsx!(
 ///         ScrollView {
-///              theme: theme_with!(ScrollViewTheme {
-///                 width: "100%".into(),
-///                 height: "300".into(),
-///              }),
-///              show_scrollbar: true,
-///              rect {
+///             rect {
 ///                 background: "blue",
-///                 height: "500",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///             rect {
+///                 background: "red",
+///                 height: "400",
 ///                 width: "100%"
 ///              }
 ///         }
 ///     )
 /// }
 /// ```
+///
+/// # With a Scroll Controller
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     let mut scroll_controller = use_scroll_controller(|| ScrollConfig::default());
+///
+///     rsx!(
+///         ScrollView {
+///             scroll_controller,
+///             rect {
+///                 background: "blue",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///             Button {
+///                 label {
+///                     onclick: move |_| {
+///                          scroll_controller.scroll_to(ScrollPosition::Start, ScrollDirection::Vertical);
+///                     },
+///                     label {
+///                         "Scroll up"
+///                     }
+///                 }
+///             }
+///             rect {
+///                 background: "red",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///         }
+///     )
+/// }
+/// ```
 #[allow(non_snake_case)]
 pub fn ScrollView(props: ScrollViewProps) -> Element {
     let mut clicking_scrollbar = use_signal::<Option<(Axis, f64)>>(|| None);
     let mut clicking_shift = use_signal(|| false);
     let mut clicking_alt = use_signal(|| false);
-    let mut scrolled_y = use_signal(|| 0);
-    let mut scrolled_x = use_signal(|| 0);
+    let mut scroll_controller = props
+        .scroll_controller
+        .unwrap_or_else(|| use_scroll_controller(ScrollConfig::default));
+    let (mut scrolled_x, mut scrolled_y) = scroll_controller.into();
     let (node_ref, size) = use_node();
+
     let mut focus = use_focus();
     let theme = use_applied_theme!(&props.theme, scroll_view);
     let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
@@ -92,6 +137,8 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let show_scrollbar = props.show_scrollbar;
     let scroll_with_arrows = props.scroll_with_arrows;
 
+    scroll_controller.use_apply(size.inner.width, size.inner.height);
+
     let direction_is_vertical = user_direction == "vertical";
 
     let vertical_scrollbar_is_visible =