From c3fff31ef91a95ca9dac929cb3ca8d62d9a5e300 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Mon, 12 Aug 2024 21:14:39 +0200 Subject: [PATCH] chore: Improvements --- crates/common/src/compositor.rs | 36 ++- crates/core/src/render.rs | 3 - crates/state/src/cursor.rs | 7 +- examples/corner_radius.rs | 50 ++-- examples/counter.rs | 511 +++++++++++++++++++++++++++++++- 5 files changed, 559 insertions(+), 48 deletions(-) diff --git a/crates/common/src/compositor.rs b/crates/common/src/compositor.rs index 82d129550..4beb078e5 100644 --- a/crates/common/src/compositor.rs +++ b/crates/common/src/compositor.rs @@ -17,11 +17,11 @@ use freya_engine::prelude::{ Surface, }; use freya_native_core::NodeId; -use itertools::{ - sorted, - Itertools, +use itertools::sorted; +use rustc_hash::{ + FxHashMap, + FxHashSet, }; -use rustc_hash::FxHashMap; use crate::Layers; @@ -71,27 +71,25 @@ impl Compositor { layers: &Layers, ) { let mut dirty_nodes = dirty_nodes.get(); - let dirty_nodes = dirty_nodes.drain().collect::>(); - let mut invalidated_nodes = Vec::new(); - - let mut invalidated_nodes_buffer = dirty_nodes.clone(); + let (mut invalidated_nodes, mut dirty_nodes) = { + ( + FxHashSet::from_iter(dirty_nodes.keys().copied()), + dirty_nodes.drain().collect::>(), + ) + }; // Mark children - while let Some((node_id, target)) = invalidated_nodes_buffer.pop() { + while let Some((node_id, target)) = dirty_nodes.pop() { + // Mark this node as invalidated + invalidated_nodes.insert(node_id); + let traverse_children = target == DirtyTarget::ItselfAndNested; let affected = get_affected(node_id, traverse_children) .into_iter() - .filter(|id| !invalidated_nodes.contains(id)) - .collect_vec(); - - // Save this node - invalidated_nodes.push(node_id); - - // Save the affected nodes - invalidated_nodes.extend(affected.clone()); + .filter(|id| !invalidated_nodes.contains(id)); // Continue searching in the affected nodes - invalidated_nodes_buffer.extend( + dirty_nodes.extend( affected .into_iter() .map(|id| (id, DirtyTarget::ItselfAndNested)), @@ -126,7 +124,7 @@ impl Compositor { } } - self.full_render.store(false, Ordering::Relaxed) + self.full_render.store(false, Ordering::Relaxed); } pub fn reset_invalidated_layers(&self) { diff --git a/crates/core/src/render.rs b/crates/core/src/render.rs index ec715f90b..a04c15de2 100644 --- a/crates/core/src/render.rs +++ b/crates/core/src/render.rs @@ -78,7 +78,6 @@ pub fn process_render( layer_canvas.clear(Color::TRANSPARENT); let nodes = layers.get(&layer).unwrap(); - 'elements: for node_id in nodes { let node = rdom.get(*node_id).unwrap(); let node_viewports = node.get::().unwrap(); @@ -93,13 +92,11 @@ pub fn process_render( continue 'elements; } } - // Render the element render_fn(fdom, node_id, layout_node, &layout, layer_canvas); } } } - layer_surface.draw(canvas, IPoint::new(0, 0), SamplingOptions::default(), None); } diff --git a/crates/state/src/cursor.rs b/crates/state/src/cursor.rs index 0ad05b87a..2c0f5da13 100644 --- a/crates/state/src/cursor.rs +++ b/crates/state/src/cursor.rs @@ -1,4 +1,7 @@ -use freya_common::ParagraphElements; +use freya_common::{ + CompositorDirtyNodes, + ParagraphElements, +}; use freya_engine::prelude::*; use freya_native_core::{ attributes::AttributeName, @@ -144,6 +147,7 @@ impl State for CursorState { context: &SendAnyMap, ) -> bool { let paragraphs = context.get::().unwrap(); + let compositor_dirty_nodes = context.get::().unwrap(); let mut cursor = parent.map(|(p,)| p.clone()).unwrap_or_default(); if let Some(attributes) = node_view.attributes() { @@ -159,6 +163,7 @@ impl State for CursorState { paragraphs.insert_paragraph(node_view.node_id(), cursor_ref.text_id) } } + compositor_dirty_nodes.invalidate(node_view.node_id()); } *self = cursor; diff --git a/examples/corner_radius.rs b/examples/corner_radius.rs index 2280c7d61..1130985d0 100644 --- a/examples/corner_radius.rs +++ b/examples/corner_radius.rs @@ -6,33 +6,41 @@ use freya::prelude::*; fn main() { - launch(app); + launch_cfg( + app, + LaunchConfig::<()>::new() + .with_title("Performance Overlay Plugin") + .with_size(700., 500.) + .with_plugin(PerformanceOverlayPlugin::default()), + ) } - fn app() -> Element { - let mut radius = use_signal(|| 30f32); - - let onwheel = move |e: WheelEvent| { - let y = e.get_delta_y() as f32; - radius.with_mut(|radius| *radius = (*radius + y).clamp(0.0, 300.0)); - }; + let mut count = use_signal(|| 0); rsx!( rect { - overflow: "clip", - height: "100%", + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + background: "rgb({count}, 119, 182)", + color: "white", + shadow: "0 4 20 5 rgb(0, 0, 0, 80)", + label { + font_size: "75", + font_weight: "bold", + "{count}" + } + } + rect { + height: "50%", width: "100%", - padding: "60", - onwheel: onwheel, - rect { - shadow: "0 0 25 0 rgb(0, 0, 0, 170)", - corner_radius: "{radius} {radius * 0.7} {radius * 0.4} {radius * 0.2}", - corner_smoothing: "100%", - height: "100%", - width: "100%", - background: "red", - border: "7 solid white", - border_align: "outer" + main_align: "center", + cross_align: "center", + direction: "horizontal", + Button { + onclick: move |_| count += 1, + label { "Increase" } } } ) diff --git a/examples/counter.rs b/examples/counter.rs index d000e2b64..d9c07d809 100644 --- a/examples/counter.rs +++ b/examples/counter.rs @@ -6,7 +6,13 @@ use freya::prelude::*; fn main() { - launch_with_props(app, "Counter", (400.0, 350.0)); + launch_cfg( + app, + LaunchConfig::<()>::new() + .with_title("Performance Overlay Plugin") + .with_size(700., 500.) + .with_plugin(PerformanceOverlayPlugin::default()), + ) } fn app() -> Element { @@ -33,9 +39,506 @@ fn app() -> Element { main_align: "center", cross_align: "center", direction: "horizontal", - Button { - onclick: move |_| count += 1, - label { "Increase" } + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + rect { + height: "50%", + width: "100%", + main_align: "center", + cross_align: "center", + direction: "horizontal", + Button { + onclick: move |_| count += 1, + label { "Increase2" } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } } } )