From 40a6b2c0ccdbbf42bc8b566eac5baf20fed39dd9 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 10:33:08 +0100 Subject: [PATCH 01/26] updated --- Cargo.toml | 20 ++++++++++---------- crates/components/src/accordion.rs | 2 +- crates/components/src/button.rs | 2 +- crates/components/src/cursor_area.rs | 2 +- crates/components/src/dropdown.rs | 4 ++-- crates/components/src/input.rs | 2 +- crates/components/src/loader.rs | 5 ++--- crates/components/src/slider.rs | 2 +- crates/components/src/switch.rs | 2 +- examples/accessibility.rs | 4 ++-- 10 files changed, 22 insertions(+), 23 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 60b9d5a99..a15e747c9 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -26,16 +26,16 @@ freya-testing = { path = "crates/testing", version = "0.1" } freya-engine = { path = "crates/engine", version = "0.1" } torin = { path = "crates/torin", version = "0.1" } -dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} -dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" } -dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["hot_reload"] } -dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["dioxus"] } -dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" } -dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" } -dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" } -dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" } -dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["file_watcher"], default-features = false } -dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", default-features = false } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs index cdc34b741..d6d76c981 100644 --- a/crates/components/src/accordion.rs +++ b/crates/components/src/accordion.rs @@ -81,7 +81,7 @@ pub fn Accordion(props: AccordionProps) -> Element { open.with_mut(|o| *o = !*o); }; - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.read() == AccordionStatus::Hovering { diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs index 5f6395426..6d3472637 100644 --- a/crates/components/src/button.rs +++ b/crates/components/src/button.rs @@ -84,7 +84,7 @@ pub fn Button(props: ButtonProps) -> Element { } }; - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.read() == ButtonStatus::Hovering { diff --git a/crates/components/src/cursor_area.rs b/crates/components/src/cursor_area.rs index dccb67d0f..b5d25fa6a 100644 --- a/crates/components/src/cursor_area.rs +++ b/crates/components/src/cursor_area.rs @@ -57,7 +57,7 @@ pub fn CursorArea(CursorAreaProps { children, icon }: CursorAreaProps) -> Elemen } }; - use_on_destroy(move || { + use_drop(move || { if *is_hovering.peek() { platform.set_cursor(CursorIcon::default()); } diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs index 1ecbebf16..0370d1061 100644 --- a/crates/components/src/dropdown.rs +++ b/crates/components/src/dropdown.rs @@ -73,7 +73,7 @@ where }; let color = theme.font_theme.color; - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.peek() == DropdownItemStatus::Hovering { @@ -204,7 +204,7 @@ where *selected.write() = value; }); - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.peek() == DropdownStatus::Hovering { diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs index e4958fb61..f930558b4 100644 --- a/crates/components/src/input.rs +++ b/crates/components/src/input.rs @@ -107,7 +107,7 @@ pub fn Input( InputMode::Shown => value.clone(), }; - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.peek() == InputStatus::Hovering { diff --git a/crates/components/src/loader.rs b/crates/components/src/loader.rs index 1967be55a..f521035bd 100644 --- a/crates/components/src/loader.rs +++ b/crates/components/src/loader.rs @@ -24,15 +24,14 @@ pub struct LoaderProps { #[allow(non_snake_case)] pub fn Loader(props: LoaderProps) -> Element { let theme = use_applied_theme!(&props.theme, loader); - let degrees = use_signal(|| 0); + let mut degrees = use_signal(|| 0); let LoaderTheme { primary_color, secondary_color, } = theme; - use_effect(move || { - to_owned![degrees]; + use_hook(move || { spawn(async move { let mut ticker = interval(Duration::from_millis(28)); loop { diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index a8d715d73..0103c17f6 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -91,7 +91,7 @@ pub fn Slider( let value = ensure_correct_slider_range(value); let (node_reference, size) = use_node(); - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.peek() == SliderStatus::Hovering { diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index de631badf..43be305c3 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -64,7 +64,7 @@ pub fn Switch(props: SwitchProps) -> Element { let focus_id = focus.attribute(); - use_on_destroy({ + use_drop({ to_owned![status, platform]; move || { if *status.read() == SwitchStatus::Hovering { diff --git a/examples/accessibility.rs b/examples/accessibility.rs index 5264bd0fc..868cbb534 100644 --- a/examples/accessibility.rs +++ b/examples/accessibility.rs @@ -64,12 +64,12 @@ fn app() -> Element { "Hello, World! This is an example." } NetworkImage { - url: url, + url, theme: theme_with!(NetworkImageTheme { width: "100".into(), height: "100".into(), }), - alt: "This is an image".to_string() + alt: "This is an image" } } ) From 094aafc845f5712cde5c5cb8ecb8b7c28ea5e5f9 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 10:42:24 +0100 Subject: [PATCH 02/26] fix and cleanup --- crates/elements/src/_docs/size_unit.rs | 12 +++---- crates/elements/src/definitions.rs | 14 ++++---- crates/hooks/src/use_focus.rs | 2 +- crates/hooks/tests/use_editable.rs | 44 ++++++++++++-------------- 4 files changed, 34 insertions(+), 38 deletions(-) diff --git a/crates/elements/src/_docs/size_unit.rs b/crates/elements/src/_docs/size_unit.rs index f3f300b7e..844fcaa87 100644 --- a/crates/elements/src/_docs/size_unit.rs +++ b/crates/elements/src/_docs/size_unit.rs @@ -5,7 +5,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "auto", @@ -22,7 +22,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "50", @@ -37,7 +37,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "50%", // Half the parent @@ -53,7 +53,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent @@ -68,7 +68,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "100%", @@ -91,7 +91,7 @@ //! //! ```rust, no_run //! # use freya::prelude::*; -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! rect { //! width: "200", diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs index bf8d9df6c..ae0d3c5d5 100644 --- a/crates/elements/src/definitions.rs +++ b/crates/elements/src/definitions.rs @@ -164,7 +164,7 @@ builder_constructors! { /// /// ```rust,no_run /// # use freya::prelude::*; - /// fn app(cx: Scope) -> Element { + /// fn app() -> Element { /// rsx!( /// rect { /// direction: "vertical", @@ -248,7 +248,7 @@ builder_constructors! { /// /// ```rust,no_run /// # use freya::prelude::*; - /// fn app(cx: Scope) -> Element { + /// fn app() -> Element { /// rsx!( /// label { /// "Hello World" @@ -312,7 +312,7 @@ builder_constructors! { /// /// ```rust,no_run /// # use freya::prelude::*; - /// fn app(cx: Scope) -> Element { + /// fn app() -> Element { /// rsx!( /// paragraph { /// text { @@ -425,8 +425,8 @@ builder_constructors! { /// # use freya::prelude::*; /// static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png"); /// - /// fn app(cx: Scope) -> Element { - /// let image_data = bytes_to_data(cx, RUST_LOGO); + /// fn app() -> Element { + /// let image_data = bytes_to_data(RUST_LOGO); /// rsx!( /// image { /// image_data: image_data, @@ -464,8 +464,8 @@ builder_constructors! { /// # use freya::prelude::*; /// static FERRIS: &[u8] = include_bytes!("./ferris.svg"); /// - /// fn app(cx: Scope) -> Element { - /// let ferris = bytes_to_data(cx, FERRIS); + /// fn app() -> Element { + /// let ferris = bytes_to_data(FERRIS); /// rsx!( /// svg { /// svg_data: ferris, diff --git a/crates/hooks/src/use_focus.rs b/crates/hooks/src/use_focus.rs index 4329e92c9..1f5983967 100644 --- a/crates/hooks/src/use_focus.rs +++ b/crates/hooks/src/use_focus.rs @@ -101,7 +101,7 @@ mod test { ) } - fn use_focus_app(cx: Scope) -> Element { + fn use_focus_app() -> Element { rsx!( rect { width: "100%", diff --git a/crates/hooks/tests/use_editable.rs b/crates/hooks/tests/use_editable.rs index bd2f18b05..b0fa1cc81 100644 --- a/crates/hooks/tests/use_editable.rs +++ b/crates/hooks/tests/use_editable.rs @@ -10,14 +10,13 @@ use freya_testing::{ #[tokio::test] pub async fn multiple_lines_single_editor() { - fn use_editable_app(cx: Scope) -> Element { + fn use_editable_app() -> Element { let editable = use_editable( - cx, || EditableConfig::new("Hello Rustaceans".to_string()), EditableMode::MultipleLinesSingleEditor, ); - let cursor_attr = editable.cursor_attr(cx); - let editor = editable.editor(); + let cursor_attr = editable.cursor_attr(); + let editor = editable.editor().read(); let cursor = editor.cursor(); let cursor_pos = editor.cursor_pos(); @@ -120,14 +119,13 @@ pub async fn multiple_lines_single_editor() { #[tokio::test] pub async fn single_line_mulitple_editors() { - fn use_editable_app(cx: Scope) -> Element { + fn use_editable_app() -> Element { let editable = use_editable( - cx, || EditableConfig::new("Hello Rustaceans\nHello World".to_string()), EditableMode::SingleLineMultipleEditors, ); - let cursor_attr = editable.cursor_attr(cx); - let editor = editable.editor().clone(); + let cursor_attr = editable.cursor_attr(); + let editor = editable.editor().read(); let onkeydown = { to_owned![editable]; @@ -143,7 +141,7 @@ pub async fn single_line_mulitple_editors() { background: "white", cursor_reference: cursor_attr, onkeydown: onkeydown, - editor.lines().enumerate().map(move |(i, line)| { + {editor.lines().enumerate().map(move |(i, line)| { let onmousedown = { to_owned![editable]; @@ -168,7 +166,7 @@ pub async fn single_line_mulitple_editors() { } } ) - }) + })}, label { color: "black", height: "50%", @@ -239,17 +237,16 @@ pub async fn single_line_mulitple_editors() { #[tokio::test] pub async fn highlight_multiple_lines_single_editor() { - fn use_editable_app(cx: Scope) -> Element { + fn use_editable_app() -> Element { let editable = use_editable( - cx, || EditableConfig::new("Hello Rustaceans\n".repeat(2)), EditableMode::MultipleLinesSingleEditor, ); - let cursor_attr = editable.cursor_attr(cx); - let editor = editable.editor(); + let cursor_attr = editable.cursor_attr(); + let editor = editable.editor().read(); let cursor = editor.cursor(); let cursor_pos = editor.cursor_pos(); - let highlights_attr = editable.highlights_attr(cx, 0); + let highlights_attr = editable.highlights_attr(0); let onmousedown = { to_owned![editable]; @@ -343,14 +340,13 @@ pub async fn highlight_multiple_lines_single_editor() { #[tokio::test] pub async fn highlights_single_line_mulitple_editors() { - fn use_editable_app(cx: Scope) -> Element { + fn use_editable_app() -> Element { let editable = use_editable( - cx, || EditableConfig::new("Hello Rustaceans\n".repeat(2)), EditableMode::SingleLineMultipleEditors, ); - let cursor_attr = editable.cursor_attr(cx); - let editor = editable.editor().clone(); + let cursor_attr = editable.cursor_attr(); + let editor = editable.editor().read(); let onkeydown = { to_owned![editable]; @@ -367,15 +363,15 @@ pub async fn highlights_single_line_mulitple_editors() { cursor_reference: cursor_attr, onkeydown: onkeydown, direction: "vertical", - editor.lines().enumerate().map(move |(i, line)| { + {editor.lines().enumerate().map(move |(i, line)| { - let highlights_attr = editable.highlights_attr(cx, i); + let highlights_attr = editable.highlights_attr(i); - let is_line_selected = editable.editor().cursor_row() == i; + let is_line_selected = editable.editor().read().cursor_row() == i; // Only show the cursor in the active line let character_index = if is_line_selected { - editable.editor().cursor_col().to_string() + editable.editor().read().cursor_col().to_string() } else { "none".to_string() }; @@ -412,7 +408,7 @@ pub async fn highlights_single_line_mulitple_editors() { } } ) - }) + })}, label { color: "black", height: "50%", From 67fe791dd55122a0652280f5c6516feff5b80ed7 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 10:50:02 +0100 Subject: [PATCH 03/26] ToolTip and ExternalLink --- crates/components/src/external_link.rs | 59 +++++++++++++------------- crates/components/src/lib.rs | 8 ++-- crates/components/src/tooltip.rs | 11 +++-- examples/external_link.rs | 2 +- 4 files changed, 40 insertions(+), 40 deletions(-) diff --git a/crates/components/src/external_link.rs b/crates/components/src/external_link.rs index b1659916e..3245a7068 100644 --- a/crates/components/src/external_link.rs +++ b/crates/components/src/external_link.rs @@ -7,21 +7,22 @@ use freya_hooks::{use_applied_theme, ExternalLinkThemeWith}; use crate::Tooltip; /// [`ExternalLink`] component properties. -#[derive(Props)] -pub struct ExternalLinkProps<'a> { +#[derive(Props, Clone, PartialEq)] +pub struct ExternalLinkProps { /// Theme override. #[props(optional)] pub theme: Option, /// Inner children for the ExternalLink. - pub children: Element<'a>, - #[props(optional)] + pub children: Element, /// Handler for the `onerror` event. - pub onerror: Option>, #[props(optional)] - /// Whether to show a tooltip with the URL or not. - pub show_tooltip: Option, + pub onerror: Option>, + /// Whether to show a tooltip with the URL or not. + #[props(optional, default = true)] + pub show_tooltip: bool, /// The ExternalLink destination URL. - pub url: &'a str, + #[props(into)] + pub url: String, } /// `Link` for external locations, e.g websites. @@ -36,7 +37,7 @@ pub struct ExternalLinkProps<'a> { /// /// ```no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// ExternalLink { /// url: "https://github.com", @@ -49,28 +50,30 @@ pub struct ExternalLinkProps<'a> { /// ``` /// #[allow(non_snake_case)] -pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element { - let theme = use_applied_theme!(cx, &cx.props.theme, external_link); - let is_hovering = use_state(cx, || false); - let show_tooltip = cx.props.show_tooltip.unwrap_or(true); +pub fn ExternalLink(props: ExternalLinkProps) -> Element { + let theme = use_applied_theme!(&props.theme, external_link); + let is_hovering = use_signal(|| false); - let onmouseover = |_: MouseEvent| { + let onmouseover = move |_: MouseEvent| { is_hovering.with_mut(|v| *v = true); }; - let onmouseleave = |_: MouseEvent| { + let onmouseleave = move |_: MouseEvent| { is_hovering.with_mut(|v| *v = false); }; - let onclick = |_: MouseEvent| { - let res = open::that(cx.props.url); - if let (Err(_), Some(onerror)) = (res, cx.props.onerror.as_ref()) { - onerror.call(()); + let onclick = { + let url = props.url.clone(); + move |_: MouseEvent| { + let res = open::that(url.clone()); + if let (Err(_), Some(onerror)) = (res, props.onerror.as_ref()) { + onerror.call(()); + } + // TODO(marc2332): Log unhandled errors } - // TODO(marc2332): Log unhandled errors }; - let color = if *is_hovering.get() { + let color = if *is_hovering.read() { theme.highlight_color.as_ref() } else { "inherit" @@ -82,7 +85,7 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element { onmouseleave: onmouseleave, onclick: onclick, color: "{color}", - &cx.props.children + {props.children} } rect { height: "0", @@ -90,13 +93,11 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element { layer: "-999", rect { width: "100v", - (*is_hovering.get() && show_tooltip).then_some({ - rsx!( - Tooltip { - url: cx.props.url - } - ) - }) + if *is_hovering.read() && props.show_tooltip { + Tooltip { + url: props.url.clone() + } + } } } ) diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs index 075aa4b7e..02f369cec 100644 --- a/crates/components/src/lib.rs +++ b/crates/components/src/lib.rs @@ -8,7 +8,7 @@ mod canvas; mod cursor_area; mod drag_drop; mod dropdown; -// mod external_link; +mod external_link; // mod gesture_area; // mod graph; mod icons; @@ -21,7 +21,7 @@ mod slider; mod switch; mod table; mod theme; -// mod tooltip; +mod tooltip; pub use accordion::*; pub use body::*; @@ -30,7 +30,7 @@ pub use canvas::*; pub use cursor_area::*; pub use drag_drop::*; pub use dropdown::*; -// pub use external_link::*; +pub use external_link::*; // pub use gesture_area::*; // pub use graph::*; pub use icons::*; @@ -43,4 +43,4 @@ pub use slider::*; pub use switch::*; pub use table::*; pub use theme::*; -// pub use tooltip::*; +pub use tooltip::*; diff --git a/crates/components/src/tooltip.rs b/crates/components/src/tooltip.rs index 0d7f2c537..bd72ed94a 100644 --- a/crates/components/src/tooltip.rs +++ b/crates/components/src/tooltip.rs @@ -4,12 +4,12 @@ use freya_elements::elements as dioxus_elements; use freya_hooks::{use_applied_theme, TooltipTheme, TooltipThemeWith}; /// [`Tooltip`] component properties. -#[derive(Props)] -pub struct TooltipProps<'a> { +#[derive(Props, Clone, PartialEq)] +pub struct TooltipProps { /// Theme override. pub theme: Option, /// Url as the Tooltip destination. - pub url: &'a str, + pub url: String, } /// `Tooltip` component @@ -21,9 +21,8 @@ pub struct TooltipProps<'a> { /// Inherits the [`TooltipTheme`](freya_hooks::TooltipTheme) /// #[allow(non_snake_case)] -pub fn Tooltip<'a>(cx: Scope<'a, TooltipProps<'a>>) -> Element { - let TooltipProps { url, theme } = cx.props; - let theme = use_applied_theme!(cx, theme, tooltip); +pub fn Tooltip(TooltipProps { url, theme }: TooltipProps) -> Element { + let theme = use_applied_theme!(&theme, tooltip); let TooltipTheme { background, color, diff --git a/examples/external_link.rs b/examples/external_link.rs index 50c9ef898..21af15d50 100644 --- a/examples/external_link.rs +++ b/examples/external_link.rs @@ -9,7 +9,7 @@ fn main() { launch(app); } -fn app(cx: Scope) -> Element { +fn app() -> Element { rsx!( ExternalLink { url: "https://duckduckgo.com/", From 2084bf33e9b7f28c941f2c5237a20554c909703b Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 10:52:54 +0100 Subject: [PATCH 04/26] ProgressBar --- crates/components/src/lib.rs | 4 ++-- crates/components/src/progress_bar.rs | 32 ++++++++++++++------------- examples/progress_bar.rs | 4 ++-- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs index 02f369cec..08ce0f9df 100644 --- a/crates/components/src/lib.rs +++ b/crates/components/src/lib.rs @@ -15,7 +15,7 @@ mod icons; mod input; mod loader; mod network_image; -// mod progress_bar; +mod progress_bar; mod scroll_views; mod slider; mod switch; @@ -37,7 +37,7 @@ pub use icons::*; pub use input::*; pub use loader::*; pub use network_image::*; -// pub use progress_bar::*; +pub use progress_bar::*; pub use scroll_views::*; pub use slider::*; pub use switch::*; diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs index 332bd4c9f..0550a10a1 100644 --- a/crates/components/src/progress_bar.rs +++ b/crates/components/src/progress_bar.rs @@ -4,7 +4,7 @@ use freya_elements::elements as dioxus_elements; use freya_hooks::{use_applied_theme, ProgressBarTheme, ProgressBarThemeWith}; /// [`ProgressBar`] component properties. -#[derive(Props, PartialEq)] +#[derive(Props, Clone, PartialEq)] pub struct ProgressBarProps { /// Theme override. #[props(optional)] @@ -28,7 +28,7 @@ pub struct ProgressBarProps { /// /// ```no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// ProgressBar { /// progress: 75.0 @@ -38,16 +38,20 @@ pub struct ProgressBarProps { /// ``` /// #[allow(non_snake_case)] -pub fn ProgressBar(cx: Scope) -> Element { +pub fn ProgressBar( + ProgressBarProps { + theme, + show_progress, + progress, + }: ProgressBarProps, +) -> Element { let ProgressBarTheme { color, background, progress_background, width, height, - } = use_applied_theme!(cx, &cx.props.theme, progress_bar); - let show_progress = cx.props.show_progress; - let progress = cx.props.progress; + } = use_applied_theme!(&theme, progress_bar); rsx!( rect { @@ -71,15 +75,13 @@ pub fn ProgressBar(cx: Scope) -> Element { cross_align: "center", overflow: "clip", if show_progress { - rsx!( - label { - text_align: "center", - width: "100%", - color: "{color}", - max_lines: "1", - "{progress.floor()}%" - } - ) + label { + text_align: "center", + width: "100%", + color: "{color}", + max_lines: "1", + "{progress.floor()}%" + } } } } diff --git a/examples/progress_bar.rs b/examples/progress_bar.rs index d730ea1d9..4fd420a6c 100644 --- a/examples/progress_bar.rs +++ b/examples/progress_bar.rs @@ -9,8 +9,8 @@ fn main() { launch(app); } -fn app(cx: Scope) -> Element { - let progress_anim = use_animation(cx, || 0.0); +fn app() -> Element { + let mut progress_anim = use_animation(|| 0.0); let progress = progress_anim.value() as f32; let set_to_max = { From d7c13f5748b4c0c728e1bc9fb2924c775e70e1b3 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 11:08:55 +0100 Subject: [PATCH 05/26] GestureArea --- crates/components/Cargo.toml | 1 + crates/components/src/gesture_area.rs | 189 ++++++++++++++------------ crates/components/src/lib.rs | 4 +- examples/gesture_area.rs | 4 +- 4 files changed, 104 insertions(+), 94 deletions(-) diff --git a/crates/components/Cargo.toml b/crates/components/Cargo.toml index 839fda116..7d7ba7c3d 100644 --- a/crates/components/Cargo.toml +++ b/crates/components/Cargo.toml @@ -28,6 +28,7 @@ torin = { workspace = true } dioxus = { workspace = true } dioxus-router = { workspace = true } +futures = { workspace = true } winit = { workspace = true } tokio = { workspace = true } diff --git a/crates/components/src/gesture_area.rs b/crates/components/src/gesture_area.rs index f7e78e084..6fba5379b 100644 --- a/crates/components/src/gesture_area.rs +++ b/crates/components/src/gesture_area.rs @@ -4,6 +4,7 @@ use std::time::Instant; use dioxus::prelude::*; use freya_elements::elements as dioxus_elements; use freya_elements::events::{touch::TouchPhase, TouchEvent}; +use futures::StreamExt; /// Distance between the first tap and the second tap in `DoubleTap` gesture. const DOUBLE_TAP_DISTANCE: f64 = 100.0; @@ -26,12 +27,12 @@ pub enum Gesture { } /// [`GestureArea`] component properties. -#[derive(Props)] -pub struct GestureAreaProps<'a> { +#[derive(Props, Clone, PartialEq)] +pub struct GestureAreaProps { /// Inner children for the GestureArea. - pub children: Element<'a>, + pub children: Element, /// Handler for the `ongesture` event. - pub ongesture: EventHandler<'a, Gesture>, + pub ongesture: EventHandler, } type EventsQueue = VecDeque<(Instant, TouchEvent)>; @@ -45,8 +46,8 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>; /// /// ```rust,no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { -/// let gesture = use_state(cx, || "Tap here".to_string()); +/// fn app() -> Element { +/// let mut gesture = use_signal(|| "Tap here".to_string()); /// rsx!( /// GestureArea { /// ongesture: move |g| gesture.set(format!("{g:?}")), @@ -59,95 +60,102 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>; /// ``` /// #[allow(non_snake_case)] -pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element { - let touch_events = use_ref::(cx, VecDeque::new); +pub fn GestureArea(props: GestureAreaProps) -> Element { + let event_emitter = use_coroutine( + |mut rx: UnboundedReceiver<(Instant, TouchEvent)>| async move { + let mut touch_events = VecDeque::<(Instant, TouchEvent)>::new(); - let _ = use_memo(cx, touch_events, move |_| { - // Keep the touch events queue under a certain size - if touch_events.read().len() > MAX_EVENTS_QUEUE { - touch_events.write_silent().pop_front(); - } + while let Some(new_event) = rx.next().await { + touch_events.push_back(new_event); - // Find the first event with the `target_phase` that happened before the `start_time` - let find_previous_event = |start_time: &Instant, - events: &EventsQueue, - target_phase: TouchPhase| - -> Option<(Instant, TouchEvent)> { - let mut start = false; - for (time, event) in events.iter().rev() { - if time == start_time { - start = true; - continue; - } - if event.phase == target_phase && start { - return Some((*time, event.clone())); + // Keep the touch events queue under a certain size + if touch_events.len() > MAX_EVENTS_QUEUE { + touch_events.pop_front(); } - } - None - }; - - let touch_events = touch_events.read(); - - // Process the most recent event - let event = touch_events.iter().last(); - - if let Some((time, event)) = event { - let phase = event.get_touch_phase(); - - match phase { - TouchPhase::Started => { - // TapDown - cx.props.ongesture.call(Gesture::TapDown); - - let last_ended_event = - find_previous_event(time, &touch_events, TouchPhase::Ended); - let last_started_event = - find_previous_event(time, &touch_events, TouchPhase::Started); - - // DoubleTap - if let Some(((ended_time, ended_event), (started_time, _))) = - last_ended_event.zip(last_started_event) - { - // Has the latest `touchend` event went too far? - let is_ended_close = event - .get_screen_coordinates() - .distance_to(ended_event.get_screen_coordinates()) - < DOUBLE_TAP_DISTANCE; - // Is the latest `touchend` mature enough? - let is_ended_mature = ended_time.elapsed().as_millis() >= DOUBLE_TAP_MIN; - - // Hast the latest `touchstart` event expired? - let is_started_recent = - started_time.elapsed().as_millis() <= DOUBLE_TAP_TIMEOUT; - - if is_ended_close && is_ended_mature && is_started_recent { - cx.props.ongesture.call(Gesture::DoubleTap); + + // Find the first event with the `target_phase` that happened before the `start_time` + let find_previous_event = |start_time: &Instant, + events: &EventsQueue, + target_phase: TouchPhase| + -> Option<(Instant, TouchEvent)> { + let mut start = false; + for (time, event) in events.iter().rev() { + if time == start_time { + start = true; + continue; + } + if event.phase == target_phase && start { + return Some((*time, event.clone())); } } + None + }; + + // Process the most recent event + let event = touch_events.iter().last(); + + if let Some((time, event)) = event { + let phase = event.get_touch_phase(); + + match phase { + TouchPhase::Started => { + // TapDown + props.ongesture.call(Gesture::TapDown); + + let last_ended_event = + find_previous_event(time, &touch_events, TouchPhase::Ended); + let last_started_event = + find_previous_event(time, &touch_events, TouchPhase::Started); + + // DoubleTap + if let Some(((ended_time, ended_event), (started_time, _))) = + last_ended_event.zip(last_started_event) + { + // Has the latest `touchend` event went too far? + let is_ended_close = event + .get_screen_coordinates() + .distance_to(ended_event.get_screen_coordinates()) + < DOUBLE_TAP_DISTANCE; + // Is the latest `touchend` mature enough? + let is_ended_mature = + ended_time.elapsed().as_millis() >= DOUBLE_TAP_MIN; + + // Hast the latest `touchstart` event expired? + let is_started_recent = + started_time.elapsed().as_millis() <= DOUBLE_TAP_TIMEOUT; + + if is_ended_close && is_ended_mature && is_started_recent { + props.ongesture.call(Gesture::DoubleTap); + } + } + } + TouchPhase::Ended => { + // TapUp + props.ongesture.call(Gesture::TapUp); + } + _ => {} + } } - TouchPhase::Ended => { - // TapUp - cx.props.ongesture.call(Gesture::TapUp); - } - _ => {} } - } - }); + }, + ); + + use_effect(move || {}); - let ontouchcancel = |e: TouchEvent| { - touch_events.write().push_back((Instant::now(), e)); + let ontouchcancel = move |e: TouchEvent| { + event_emitter.send((Instant::now(), e)); }; - let ontouchend = |e: TouchEvent| { - touch_events.write().push_back((Instant::now(), e)); + let ontouchend = move |e: TouchEvent| { + event_emitter.send((Instant::now(), e)); }; - let ontouchmove = |e: TouchEvent| { - touch_events.write().push_back((Instant::now(), e)); + let ontouchmove = move |e: TouchEvent| { + event_emitter.send((Instant::now(), e)); }; - let ontouchstart = |e: TouchEvent| { - touch_events.write().push_back((Instant::now(), e)); + let ontouchstart = move |e: TouchEvent| { + event_emitter.send((Instant::now(), e)); }; rsx!( @@ -156,7 +164,7 @@ pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element { ontouchend: ontouchend, ontouchmove: ontouchmove, ontouchstart: ontouchstart, - &cx.props.children + {props.children} } ) } @@ -165,6 +173,7 @@ pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element { mod test { use std::time::Duration; + use dioxus::signals::use_signal; use freya::prelude::*; use freya_elements::events::touch::TouchPhase; use freya_testing::{launch_test, FreyaEvent}; @@ -179,16 +188,16 @@ mod test { /// 4. Touch start #[tokio::test] pub async fn double_tap() { - fn dobule_tap_app(cx: Scope) -> Element { - let value = use_state(cx, || "EMPTY".to_string()); + fn dobule_tap_app() -> Element { + let mut value = use_signal(|| "EMPTY".to_string()); - let ongesture = |e: Gesture| { + let ongesture = move |e: Gesture| { value.set(format!("{e:?}")); }; rsx!( GestureArea { - ongesture: ongesture, + ongesture, "{value}" } ) @@ -239,16 +248,16 @@ mod test { /// Simulates `TapUp` and `TapDown` gestures. #[tokio::test] pub async fn tap_up_down() { - fn tap_up_down_app(cx: Scope) -> Element { - let value = use_state(cx, || "EMPTY".to_string()); + fn tap_up_down_app() -> Element { + let mut value = use_signal(|| "EMPTY".to_string()); - let ongesture = |e: Gesture| { + let ongesture = move |e: Gesture| { value.set(format!("{e:?}")); }; rsx!( GestureArea { - ongesture: ongesture, + ongesture, "{value}" } ) diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs index 08ce0f9df..327f1dfb9 100644 --- a/crates/components/src/lib.rs +++ b/crates/components/src/lib.rs @@ -9,7 +9,7 @@ mod cursor_area; mod drag_drop; mod dropdown; mod external_link; -// mod gesture_area; +mod gesture_area; // mod graph; mod icons; mod input; @@ -31,7 +31,7 @@ pub use cursor_area::*; pub use drag_drop::*; pub use dropdown::*; pub use external_link::*; -// pub use gesture_area::*; +pub use gesture_area::*; // pub use graph::*; pub use icons::*; pub use input::*; diff --git a/examples/gesture_area.rs b/examples/gesture_area.rs index d3963173a..9a7fcc7da 100644 --- a/examples/gesture_area.rs +++ b/examples/gesture_area.rs @@ -9,8 +9,8 @@ fn main() { launch(app); } -fn app(cx: Scope) -> Element { - let gesture = use_state(cx, || "Tap here".to_string()); +fn app() -> Element { + let mut gesture = use_signal(|| "Tap here".to_string()); rsx!( GestureArea { ongesture: move |g| gesture.set(format!("{g:?}")), From ba07c2b0d6164f23ce6ef10bc7080b6632e806f1 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 11:19:44 +0100 Subject: [PATCH 06/26] clean up --- README.md | 2 +- book/src/guides/animating.md | 2 +- book/src/guides/theming.md | 2 +- crates/components/src/accordion.rs | 6 ++-- crates/components/src/button.rs | 8 ++--- crates/components/src/cursor_area.rs | 4 +-- crates/components/src/drag_drop.rs | 6 ++-- crates/components/src/dropdown.rs | 20 ++++++------- crates/components/src/external_link.rs | 6 ++-- crates/components/src/input.rs | 20 ++++++------- .../components/src/scroll_views/scroll_bar.rs | 4 +-- .../src/scroll_views/scroll_view.rs | 4 +-- .../src/scroll_views/virtual_scroll_view.rs | 4 +-- crates/components/src/slider.rs | 6 ++-- crates/components/src/switch.rs | 8 ++--- crates/core/tests/pointer_events.rs | 8 ++--- crates/devtools/src/node.rs | 6 ++-- crates/devtools/src/tab.rs | 6 ++-- crates/freya/src/_docs/animating.rs | 2 +- crates/freya/src/_docs/theming.rs | 2 +- crates/hooks/src/use_accessibility.rs | 4 +-- crates/hooks/tests/use_editable.rs | 30 +++++++++---------- examples/cloned_editor.rs | 10 +++---- examples/drag.rs | 6 ++-- examples/floating_editors.rs | 24 +++++++-------- examples/mouse_trace.rs | 2 +- examples/sidebar.rs | 6 ++-- examples/simple_editor.rs | 16 +++++----- 28 files changed, 112 insertions(+), 112 deletions(-) diff --git a/README.md b/README.md index 816ba0481..bc49e1b2f 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ ```rust, no_run fn app() -> Element { - let mut count = use_state(cx, || 0); + let mut count = use_signal(|| 0); rsx!( rect { diff --git a/book/src/guides/animating.md b/book/src/guides/animating.md index b22609d42..08e24d37a 100644 --- a/book/src/guides/animating.md +++ b/book/src/guides/animating.md @@ -83,7 +83,7 @@ fn app() -> Element { height: "100%", width: "200", background: "{background}", - onclick: onclick, + onclick, } } ) diff --git a/book/src/guides/theming.md b/book/src/guides/theming.md index 3abea250c..a172b218f 100644 --- a/book/src/guides/theming.md +++ b/book/src/guides/theming.md @@ -81,7 +81,7 @@ fn Component() -> Element { rsx!( Button { - onclick: onclick, + onclick, label { "Use Light theme" } diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs index d6d76c981..b8e6efca8 100644 --- a/crates/components/src/accordion.rs +++ b/crates/components/src/accordion.rs @@ -105,8 +105,8 @@ pub fn Accordion(props: AccordionProps) -> Element { rsx!( rect { - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, + onmouseenter, + onmouseleave, overflow: "clip", color: "{color}", padding: "10", @@ -115,7 +115,7 @@ pub fn Accordion(props: AccordionProps) -> Element { width: "100%", height: "auto", background: "{background}", - onclick: onclick, + onclick, border: "1 solid {border_fill}", {&props.summary} rect { diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs index 6d3472637..21d999c6f 100644 --- a/crates/components/src/button.rs +++ b/crates/components/src/button.rs @@ -129,10 +129,10 @@ pub fn Button(props: ButtonProps) -> Element { rsx!( rect { - onclick: onclick, - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, - onkeydown: onkeydown, + onclick, + onmouseenter, + onmouseleave, + onkeydown, focus_id: focus_id, width: "{width}", height: "{height}", diff --git a/crates/components/src/cursor_area.rs b/crates/components/src/cursor_area.rs index b5d25fa6a..6ec97df05 100644 --- a/crates/components/src/cursor_area.rs +++ b/crates/components/src/cursor_area.rs @@ -65,8 +65,8 @@ pub fn CursorArea(CursorAreaProps { children, icon }: CursorAreaProps) -> Elemen rsx!( rect { - onmouseover: onmouseover, - onmouseleave: onmouseleave, + onmouseover, + onmouseleave, {children} } ) diff --git a/crates/components/src/drag_drop.rs b/crates/components/src/drag_drop.rs index 67c71a0f6..aec3b95e4 100644 --- a/crates/components/src/drag_drop.rs +++ b/crates/components/src/drag_drop.rs @@ -99,9 +99,9 @@ pub fn DragZone( } rect { reference: node_reference, - onglobalclick: onglobalclick, + onglobalclick, onglobalmouseover: onglobalmouseover, - onmousedown: onmousedown, + onmousedown, {children} } ) @@ -145,7 +145,7 @@ pub fn DropZone(props: DropZoneProps) -> Element { rsx!( rect { - onclick: onclick, + onclick, {props.children} } ) diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs index 0370d1061..eace50f5d 100644 --- a/crates/components/src/dropdown.rs +++ b/crates/components/src/dropdown.rs @@ -122,10 +122,10 @@ where corner_radius: "6", main_align: "center", cross_align: "center", - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, - onclick: onclick, - onkeydown: onkeydown, + onmouseenter, + onmouseleave, + onclick, + onkeydown, {children} } ) @@ -268,10 +268,10 @@ where rsx!( rect { - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, - onclick: onclick, - onkeydown: onkeydown, + onmouseenter, + onmouseleave, + onclick, + onkeydown, margin: "4", focus_id: focus_id, background: "{button_background}", @@ -299,8 +299,8 @@ where rect { height: "0", rect { - onglobalclick: onglobalclick, - onkeydown: onkeydown, + onglobalclick, + onkeydown, layer: "-99", margin: "4", border: "1 solid {border_fill}", diff --git a/crates/components/src/external_link.rs b/crates/components/src/external_link.rs index 3245a7068..de4d92b66 100644 --- a/crates/components/src/external_link.rs +++ b/crates/components/src/external_link.rs @@ -81,9 +81,9 @@ pub fn ExternalLink(props: ExternalLinkProps) -> Element { rsx!( rect { - onmouseover: onmouseover, - onmouseleave: onmouseleave, - onclick: onclick, + onmouseover, + onmouseleave, + onclick, color: "{color}", {props.children} } diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs index f930558b4..daddabf22 100644 --- a/crates/components/src/input.rs +++ b/crates/components/src/input.rs @@ -170,8 +170,8 @@ pub fn Input( } }; - let cursor_attr = editable.cursor_attr(); - let highlights_attr = editable.highlights_attr(0); + let cursor_reference = editable.cursor_attr(); + let highlights = editable.highlights_attr(0); let (background, cursor_char) = if focus.is_focused() { ( @@ -199,23 +199,23 @@ pub fn Input( shadow: "0 3 15 0 rgb(0, 0, 0, 0.3)", corner_radius: "10", margin: "{margin}", - cursor_reference: cursor_attr, + cursor_reference, main_align: "center", paragraph { margin: "8 12", - onkeydown: onkeydown, - onglobalclick: onglobalclick, - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, - onmousedown: onmousedown, - onmouseover: onmouseover, + onkeydown, + onglobalclick, + onmouseenter, + onmouseleave, + onmousedown, + onmouseover, width: "100%", cursor_id: "0", cursor_index: "{cursor_char}", cursor_mode: "editable", cursor_color: "{color}", max_lines: "1", - highlights: highlights_attr, + highlights, text { "{text}" } diff --git a/crates/components/src/scroll_views/scroll_bar.rs b/crates/components/src/scroll_views/scroll_bar.rs index 3833b2dfe..23a6e3050 100644 --- a/crates/components/src/scroll_views/scroll_bar.rs +++ b/crates/components/src/scroll_views/scroll_bar.rs @@ -57,8 +57,8 @@ pub fn ScrollBar( offset_x: "{offset_x}", offset_y: "{offset_y}", background: "{background}", - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, + onmouseenter, + onmouseleave, {children} } ) diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs index 15ba490b9..314cc374b 100644 --- a/crates/components/src/scroll_views/scroll_view.rs +++ b/crates/components/src/scroll_views/scroll_view.rs @@ -276,8 +276,8 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { height: "{user_container_height}", onglobalclick: onclick, onglobalmouseover: onmouseover, - onkeydown: onkeydown, - onkeyup: onkeyup, + onkeydown, + onkeyup, rect { direction: "vertical", width: "{container_width}", diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index b1e425cdc..ddad684d0 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -322,8 +322,8 @@ pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element height: "{user_container_height}", onglobalclick: onclick, onglobalmouseover: onmouseover, - onkeydown: onkeydown, - onkeyup: onkeyup, + onkeydown, + onkeyup, rect { direction: "vertical", width: "{container_width}", diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index 0103c17f6..a17482093 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -162,11 +162,11 @@ pub fn Slider( reference: node_reference, width: "{width}", height: "20", - onmousedown: onmousedown, + onmousedown, onglobalclick: onclick, - onmouseenter: onmouseenter, + onmouseenter, onglobalmouseover: onmouseover, - onmouseleave: onmouseleave, + onmouseleave, onwheel: onwheel, main_align: "center", cross_align: "center", diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 43be305c3..347ba9918 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -143,10 +143,10 @@ pub fn Switch(props: SwitchProps) -> Element { background: "{background}", border: "{border}", onmousedown: |_| {}, - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, - onkeydown: onkeydown, - onclick: onclick, + onmouseenter, + onmouseleave, + onkeydown, + onclick, focus_id: focus_id, rect { width: "100%", diff --git a/crates/core/tests/pointer_events.rs b/crates/core/tests/pointer_events.rs index 790984b05..3881f78ea 100644 --- a/crates/core/tests/pointer_events.rs +++ b/crates/core/tests/pointer_events.rs @@ -7,8 +7,8 @@ use winit::event::TouchPhase; #[tokio::test] pub async fn pointer_events_from_mouse() { - fn pointer_events_app(cx: Scope) -> Element { - let state = use_state(cx, || vec![]); + fn pointer_events_app() -> Element { + let state = use_signal(|| vec![]); let onpointerdown = move |_| state.with_mut(|v| v.push("down".to_string())); @@ -95,8 +95,8 @@ pub async fn pointer_events_from_mouse() { #[tokio::test] pub async fn pointer_events_from_touch() { - fn pointer_events_app(cx: Scope) -> Element { - let state = use_state(cx, || vec![]); + fn pointer_events_app() -> Element { + let state = use_signal(|| vec![]); let onpointerdown = move |_| state.with_mut(|v| v.push("down".to_string())); diff --git a/crates/devtools/src/node.rs b/crates/devtools/src/node.rs index 9fec35f8e..b705a026b 100644 --- a/crates/devtools/src/node.rs +++ b/crates/devtools/src/node.rs @@ -51,9 +51,9 @@ pub fn NodeElement( width: "100%", height: "27", offset_x: "{margin_left}", - onmousedown: onmousedown, - onmouseover: onmouseover, - onmouseleave: onmouseleave, + onmousedown, + onmouseover, + onmouseleave, label { font_size: "14", color: "{color}", diff --git a/crates/devtools/src/tab.rs b/crates/devtools/src/tab.rs index 5f8ca3281..84d104f69 100644 --- a/crates/devtools/src/tab.rs +++ b/crates/devtools/src/tab.rs @@ -62,9 +62,9 @@ pub fn TabButton(props: TabButtonProps) -> Element { margin: "2", overflow: "clip", background: "{background}", - onclick: onclick, - onmouseover: onmouseover, - onmouseleave: onmouseleave, + onclick, + onmouseover, + onmouseleave, corner_radius: "7", height: "100%", color: "{color}", diff --git a/crates/freya/src/_docs/animating.rs b/crates/freya/src/_docs/animating.rs index f85caea27..b7f69c87a 100644 --- a/crates/freya/src/_docs/animating.rs +++ b/crates/freya/src/_docs/animating.rs @@ -91,7 +91,7 @@ //! height: "100%", //! width: "200", //! background: "{background}", -//! onclick: onclick, +//! onclick, //! } //! } //! ) diff --git a/crates/freya/src/_docs/theming.rs b/crates/freya/src/_docs/theming.rs index a8f84ca98..92b71cb2f 100644 --- a/crates/freya/src/_docs/theming.rs +++ b/crates/freya/src/_docs/theming.rs @@ -88,7 +88,7 @@ //! //! rsx!( //! Button { -//! onclick: onclick, +//! onclick, //! label { //! "Use Light theme" //! } diff --git a/crates/hooks/src/use_accessibility.rs b/crates/hooks/src/use_accessibility.rs index 05e6faadd..7d3696781 100644 --- a/crates/hooks/src/use_accessibility.rs +++ b/crates/hooks/src/use_accessibility.rs @@ -61,7 +61,7 @@ mod test { #[tokio::test] pub async fn focus_accessibility() { #[allow(non_snake_case)] - fn OherChild(cx: Scope) -> Element { + fn OherChild() -> Element { let focus_manager = use_focus(cx); rsx!(rect { @@ -71,7 +71,7 @@ mod test { }) } - fn use_focus_app(cx: Scope) -> Element { + fn use_focus_app() -> Element { rsx!( rect { width: "100%", diff --git a/crates/hooks/tests/use_editable.rs b/crates/hooks/tests/use_editable.rs index b0fa1cc81..fc996df78 100644 --- a/crates/hooks/tests/use_editable.rs +++ b/crates/hooks/tests/use_editable.rs @@ -40,7 +40,7 @@ pub async fn multiple_lines_single_editor() { height: "100%", background: "white", cursor_reference: cursor_attr, - onmousedown: onmousedown, + onmousedown, paragraph { height: "50%", width: "100%", @@ -48,7 +48,7 @@ pub async fn multiple_lines_single_editor() { cursor_index: "{cursor_pos}", cursor_color: "black", cursor_mode: "editable", - onkeydown: onkeydown, + onkeydown, text { color: "black", "{editor}" @@ -140,7 +140,7 @@ pub async fn single_line_mulitple_editors() { height: "100%", background: "white", cursor_reference: cursor_attr, - onkeydown: onkeydown, + onkeydown, {editor.lines().enumerate().map(move |(i, line)| { let onmousedown = { @@ -242,11 +242,11 @@ pub async fn highlight_multiple_lines_single_editor() { || EditableConfig::new("Hello Rustaceans\n".repeat(2)), EditableMode::MultipleLinesSingleEditor, ); - let cursor_attr = editable.cursor_attr(); let editor = editable.editor().read(); let cursor = editor.cursor(); let cursor_pos = editor.cursor_pos(); - let highlights_attr = editable.highlights_attr(0); + let cursor_reference = editable.cursor_attr(); + let highlights = editable.highlights_attr(0); let onmousedown = { to_owned![editable]; @@ -274,7 +274,7 @@ pub async fn highlight_multiple_lines_single_editor() { width: "100%", height: "100%", background: "white", - cursor_reference: cursor_attr, + cursor_reference, paragraph { height: "50%", width: "100%", @@ -282,10 +282,10 @@ pub async fn highlight_multiple_lines_single_editor() { cursor_index: "{cursor_pos}", cursor_color: "black", cursor_mode: "editable", - highlights: highlights_attr, - onkeydown: onkeydown, - onmousedown: onmousedown, - onmouseover: onmouseover, + highlights, + onkeydown, + onmousedown, + onmouseover, text { color: "black", "{editor}" @@ -361,11 +361,11 @@ pub async fn highlights_single_line_mulitple_editors() { height: "100%", background: "white", cursor_reference: cursor_attr, - onkeydown: onkeydown, + onkeydown, direction: "vertical", {editor.lines().enumerate().map(move |(i, line)| { - let highlights_attr = editable.highlights_attr(i); + let highlights = editable.highlights_attr(i); let is_line_selected = editable.editor().read().cursor_row() == i; @@ -399,9 +399,9 @@ pub async fn highlights_single_line_mulitple_editors() { cursor_index: "{character_index}", cursor_color: "black", cursor_mode: "editable", - onmouseover: onmouseover, - onmousedown: onmousedown, - highlights: highlights_attr, + onmouseover, + onmousedown, + highlights, text { color: "black", "{line}" diff --git a/examples/cloned_editor.rs b/examples/cloned_editor.rs index 710ea6a94..3a7559b3c 100644 --- a/examples/cloned_editor.rs +++ b/examples/cloned_editor.rs @@ -53,7 +53,7 @@ fn Body() -> Element { width: "100%", height: "100%", padding: "10", - onkeydown: onkeydown, + onkeydown, cursor_reference: cursor_attr, direction: "horizontal", onglobalclick: onclick, @@ -129,8 +129,8 @@ fn Body() -> Element { max_lines: "1", cursor_mode: "editable", cursor_id: "{line_index}", - onmousedown: onmousedown, - onmouseover: onmouseover, + onmousedown, + onmouseover, highlights: highlights, text { color: "rgb(240, 240, 240)", @@ -214,8 +214,8 @@ fn Body() -> Element { max_lines: "1", cursor_mode: "editable", cursor_id: "{line_index}", - onmousedown: onmousedown, - onmouseover: onmouseover, + onmousedown, + onmouseover, highlights: highlights, text { color: "rgb(240, 240, 240)", diff --git a/examples/drag.rs b/examples/drag.rs index 1e6c01525..836583b43 100644 --- a/examples/drag.rs +++ b/examples/drag.rs @@ -44,8 +44,8 @@ fn app() -> Element { height: "100%", offset_x: "{positions.read().0}", offset_y: "{positions.read().1}", - onmousedown: onmousedown, - onclick: onclick, + onmousedown, + onclick, label { width: "100", color: "white", @@ -58,7 +58,7 @@ fn app() -> Element { height: "100", corner_radius: "15", shadow: "0 0 50 0 rgb(255, 255, 255, 0.6)", - onmouseover: onmouseover, + onmouseover, onmouseleave: onmouseleave } } diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs index c340a975b..86562ace6 100644 --- a/examples/floating_editors.rs +++ b/examples/floating_editors.rs @@ -15,7 +15,7 @@ fn app() -> Element { use_init_theme(DARK_THEME); let mut hovering = use_signal(|| false); let mut canvas_pos = use_signal(|| (0.0f64, 0.0f64)); - let mut nodes = use_signal(|| vec![(0.0f64, 0.0f64)]); + let nodes = use_signal(|| vec![(0.0f64, 0.0f64)]); let clicking = use_signal::>(|| None); let mut clicking_drag = use_signal::>(|| None); @@ -88,10 +88,10 @@ fn app() -> Element { height: "calc(100% - 100)", offset_x: "{canvas_pos.read().0}", offset_y: "{canvas_pos.read().1}", - onmousedown: onmousedown, - onclick: onclick, - onmouseover: onmouseover, - onmouseleave: onmouseleave, + onmousedown, + onclick, + onmouseover, + onmouseleave, label { font_size: "25", "Floating Editors Example" @@ -175,8 +175,8 @@ fn Editor() -> Element { let mut font_size_percentage = use_signal(|| 15.0); let mut line_height_percentage = use_signal(|| 0.0); - let mut is_bold = use_signal(|| false); - let mut is_italic = use_signal(|| false); + let is_bold = use_signal(|| false); + let is_italic = use_signal(|| false); // minimum font size is 5 let font_size = font_size_percentage + 5.0; @@ -215,7 +215,7 @@ fn Editor() -> Element { rsx!( rect { - onclick: onclick, + onclick, width: "100%", height: "100%", rect { @@ -283,7 +283,7 @@ fn Editor() -> Element { width: "100%", height: "calc(100% - 80)", padding: "5", - onkeydown: onkeydown, + onkeydown, cursor_reference: cursor_attr, direction: "horizontal", rect { @@ -365,9 +365,9 @@ fn Editor() -> Element { max_lines: "1", cursor_mode: "editable", cursor_id: "{cursor_id}", - onmousedown: onmousedown, - onmouseover: onmouseover, - onclick: onclick, + onmousedown, + onmouseover, + onclick, highlights: highlights, text { color: "rgb(240, 240, 240)", diff --git a/examples/mouse_trace.rs b/examples/mouse_trace.rs index 04cc3116b..6d76e32c8 100644 --- a/examples/mouse_trace.rs +++ b/examples/mouse_trace.rs @@ -67,7 +67,7 @@ fn app() -> Element { rsx!( rect { - onmouseover: onmouseover, + onmouseover, width: "100%", height: "100%", positions.read().iter().map(|pos| rsx!( diff --git a/examples/sidebar.rs b/examples/sidebar.rs index b7c6d54af..07f2d4bbd 100644 --- a/examples/sidebar.rs +++ b/examples/sidebar.rs @@ -84,9 +84,9 @@ fn SidebarItem(children: Element, onclick: Option>, to: Option< rect { overflow: "clip", margin: "5 0", - onclick: onclick, - onmouseenter: onmouseenter, - onmouseleave: onmouseleave, + onclick, + onmouseenter, + onmouseleave, width: "100%", height: "auto", color: "{color}", diff --git a/examples/simple_editor.rs b/examples/simple_editor.rs index d5d5f9ba5..98a319f8f 100644 --- a/examples/simple_editor.rs +++ b/examples/simple_editor.rs @@ -17,8 +17,8 @@ fn app() -> Element { EditableMode::MultipleLinesSingleEditor, ); - let cursor_attr = editable.cursor_attr(); - let highlights_attr = editable.highlights_attr(0); + let cursor_reference = editable.cursor_attr(); + let highlights = editable.highlights_attr(0); let editor = editable.editor().read(); let cursor = editor.cursor(); let cursor_char = editor.cursor_pos(); @@ -55,7 +55,7 @@ fn app() -> Element { rect { width: "100%", height: "100%", - cursor_reference: cursor_attr, + cursor_reference, ScrollView { theme: theme_with!(ScrollViewTheme { width: "100%".into(), @@ -68,11 +68,11 @@ fn app() -> Element { cursor_index: "{cursor_char}", cursor_mode: "editable", cursor_color: "black", - highlights: highlights_attr, - onclick: onclick, - onmouseover: onmouseover, - onmousedown: onmousedown, - onkeydown: onkeydown, + highlights, + onclick, + onmouseover, + onmousedown, + onkeydown, text { "{editable.editor()}" } From 9813b45f8c9a1b02186001fc77885556df1b9b72 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 11:44:13 +0100 Subject: [PATCH 07/26] use_animation_transition --- crates/hooks/src/lib.rs | 4 +- crates/hooks/src/use_accessibility.rs | 2 +- crates/hooks/src/use_animation.rs | 8 +- crates/hooks/src/use_animation_transition.rs | 95 +++++++++----------- crates/hooks/src/use_platform.rs | 8 ++ examples/transition.rs | 6 +- 6 files changed, 62 insertions(+), 61 deletions(-) diff --git a/crates/hooks/src/lib.rs b/crates/hooks/src/lib.rs index 3b7886626..6bfdbe023 100644 --- a/crates/hooks/src/lib.rs +++ b/crates/hooks/src/lib.rs @@ -9,7 +9,7 @@ mod theming; mod use_accessibility; mod use_animation; -// mod use_animation_transition; +mod use_animation_transition; mod use_canvas; mod use_editable; mod use_focus; @@ -28,7 +28,7 @@ pub use theming::*; pub use use_accessibility::*; pub use use_animation::*; -// pub use use_animation_transition::*; +pub use use_animation_transition::*; pub use use_canvas::*; pub use use_editable::*; pub use use_focus::*; diff --git a/crates/hooks/src/use_accessibility.rs b/crates/hooks/src/use_accessibility.rs index 7d3696781..ceef31c9e 100644 --- a/crates/hooks/src/use_accessibility.rs +++ b/crates/hooks/src/use_accessibility.rs @@ -62,7 +62,7 @@ mod test { pub async fn focus_accessibility() { #[allow(non_snake_case)] fn OherChild() -> Element { - let focus_manager = use_focus(cx); + let focus_manager = use_focus(); rsx!(rect { width: "100%", diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs index ddfbb62d6..cceea62eb 100644 --- a/crates/hooks/src/use_animation.rs +++ b/crates/hooks/src/use_animation.rs @@ -90,12 +90,12 @@ impl AnimationManager { /// ## Usage /// ```rust,no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { -/// let animation = use_animation(cx, || 0.0); +/// fn app() -> Element { +/// let animation = use_animation(|| 0.0); /// /// let progress = animation.value(); /// -/// use_memo(cx, (), move |_| { +/// use_hook(move || { /// animation.start(Animation::new_linear(0.0..=100.0, 50)); /// }); /// @@ -124,7 +124,7 @@ mod test { use std::time::Duration; use crate::{use_animation, Animation}; - use dioxus_hooks::{to_owned, use_memo}; + use dioxus_hooks::to_owned; use freya::prelude::*; use freya_testing::{events::pointer::MouseButton, launch_test, FreyaEvent}; use tokio::time::sleep; diff --git a/crates/hooks/src/use_animation_transition.rs b/crates/hooks/src/use_animation_transition.rs index f19c4a697..ee5f0d1dc 100644 --- a/crates/hooks/src/use_animation_transition.rs +++ b/crates/hooks/src/use_animation_transition.rs @@ -1,5 +1,5 @@ -use dioxus_core::ScopeState; -use dioxus_hooks::{use_memo, use_state, UseFutureDep, UseState}; +use dioxus_core::prelude::spawn; +use dioxus_signals::{use_memo_with_dependencies, Dependency, Readable, Signal, Writable}; use freya_engine::prelude::Color; use freya_node_state::Parse; use tokio::time::Instant; @@ -130,32 +130,30 @@ impl TransitionState { } /// Manage the lifecyle of a collection of transitions. -#[derive(Clone)] -pub struct TransitionsManager<'a> { +#[derive(Clone, PartialEq)] +pub struct TransitionsManager { /// Registered transitions - transitions: &'a Vec, - /// The registered tranistions states - transitions_storage: &'a UseState>, + transitions: Signal>, + /// The registered transition states + transitions_storage: Signal>, /// The transition animation type transition_animation: TransitionAnimation, /// Currently running animation. - current_animation_id: &'a UseState>, - /// The scope. - cx: &'a ScopeState, + current_animation_id: Signal>, /// Platform APIs platform: UsePlatform, } -impl<'a> TransitionsManager<'a> { +impl TransitionsManager { /// Animate from the end to the start. - pub fn reverse(&self) { + pub fn reverse(&mut self) { self.clear(); let animation = self.transition_animation.to_animation(100.0..=0.0); self.run_with_animation(animation); } /// Animate from the start to the end. - pub fn start(&self) { + pub fn start(&mut self) { self.clear(); let animation = self.transition_animation.to_animation(0.0..=100.0); self.run_with_animation(animation); @@ -168,13 +166,13 @@ impl<'a> TransitionsManager<'a> { let mut ticker = platform.new_ticker(); let transitions = self.transitions.clone(); let transitions_storage = self.transitions_storage.clone(); - let current_animation_id = self.current_animation_id.clone(); + let mut current_animation_id = self.current_animation_id.clone(); // Set as current this new animation current_animation_id.set(Some(animation_id)); // Spawn the animation that will run at 1ms speed - self.cx.spawn(async move { + spawn(async move { platform.request_animation_frame(); let mut index = 0; @@ -186,7 +184,7 @@ impl<'a> TransitionsManager<'a> { platform.request_animation_frame(); // Stop running the animation if it's no longer selected - if *current_animation_id.current() == Some(animation_id) { + if *current_animation_id.peek() == Some(animation_id) { // Remove the current animation if it has finished if animation.is_finished() { current_animation_id.set(None); @@ -197,7 +195,7 @@ impl<'a> TransitionsManager<'a> { let value = animation.move_value(index); transitions_storage.with_mut(|storage| { for (i, storage) in storage.iter_mut().enumerate() { - if let Some(conf) = transitions.get(i) { + if let Some(conf) = transitions.peek().get(i) { storage.set_value(conf, value); } } @@ -212,11 +210,11 @@ impl<'a> TransitionsManager<'a> { } /// Clear all the currently running [Transition]s. - pub fn clear(&self) { + pub fn clear(&mut self) { self.current_animation_id.set(None); self.transitions_storage.with_mut(|storage| { for (i, storage) in storage.iter_mut().enumerate() { - if let Some(conf) = self.transitions.get(i) { + if let Some(conf) = self.transitions.peek().get(i) { storage.clear(conf); } } @@ -225,13 +223,13 @@ impl<'a> TransitionsManager<'a> { /// Check whether there are [Transition]s running or not. pub fn is_animating(&self) -> bool { - self.current_animation_id.is_some() + self.current_animation_id.peek().is_some() } /// Check whether the [Transition]s are at the start or at the end. pub fn is_at_start(&self) -> bool { if let Some(storage) = self.get(0) { - let anim = self.transitions[0]; + let anim = self.transitions.peek()[0]; match anim { Transition::Size(start, _) => start == storage.to_size().unwrap_or(start), Transition::Color(start, _) => start == storage.to_raw_color().unwrap_or(start), @@ -243,7 +241,7 @@ impl<'a> TransitionsManager<'a> { /// Get an [TransitionState] pub fn get(&self, index: usize) -> Option { - self.transitions_storage.current().get(index).copied() + self.transitions_storage.read().get(index).copied() } } @@ -252,14 +250,14 @@ impl<'a> TransitionsManager<'a> { /// ## Usage /// ```rust,no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { -/// let animation = use_animation_transition(cx, TransitionAnimation::new_linear(50), (), |_| vec![ +/// fn app() -> Element { +/// let mut animation = use_animation_transition(TransitionAnimation::new_linear(50), (), |_| vec![ /// Transition::new_size(0.0, 100.0) /// ]); /// /// let progress = animation.get(0).unwrap().as_size(); /// -/// use_memo(cx, (), move |_| { +/// use_hook(move || { /// animation.start(); /// }); /// @@ -272,34 +270,28 @@ impl<'a> TransitionsManager<'a> { /// ``` /// pub fn use_animation_transition( - cx: &ScopeState, transition: TransitionAnimation, dependencies: D, - mut init: impl Fn(D::Out) -> Vec, + init: impl Fn(D::Out) -> Vec + 'static, ) -> TransitionsManager where - D: UseFutureDep, + D: Dependency + 'static, { - let current_animation_id = use_state(cx, || None); - let transitions = use_memo(cx, dependencies.clone(), &mut init); - let transitions_storage = use_state(cx, || animations_map(transitions)); - let platform = use_platform(cx); - - let _ = use_memo(cx, dependencies, { - let storage_setter = transitions_storage.setter(); - move |v| { - storage_setter(animations_map(&init(v))); + use_memo_with_dependencies(dependencies.clone(), move |deps| { + let platform = use_platform(); + let transitions = init(deps); + let transitions_states = animations_map(&transitions); + + TransitionsManager { + current_animation_id: Signal::new(None), + transitions: Signal::new(transitions), + transitions_storage: Signal::new(transitions_states), + transition_animation: transition, + platform, } - }); - - TransitionsManager { - current_animation_id, - transitions, - transitions_storage, - cx, - transition_animation: transition, - platform, - } + }) + .read() + .clone() } fn animations_map(animations: &[Transition]) -> Vec { @@ -314,21 +306,22 @@ mod test { use std::time::Duration; use crate::{use_animation_transition, Transition, TransitionAnimation}; + use dioxus_core::use_hook; use freya::prelude::*; use freya_testing::launch_test; use tokio::time::sleep; #[tokio::test] pub async fn track_progress() { - fn use_animation_transition_app(cx: Scope) -> Element { - let animation = - use_animation_transition(cx, TransitionAnimation::new_linear(50), (), |_| { + fn use_animation_transition_app() -> Element { + let mut animation = + use_animation_transition(TransitionAnimation::new_linear(50), (), |_| { vec![Transition::new_size(0.0, 100.0)] }); let progress = animation.get(0).unwrap().as_size(); - let _ = use_memo(cx, (), move |_| { + use_hook(move || { animation.start(); }); diff --git a/crates/hooks/src/use_platform.rs b/crates/hooks/src/use_platform.rs index 47524dc67..17f531dd3 100644 --- a/crates/hooks/src/use_platform.rs +++ b/crates/hooks/src/use_platform.rs @@ -12,6 +12,14 @@ pub struct UsePlatform { platform_emitter: Option>, } +impl PartialEq for UsePlatform { + fn eq(&self, _other: &Self) -> bool { + // The provided platform integrations will never change + // during when running the app, so it is safe to assume their equality. + true + } +} + #[derive(PartialEq, Eq, Debug)] pub enum UsePlatformError { EventLoopProxyFailed, diff --git a/examples/transition.rs b/examples/transition.rs index eea1f3154..95837965c 100644 --- a/examples/transition.rs +++ b/examples/transition.rs @@ -12,9 +12,9 @@ fn main() { const TARGET: f64 = 500.0; -fn app(cx: Scope) -> Element { - let animation = - use_animation_transition(cx, TransitionAnimation::new_sine_in_out(500), (), |_| { +fn app() -> Element { + let mut animation = + use_animation_transition(TransitionAnimation::new_sine_in_out(500), (), |_| { vec![ Transition::new_size(0.0, TARGET), Transition::new_color("rgb(33, 158, 188)", "white"), From fe0646d5451816226179d0b70c59975ad89d0d19 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 11:46:45 +0100 Subject: [PATCH 08/26] Graph --- crates/components/src/graph.rs | 13 ++++++------- crates/components/src/lib.rs | 4 ++-- examples/graph.rs | 8 ++++---- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/crates/components/src/graph.rs b/crates/components/src/graph.rs index 03c4e42fa..5fb2a8908 100644 --- a/crates/components/src/graph.rs +++ b/crates/components/src/graph.rs @@ -40,14 +40,15 @@ pub struct GraphProps { /// See [`GraphProps`]. /// #[allow(non_snake_case)] -pub fn Graph(cx: Scope) -> Element { - let platform = use_platform(cx); +pub fn Graph(props: GraphProps) -> Element { + let platform = use_platform(); + let GraphTheme { width, height } = use_applied_theme!(&props.theme, graph); - let _ = use_memo(cx, (cx.props,), move |_| { + let _ = use_memo_with_dependencies(&props, move |_| { platform.send(EventMessage::RequestRerender) }); - let canvas = use_canvas(cx, cx.props, |state| { + let canvas = use_canvas(&props, |state| { Box::new(move |canvas, font_collection, region| { canvas.translate((region.min_x(), region.min_y())); @@ -152,8 +153,6 @@ pub fn Graph(cx: Scope) -> Element { }) }); - let GraphTheme { width, height } = use_applied_theme!(cx, &cx.props.theme, graph); - rsx!( rect { width: "{width}", @@ -161,7 +160,7 @@ pub fn Graph(cx: Scope) -> Element { padding: "15 5", background: "white", rect { - canvas_reference: canvas.attribute(cx), + canvas_reference: canvas.attribute(), width: "100%", height: "100%", } diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs index 327f1dfb9..cfede3fd4 100644 --- a/crates/components/src/lib.rs +++ b/crates/components/src/lib.rs @@ -10,7 +10,7 @@ mod drag_drop; mod dropdown; mod external_link; mod gesture_area; -// mod graph; +mod graph; mod icons; mod input; mod loader; @@ -32,7 +32,7 @@ pub use drag_drop::*; pub use dropdown::*; pub use external_link::*; pub use gesture_area::*; -// pub use graph::*; +pub use graph::*; pub use icons::*; pub use input::*; pub use loader::*; diff --git a/examples/graph.rs b/examples/graph.rs index ff347e4cb..633c1b048 100644 --- a/examples/graph.rs +++ b/examples/graph.rs @@ -9,8 +9,8 @@ fn main() { launch(app); } -fn app(cx: Scope) -> Element { - let labels = cx.use_hook(|| { +fn app() -> Element { + let labels = use_hook(|| { vec![ "15/5/23".to_string(), "16/5/23".to_string(), @@ -19,7 +19,7 @@ fn app(cx: Scope) -> Element { "19/5/23".to_string(), ] }); - let data = use_state(cx, || { + let data = use_signal(|| { vec![ GraphLine::new( "rgb(255, 184, 76)", @@ -46,6 +46,6 @@ fn app(cx: Scope) -> Element { rsx!(Graph { labels: labels.clone(), - data: data.get().clone() + data: data.read().clone() }) } From a71d8a601d4d001e5518a6dc6c7194d17658b5d9 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 11:55:48 +0100 Subject: [PATCH 09/26] use_camera --- crates/hooks/src/lib.rs | 8 ++++---- crates/hooks/src/use_camera.rs | 36 +++++++++++++++++----------------- examples/camera.rs | 28 ++++++++++++-------------- 3 files changed, 34 insertions(+), 38 deletions(-) diff --git a/crates/hooks/src/lib.rs b/crates/hooks/src/lib.rs index 6bfdbe023..8d8d2a676 100644 --- a/crates/hooks/src/lib.rs +++ b/crates/hooks/src/lib.rs @@ -17,8 +17,8 @@ mod use_node; mod use_platform; mod use_theme; -// #[cfg(feature = "use_camera")] -// mod use_camera; +#[cfg(feature = "use_camera")] +mod use_camera; pub use animation::*; pub use rope_editor::*; @@ -36,5 +36,5 @@ pub use use_node::*; pub use use_platform::*; pub use use_theme::*; -// #[cfg(feature = "use_camera")] -// pub use use_camera::*; +#[cfg(feature = "use_camera")] +pub use use_camera::*; diff --git a/crates/hooks/src/use_camera.rs b/crates/hooks/src/use_camera.rs index f1d58e954..37f299068 100644 --- a/crates/hooks/src/use_camera.rs +++ b/crates/hooks/src/use_camera.rs @@ -1,8 +1,9 @@ use std::sync::{Arc, Mutex}; use crate::use_platform; -use dioxus_core::{AttributeValue, ScopeState}; -use dioxus_hooks::{to_owned, use_effect, use_state, UseState}; +use dioxus_core::{prelude::spawn, use_hook, AttributeValue}; +use dioxus_hooks::to_owned; +use dioxus_signals::{use_signal, Signal, Writable}; use freya_node_state::{CustomAttributeValues, ImageReference}; pub use nokhwa::utils::{CameraIndex, RequestedFormatType, Resolution}; use nokhwa::{pixel_format::RgbFormat, utils::RequestedFormat, Camera, NokhwaError}; @@ -46,21 +47,20 @@ impl Default for CameraSettings { /// Connect to a given camera and render its frames into an image element pub fn use_camera( - cx: &ScopeState, camera_settings: CameraSettings, -) -> (AttributeValue, &UseState>) { - let platform = use_platform(cx); - let camera_error = use_state(cx, || None); - let image_reference = cx.use_hook(|| Arc::new(Mutex::new(None))); - - let image_reference_attr = cx.any_value(CustomAttributeValues::ImageReference(ImageReference( - image_reference.clone(), - ))); - - use_effect(cx, (), move |_| { - to_owned![image_reference, camera_error, platform]; - async move { - let handle_error = |e: NokhwaError| { +) -> (AttributeValue, Signal>) { + let platform = use_platform(); + let mut camera_error = use_signal(|| None); + let image_reference = use_hook(|| Arc::new(Mutex::new(None))); + + let image_reference_attr = AttributeValue::any_value(CustomAttributeValues::ImageReference( + ImageReference(image_reference.clone()), + )); + + use_hook(move || { + to_owned![image_reference, platform]; + spawn(async move { + let mut handle_error = |e: NokhwaError| { camera_error.set(Some(e)); }; @@ -72,7 +72,7 @@ pub fn use_camera( if let Some(resolution) = camera_settings.resolution { camera .set_resolution(resolution) - .unwrap_or_else(handle_error); + .unwrap_or_else(&mut handle_error); } let mut ticker = platform.new_ticker(); @@ -99,7 +99,7 @@ pub fn use_camera( } else if let Err(err) = camera { handle_error(err); } - } + }); }); (image_reference_attr, camera_error) diff --git a/examples/camera.rs b/examples/camera.rs index 955108d7f..60d290552 100644 --- a/examples/camera.rs +++ b/examples/camera.rs @@ -16,29 +16,25 @@ fn main() { launch(app); } #[cfg(feature = "use_camera")] -fn app(cx: Scope) -> Element { - let (image_reference, camera_error) = use_camera(cx, CameraSettings::default()); +fn app() -> Element { + let (image_reference, camera_error) = use_camera(CameraSettings::default()); rsx!( rect { width: "100%", height: "100%", padding: "50", - if let Some(err) = camera_error.get() { - rsx!( - label { - color: "black", - "{err}" - } - ) + if let Some(err) = &*camera_error.read() { + label { + color: "black", + "{err}" + } } else { - rsx!( - image { - width: "100%", - height: "100%", - image_reference: image_reference - } - ) + image { + width: "100%", + height: "100%", + image_reference + } } } ) From 2ddd47d6f9b79a80ecd14f37d768034890fb9f01 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 12:03:03 +0100 Subject: [PATCH 10/26] clean up --- crates/components/src/network_image.rs | 2 +- crates/components/src/slider.rs | 8 ++++---- crates/components/src/switch.rs | 6 +++--- crates/freya/src/_docs/animating.rs | 10 +++++----- crates/freya/src/_docs/hot_reload.rs | 2 +- crates/freya/src/_docs/testing.rs | 18 +++++++++--------- crates/freya/src/_docs/theming.rs | 26 +++++++++++++------------- crates/freya/src/launch.rs | 8 ++++---- crates/freya/src/lib.rs | 4 ++-- crates/hooks/src/theming/mod.rs | 4 ++-- crates/hooks/src/use_canvas.rs | 6 +++--- crates/hooks/src/use_theme.rs | 5 ++--- examples/hotreload.rs | 6 +++--- examples/i18n.rs | 25 ++++++++++--------------- examples/opacity.rs | 6 +++--- examples/render_canvas.rs | 2 +- examples/shader.rs | 2 +- website/src/pages/index.astro | 4 ++-- 18 files changed, 69 insertions(+), 75 deletions(-) diff --git a/crates/components/src/network_image.rs b/crates/components/src/network_image.rs index 67d332c93..280d4de5d 100644 --- a/crates/components/src/network_image.rs +++ b/crates/components/src/network_image.rs @@ -47,7 +47,7 @@ pub enum ImageStatus { /// /// ```rust,no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// NetworkImage { /// url: "https://raw.githubusercontent.com/jigsawpieces/dog-api-images/main/greyhound/Cordelia.jpg".parse().unwrap() diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index a17482093..e7f241db1 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -57,8 +57,8 @@ pub enum SliderStatus { /// # Example /// ```no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { -/// let percentage = use_state(cx, || 20.0); +/// fn app() -> Element { +/// let mut percentage = use_signal(|| 20.0); /// /// rsx!( /// label { @@ -66,8 +66,8 @@ pub enum SliderStatus { /// } /// Slider { /// width: "50%", -/// value: *percentage.get(), -/// onmoved: |p| { +/// value: *percentage.read(), +/// onmoved: move |p| { /// percentage.set(p); /// } /// } diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 347ba9918..5e721e38d 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -41,12 +41,12 @@ pub enum SwitchStatus { /// ```no_run /// # use freya::prelude::*; /// fn app() -> Element { -/// let enabled = use_state(&cx, || false); +/// let mut enabled = use_signal(|| false); /// /// rsx!( /// Switch { -/// enabled: *enabled.get(), -/// ontoggled: |_| { +/// enabled: *enabled.read(), +/// ontoggled: move |_| { /// enabled.set(!enabled.get()); /// } /// } diff --git a/crates/freya/src/_docs/animating.rs b/crates/freya/src/_docs/animating.rs index b7f69c87a..2c9ca4a7c 100644 --- a/crates/freya/src/_docs/animating.rs +++ b/crates/freya/src/_docs/animating.rs @@ -23,12 +23,12 @@ //! launch(app); //! } //! -//! fn app(cx: Scope) -> Element { -//! let animation = use_animation(cx, || 0.0); +//! fn app() -> Element { +//! let mut animation = use_animation(|| 0.0); //! //! let progress = animation.value(); //! -//! use_memo(cx, (), move |_| { +//! use_hook(move |_| { //! animation.start(Animation::new_linear(0.0..=100.0, 50)); //! }); //! @@ -61,8 +61,8 @@ //! //! const TARGET: f64 = 500.0; //! -//! fn app(cx: Scope) -> Element { -//! let animation = use_animation_transition(cx, TransitionAnimation::new_sine_in_out(200), (), |()| { +//! fn app() -> Element { +//! let mut animation = use_animation_transition(TransitionAnimation::new_sine_in_out(200), (), |()| { //! vec![ //! Transition::new_size(0.0, TARGET), //! Transition::new_color("rgb(33, 158, 188)", "white"), diff --git a/crates/freya/src/_docs/hot_reload.rs b/crates/freya/src/_docs/hot_reload.rs index 09b85624c..93ce52d86 100644 --- a/crates/freya/src/_docs/hot_reload.rs +++ b/crates/freya/src/_docs/hot_reload.rs @@ -16,7 +16,7 @@ //! launch(app); //! } //! -//! # fn app(cx: Scope) -> Element { +//! # fn app() -> Element { //! # None //! # } //! ``` diff --git a/crates/freya/src/_docs/testing.rs b/crates/freya/src/_docs/testing.rs index 136a0d833..f2350c6a0 100644 --- a/crates/freya/src/_docs/testing.rs +++ b/crates/freya/src/_docs/testing.rs @@ -21,7 +21,7 @@ //! ```rust, no_run //! #[tokio::test] //! async fn test() { -//! fn our_component(cx: Scope) -> Element { +//! fn our_component() -> Element { //! rsx!( //! label { //! "Hello World!" @@ -51,12 +51,11 @@ //! ```rust, no_run //! #[tokio::test] //! async fn dynamic_test() { -//! fn dynamic_component(cx: Scope) -> Element { -//! let state = use_state(cx, || false); +//! fn dynamic_component() -> Element { +//! let mut state = use_signal(|| false); //! -//! use_effect(cx, (), |_| { +//! use_hook(move || { //! state.set(true); -//! async move { } //! }); //! //! rsx!( @@ -87,14 +86,15 @@ //! ```rust, no_run //! #[tokio::test] //! async fn event_test() { -//! fn event_component(cx: Scope) -> Element { -//! let enabled = use_state(cx, || false); +//! fn event_component() -> Element { +//! let mut enabled = use_signal(|| false); +//! //! rsx!( //! rect { //! width: "100%", //! height: "100%", //! background: "red", -//! onclick: |_| { +//! onclick: move |_| { //! enabled.set(true); //! }, //! label { @@ -139,7 +139,7 @@ //! ```rust, no_run //! #[tokio::test] //! async fn test() { -//! fn our_component(cx: Scope) -> Element { +//! fn our_component() -> Element { //! rsx!( //! label { //! "Hello World!" diff --git a/crates/freya/src/_docs/theming.rs b/crates/freya/src/_docs/theming.rs index 92b71cb2f..c3f9daff6 100644 --- a/crates/freya/src/_docs/theming.rs +++ b/crates/freya/src/_docs/theming.rs @@ -11,7 +11,7 @@ //! ```rust, no_run //! # use freya::prelude::*; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! ThemeProvider { //! Component { } @@ -20,8 +20,8 @@ //! } //! //! #[allow(non_snake_case)] -//! fn Component(cx: Scope) -> Element { -//! let theme = use_get_theme(cx); +//! fn Component() -> Element { +//! let theme = use_get_theme(); //! //! let button_theme = &theme.button; //! @@ -40,7 +40,7 @@ //! ```rust, no_run //! # use freya::prelude::*; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! ThemeProvider { //! theme: LIGHT_THEME, @@ -50,8 +50,8 @@ //! } //! //! #[allow(non_snake_case)] -//! fn Component(cx: Scope) -> Element { -//! let theme = use_get_theme(cx); +//! fn Component() -> Element { +//! let theme = use_get_theme(); //! //! let button_theme = &theme.button; //! @@ -70,7 +70,7 @@ //! ```rust, no_run //! # use freya::prelude::*; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! ThemeProvider { //! Component { } @@ -79,10 +79,10 @@ //! } //! //! #[allow(non_snake_case)] -//! fn Component(cx: Scope) -> Element { -//! let theme = use_theme(cx); +//! fn Component() -> Element { +//! let mut theme = use_theme(); //! -//! let onclick = |_| { +//! let onclick = move |_| { //! *theme.write() = LIGHT_THEME; //! }; //! @@ -105,7 +105,7 @@ //! ```rust,no_run //! # use freya::prelude::*; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx! { //! Button { //! theme: ButtonThemeWith { @@ -132,7 +132,7 @@ //! ```rust,no_run //! # use freya::prelude::*; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx! { //! Button { //! theme: theme_with!(ButtonTheme { @@ -171,7 +171,7 @@ //! ..LIGHT_THEME //! }; //! -//! fn app(cx: Scope) -> Element { +//! fn app() -> Element { //! rsx!( //! ThemeProvider { //! theme: CUSTOM_THEME, diff --git a/crates/freya/src/launch.rs b/crates/freya/src/launch.rs index 83f945bf6..728f4fc2d 100644 --- a/crates/freya/src/launch.rs +++ b/crates/freya/src/launch.rs @@ -20,7 +20,7 @@ use freya_renderer::{LaunchConfig, WindowConfig}; /// launch(app); /// } /// -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// rect { /// width: "100%", @@ -66,7 +66,7 @@ pub fn launch(app: AppComponent) { /// launch_with_title(app, "Whoa!"); /// } /// -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// rect { /// width: "100%", @@ -110,7 +110,7 @@ pub fn launch_with_title(app: AppComponent, title: &'static str) { /// launch_with_props(app, "Whoa!", (400.0, 600.0)); /// } /// -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// rect { /// width: "100%", @@ -167,7 +167,7 @@ pub fn launch_with_props(app: AppComponent, title: &'static str, (width, height) /// ); /// } /// -/// fn app(cx: Scope) -> Element { +/// fn app() -> Element { /// rsx!( /// rect { /// width: "100%", diff --git a/crates/freya/src/lib.rs b/crates/freya/src/lib.rs index 1899bbf5c..ec2175365 100644 --- a/crates/freya/src/lib.rs +++ b/crates/freya/src/lib.rs @@ -26,8 +26,8 @@ //! launch(app); //! } //! -//! fn app(cx: Scope) -> Element { -//! let mut count = use_state(cx, || 0); +//! fn app() -> Element { +//! let mut count = use_signal(|| 0); //! //! rsx!( //! rect { diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs index d86a7d756..13e48f432 100644 --- a/crates/hooks/src/theming/mod.rs +++ b/crates/hooks/src/theming/mod.rs @@ -171,7 +171,7 @@ macro_rules! define_theme { /// /// ```no_run /// # use freya::prelude::*; -/// # fn theme_with_example_no_macro(cx: Scope) -> Element { +/// # fn theme_with_example_no_macro() -> Element { /// rsx! { /// Button { /// theme: ButtonThemeWith { @@ -191,7 +191,7 @@ macro_rules! define_theme { /// /// ```no_run /// # use freya::prelude::*; -/// # fn theme_with_example_no_macro(cx: Scope) -> Element { +/// # fn theme_with_example_no_macro() -> Element { /// rsx! { /// Button { /// theme: theme_with!(ButtonTheme { diff --git a/crates/hooks/src/use_canvas.rs b/crates/hooks/src/use_canvas.rs index 127ca8236..a7d46a13b 100644 --- a/crates/hooks/src/use_canvas.rs +++ b/crates/hooks/src/use_canvas.rs @@ -32,8 +32,8 @@ impl UseCanvas { /// ## Usage /// ```rust,no_run /// # use freya::prelude::*; -/// fn app(cx: Scope) -> Element { -/// let canvas = use_canvas(cx, (), |_| { +/// fn app() -> Element { +/// let canvas = use_canvas((), |_| { /// Box::new(|canvas, font_collection, area| { /// // Draw using the canvas ! /// }) @@ -41,7 +41,7 @@ impl UseCanvas { /// /// rsx!( /// Canvas { -/// canvas: canvas +/// canvas /// } /// ) /// } diff --git a/crates/hooks/src/use_theme.rs b/crates/hooks/src/use_theme.rs index b1b60b77b..98d3a954d 100644 --- a/crates/hooks/src/use_theme.rs +++ b/crates/hooks/src/use_theme.rs @@ -29,9 +29,8 @@ pub fn use_get_theme() -> Theme { /// This macro has three arguments separator by commas. /// -/// 1. The context (`cx: Scope`). Just pass in `cx`. -/// 2. The theme property. This should be `&cx.props.theme`. -/// 3. The name of the theme that you want to use. +/// 1. The theme property. This should be `&cx.props.theme`. +/// 2. The name of the theme that you want to use. /// /// # Examples /// diff --git a/examples/hotreload.rs b/examples/hotreload.rs index 47635bad8..e255d2035 100644 --- a/examples/hotreload.rs +++ b/examples/hotreload.rs @@ -11,8 +11,8 @@ fn main() { launch(app); } -fn app(cx: Scope) -> Element { - let mut count = use_state(cx, || 0); +fn app() -> Element { + let mut count = use_signal(|| 0); rsx!( rect { overflow: "clip", @@ -41,7 +41,7 @@ fn app(cx: Scope) -> Element { } #[allow(non_snake_case)] -fn Comp(cx: Scope) -> Element { +fn Comp() -> Element { rsx!(rect { width: "50%", height: "100%", diff --git a/examples/i18n.rs b/examples/i18n.rs index 260dc6bb8..d3db5e7a0 100644 --- a/examples/i18n.rs +++ b/examples/i18n.rs @@ -18,8 +18,8 @@ static EN_US: &str = include_str!("./en-US.json"); static ES_ES: &str = include_str!("./es-ES.json"); #[allow(non_snake_case)] -fn Body(cx: Scope) -> Element { - let i18 = use_i18(cx); +fn Body() -> Element { + let i18 = use_i18(); let change_to_english = move |_| i18.set_language("en-US".parse().unwrap()); let change_to_spanish = move |_| i18.set_language("es-ES".parse().unwrap()); @@ -31,8 +31,8 @@ fn Body(cx: Scope) -> Element { width: "100%", height: "100%", rect { - label { translate!(i18, "messages.hello_world") } - label { translate!(i18, "messages.hello", name: "Dioxus") } + label { {translate!(i18, "messages.hello_world")} } + label { {translate!(i18, "messages.hello", name: "Dioxus")} } rect { direction: "horizontal", Button { @@ -53,17 +53,12 @@ fn Body(cx: Scope) -> Element { ) } -fn app(cx: Scope) -> Element { - use_init_i18n( - cx, - "en-US".parse().unwrap(), - "en-US".parse().unwrap(), - || { - let en_us = Language::from_str(EN_US).unwrap(); - let es_es = Language::from_str(ES_ES).unwrap(); - vec![en_us, es_es] - }, - ); +fn app() -> Element { + use_init_i18n("en-US".parse().unwrap(), "en-US".parse().unwrap(), || { + let en_us = Language::from_str(EN_US).unwrap(); + let es_es = Language::from_str(ES_ES).unwrap(); + vec![en_us, es_es] + }); rsx!(Body {}) } diff --git a/examples/opacity.rs b/examples/opacity.rs index e1ef66c03..239cc876f 100644 --- a/examples/opacity.rs +++ b/examples/opacity.rs @@ -13,7 +13,7 @@ fn main() { fn app() -> Element { let ferris = bytes_to_data(FERRIS); - let opacity = use_state(|| 70.0); + let mut opacity = use_signal(|| 70.0); rsx!( rect { @@ -36,8 +36,8 @@ fn app() -> Element { } Slider { width: "100", - value: *opacity.get(), - onmoved: |p| { + value: *opacity.read(), + onmoved: move |p| { opacity.set(p); } } diff --git a/examples/render_canvas.rs b/examples/render_canvas.rs index 023caac2a..c8563289e 100644 --- a/examples/render_canvas.rs +++ b/examples/render_canvas.rs @@ -47,7 +47,7 @@ fn app() -> Element { state += 1; }, Canvas { - canvas: canvas, + canvas, theme: theme_with!(CanvasTheme { background: "black".into(), width: "100%".into(), diff --git a/examples/shader.rs b/examples/shader.rs index e6eaca7c8..e3080bf17 100644 --- a/examples/shader.rs +++ b/examples/shader.rs @@ -89,7 +89,7 @@ fn app() -> Element { rsx!( rect { Canvas { - canvas: canvas, + canvas, theme: theme_with!(CanvasTheme { background: "black".into(), width: "100%".into(), diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 75226218b..9fa5e96ca 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -6,8 +6,8 @@ import { FaGithub, FaDiscord } from 'react-icons/fa' import { GoBook } from 'react-icons/go' const EXAMPLE_CODE = ` -fn app(cx: Scope) -> Element { - let mut count = use_state(cx, || 0); +fn app() -> Element { + let mut count = use_signal(|| 0); rsx!( rect { From 2b9498dae2355072488c191b3e81107b9855ee84 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 12:04:08 +0100 Subject: [PATCH 11/26] clean up --- examples/floating_editors.rs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs index 86562ace6..f11f31092 100644 --- a/examples/floating_editors.rs +++ b/examples/floating_editors.rs @@ -189,11 +189,9 @@ fn Editor() -> Element { }; let font_weight = if *is_bold.read() { "bold" } else { "normal" }; - // TODO: Waiting for Dioxus to bring back this hook - /* use_on_create(move || { + use_hook(|| { focus_manager.focus(); - async move {} - }); */ + }); let onclick = { to_owned![focus_manager]; From 87479630819f96c40c7853ff07b912d1e9717569 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 12:05:07 +0100 Subject: [PATCH 12/26] fix --- examples/floating_editors.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs index f11f31092..d8216bd33 100644 --- a/examples/floating_editors.rs +++ b/examples/floating_editors.rs @@ -162,7 +162,7 @@ fn app() -> Element { #[allow(non_snake_case)] fn Editor() -> Element { - let focus_manager = use_focus(); + let mut focus_manager = use_focus(); let editable = use_editable( || { EditableConfig::new("Lorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet".to_string()) From bb9bfef1902e6750f8a1f06331e617af7790c755 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 13:46:52 +0100 Subject: [PATCH 13/26] fixes and improvements --- crates/components/src/slider.rs | 17 ++++++++++++++--- crates/hooks/src/theming/dark.rs | 1 + crates/hooks/src/theming/light.rs | 1 + crates/hooks/src/theming/mod.rs | 1 + crates/hooks/src/use_focus.rs | 2 +- 5 files changed, 18 insertions(+), 4 deletions(-) diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index e7f241db1..8049c2d39 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -2,7 +2,7 @@ use dioxus::prelude::*; use freya_elements::elements as dioxus_elements; use freya_elements::events::{MouseEvent, WheelEvent}; -use freya_hooks::{use_applied_theme, use_node, use_platform, SliderThemeWith}; +use freya_hooks::{use_applied_theme, use_node, use_platform, use_focus, SliderThemeWith}; use tracing::info; use winit::window::CursorIcon; @@ -84,12 +84,14 @@ pub fn Slider( }: SliderProps, ) -> Element { let theme = use_applied_theme!(&theme, slider); + let focus = use_focus(); let status = use_signal(SliderStatus::default); let mut clicking = use_signal(|| false); let platform = use_platform(); + let (node_reference, size) = use_node(); let value = ensure_correct_slider_range(value); - let (node_reference, size) = use_node(); + let focus_id = focus.attribute(); use_drop({ to_owned![status, platform]; @@ -131,8 +133,9 @@ pub fn Slider( }; let onmousedown = { - to_owned![clicking, onmoved]; + to_owned![clicking, onmoved, focus]; move |e: MouseEvent| { + focus.focus(); clicking.set(true); let coordinates = e.get_element_coordinates(); let x = coordinates.x - 6.0; @@ -156,6 +159,11 @@ pub fn Slider( }; let inner_width = (size.area.width() - 15.0) * (value / 100.0) as f32; + let border = if focus.is_selected() { + format!("2 solid {}", theme.border_fill) + } else { + format!("none") + }; rsx!( rect { @@ -164,12 +172,15 @@ pub fn Slider( height: "20", onmousedown, onglobalclick: onclick, + focus_id, onmouseenter, onglobalmouseover: onmouseover, onmouseleave, onwheel: onwheel, main_align: "center", cross_align: "center", + border: "{border}", + corner_radius: "8", rect { background: "{theme.background}", width: "100%", diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs index eb1eed853..a5a300d2b 100644 --- a/crates/hooks/src/theming/dark.rs +++ b/crates/hooks/src/theming/dark.rs @@ -12,6 +12,7 @@ pub const DARK_THEME: Theme = Theme { background: cow_borrowed!("rgb(60, 60, 60)"), thumb_background: cow_borrowed!("rgb(60, 60, 60)"), thumb_inner_background: cow_borrowed!("rgb(255, 95, 0)"), + border_fill: cow_borrowed!("rgb(110, 110, 110)"), }, button: ButtonTheme { background: cow_borrowed!("rgb(35, 35, 35)"), diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs index b991b514c..5ea49f6bd 100644 --- a/crates/hooks/src/theming/light.rs +++ b/crates/hooks/src/theming/light.rs @@ -12,6 +12,7 @@ pub const LIGHT_THEME: Theme = Theme { background: cow_borrowed!("rgb(210, 210, 210)"), thumb_background: cow_borrowed!("rgb(210, 210, 210)"), thumb_inner_background: cow_borrowed!("rgb(103, 80, 164)"), + border_fill: cow_borrowed!("rgb(210, 210, 210)"), }, button: ButtonTheme { background: cow_borrowed!("rgb(245, 245, 245)"), diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs index 13e48f432..b9f632123 100644 --- a/crates/hooks/src/theming/mod.rs +++ b/crates/hooks/src/theming/mod.rs @@ -339,6 +339,7 @@ define_theme! { background: str, thumb_background: str, thumb_inner_background: str, + border_fill: str, } } diff --git a/crates/hooks/src/use_focus.rs b/crates/hooks/src/use_focus.rs index 1f5983967..f243de731 100644 --- a/crates/hooks/src/use_focus.rs +++ b/crates/hooks/src/use_focus.rs @@ -74,7 +74,7 @@ pub fn use_focus() -> UseFocus { /// Create a focus provider. pub fn use_init_focus() { use_context_provider::>>(|| Signal::new(None)); - use_context_provider::>(|| Signal::new(NavigationMode::Keyboard)); + use_context_provider::>(|| Signal::new(NavigationMode::NotKeyboard)); } #[cfg(test)] From 6a5156f6800f8bb224953d11098b06228b4e4693 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 13:48:48 +0100 Subject: [PATCH 14/26] clean up --- crates/components/src/button.rs | 2 +- crates/components/src/dropdown.rs | 4 ++-- crates/components/src/network_image.rs | 2 +- crates/components/src/slider.rs | 2 +- crates/components/src/switch.rs | 2 +- crates/hooks/src/use_accessibility.rs | 2 +- crates/hooks/src/use_animation.rs | 9 +++++---- 7 files changed, 12 insertions(+), 11 deletions(-) diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs index 21d999c6f..bb44cc87d 100644 --- a/crates/components/src/button.rs +++ b/crates/components/src/button.rs @@ -133,7 +133,7 @@ pub fn Button(props: ButtonProps) -> Element { onmouseenter, onmouseleave, onkeydown, - focus_id: focus_id, + focus_id, width: "{width}", height: "{height}", padding: "{padding}", diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs index eace50f5d..331403062 100644 --- a/crates/components/src/dropdown.rs +++ b/crates/components/src/dropdown.rs @@ -115,7 +115,7 @@ where rsx!( rect { color: "{color}", - focus_id: focus_id, + focus_id, role: "button", background: "{background}", padding: "6 22 6 16", @@ -273,7 +273,7 @@ where onclick, onkeydown, margin: "4", - focus_id: focus_id, + focus_id, background: "{button_background}", color: "{font_theme.color}", corner_radius: "8", diff --git a/crates/components/src/network_image.rs b/crates/components/src/network_image.rs index 280d4de5d..5f331b98a 100644 --- a/crates/components/src/network_image.rs +++ b/crates/components/src/network_image.rs @@ -122,7 +122,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element { rsx!(image { height: "{height}", width: "{width}", - focus_id: focus_id, + focus_id, image_data: image_data, role: "image", alt: alt diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index 8049c2d39..853037952 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -2,7 +2,7 @@ use dioxus::prelude::*; use freya_elements::elements as dioxus_elements; use freya_elements::events::{MouseEvent, WheelEvent}; -use freya_hooks::{use_applied_theme, use_node, use_platform, use_focus, SliderThemeWith}; +use freya_hooks::{use_applied_theme, use_focus, use_node, use_platform, SliderThemeWith}; use tracing::info; use winit::window::CursorIcon; diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 5e721e38d..6cce9b6c7 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -147,7 +147,7 @@ pub fn Switch(props: SwitchProps) -> Element { onmouseleave, onkeydown, onclick, - focus_id: focus_id, + focus_id, rect { width: "100%", height: "100%", diff --git a/crates/hooks/src/use_accessibility.rs b/crates/hooks/src/use_accessibility.rs index ceef31c9e..adb6a7ac2 100644 --- a/crates/hooks/src/use_accessibility.rs +++ b/crates/hooks/src/use_accessibility.rs @@ -62,7 +62,7 @@ mod test { pub async fn focus_accessibility() { #[allow(non_snake_case)] fn OherChild() -> Element { - let focus_manager = use_focus(); + let mut focus_manager = use_focus(); rsx!(rect { width: "100%", diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs index cceea62eb..ecbf3fc3d 100644 --- a/crates/hooks/src/use_animation.rs +++ b/crates/hooks/src/use_animation.rs @@ -124,6 +124,7 @@ mod test { use std::time::Duration; use crate::{use_animation, Animation}; + use dioxus_core::use_hook; use dioxus_hooks::to_owned; use freya::prelude::*; use freya_testing::{events::pointer::MouseButton, launch_test, FreyaEvent}; @@ -132,7 +133,7 @@ mod test { #[tokio::test] pub async fn track_progress() { fn use_animation_app() -> Element { - let animation = use_animation(|| 0.0); + let mut animation = use_animation(|| 0.0); let progress = animation.value(); @@ -175,18 +176,18 @@ mod test { #[tokio::test] pub async fn restart_progress() { fn use_animation_app() -> Element { - let animation = use_animation(|| 10.0); + let mut animation = use_animation(|| 10.0); let progress = animation.value(); - let restart = { + let mut restart = { to_owned![animation]; move || { animation.clear(); } }; - let _ = use_memo(move || { + use_hook(|| { animation.start(Animation::new_linear(10.0..=100.0, 50)); }); From f766526ef0bc7ffaff5521e004b22e59803ad92f Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 14:30:07 +0100 Subject: [PATCH 15/26] updated --- examples/corner_radius.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/corner_radius.rs b/examples/corner_radius.rs index 920fbcee2..3d5d0c9c1 100644 --- a/examples/corner_radius.rs +++ b/examples/corner_radius.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - let mut radius = use_signal(|| 30f32); + let radius = use_signal(|| 30f32); let onwheel = move |e: WheelEvent| { let y = e.get_delta_y() as f32; From ad2980802c57621f69c01223b88efc9ac2ce80fb Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 16:28:13 +0100 Subject: [PATCH 16/26] updated dioxus --- Cargo.toml | 20 ++++++++++---------- examples/switch_theme.rs | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index a15e747c9..9ab8aa0d0 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -26,16 +26,16 @@ freya-testing = { path = "crates/testing", version = "0.1" } freya-engine = { path = "crates/engine", version = "0.1" } torin = { path = "crates/torin", version = "0.1" } -dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} -dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } -dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["hot_reload"] } -dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["dioxus"] } -dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } -dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } -dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } -dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b" } -dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", features = ["file_watcher"], default-features = false } -dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "458c13fb7424be424271b4ee0b6d7a7e5d95bd0b", default-features = false } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs index 60ad9c9fb..898241fa8 100644 --- a/examples/switch_theme.rs +++ b/examples/switch_theme.rs @@ -12,7 +12,7 @@ fn main() { #[allow(non_snake_case)] fn TheOtherSwitch() -> Element { - let mut theme = use_theme(); + let theme = use_theme(); let is_enabled = theme.read().name == "dark"; From e4757408def4175adac3b261effa439cc8831dcf Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 16:31:47 +0100 Subject: [PATCH 17/26] fix --- examples/mouse_trace.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/mouse_trace.rs b/examples/mouse_trace.rs index 6d76e32c8..9d7b847ee 100644 --- a/examples/mouse_trace.rs +++ b/examples/mouse_trace.rs @@ -46,7 +46,7 @@ fn Box() -> Element { } fn app() -> Element { - let mut positions = use_signal::>(Vec::new); + let positions = use_signal::>(Vec::new); let onmouseover = move |e: MouseEvent| { let coordinates = e.get_screen_coordinates(); @@ -70,7 +70,7 @@ fn app() -> Element { onmouseover, width: "100%", height: "100%", - positions.read().iter().map(|pos| rsx!( + {positions.read().iter().map(|pos| rsx!( rect { width: "0", height: "0", @@ -78,7 +78,7 @@ fn app() -> Element { offset_y: "{pos.y}", Box {} } - )) + ))} } ) } From de402353a1613f252398fd69ffedb59a16c6a5fd Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 16:38:47 +0100 Subject: [PATCH 18/26] updated dioxus-std --- Cargo.toml | 2 +- examples/i18n.rs | 10 ++++++++-- examples/switch_theme.rs | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 9ab8aa0d0..a99aebcd1 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -69,7 +69,7 @@ freya-core = { workspace = true } reqwest = { version = "0.11.22", features = ["json"] } serde = "1.0.189" tracing-subscriber = "0.3.17" -dioxus-std = { version = "0.4", features = ["i18n"] } +dioxus-std = { git = "https://github.com/DioxusLabs/dioxus-std", rev = "137b4149dc86a648119eef8f331e3a682c2c6b62", features = ["i18n"] } rand = "0.8.5" dioxus-router = { workspace = true } itertools = "0.11.0" diff --git a/examples/i18n.rs b/examples/i18n.rs index d3db5e7a0..2b5043036 100644 --- a/examples/i18n.rs +++ b/examples/i18n.rs @@ -21,8 +21,14 @@ static ES_ES: &str = include_str!("./es-ES.json"); fn Body() -> Element { let i18 = use_i18(); - let change_to_english = move |_| i18.set_language("en-US".parse().unwrap()); - let change_to_spanish = move |_| i18.set_language("es-ES".parse().unwrap()); + let change_to_english = { + to_owned![i18]; + move |_| i18.set_language("en-US".parse().unwrap()) + }; + let change_to_spanish = { + to_owned![i18]; + move |_| i18.set_language("es-ES".parse().unwrap()) + }; rsx!( rect { diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs index 898241fa8..10333900f 100644 --- a/examples/switch_theme.rs +++ b/examples/switch_theme.rs @@ -30,7 +30,7 @@ fn TheOtherSwitch() -> Element { fn app() -> Element { use_init_default_theme(); - let mut enabled = use_signal(|| true); + let enabled = use_signal(|| true); let is_enabled = if *enabled.read() { "Yes" } else { "No" }; From 894d5a4b9aa32f3f3b9d001c00664aaeedba842d Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 16:47:41 +0100 Subject: [PATCH 19/26] fix --- crates/hooks/src/use_focus.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/hooks/src/use_focus.rs b/crates/hooks/src/use_focus.rs index f243de731..b3398c96b 100644 --- a/crates/hooks/src/use_focus.rs +++ b/crates/hooks/src/use_focus.rs @@ -89,7 +89,7 @@ mod test { pub async fn track_focus() { #[allow(non_snake_case)] fn OherChild() -> Element { - let focus_manager = use_focus(); + let mut focus_manager = use_focus(); rsx!( rect { From 12260f9c0a3258094cb0dfa89781c4982fb85083 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 18:56:10 +0100 Subject: [PATCH 20/26] fix --- crates/hooks/src/use_animation.rs | 2 +- crates/hooks/src/use_animation_transition.rs | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs index ecbf3fc3d..de32f8fbf 100644 --- a/crates/hooks/src/use_animation.rs +++ b/crates/hooks/src/use_animation.rs @@ -91,7 +91,7 @@ impl AnimationManager { /// ```rust,no_run /// # use freya::prelude::*; /// fn app() -> Element { -/// let animation = use_animation(|| 0.0); +/// let mut animation = use_animation(|| 0.0); /// /// let progress = animation.value(); /// diff --git a/crates/hooks/src/use_animation_transition.rs b/crates/hooks/src/use_animation_transition.rs index ee5f0d1dc..487eac9ac 100644 --- a/crates/hooks/src/use_animation_transition.rs +++ b/crates/hooks/src/use_animation_transition.rs @@ -350,6 +350,8 @@ mod test { // Enable event loop ticker utils.config().enable_ticker(true); + sleep(Duration::from_millis(15)).await; + // State in the end utils.wait_for_update().await; From e7d722a72ca11d63c559a5f64340b3df329e1962 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 19:07:56 +0100 Subject: [PATCH 21/26] fix --- crates/testing/tests/test.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/testing/tests/test.rs b/crates/testing/tests/test.rs index 8c70f38fd..be604c121 100644 --- a/crates/testing/tests/test.rs +++ b/crates/testing/tests/test.rs @@ -24,7 +24,7 @@ async fn with_state() { fn stateful_app() -> Element { let mut state = use_signal(|| false); - let _ = use_memo(move || { + use_effect(move || { state.set(true); }); From c0725fcea63afb303f4c3721836b383c1707c1ed Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 19:16:37 +0100 Subject: [PATCH 22/26] fixes --- crates/components/src/dropdown.rs | 19 ++++++++-------- .../src/scroll_views/virtual_scroll_view.rs | 1 + crates/components/src/switch.rs | 2 +- examples/dropdown.rs | 22 +++++++++---------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs index 331403062..14140a892 100644 --- a/crates/components/src/dropdown.rs +++ b/crates/components/src/dropdown.rs @@ -170,15 +170,16 @@ pub enum DropdownStatus { /// rsx!( /// Dropdown { /// value: selected_dropdown.read().clone(), -/// values.read().iter().map(|ch| { -/// rsx!( -/// DropdownItem { -/// value: ch.to_string(), -/// onclick: move |_| selected_dropdown.set(ch.to_string()), -/// label { "{ch}" } -/// } -/// ) -/// }) +/// for ch in values { +/// DropdownItem { +/// value: ch.to_string(), +/// onclick: { +/// to_owned![ch]; +/// move |_| selected_dropdown.set(ch.clone()) +/// }, +/// label { "{ch}" } +/// } +/// } /// } /// ) /// } diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index ddad684d0..bc54bca4c 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -67,6 +67,7 @@ fn get_render_range( /// /// ```no_run /// # use freya::prelude::*; +/// # use std::rc::Rc; /// fn app() -> Element { /// rsx!( /// VirtualScrollView { diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 6cce9b6c7..561199392 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -47,7 +47,7 @@ pub enum SwitchStatus { /// Switch { /// enabled: *enabled.read(), /// ontoggled: move |_| { -/// enabled.set(!enabled.get()); +/// enabled.with_mut(|v| *v = !*v); /// } /// } /// ) diff --git a/examples/dropdown.rs b/examples/dropdown.rs index 8da8921f7..6da3937d7 100644 --- a/examples/dropdown.rs +++ b/examples/dropdown.rs @@ -22,18 +22,16 @@ fn app() -> Element { rsx!( Dropdown { value: selected_dropdown.read().clone(), - {values.into_iter().map(move |ch| { - rsx!( - DropdownItem { - value: ch.clone(), - onclick: { - to_owned![ch]; - move |_| selected_dropdown.set(ch.clone()) - }, - label { "{ch}" } - } - ) - })} + for ch in values { + DropdownItem { + value: ch.clone(), + onclick: { + to_owned![ch]; + move |_| selected_dropdown.set(ch.clone()) + }, + label { "{ch}" } + } + } } ) } From 569559714e4fe3cf87faf8f43b5b325590a38c85 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 19:20:18 +0100 Subject: [PATCH 23/26] cleanup --- examples/input.rs | 2 +- examples/massive.rs | 2 +- examples/mouse.rs | 4 ++-- examples/password.rs | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/input.rs b/examples/input.rs index f7121da48..fec32b2eb 100644 --- a/examples/input.rs +++ b/examples/input.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - let mut values = use_signal(|| (String::new(), String::new())); + let values = use_signal(|| (String::new(), String::new())); rsx!( rect { diff --git a/examples/massive.rs b/examples/massive.rs index 9ca69a01a..ef2b3b882 100644 --- a/examples/massive.rs +++ b/examples/massive.rs @@ -7,7 +7,7 @@ fn main() { #[allow(non_snake_case)] fn StatefulSwitch() -> Element { - let mut enabled = use_signal(|| false); + let enabled = use_signal(|| false); rsx!(Switch { enabled: *enabled.read(), diff --git a/examples/mouse.rs b/examples/mouse.rs index 5c93325d8..8aea7a81c 100644 --- a/examples/mouse.rs +++ b/examples/mouse.rs @@ -27,8 +27,8 @@ fn app() -> Element { #[allow(non_snake_case)] fn Area() -> Element { - let mut cursor_pos_over = use_signal(|| (0f64, 0f64)); - let mut cursor_pos_click = use_signal(|| (0f64, 0f64)); + let cursor_pos_over = use_signal(|| (0f64, 0f64)); + let cursor_pos_click = use_signal(|| (0f64, 0f64)); let cursor_moved = move |e: MouseEvent| { cursor_pos_over.with_mut(|cursor_pos| { diff --git a/examples/password.rs b/examples/password.rs index a39e4cb22..dc092f276 100644 --- a/examples/password.rs +++ b/examples/password.rs @@ -11,7 +11,7 @@ fn main() { fn app() -> Element { let mut password = use_signal(|| String::new()); - let mut is_hidden = use_signal(|| true); + let is_hidden = use_signal(|| true); rsx!( rect { From 98535544e9331b1e38f953988f6befa7d7697a83 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 19:23:37 +0100 Subject: [PATCH 24/26] mmm --- crates/hooks/src/use_animation.rs | 3 +++ crates/hooks/src/use_animation_transition.rs | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs index de32f8fbf..c06f1c4ae 100644 --- a/crates/hooks/src/use_animation.rs +++ b/crates/hooks/src/use_animation.rs @@ -226,6 +226,9 @@ mod test { // Enable event loop ticker utils.config().enable_ticker(true); + // Already finished + sleep(Duration::from_millis(50)).await; + // State has been restarted utils.wait_for_update().await; utils.wait_for_update().await; diff --git a/crates/hooks/src/use_animation_transition.rs b/crates/hooks/src/use_animation_transition.rs index 487eac9ac..15f4c91aa 100644 --- a/crates/hooks/src/use_animation_transition.rs +++ b/crates/hooks/src/use_animation_transition.rs @@ -350,7 +350,8 @@ mod test { // Enable event loop ticker utils.config().enable_ticker(true); - sleep(Duration::from_millis(15)).await; + // Already finished + sleep(Duration::from_millis(50)).await; // State in the end utils.wait_for_update().await; From 88be15b70ca9d400f2a43ebc2af34a305b688ac1 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 20:43:58 +0100 Subject: [PATCH 25/26] mmmm --- crates/hooks/src/use_animation.rs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs index c06f1c4ae..48c6556f3 100644 --- a/crates/hooks/src/use_animation.rs +++ b/crates/hooks/src/use_animation.rs @@ -166,6 +166,9 @@ mod test { // Enable event loop ticker utils.config().enable_ticker(true); + // Already finished + sleep(Duration::from_millis(50)).await; + // State in the end utils.wait_for_update().await; From a48259030d1ba82fe3427c9282742f1d6cb7bf8d Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 25 Jan 2024 20:53:19 +0100 Subject: [PATCH 26/26] fix --- crates/freya/src/_docs/animating.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/freya/src/_docs/animating.rs b/crates/freya/src/_docs/animating.rs index 2c9ca4a7c..73cf28f0e 100644 --- a/crates/freya/src/_docs/animating.rs +++ b/crates/freya/src/_docs/animating.rs @@ -28,7 +28,7 @@ //! //! let progress = animation.value(); //! -//! use_hook(move |_| { +//! use_hook(move || { //! animation.start(Animation::new_linear(0.0..=100.0, 50)); //! }); //!