improvements

crates/core/src/plugins.rs

@@ -1,4 +1,6 @@
+use dioxus_native_core::NodeId;
 use freya_engine::prelude::{Canvas, FontCollection};
+use torin::torin::Torin;
 use winit::window::Window;
 
 #[derive(Default)]
@@ -20,7 +22,10 @@ impl PluginsManager {
 
 pub enum PluginEvent<'a> {
     WindowCreated(&'a Window),
-    CanvasRendered(&'a Canvas, &'a FontCollection),
+    StartedRender(&'a Canvas, &'a FontCollection),
+    FinishedRender(&'a Canvas, &'a FontCollection),
+    StartedLayout(&'a Torin<NodeId>),
+    FinishedLayout(&'a Torin<NodeId>),
 }
 
 pub trait FreyaPlugin {

crates/freya/src/plugins/mod.rs

@@ -1,3 +1,3 @@
-mod fps;
+mod performance_overlay;
 
-pub use fps::*;
+pub use performance_overlay::*;

crates/freya/src/plugins/performance_overlay.rs

@@ -0,0 +1,93 @@
+use std::time::{Duration, Instant};
+
+use freya_core::plugins::{FreyaPlugin, PluginEvent};
+use freya_engine::prelude::{Color, ParagraphBuilder, ParagraphStyle, TextShadow, TextStyle};
+
+#[derive(Default)]
+pub struct PerformanceOverlayPlugin {
+    frames: Vec<Instant>,
+    started_render: Option<Instant>,
+    started_layout: Option<Instant>,
+    finished_layout: Option<Duration>,
+}
+
+impl FreyaPlugin for PerformanceOverlayPlugin {
+    fn on_event(&mut self, event: &PluginEvent) {
+        match event {
+            PluginEvent::StartedLayout(_) => self.started_layout = Some(Instant::now()),
+            PluginEvent::FinishedLayout(_) => {
+                self.finished_layout = Some(self.started_layout.unwrap().elapsed())
+            }
+            PluginEvent::StartedRender(_canvas, _font_collection) => {
+                self.started_render = Some(Instant::now())
+            }
+            PluginEvent::FinishedRender(canvas, font_collection) => {
+                let started_render = self.started_render.take().unwrap();
+                let finished_layout = self.finished_layout.unwrap();
+
+                let now = Instant::now();
+
+                self.frames
+                    .retain(|frame| now.duration_since(*frame).as_millis() < 1000);
+
+                self.frames.push(now);
+
+                // Render the texts
+                let mut paragraph_builder =
+                    ParagraphBuilder::new(&ParagraphStyle::default(), *font_collection);
+                let mut text_style = TextStyle::default();
+                text_style.set_color(Color::from_rgb(63, 255, 0));
+                text_style.add_shadow(TextShadow::new(
+                    Color::from_rgb(60, 60, 60),
+                    (0.0, 1.0),
+                    1.0,
+                ));
+                paragraph_builder.push_style(&text_style);
+
+                // FPS
+                let mut text_style = TextStyle::default();
+                text_style.set_color(Color::from_rgb(63, 255, 0));
+                text_style.add_shadow(TextShadow::new(
+                    Color::from_rgb(60, 60, 60),
+                    (0.0, 1.0),
+                    1.0,
+                ));
+                text_style.set_font_size(30.0);
+                paragraph_builder.push_style(&text_style);
+                paragraph_builder.add_text(format!("{} \n", self.frames.len()));
+
+                // Rendering time
+                let mut text_style = TextStyle::default();
+                text_style.set_color(Color::from_rgb(63, 255, 0));
+                text_style.add_shadow(TextShadow::new(
+                    Color::from_rgb(60, 60, 60),
+                    (0.0, 1.0),
+                    1.0,
+                ));
+                text_style.set_font_size(18.0);
+                paragraph_builder.push_style(&text_style);
+                paragraph_builder.add_text(format!(
+                    "Rendering: {}ms \n",
+                    started_render.elapsed().as_millis()
+                ));
+
+                // Layout time
+                let mut text_style = TextStyle::default();
+                text_style.set_color(Color::from_rgb(63, 255, 0));
+                text_style.add_shadow(TextShadow::new(
+                    Color::from_rgb(60, 60, 60),
+                    (0.0, 1.0),
+                    1.0,
+                ));
+                text_style.set_font_size(18.0);
+                paragraph_builder.push_style(&text_style);
+                paragraph_builder.add_text(format!("Layout: {}ms \n", finished_layout.as_millis()));
+
+                let mut paragraph = paragraph_builder.build();
+                paragraph.layout(f32::MAX);
+                paragraph.paint(canvas, (5.0, 0.0));
+            }
+            _ => {}
+        }
+    }
+}

crates/renderer/src/app.rs

@@ -236,11 +236,17 @@ impl<State: 'static + Clone> App<State> {
 
         {
             let dom = self.sdom.get();
+
+            self.plugins.send(PluginEvent::StartedLayout(&dom.layout()));
+
             let (layers, viewports) = self
                 .window_env
                 .process_layout(&dom, &mut self.font_collection);
             self.layers = layers;
             self.viewports = viewports;
+
+            self.plugins
+                .send(PluginEvent::FinishedLayout(&dom.layout()));
         }
 
         info!(
@@ -286,6 +292,11 @@ impl<State: 'static + Clone> App<State> {
 
     /// Render the RealDOM into the Window
     pub fn render(&mut self, hovered_node: &HoveredNode) {
+        self.plugins.send(PluginEvent::StartedRender(
+            self.window_env.canvas(),
+            &self.font_collection,
+        ));
+
         self.window_env.start_render(
             &self.layers,
             &self.viewports,
@@ -297,7 +308,7 @@ impl<State: 'static + Clone> App<State> {
         self.accessibility
             .render_accessibility(self.window_env.window.title().as_str());
 
-        self.plugins.send(PluginEvent::CanvasRendered(
+        self.plugins.send(PluginEvent::FinishedRender(
             self.window_env.canvas(),
             &self.font_collection,
         ));

examples/canvas.rs

@@ -7,7 +7,14 @@ use freya::events::MouseEvent;
 use freya::prelude::*;
 
 fn main() {
-    launch_with_props(app, "Freya canvas experiment", (700.0, 570.0));
+    launch_cfg(
+        app,
+        LaunchConfig::<()>::builder()
+            .with_width(700.)
+            .with_height(170.)
+            .with_plugin(PerformanceOverlayPlugin::default())
+            .build(),
+    )
 }
 
 fn app(cx: Scope) -> Element {

examples/performance_overlay_plugin.rs

@@ -0,0 +1,76 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_cfg(
+        app,
+        LaunchConfig::<()>::builder()
+            .with_title("Performance Overlay Plugin")
+            .with_width(700.)
+            .with_height(500.)
+            .with_plugin(PerformanceOverlayPlugin::default())
+            .build(),
+    )
+}
+
+const TIME: i32 = 400;
+const TARGET: f64 = 650.0;
+
+fn app(cx: Scope) -> Element {
+    let animation = use_animation(cx, || 15.0);
+
+    let progress = animation.value();
+
+    if !animation.is_animating() {
+        if progress == 15.0 {
+            animation.start(Animation::new_sine_in_out(15.0..=TARGET, TIME));
+        } else if progress == TARGET {
+            animation.start(Animation::new_sine_in_out(TARGET..=15.0, TIME));
+        }
+    }
+
+    render!(
+        rect {
+            width: "100%",
+            height: "100%",
+            main_align: "center",
+            for i in 0..32 {
+                rsx!(
+                    rect {
+                        offset_x: "{progress - i as f64 * 10.0}",
+                        key: "{i}",
+                        direction: "horizontal",
+                        rect {
+                            height: "25",
+                            width: "45",
+                            background: "rgb(7, 102, 173)",
+                            corner_radius: "100",
+                        }
+                        rect {
+                            height: "25",
+                            width: "45",
+                            background: "rgb(166, 207, 152)",
+                            corner_radius: "100",
+                        }
+                        rect {
+                            height: "25",
+                            width: "45",
+                            background: "rgb(179, 19, 18)",
+                            corner_radius: "100",
+                        }
+                        rect {
+                            height: "25",
+                            width: "45",
+                            background: "rgb(255, 108, 34)",
+                            corner_radius: "100",
+                        }
+                    }
+                )
+            }
+        }
+    )
+}