From aa6447912736f3c0dd61d9f37e93be29aa4a338a Mon Sep 17 00:00:00 2001 From: tigerros Date: Mon, 29 Jan 2024 19:20:50 +0100 Subject: [PATCH 01/32] docs: Remove outdated info from theming docs (#467) * Update theming.rs * Update theming.rs --- crates/freya/src/_docs/theming.rs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/crates/freya/src/_docs/theming.rs b/crates/freya/src/_docs/theming.rs index a9602cb24..583a848d4 100644 --- a/crates/freya/src/_docs/theming.rs +++ b/crates/freya/src/_docs/theming.rs @@ -1,9 +1,9 @@ //! # Theming //! -//! Freya has built-in support for Theming. -//! //!
⚠️ As of 2023-12-19, extending the base theme is not supported.
//! +//! Freya has built-in support for Theming. +//! //! ### Accessing the current theme //! //! You can access the current theme via the `use_get_theme` hook. @@ -147,8 +147,6 @@ //! } //! ``` //! -//!
⚠️ The comma after the last field in the `theme_with!` macro is required.
-//! //! As you can see, it removes the need for the "With" suffix, because that is already in the macro name. //! More importantly, though, it wraps each field in a `Some`, and adds the spread. //! From 2bdbd6ee786d1299619e589218f32eb178e71076 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 31 Jan 2024 19:29:36 +0100 Subject: [PATCH 02/32] chore(deps): update codecov/codecov-action action to v4 (#488) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/rust.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml index 8162790a8..54de89320 100644 --- a/.github/workflows/rust.yml +++ b/.github/workflows/rust.yml @@ -51,7 +51,7 @@ jobs: rustup component add llvm-tools-preview curl -L https://github.com/mozilla/grcov/releases/latest/download/grcov-x86_64-unknown-linux-gnu.tar.bz2 | tar jxf - ./grcov . --binary-path ./target/debug/deps -s . -t lcov --branch --ignore-not-existing --ignore "../*" --ignore "/*" -o cov.lcov - - uses: codecov/codecov-action@v3 + - uses: codecov/codecov-action@v4 if: runner.os == 'Linux' with: token: ${{ secrets.CODECOV_TOKEN }} From 10ec040e83586582c99ebea42e3c86df694eba1e Mon Sep 17 00:00:00 2001 From: marc2332 Date: Thu, 1 Feb 2024 15:33:31 +0000 Subject: [PATCH 03/32] =?UTF-8?q?Deploying=20to=20main=20from=20@=20marc23?= =?UTF-8?q?32/freya@2bdbd6ee786d1299619e589218f32eb178e71076=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f38c6e2fa..44d14844a 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ fn app(cx: Scope) -> Element { Thanks to my sponsors for supporting this project! 😄 -Alberto MendezStephen Andary +Alberto MendezAndar1an ### Want to try it? 🤔 From 9abeb8cfd32aa4315fc84b835e469c9535facb91 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 14:58:49 +0100 Subject: [PATCH 04/32] bump dx --- Cargo.toml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index c54e543ed..b7404d453 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 = "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 } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } From f5c2f6aa4ddaf3837c9080c76ba547384f08a5b2 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 18:23:07 +0100 Subject: [PATCH 05/32] improvement --- examples/floating_editors.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs index 4c74775b2..64e181c76 100644 --- a/examples/floating_editors.rs +++ b/examples/floating_editors.rs @@ -320,7 +320,7 @@ fn Editor() -> Element { } }; - let onclick = { + let onglobalclick = { to_owned![editable]; move |_: MouseEvent| { editable.process_event(&EditableEvent::Click); @@ -361,7 +361,7 @@ fn Editor() -> Element { cursor_id: "{cursor_id}", onmousedown, onmouseover, - onclick, + onglobalclick, highlights: highlights, text { color: "rgb(240, 240, 240)", From 722cbc54e51dfd757cae081be76a438bdbd2288f Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 20:41:09 +0100 Subject: [PATCH 06/32] fixes --- crates/components/src/cursor_area.rs | 2 +- crates/components/src/drag_drop.rs | 24 ++++++------------- crates/components/src/dropdown.rs | 6 ++--- crates/components/src/external_link.rs | 2 +- crates/components/src/gesture_area.rs | 1 - .../src/scroll_views/scroll_view.rs | 2 +- .../src/scroll_views/virtual_scroll_view.rs | 8 +++---- crates/components/src/switch.rs | 2 +- crates/hooks/src/use_accessibility.rs | 8 +++---- crates/hooks/src/use_animation_transition.rs | 5 ++-- crates/hooks/src/use_camera.rs | 4 ++-- crates/hooks/src/use_canvas.rs | 3 ++- crates/hooks/src/use_editable.rs | 2 +- crates/hooks/src/use_node.rs | 4 ++-- examples/app_dog.rs | 1 - examples/corner_radius.rs | 1 - examples/counter.rs | 1 - examples/floating_editors.rs | 1 - examples/image.rs | 1 - examples/input.rs | 1 - examples/massive.rs | 1 - examples/switch_theme.rs | 1 - examples/virtual_scroll_view.rs | 1 - 23 files changed, 32 insertions(+), 50 deletions(-) diff --git a/crates/components/src/cursor_area.rs b/crates/components/src/cursor_area.rs index 6ec97df05..39b6c3c92 100644 --- a/crates/components/src/cursor_area.rs +++ b/crates/components/src/cursor_area.rs @@ -39,7 +39,7 @@ pub struct CursorAreaProps { #[allow(non_snake_case)] pub fn CursorArea(CursorAreaProps { children, icon }: CursorAreaProps) -> Element { let platform = use_platform(); - let is_hovering = use_signal(|| false); + let mut is_hovering = use_signal(|| false); let onmouseover = { to_owned![platform, is_hovering]; diff --git a/crates/components/src/drag_drop.rs b/crates/components/src/drag_drop.rs index 461534f2b..8c224092f 100644 --- a/crates/components/src/drag_drop.rs +++ b/crates/components/src/drag_drop.rs @@ -24,7 +24,7 @@ pub fn DragProvider(DragProviderProps { children }: DragProviderProp /// [`DragZone`] component properties. #[derive(Props, Clone, PartialEq)] -pub struct DragZoneProps { +pub struct DragZoneProps { /// Element visible when dragging the element. This follows the cursor. drag_element: Element, /// Inner children for the DropZone. @@ -39,14 +39,14 @@ pub struct DragZoneProps { /// See [`DragZoneProps`]. /// #[allow(non_snake_case)] -pub fn DragZone( +pub fn DragZone( DragZoneProps { data, children, drag_element, }: DragZoneProps, ) -> Element { - let drags = use_context::>>(); + let mut drags = use_context::>>(); let mut dragging = use_signal(|| false); let mut pos = use_signal(CursorPoint::default); let (node_reference, size) = use_node_signal(); @@ -108,31 +108,22 @@ pub fn DragZone( } /// [`DropZone`] component properties. -#[derive(Props, PartialEq)] -pub struct DropZoneProps { +#[derive(Props, PartialEq, Clone)] +pub struct DropZoneProps { /// Inner children for the DropZone. children: Element, /// Handler for the `ondrop` event. ondrop: EventHandler, } -impl Clone for DropZoneProps { - fn clone(&self) -> Self { - Self { - children: self.children.clone(), - ondrop: self.ondrop.clone(), - } - } -} - /// Elements from [`DragZone`]s can be dropped here. /// /// # Props /// See [`DropZoneProps`]. /// #[allow(non_snake_case)] -pub fn DropZone(props: DropZoneProps) -> Element { - let drags = use_context::>>(); +pub fn DropZone(props: DropZoneProps) -> Element { + let mut drags = use_context::>>(); let onclick = move |_: MouseEvent| { if let Some(current_drags) = &*drags.read() { @@ -153,7 +144,6 @@ pub fn DropZone(props: DropZoneProps) -> Element { #[cfg(test)] mod test { - use dioxus::signals::use_signal; use freya::prelude::*; use freya_testing::{events::pointer::MouseButton, launch_test, FreyaEvent}; diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs index 7dc3a8d91..71e6ca875 100644 --- a/crates/components/src/dropdown.rs +++ b/crates/components/src/dropdown.rs @@ -14,7 +14,7 @@ use winit::window::CursorIcon; /// [`DropdownItem`] component properties. #[derive(Props, Clone, PartialEq)] -pub struct DropdownItemProps { +pub struct DropdownItemProps { /// Theme override. pub theme: Option, /// Selectable items, like [`DropdownItem`] @@ -132,7 +132,7 @@ where /// [`Dropdown`] component properties. #[derive(Props, Clone, PartialEq)] -pub struct DropdownProps { +pub struct DropdownProps { /// Theme override. pub theme: Option, /// Selectable items, like [`DropdownItem`] @@ -188,7 +188,7 @@ pub fn Dropdown(props: DropdownProps) -> Element where T: PartialEq + Clone + Display + 'static, { - let selected = use_context_provider(|| Signal::new(props.value.clone())); + let mut selected = use_context_provider(|| Signal::new(props.value.clone())); let theme = use_applied_theme!(&props.theme, dropdown); let mut focus = use_focus(); let mut status = use_signal(DropdownStatus::default); diff --git a/crates/components/src/external_link.rs b/crates/components/src/external_link.rs index 408fa6f28..6c56a9a59 100644 --- a/crates/components/src/external_link.rs +++ b/crates/components/src/external_link.rs @@ -50,7 +50,7 @@ pub struct ExternalLinkProps { #[allow(non_snake_case)] pub fn ExternalLink(props: ExternalLinkProps) -> Element { let theme = use_applied_theme!(&props.theme, external_link); - let is_hovering = use_signal(|| false); + let mut is_hovering = use_signal(|| false); let onmouseover = move |_: MouseEvent| { *is_hovering.write() = true; diff --git a/crates/components/src/gesture_area.rs b/crates/components/src/gesture_area.rs index 6fba5379b..1fa83505d 100644 --- a/crates/components/src/gesture_area.rs +++ b/crates/components/src/gesture_area.rs @@ -173,7 +173,6 @@ pub fn GestureArea(props: GestureAreaProps) -> 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}; diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs index 27246a7df..4a7356632 100644 --- a/crates/components/src/scroll_views/scroll_view.rs +++ b/crates/components/src/scroll_views/scroll_view.rs @@ -56,7 +56,7 @@ pub struct ScrollViewProps { /// #[allow(non_snake_case)] pub fn ScrollView(props: ScrollViewProps) -> Element { - let clicking_scrollbar = use_signal::>(|| None); + let mut clicking_scrollbar = use_signal::>(|| None); let mut clicking_shift = use_signal(|| false); let mut clicking_alt = use_signal(|| false); let mut scrolled_y = use_signal(|| 0); diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index 45940be5b..b1475662a 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -16,8 +16,8 @@ use crate::{ type BuilderFunction = dyn Fn((usize, usize, &Option)) -> Element; /// [`VirtualScrollView`] component properties. -#[derive(Props, Clone)] -pub struct VirtualScrollViewProps { +#[derive(Props, Clone, PartialEq)] +pub struct VirtualScrollViewProps { /// Theme override. pub theme: Option, /// Quantity of items in the VirtualScrollView. @@ -90,8 +90,8 @@ fn get_render_range( /// } /// ``` #[allow(non_snake_case)] -pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element { - let clicking_scrollbar = use_signal::>(|| None); +pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element { + let mut clicking_scrollbar = use_signal::>(|| None); let mut clicking_shift = use_signal(|| false); let mut clicking_alt = use_signal(|| false); let mut scrolled_y = use_signal(|| 0); diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 4475c492a..603f2ee08 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -59,7 +59,7 @@ pub fn Switch(props: SwitchProps) -> Element { let mut animation = use_animation(|| 0.0); let theme = use_applied_theme!(&props.theme, switch); let platform = use_platform(); - let status = use_signal(SwitchStatus::default); + let mut status = use_signal(SwitchStatus::default); let focus = use_focus(); let focus_id = focus.attribute(); diff --git a/crates/hooks/src/use_accessibility.rs b/crates/hooks/src/use_accessibility.rs index 8b52f12a5..584de70e9 100644 --- a/crates/hooks/src/use_accessibility.rs +++ b/crates/hooks/src/use_accessibility.rs @@ -4,8 +4,8 @@ use dioxus_core::{ prelude::{consume_context, spawn, try_consume_context}, use_hook, }; -use dioxus_hooks::use_context_provider; -use dioxus_signals::{use_effect, Readable, Signal, Writable}; +use dioxus_hooks::{use_context_provider, use_effect}; +use dioxus_signals::{Readable, Signal, Writable}; use freya_common::EventMessage; use freya_core::{ navigation_mode::{NavigationMode, NavigatorState}, @@ -20,9 +20,9 @@ pub type AccessibilityIdCounter = Rc>; /// Sync both the Focus shared state and the platform accessibility focus pub fn use_init_accessibility() { - let focused_id = + let mut focused_id = use_context_provider::>(|| Signal::new(ACCESSIBILITY_ROOT_ID)); - let navigation_mode = + let mut navigation_mode = use_context_provider::>(|| Signal::new(NavigationMode::NotKeyboard)); use_context_provider(|| Rc::new(RefCell::new(0u64))); let platform = use_platform(); diff --git a/crates/hooks/src/use_animation_transition.rs b/crates/hooks/src/use_animation_transition.rs index 0af3f9c42..dbe1eb257 100644 --- a/crates/hooks/src/use_animation_transition.rs +++ b/crates/hooks/src/use_animation_transition.rs @@ -1,5 +1,6 @@ use dioxus_core::prelude::spawn; -use dioxus_signals::{use_memo_with_dependencies, Dependency, Readable, Signal, Writable}; +use dioxus_hooks::{use_memo_with_dependencies, Dependency}; +use dioxus_signals::{Readable, Signal, Writable}; use freya_engine::prelude::Color; use freya_node_state::Parse; use tokio::time::Instant; @@ -165,7 +166,7 @@ impl TransitionsManager { let platform = self.platform.clone(); let mut ticker = platform.new_ticker(); let transitions = self.transitions; - let transitions_storage = self.transitions_storage; + let mut transitions_storage = self.transitions_storage; let mut current_animation_id = self.current_animation_id; // Set as current this new animation diff --git a/crates/hooks/src/use_camera.rs b/crates/hooks/src/use_camera.rs index 37f299068..43122a9ce 100644 --- a/crates/hooks/src/use_camera.rs +++ b/crates/hooks/src/use_camera.rs @@ -2,8 +2,8 @@ use std::sync::{Arc, Mutex}; use crate::use_platform; use dioxus_core::{prelude::spawn, use_hook, AttributeValue}; -use dioxus_hooks::to_owned; -use dioxus_signals::{use_signal, Signal, Writable}; +use dioxus_hooks::{to_owned, use_signal}; +use dioxus_signals::{Signal, Writable}; use freya_node_state::{CustomAttributeValues, ImageReference}; pub use nokhwa::utils::{CameraIndex, RequestedFormatType, Resolution}; use nokhwa::{pixel_format::RgbFormat, utils::RequestedFormat, Camera, NokhwaError}; diff --git a/crates/hooks/src/use_canvas.rs b/crates/hooks/src/use_canvas.rs index a7d46a13b..946dcde68 100644 --- a/crates/hooks/src/use_canvas.rs +++ b/crates/hooks/src/use_canvas.rs @@ -1,7 +1,8 @@ use std::sync::Arc; use dioxus_core::AttributeValue; -use dioxus_signals::{use_memo_with_dependencies, Dependency, Readable}; +use dioxus_hooks::{use_memo_with_dependencies, Dependency}; +use dioxus_signals::Readable; use freya_node_state::{CanvasReference, CanvasRunner, CustomAttributeValues}; /// Holds a rendering hook callback that allows to render to the Canvas. diff --git a/crates/hooks/src/use_editable.rs b/crates/hooks/src/use_editable.rs index 1942327da..953c85c74 100644 --- a/crates/hooks/src/use_editable.rs +++ b/crates/hooks/src/use_editable.rs @@ -156,7 +156,7 @@ pub fn use_editable(initializer: impl Fn() -> EditableConfig, mode: EditableMode use_hook(|| { let text_id = Uuid::new_v4(); let config = initializer(); - let editor = Signal::new(RopeEditor::new(config.content, config.cursor, mode)); + let mut editor = Signal::new(RopeEditor::new(config.content, config.cursor, mode)); let selecting_text_with_mouse = Signal::new(None); let (cursor_sender, mut cursor_receiver) = unbounded_channel::(); let cursor_reference = CursorReference { diff --git a/crates/hooks/src/use_node.rs b/crates/hooks/src/use_node.rs index 0273a8456..a8fd8bc42 100644 --- a/crates/hooks/src/use_node.rs +++ b/crates/hooks/src/use_node.rs @@ -1,6 +1,6 @@ use dioxus_core::{prelude::spawn, use_hook, AttributeValue}; -use dioxus_hooks::to_owned; -use dioxus_signals::{use_signal, Readable, Signal, Writable}; +use dioxus_hooks::{to_owned, use_signal}; +use dioxus_signals::{Readable, Signal, Writable}; use freya_common::NodeReferenceLayout; use freya_node_state::{CustomAttributeValues, NodeReference}; use tokio::sync::mpsc::unbounded_channel; diff --git a/examples/app_dog.rs b/examples/app_dog.rs index 6ecdc0316..6a5578b2c 100644 --- a/examples/app_dog.rs +++ b/examples/app_dog.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; use reqwest::Url; use serde::Deserialize; diff --git a/examples/corner_radius.rs b/examples/corner_radius.rs index 3d5d0c9c1..3fb1c4745 100644 --- a/examples/corner_radius.rs +++ b/examples/corner_radius.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/counter.rs b/examples/counter.rs index a471634cd..25160e129 100644 --- a/examples/counter.rs +++ b/examples/counter.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs index 64e181c76..593009ef4 100644 --- a/examples/floating_editors.rs +++ b/examples/floating_editors.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::events::MouseEvent; use freya::prelude::*; diff --git a/examples/image.rs b/examples/image.rs index f207c016c..bc640853b 100644 --- a/examples/image.rs +++ b/examples/image.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/input.rs b/examples/input.rs index afea326f6..f3b7e50a5 100644 --- a/examples/input.rs +++ b/examples/input.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/massive.rs b/examples/massive.rs index 3efa60605..4f0a7b3f4 100644 --- a/examples/massive.rs +++ b/examples/massive.rs @@ -1,4 +1,3 @@ -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs index fefd1b3f5..8ced79170 100644 --- a/examples/switch_theme.rs +++ b/examples/switch_theme.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; fn main() { diff --git a/examples/virtual_scroll_view.rs b/examples/virtual_scroll_view.rs index 92703c94d..669b14ac7 100644 --- a/examples/virtual_scroll_view.rs +++ b/examples/virtual_scroll_view.rs @@ -3,7 +3,6 @@ windows_subsystem = "windows" )] -use dioxus::signals::use_signal; use freya::prelude::*; use std::rc::Rc; From e6a1d7249cfcd8a90da822bf10e5d5d571737303 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 21:05:08 +0100 Subject: [PATCH 07/32] fixes --- .../src/scroll_views/virtual_scroll_view.rs | 18 +++++++++++++++--- crates/devtools/src/lib.rs | 2 +- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index b1475662a..cd96816d7 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -16,8 +16,8 @@ use crate::{ type BuilderFunction = dyn Fn((usize, usize, &Option)) -> Element; /// [`VirtualScrollView`] component properties. -#[derive(Props, Clone, PartialEq)] -pub struct VirtualScrollViewProps { +#[derive(Props, Clone)] +pub struct VirtualScrollViewProps { /// Theme override. pub theme: Option, /// Quantity of items in the VirtualScrollView. @@ -39,6 +39,18 @@ pub struct VirtualScrollViewProps { pub scroll_with_arrows: bool, } +impl PartialEq for VirtualScrollViewProps { + fn eq(&self, other: &Self) -> bool { + self.theme == other.theme + && self.length == other.length + && self.item_size == other.item_size + && Rc::ptr_eq(&self.builder, &other.builder) + && self.direction == other.direction + && self.show_scrollbar == other.show_scrollbar + && self.scroll_with_arrows == other.scroll_with_arrows + } +} + fn get_render_range( viewport_size: f32, scroll_position: f32, @@ -90,7 +102,7 @@ fn get_render_range( /// } /// ``` #[allow(non_snake_case)] -pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element { +pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element { let mut clicking_scrollbar = use_signal::>(|| None); let mut clicking_shift = use_signal(|| false); let mut clicking_alt = use_signal(|| false); diff --git a/crates/devtools/src/lib.rs b/crates/devtools/src/lib.rs index c6c2d699b..4ee371b14 100644 --- a/crates/devtools/src/lib.rs +++ b/crates/devtools/src/lib.rs @@ -119,7 +119,7 @@ impl PartialEq for DevToolsProps { #[allow(non_snake_case)] pub fn DevTools(props: DevToolsProps) -> Element { - let children = use_context_provider(|| Signal::new(Vec::::new())); + let mut children = use_context_provider(|| Signal::new(Vec::::new())); use_context_provider::>(|| Signal::new(props.hovered_node.clone())); use_init_theme(DARK_THEME); let theme = use_theme(); From eb91fe996aef362fd7ba4d99ccc68e3eac92af3d Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 21:15:11 +0100 Subject: [PATCH 08/32] fixes --- examples/corner_radius.rs | 2 +- examples/drag_drop.rs | 2 +- examples/input.rs | 2 +- examples/mouse.rs | 4 ++-- examples/mouse_trace.rs | 2 +- examples/push_remove.rs | 2 +- examples/rotate.rs | 2 +- examples/switch_theme.rs | 2 +- examples/tic_tac_toe.rs | 4 ++-- examples/ui.rs | 4 ++-- 10 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/corner_radius.rs b/examples/corner_radius.rs index 3fb1c4745..2280c7d61 100644 --- a/examples/corner_radius.rs +++ b/examples/corner_radius.rs @@ -10,7 +10,7 @@ fn main() { } fn app() -> Element { - let radius = use_signal(|| 30f32); + let mut radius = use_signal(|| 30f32); let onwheel = move |e: WheelEvent| { let y = e.get_delta_y() as f32; diff --git a/examples/drag_drop.rs b/examples/drag_drop.rs index 0cc42cd69..f2956c31a 100644 --- a/examples/drag_drop.rs +++ b/examples/drag_drop.rs @@ -51,7 +51,7 @@ fn Column( data: Signal<(Vec, Vec)>, column: Vec, ) -> Element { - let swap = move |el: String, direction: &SwapDirection| { + let mut swap = move |el: String, direction: &SwapDirection| { data.with_mut(|data| { data.0.retain(|e| e != &el); data.1.retain(|e| e != &el); diff --git a/examples/input.rs b/examples/input.rs index f3b7e50a5..d1462554a 100644 --- a/examples/input.rs +++ b/examples/input.rs @@ -10,7 +10,7 @@ fn main() { } fn app() -> Element { - let values = use_signal(|| (String::new(), String::new())); + let mut values = use_signal(|| (String::new(), String::new())); rsx!( rect { diff --git a/examples/mouse.rs b/examples/mouse.rs index b11706886..e091b8dcb 100644 --- a/examples/mouse.rs +++ b/examples/mouse.rs @@ -27,8 +27,8 @@ fn app() -> Element { #[allow(non_snake_case)] fn Area() -> Element { - let cursor_pos_over = use_signal(|| (0f64, 0f64)); - let cursor_pos_click = use_signal(|| (0f64, 0f64)); + let mut cursor_pos_over = use_signal(|| (0f64, 0f64)); + let mut cursor_pos_click = use_signal(|| (0f64, 0f64)); let cursor_moved = move |e: MouseEvent| { let pos = e.get_screen_coordinates(); diff --git a/examples/mouse_trace.rs b/examples/mouse_trace.rs index 9d7b847ee..37da95cf5 100644 --- a/examples/mouse_trace.rs +++ b/examples/mouse_trace.rs @@ -46,7 +46,7 @@ fn Box() -> Element { } fn app() -> Element { - let positions = use_signal::>(Vec::new); + let mut positions = use_signal::>(Vec::new); let onmouseover = move |e: MouseEvent| { let coordinates = e.get_screen_coordinates(); diff --git a/examples/push_remove.rs b/examples/push_remove.rs index 26e1b6de0..cb0d3b655 100644 --- a/examples/push_remove.rs +++ b/examples/push_remove.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - let elements = use_signal(|| Vec::new()); + let mut elements = use_signal(|| Vec::new()); let add = move |_| { let mut rng = rand::thread_rng(); diff --git a/examples/rotate.rs b/examples/rotate.rs index 2a64ea92b..6786e898d 100644 --- a/examples/rotate.rs +++ b/examples/rotate.rs @@ -15,7 +15,7 @@ fn main() { const SPEEDS: (i16, i16, i16) = (2, 3, 6); fn app() -> Element { - let degrees = use_signal(|| (0, 0, 0)); + let mut degrees = use_signal(|| (0, 0, 0)); use_hook(|| { spawn(async move { diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs index 8ced79170..94cda4e82 100644 --- a/examples/switch_theme.rs +++ b/examples/switch_theme.rs @@ -11,7 +11,7 @@ fn main() { #[allow(non_snake_case)] fn TheOtherSwitch() -> Element { - let theme = use_theme(); + let mut theme = use_theme(); let is_enabled = theme.read().name == "dark"; diff --git a/examples/tic_tac_toe.rs b/examples/tic_tac_toe.rs index 07599a673..36cbce41d 100644 --- a/examples/tic_tac_toe.rs +++ b/examples/tic_tac_toe.rs @@ -148,8 +148,8 @@ impl Board { } fn app() -> Element { - let board = use_signal(|| Board::new(3)); - let current_player = use_signal(|| Player::X); + let mut board = use_signal(|| Board::new(3)); + let mut current_player = use_signal(|| Player::X); let message = match &board.read().winner { Some(winner) => format!("Winner is player {winner:?}!!"), diff --git a/examples/ui.rs b/examples/ui.rs index f2a56d18e..120b6c92e 100644 --- a/examples/ui.rs +++ b/examples/ui.rs @@ -155,8 +155,8 @@ fn Card(props: CardProps) -> Element { #[allow(non_snake_case)] fn Area() -> Element { - let cursor_pos_over = use_signal(|| (0f64, 0f64)); - let cursor_pos_click = use_signal(|| (0f64, 0f64)); + let mut cursor_pos_over = use_signal(|| (0f64, 0f64)); + let mut cursor_pos_click = use_signal(|| (0f64, 0f64)); let cursor_moved = move |e: MouseEvent| { let pos = e.get_screen_coordinates(); From 458364408afea40d787930af826abc74730057f2 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Fri, 2 Feb 2024 23:53:24 +0100 Subject: [PATCH 09/32] bump dx --- Cargo.toml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index b7404d453..efbc2f351 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 = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} -dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } -dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["hot_reload"] } -dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["dioxus"] } -dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } -dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } -dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } -dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798" } -dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", features = ["file_watcher"], default-features = false } -dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "894a79d3dff47ba5ce4fcf8ae6ec9836c6ae3798", default-features = false } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } From 32dc45b0d79a85e77b7b6699b1a843b2f765f93e Mon Sep 17 00:00:00 2001 From: Marc Espin Date: Sun, 4 Feb 2024 10:30:50 +0100 Subject: [PATCH 10/32] docs: Fix hotreload typo in docs --- book/src/guides/hot_reload.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/src/guides/hot_reload.md b/book/src/guides/hot_reload.md index a463f7bde..1d61f57dc 100644 --- a/book/src/guides/hot_reload.md +++ b/book/src/guides/hot_reload.md @@ -8,7 +8,7 @@ Before launching your app, you need to initialize the hot-reload context: ```rust, no_run use freya::prelude::*; -use freya::hot_reload::FreyaCtx; +use freya::hotreload::FreyaCtx; fn main() { dioxus_hot_reload::hot_reload_init!(Config::::default()); From bfa5d78b3cfe2681b288b7649a740805cbdaddc4 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Sun, 4 Feb 2024 12:39:52 +0100 Subject: [PATCH 11/32] updated guide --- book/src/guides/getting_started.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/book/src/guides/getting_started.md b/book/src/guides/getting_started.md index 3a303f5e9..9afd38ac4 100644 --- a/book/src/guides/getting_started.md +++ b/book/src/guides/getting_started.md @@ -50,10 +50,12 @@ fn app() -> Element { rect { height: "100%", width: "100%", - background: "rgb(35, 35, 35)", + background: "rgb(0, 119, 182)", color: "white", - padding: "12", + main_align: "center", + cross_align: "center", onclick: move |_| count += 1, + font_size: "35", label { "Click to increase -> {count}" } } ) From 1c0b20ff5ce76a5323381f40ba9ca4e2f2570f8f Mon Sep 17 00:00:00 2001 From: marc2332 Date: Mon, 5 Feb 2024 14:41:17 +0100 Subject: [PATCH 12/32] bump dx --- Cargo.toml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index efbc2f351..089d3cdd7 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 = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} -dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } -dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["hot_reload"] } -dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["dioxus"] } -dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } -dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } -dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } -dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4" } -dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", features = ["file_watcher"], default-features = false } -dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "6bde8b0ce0dd162b9f855ec1d57c6569907ef7e4", default-features = false } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } From 07d02b3153160849d57c563b0ae91be6d3057043 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:23:51 +0100 Subject: [PATCH 13/32] chore: Add note to readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 07883ce5d..18af6fd20 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ Thanks to my sponsors for supporting this project! 😄 ### Want to try it? 🤔 +Note: `main` branch currently depends on Dioxus 0.5. + ⚠️ First, see [Environment setup](https://book.freyaui.dev/setup.html). Clone this repo and run: From 6ec98432aca5c650c7b9d81281a9e6e7a24311e6 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:27:43 +0100 Subject: [PATCH 14/32] reverse book --- book/src/guides/animating.md | 18 ++++---- book/src/guides/effects.md | 4 +- book/src/guides/elements.md | 24 +++++------ book/src/guides/font_style.md | 68 +++++++++++++++--------------- book/src/guides/getting_started.md | 12 +++--- book/src/guides/layout.md | 44 +++++++++---------- book/src/guides/style.md | 20 ++++----- book/src/guides/testing.md | 29 +++++++------ book/src/guides/theming.md | 38 ++++++++--------- book/src/guides/virtualizing.md | 14 +++--- book/src/index.md | 6 +-- 11 files changed, 139 insertions(+), 138 deletions(-) diff --git a/book/src/guides/animating.md b/book/src/guides/animating.md index 08e24d37a..9afdf8808 100644 --- a/book/src/guides/animating.md +++ b/book/src/guides/animating.md @@ -18,16 +18,16 @@ fn main() { launch(app); } - fn app() -> Element { - let mut animation = use_animation(|| 0.0); + fn app(cx: Scope) -> Element { + let animation = use_animation(cx, || 0.0); let progress = animation.value(); - use_hook(move || { + use_memo(cx, (), move |_| { animation.start(Animation::new_linear(0.0..=100.0, 50)); - }) + }); - rsx!(rect { + render!(rect { width: "{progress}", }) } @@ -53,8 +53,8 @@ fn main() { const TARGET: f64 = 500.0; -fn app() -> Element { - let mut animation = use_animation_transition(TransitionAnimation::new_sine_in_out(200), (), || { +fn app(cx: Scope) -> Element { + let animation = use_animation_transition(cx, TransitionAnimation::new_sine_in_out(200), (), || { vec![ Animate::new_size(0.0, TARGET), Animate::new_color("rgb(33, 158, 188)", "white"), @@ -72,7 +72,7 @@ fn app() -> Element { } }; - rsx!( + render!( rect { overflow: "clip", background: "black", @@ -83,7 +83,7 @@ fn app() -> Element { height: "100%", width: "200", background: "{background}", - onclick, + onclick: onclick, } } ) diff --git a/book/src/guides/effects.md b/book/src/guides/effects.md index 5f0c9703a..494fba317 100644 --- a/book/src/guides/effects.md +++ b/book/src/guides/effects.md @@ -11,8 +11,8 @@ The `rotate` attribute let's you rotate an element. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { rotate: "180deg", "Hello, World!" diff --git a/book/src/guides/elements.md b/book/src/guides/elements.md index 660c50e20..eb7afd058 100644 --- a/book/src/guides/elements.md +++ b/book/src/guides/elements.md @@ -16,8 +16,8 @@ You can specify things like [`width`](/guides/layout.html#width), [`paddings`](/ Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { direction: "vertical", label { "Hi!" } @@ -34,8 +34,8 @@ The `label` element simply shows some text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { "Hello World" } @@ -53,9 +53,9 @@ Example: static FERRIS: &[u8] = include_bytes!("./ferris.svg"); -fn app() -> Element { - let ferris = bytes_to_data(FERRIS); - rsx!( +fn app(cx: Scope) -> Element { + let ferris = bytes_to_data(cx, FERRIS); + render!( svg { svg_data: ferris, } @@ -70,9 +70,9 @@ The `image` element, just like `svg` element, require you to pass the image byte ```rust, no_run static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png"); -fn app() -> Element { - let image_data = bytes_to_data(RUST_LOGO); - rsx!( +fn app(cx: Scope) -> Element { + let image_data = bytes_to_data(cx, RUST_LOGO); + render!( image { image_data: image_data, width: "{size}", @@ -87,8 +87,8 @@ fn app() -> Element { Both `paragraph` and `text` elements are used together. They will let you build texts with different styles. ``` rust -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( paragraph { text { font_size: "15", diff --git a/book/src/guides/font_style.md b/book/src/guides/font_style.md index d63cf10dd..3fd67d1e4 100644 --- a/book/src/guides/font_style.md +++ b/book/src/guides/font_style.md @@ -29,8 +29,8 @@ You can learn about the syntax of this attribute in [`Color Syntax`](/guides/sty Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { color: "green", "Hello, World!" @@ -42,8 +42,8 @@ fn app() -> Element { Another example showing [inheritance](#inheritance): ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { color: "blue", label { @@ -66,8 +66,8 @@ Limitation: Only fonts installed in the system are supported for now. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_family: "Inter", "Hello, World!" @@ -85,8 +85,8 @@ You can specify the size of the text using `font_size`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_size: "50", "Hellooooo!" @@ -106,8 +106,8 @@ Accepted values: `center`, `end`, `justify`, `left`, `right`, `start` Example ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { align: "right", "Hello, World!" @@ -127,8 +127,8 @@ Accepted values: `upright` (default), `italic` and `oblique`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_style: "italic", "Hello, World!" @@ -170,8 +170,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_weight: "bold", "Hello, World!" @@ -199,8 +199,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_weight: "bold", "Hello, World!" @@ -220,8 +220,8 @@ Specify the height of the lines of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { lines_height: "3", "Hello, World! \n Hello, again!" @@ -237,8 +237,8 @@ Determines the amount of lines that the text can have. It has unlimited lines by Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { "Hello, World! \n Hello, World! \n Hello, world!" // Will show all three lines } @@ -259,8 +259,8 @@ Specify the spacing between characters of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { letter_spacing: "10", "Hello, World!" @@ -278,8 +278,8 @@ Specify the spacing between words of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { word_spacing: "10", "Hello, World!" @@ -302,8 +302,8 @@ Accpted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", "Hello, World!" @@ -328,8 +328,8 @@ Accpted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", decoration_style: "dotted", @@ -350,8 +350,8 @@ You can learn about the syntax of this attribute in [`Color Syntax`](/guides/sty Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", decoration_color: "orange", @@ -372,8 +372,8 @@ Syntax: ` ` Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { text_shadow: "0 18 12 rgb(0, 0, 0)", "Hello, World!" @@ -395,8 +395,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { max_lines: "3", text_overflow: "ellipsis", diff --git a/book/src/guides/getting_started.md b/book/src/guides/getting_started.md index 9afd38ac4..3ce82c631 100644 --- a/book/src/guides/getting_started.md +++ b/book/src/guides/getting_started.md @@ -43,19 +43,17 @@ fn main() { launch(app); } -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "100%", width: "100%", - background: "rgb(0, 119, 182)", + background: "rgb(35, 35, 35)", color: "white", - main_align: "center", - cross_align: "center", + padding: "12", onclick: move |_| count += 1, - font_size: "35", label { "Click to increase -> {count}" } } ) diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md index bc5de08b3..ea49c7752 100644 --- a/book/src/guides/layout.md +++ b/book/src/guides/layout.md @@ -24,8 +24,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", width: "15", @@ -44,8 +44,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", min_width: "100", @@ -66,8 +66,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", max_width: "50%", @@ -85,8 +85,8 @@ fn app() -> Element { Will use it's inner children as size, so in this case, the `rect` width will be equivalent to the width of `label`: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "auto", height: "33", @@ -101,8 +101,8 @@ fn app() -> Element { #### Logical pixels ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "50", height: "33" @@ -115,8 +115,8 @@ fn app() -> Element { Relative percentage to the parent equivalent value. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "50%", // Half the parent height: "75%" // 3/4 the parent @@ -130,8 +130,8 @@ fn app() -> Element { For more complex logic you can use the `calc()` function. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent height: "calc(100% - 10)" // 100% of the parent minus 10 @@ -147,8 +147,8 @@ Control how the inner elements will be stacked, possible values are `horizontal` ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "100%", height: "100%", @@ -173,8 +173,8 @@ fn app() -> Element { Specify the inner paddings of an element. You can do so by three different ways. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { padding: "25" // 25 in all sides padding: "100 50" // 100 in top and bottom, and 50 in left and right @@ -190,8 +190,8 @@ fn app() -> Element { Control how the inner elements are displayed, possible values are `normal` (default) or `center`. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "100%", height: "100%", @@ -212,8 +212,8 @@ fn app() -> Element { Specify the margin of an element. You can do so by three different ways. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { margin: "25" // 25 in all sides margin: "100 50" // 100 in top and bottom, and 50 in left and right diff --git a/book/src/guides/style.md b/book/src/guides/style.md index ce9773c04..2053e54de 100644 --- a/book/src/guides/style.md +++ b/book/src/guides/style.md @@ -21,8 +21,8 @@ You can learn about the syntax of this attribute [here](#color-syntax). Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red" } @@ -42,8 +42,8 @@ Syntax: ` ` Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { shadow: "0 0 25 2 rgb(0, 0, 0, 120)" } @@ -60,8 +60,8 @@ The `corner_radius` attribute let's you smooth the corners of the element, with Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { corner_radius: "10", corner_smoothing: "75%" @@ -82,8 +82,8 @@ You can add a border to an element using the `border` and `border_align` attribu Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { border: "2 solid black", border_align: "inner" @@ -103,8 +103,8 @@ Accepted values: `clip | none`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { overflow: "clip" width: "100", diff --git a/book/src/guides/testing.md b/book/src/guides/testing.md index 296480191..0cf151773 100644 --- a/book/src/guides/testing.md +++ b/book/src/guides/testing.md @@ -12,8 +12,8 @@ For example, this will launch a state-less component and assert that it renders ```rust, no_run #[tokio::test] async fn test() { - fn our_component() -> Element { - rsx!( + fn our_component(cx: Scope) -> Element { + render!( label { "Hello World!" } @@ -41,12 +41,15 @@ Here, the component has a state that is `false` by default, but, once mounted it ```rust, no_run #[tokio::test] async fn dynamic_test() { - fn dynamic_component() -> Element { - let mut state = use_signal(|| false); + fn dynamic_component(cx: Scope) -> Element { + let state = use_state(cx, || false); - use_hook(move || state.set(true)); + use_effect(cx, (), |_| { + state.set(true); + async move { } + }); - rsx!( + render!( label { "Is enabled? {state}" } @@ -60,7 +63,7 @@ async fn dynamic_test() { assert_eq!(label.get(0).text(), Some("Is enabled? false")); - // This will run the `use_hook` and update the state. + // This will run the `use_effect` and update the state. utils.wait_for_update().await; assert_eq!(label.get(0).text(), Some("Is enabled? true")); @@ -74,14 +77,14 @@ We can also simulate events on the component, for example, we can simulate a cli ```rust, no_run #[tokio::test] async fn event_test() { - fn event_component() -> Element { - let mut enabled = use_signal(|| false); - rsx!( + fn event_component(cx: Scope) -> Element { + let enabled = use_state(cx, || false); + render!( rect { width: "100%", height: "100%", background: "red", - onclick: move |_| { + onclick: |_| { enabled.set(true); }, label { @@ -126,8 +129,8 @@ Here is an example of how to can set our custom window size: ```rust, no_run #[tokio::test] async fn test() { - fn our_component() -> Element { - rsx!( + fn our_component(cx: Scope) -> Element { + render!( label { "Hello World!" } diff --git a/book/src/guides/theming.md b/book/src/guides/theming.md index a172b218f..e192dc95f 100644 --- a/book/src/guides/theming.md +++ b/book/src/guides/theming.md @@ -9,8 +9,8 @@ Freya has built-in support for Theming. You can access the whole current theme via the `use_get_theme` hook. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { Component { } } @@ -18,12 +18,12 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let theme = use_get_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_get_theme(cx); let button_theme = &theme.button; - rsx!( + render!( rect { background: "{button_theme.background}", } @@ -35,8 +35,8 @@ fn Component() -> Element { By default, the selected theme is `LIGHT_THEME`. You can use the alternative, `DARK_THEME`. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { theme: LIGHT_THEME, Component { } @@ -45,12 +45,12 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let theme = use_get_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_get_theme(cx); let button_theme = &theme.button; - rsx!( + render!( rect { background: "{button_theme.background}", } @@ -63,8 +63,8 @@ fn Component() -> Element { Changing the selected theme at runtime is possible by using the `use_theme` hook. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { Component { } } @@ -72,16 +72,16 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let mut theme = use_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_theme(cx); - let onclick = move |_| { + let onclick = |_| { *theme.write() = LIGHT_THEME; }; - rsx!( + render!( Button { - onclick, + onclick: onclick, label { "Use Light theme" } @@ -104,8 +104,8 @@ const CUSTOM_THEME: Theme = Theme { ..LIGHT_THEME }; -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { theme: CUSTOM_THEME, rect { diff --git a/book/src/guides/virtualizing.md b/book/src/guides/virtualizing.md index 5de8fd9f0..9a22020da 100644 --- a/book/src/guides/virtualizing.md +++ b/book/src/guides/virtualizing.md @@ -19,19 +19,19 @@ fn main() { launch(app); } -fn app() -> Element { - let values = use_signal(|| vec!["Hello World"].repeat(400)); +fn app(cx: Scope) -> Element { + let values = use_state(cx, || vec!["Hello World"].repeat(400)); - rsx!( + render!( VirtualScrollView { width: "100%", height: "100%", show_scrollbar: true, direction: "vertical", - length: values.read().len(), + length: values.get().len(), item_size: 25.0, - builder_values: values.read().clone(), - builder: Rc::new(move |(key, index, values)| { + builder_values: values.get(), + builder: Box::new(move |(key, index, _cx, values)| { let values = values.unwrap(); let value = values[index]; rsx! { @@ -72,4 +72,4 @@ Used to calculate how many elements can be fit in the viewport. Any data that you might need in the `builder` function #### `builder` -This is a function that dinamically creates an element for the given index in the list. It receives 4 arguments, a `key` for the element, the `index` of the element and the `builder_values` you previously passed. \ No newline at end of file +This is a function that dinamically creates an element for the given index in the list. It receives 4 arguments, a `key` for the element, the `index` of the element, the Scope (`cx`) and the `builder_values` you previously passed. \ No newline at end of file diff --git a/book/src/index.md b/book/src/index.md index 1d352c2cc..6eea72d1d 100644 --- a/book/src/index.md +++ b/book/src/index.md @@ -16,10 +16,10 @@ ```rust, no_run -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "20%", width: "100%", From 5be3e9ca6512c3574b34485dc46e88a72f7e5651 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:34:13 +0100 Subject: [PATCH 15/32] reverse website --- website/src/pages/index.astro | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 9fa5e96ca..80d23af29 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -6,10 +6,10 @@ import { FaGithub, FaDiscord } from 'react-icons/fa' import { GoBook } from 'react-icons/go' const EXAMPLE_CODE = ` -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "20%", width: "100%", @@ -145,4 +145,4 @@ fn app() -> Element { height: 481px; } } - + \ No newline at end of file From a6ce252073aa0a0be784f1c8efaee46eea212bea Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:58:24 +0100 Subject: [PATCH 16/32] bump dx --- Cargo.toml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 089d3cdd7..dc095e769 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 = "8324f5290a317b06c5e451ab4bb58d1c73deb591", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} -dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } -dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["hot_reload"] } -dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["dioxus"] } -dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } -dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } -dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } -dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591" } -dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", features = ["file_watcher"], default-features = false } -dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "8324f5290a317b06c5e451ab4bb58d1c73deb591", default-features = false } +dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]} +dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892" } +dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892", features = ["hot_reload"] } +dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892", features = ["dioxus"] } +dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892" } +dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892" } +dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892", features = ["file_watcher"], default-features = false } +dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "ef101dd876ee8ecdd702a7e22addfd47f2ebd892", default-features = false } skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] } From 5f4502c9bb808c748eef4233824c166f8f6959ec Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 21:05:26 +0100 Subject: [PATCH 17/32] revert readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 18af6fd20..98902c637 100644 --- a/README.md +++ b/README.md @@ -20,10 +20,10 @@ ```rust, no_run -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "20%", width: "100%", From 7c2d31deadc215e9fa69d076d54d84f413dd351b Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 21:50:56 +0100 Subject: [PATCH 18/32] ci: Change cache key --- .github/workflows/rust.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml index 54de89320..71cebd48a 100644 --- a/.github/workflows/rust.yml +++ b/.github/workflows/rust.yml @@ -25,7 +25,7 @@ jobs: - name: Set up cargo cache uses: Swatinem/rust-cache@v2 with: - prefix-key: "5" + prefix-key: "6" - name: Install linux dependencies if: runner.os == 'Linux' run: | From 213627754bed77d8a39a8a9de349a825a3b980f4 Mon Sep 17 00:00:00 2001 From: Marc Espin Date: Tue, 6 Feb 2024 22:33:11 +0100 Subject: [PATCH 19/32] feat: Proper event bubbling (#268) * feat: Proper event bubbling * update * ux improvements * improvements * fixes and improvements * fix * clean up * fixes * cleanup * fixes and improvements * fixes * event bubbling for VirtualScrollView --- .../src/scroll_views/scroll_view.rs | 16 +- .../src/scroll_views/virtual_scroll_view.rs | 16 +- crates/components/src/slider.rs | 9 +- crates/components/src/switch.rs | 15 +- crates/core/src/events/events_measurer.rs | 113 ++++++----- crates/core/src/events/freya_events.rs | 4 + crates/core/tests/event_bubbling.rs | 189 ++++++++++++++++++ crates/renderer/src/app.rs | 2 +- crates/testing/src/test_handler.rs | 2 +- examples/floating_editors.rs | 2 + 10 files changed, 305 insertions(+), 63 deletions(-) create mode 100644 crates/core/tests/event_bubbling.rs diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs index 4a7356632..bc1733b2d 100644 --- a/crates/components/src/scroll_views/scroll_view.rs +++ b/crates/components/src/scroll_views/scroll_view.rs @@ -116,7 +116,13 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { corrected_scrolled_y, ); - *scrolled_y.write() = scroll_position_y; + // Only scroll when there is still area to scroll + if *scrolled_y.peek() != scroll_position_y { + e.stop_propagation(); + *scrolled_y.write() = scroll_position_y; + } else { + return; + } } let wheel_x = if *clicking_shift.read() { @@ -132,7 +138,13 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { corrected_scrolled_x, ); - *scrolled_x.write() = scroll_position_x; + // Only scroll when there is still area to scroll + if *scrolled_x.peek() != scroll_position_x { + e.stop_propagation(); + *scrolled_x.write() = scroll_position_x; + } else { + return; + } focus.focus(); } diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index cd96816d7..71a197237 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -161,7 +161,13 @@ pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element corrected_scrolled_y, ); - *scrolled_y.write() = scroll_position_y; + // Only scroll when there is still area to scroll + if *scrolled_y.peek() != scroll_position_y { + e.stop_propagation(); + *scrolled_y.write() = scroll_position_y; + } else { + return; + } } let wheel_x = if *clicking_shift.peek() { @@ -177,7 +183,13 @@ pub fn VirtualScrollView(props: VirtualScrollViewProps) -> Element corrected_scrolled_x, ); - *scrolled_x.write() = scroll_position_x; + // Only scroll when there is still area to scroll + if *scrolled_x.peek() != scroll_position_x { + e.stop_propagation(); + *scrolled_x.write() = scroll_position_x; + } else { + return; + } focus.focus(); } diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index 21b77ed1f..10cb3f2f4 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -104,7 +104,8 @@ pub fn Slider( let onmouseleave = { to_owned![platform, status]; - move |_: MouseEvent| { + move |e: MouseEvent| { + e.stop_propagation(); *status.write() = SliderStatus::Idle; platform.set_cursor(CursorIcon::default()); } @@ -112,7 +113,8 @@ pub fn Slider( let onmouseenter = { to_owned![status]; - move |_: MouseEvent| { + move |e: MouseEvent| { + e.stop_propagation(); *status.write() = SliderStatus::Hovering; platform.set_cursor(CursorIcon::Pointer); } @@ -121,6 +123,7 @@ pub fn Slider( let onmouseover = { to_owned![clicking, onmoved]; move |e: MouseEvent| { + e.stop_propagation(); if *clicking.peek() { let coordinates = e.get_element_coordinates(); let x = coordinates.x - size.area.min_x() as f64 - 6.0; @@ -135,6 +138,7 @@ pub fn Slider( let onmousedown = { to_owned![clicking, onmoved, focus]; move |e: MouseEvent| { + e.stop_propagation(); focus.focus(); clicking.set(true); let coordinates = e.get_element_coordinates(); @@ -151,6 +155,7 @@ pub fn Slider( }; let onwheel = move |e: WheelEvent| { + e.stop_propagation(); let wheel_y = e.get_delta_y().clamp(-1.0, 1.0); let percentage = value + (wheel_y * 2.0); let percentage = percentage.clamp(0.0, 100.0); diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 603f2ee08..cfbe4e3bb 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -73,15 +73,21 @@ pub fn Switch(props: SwitchProps) -> Element { } }); + let onmousedown = |e: MouseEvent| { + e.stop_propagation(); + }; + let onmouseleave = { to_owned![platform]; - move |_: MouseEvent| { + move |e: MouseEvent| { + e.stop_propagation(); *status.write() = SwitchStatus::Idle; platform.set_cursor(CursorIcon::default()); } }; - let onmouseenter = move |_: MouseEvent| { + let onmouseenter = move |e: MouseEvent| { + e.stop_propagation(); *status.write() = SwitchStatus::Hovering; platform.set_cursor(CursorIcon::Pointer); }; @@ -89,7 +95,8 @@ pub fn Switch(props: SwitchProps) -> Element { let onclick = { let ontoggled = props.ontoggled.clone(); to_owned![focus]; - move |_: MouseEvent| { + move |e: MouseEvent| { + e.stop_propagation(); focus.focus(); ontoggled.call(()); } @@ -142,7 +149,7 @@ pub fn Switch(props: SwitchProps) -> Element { corner_radius: "50", background: "{background}", border: "{border}", - onmousedown: |_| {}, + onmousedown, onmouseenter, onmouseleave, onkeydown, diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs index edcf40bbb..b0f83fbc6 100644 --- a/crates/core/src/events/events_measurer.rs +++ b/crates/core/src/events/events_measurer.rs @@ -1,8 +1,8 @@ use crate::layout::{Layers, Viewports}; -use dioxus_native_core::prelude::NodeImmutableDioxusExt; use dioxus_native_core::real_dom::NodeImmutable; use dioxus_native_core::NodeId; -use freya_dom::prelude::FreyaDOM; +use dioxus_native_core::{prelude::NodeImmutableDioxusExt, tree::TreeRef}; +use freya_dom::{dom::DioxusDOM, prelude::FreyaDOM}; use freya_engine::prelude::*; use freya_node_state::{Fill, Style}; @@ -26,18 +26,18 @@ pub fn process_events( let global_events = measure_global_events(events); // 2. Get potential events that could be emitted based on the elements layout and viewports - let mut potential_events = measure_potential_event_listeners(layers, events, viewports, dom); + let potential_events = measure_potential_event_listeners(layers, events, viewports, dom); // 3. Get what events can be actually emitted based on what elements are listening - let dom_events = measure_dom_events(&mut potential_events, dom, scale_factor); + let dom_events = measure_dom_events(potential_events, dom, scale_factor); // 4. Filter the dom events and get potential derived events, e.g mouseover -> mouseenter - let (mut potential_colateral_events, mut to_emit_dom_events) = + let (potential_colateral_events, mut to_emit_dom_events) = elements_state.process_events(&dom_events, events); // 5. Get what derived events can actually be emitted let to_emit_dom_colateral_events = - measure_dom_events(&mut potential_colateral_events, dom, scale_factor); + measure_dom_events(potential_colateral_events, dom, scale_factor); // 6. Join both the dom and colateral dom events and sort them to_emit_dom_events.extend(to_emit_dom_colateral_events); @@ -161,76 +161,87 @@ fn get_derivated_events(event_name: &str) -> Vec<&str> { } } -const STACKED_EVENTS: [&str; 13] = [ - "mouseover", - "mouseenter", - "mouseleave", - "click", - "keydown", - "keyup", - "touchcancel", - "touchend", - "touchmove", - "touchstart", - "pointerover", - "pointerenter", - "pointerleave", -]; - -const FIRST_CAPTURED_EVENTS: [&str; 1] = ["wheel"]; - -const LAST_CAPTURED_EVENTS: [&str; 3] = ["click", "touchstart", "touchend"]; +fn is_node_parent_of(rdom: &DioxusDOM, node: NodeId, parent_node: NodeId) -> bool { + let mut stack = vec![parent_node]; + while let Some(id) = stack.pop() { + let tree = rdom.tree_ref(); + let mut children = tree.children_ids(id); + drop(tree); + if children.contains(&node) { + return true; + } + + if rdom.contains(id) { + children.reverse(); + stack.extend(children.iter()); + } + } + + false +} /// Measure what DOM events could be emited fn measure_dom_events( - potential_events: &mut PotentialEvents, + potential_events: PotentialEvents, fdom: &FreyaDOM, scale_factor: f64, ) -> Vec { let mut new_events = Vec::new(); let rdom = fdom.rdom(); - for (event_name, event_nodes) in potential_events.iter_mut() { + // Iterate over all the events + for (event_name, event_nodes) in potential_events { let derivated_events = get_derivated_events(event_name.as_str()); let mut found_nodes: Vec<(&NodeId, FreyaEvent)> = Vec::new(); - for derivated_event_name in derivated_events { + + // Iterate over the derivated event (including the source) + 'event: for derivated_event_name in derivated_events.iter() { + let mut child_node: Option = None; + let listeners = rdom.get_listening_sorted(derivated_event_name); - 'event_nodes: for (node_id, request) in event_nodes.iter() { + + // Iterate over the event nodes + for (node_id, event) in event_nodes.iter().rev() { + let Some(node) = rdom.get(*node_id) else { + continue; + }; + + // Iterate over the event listeners for listener in &listeners { if listener.id() == *node_id { - let Style { background, .. } = &*listener.get::