Egui router

Cargo.toml

@@ -15,7 +15,7 @@ tag-prefix = "hello_egui-"
 all-features = true
 
 [features]
-all = ["animation", "dnd", "form", "inbox", "infinite_scroll", "pull_to_refresh", "suspense", "thumbhash", "virtual_list"]
+all = ["animation", "dnd", "form", "inbox", "infinite_scroll", "pull_to_refresh", "router", "suspense", "thumbhash", "virtual_list"]
 full = ["all", "async", "tokio"]
 
 animation = ["dep:egui_animation"]
@@ -25,6 +25,7 @@ form = ["dep:egui_form"]
 inbox = ["dep:egui_inbox"]
 infinite_scroll = ["dep:egui_infinite_scroll"]
 pull_to_refresh = ["dep:egui_pull_to_refresh"]
+router = ["dep:egui_router"]
 suspense = ["dep:egui_suspense"]
 thumbhash = ["dep:egui_thumbhash"]
 tokio = ["egui_suspense/tokio", "egui_infinite_scroll/tokio"]
@@ -37,6 +38,7 @@ egui_inbox = { workspace = true, optional = true }
 egui_form = { workspace = true, optional = true }
 egui_infinite_scroll = { workspace = true, optional = true }
 egui_pull_to_refresh = { workspace = true, optional = true }
+egui_router = { workspace = true, optional = true }
 egui_suspense = { workspace = true, optional = true }
 egui_thumbhash = { workspace = true, optional = true }
 egui_virtual_list = { workspace = true, optional = true }
@@ -53,6 +55,7 @@ hello_egui_utils = { path = "./crates/hello_egui_utils", version = "0.4.0" }
 egui_form = { path = "./crates/egui_form", version = "0.1.1" }
 egui_inbox = { path = "./crates/egui_inbox", version = "0.4.1" }
 egui_pull_to_refresh = { path = "./crates/egui_pull_to_refresh", version = "0.4.0" }
+egui_router = { path = "./crates/egui_router", version = "0.1.0" }
 egui_suspense = { path = "./crates/egui_suspense", version = "0.4.0" }
 egui_virtual_list = { path = "./crates/egui_virtual_list", version = "0.3.0" }
 egui_infinite_scroll = { path = "./crates/egui_infinite_scroll", version = "0.3.0" }

crates/egui_inbox/Cargo.toml

@@ -13,7 +13,7 @@ async = ["dep:hello_egui_utils", "hello_egui_utils/async", "dep:futures-channel"
 tokio = ["async", "hello_egui_utils/tokio"]
 egui = ["dep:egui"]
 default = ["egui"]
-broadcast = []
+broadcast = ["dep:hello_egui_utils"]
 type_inbox = ["dep:type-map", "dep:hello_egui_utils"]
 type_broadcast = ["dep:type-map", "broadcast", "dep:hello_egui_utils"]
 

crates/egui_inbox/src/lib.rs

@@ -36,20 +36,15 @@ where
     }
 }
 
-impl RequestRepaintTrait for &Box<dyn RequestRepaintTrait> {
-    fn request_repaint(&self) {
-        self.as_ref().request_repaint();
-    }
-}
-
+#[derive(Clone)]
 enum RequestRepaintInner {
     #[cfg(feature = "egui")]
     Ctx(egui::Context),
-    Box(Box<dyn RequestRepaintTrait + Send + Sync>),
+    Arc(Arc<dyn RequestRepaintTrait + Send + Sync>),
 }
 
 /// Usually holds a reference to [egui::Context], but can also hold a boxed callback.
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub struct RequestRepaintContext(RequestRepaintInner);
 
 impl RequestRepaintContext {
@@ -58,15 +53,15 @@ impl RequestRepaintContext {
     where
         F: Fn() + Send + Sync + 'static,
     {
-        Self(RequestRepaintInner::Box(Box::new(f)))
+        Self(RequestRepaintInner::Arc(Arc::new(f)))
     }
 
     /// Create a new [RequestRepaintContext] from something that implements [RequestRepaintTrait].
     pub fn from_trait<T>(t: T) -> Self
     where
         T: RequestRepaintTrait + Send + Sync + 'static,
     {
-        Self(RequestRepaintInner::Box(Box::new(t)))
+        Self(RequestRepaintInner::Arc(Arc::new(t)))
     }
 
     /// Create a new [RequestRepaintContext] from an [egui::Context].
@@ -77,10 +72,11 @@ impl RequestRepaintContext {
 }
 
 impl RequestRepaintContext {
-    fn request_repaint(&self) {
+    /// Request a repaint.
+    pub fn request_repaint(&self) {
         match &self.0 {
             RequestRepaintInner::Ctx(ctx) => ctx.request_repaint(),
-            RequestRepaintInner::Box(boxed) => boxed.request_repaint(),
+            RequestRepaintInner::Arc(boxed) => boxed.request_repaint(),
         }
     }
 }
@@ -97,6 +93,12 @@ pub trait AsRequestRepaint {
     fn as_request_repaint(&self) -> RequestRepaintContext;
 }
 
+impl AsRequestRepaint for RequestRepaintContext {
+    fn as_request_repaint(&self) -> RequestRepaintContext {
+        self.clone()
+    }
+}
+
 #[cfg(feature = "egui")]
 mod egui_impl {
     use crate::{AsRequestRepaint, RequestRepaintContext};

crates/egui_pull_to_refresh/src/lib.rs

@@ -32,7 +32,7 @@ impl PullToRefreshState {
         match self {
             PullToRefreshState::Idle => Some(0.0),
             PullToRefreshState::Dragging { distance, .. } => {
-                Some((distance / min_distance).min(1.0).max(0.0) as f64)
+                Some((distance / min_distance).clamp(0.0, 1.0) as f64)
             }
             PullToRefreshState::DoRefresh => Some(1.0),
             PullToRefreshState::Refreshing => None,

crates/egui_router/Cargo.toml

@@ -0,0 +1,36 @@
+[package]
+name = "egui_router"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[features]
+async = ["egui_suspense/async"]
+
+[[example]]
+name = "async_router"
+required-features = ["async"]
+
+[[example]]
+name = "router"
+required-features = ["async"]
+
+[dependencies]
+egui.workspace = true
+egui_inbox.workspace = true
+egui_suspense = { workspace = true, optional = true }
+
+matchit = "0.8"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+web-sys = { version = "0.3", features = ["History", "PopStateEvent", "HtmlCollection"] }
+js-sys = "0.3"
+wasm-bindgen = "0.2"
+
+[dev-dependencies]
+egui_inbox = { workspace = true, features = ["type_inbox"] }
+eframe = { workspace = true, default-features = true }
+egui_animation = { workspace = true }
+tokio = { version = "1", features = ["full"] }
+egui_suspense = { workspace = true, features = ["async", "tokio"] }

crates/egui_router/README.md

@@ -0,0 +1,11 @@
+# egui_router
+
+A single-page application router for [egui](https://github.com/emilk/egui).
+
+It supports:
+
+- Customizable route transition animations
+- Axum-like route matching and handler functions
+
+Check out the [hello_egui demo](https://lucasmerlin.github.io/hello_egui/), which internally uses
+egui_router to route between the examples and crates.

crates/egui_router/examples/async_router.rs

@@ -0,0 +1,123 @@
+use eframe::NativeOptions;
+use egui::{CentralPanel, Color32, Frame, ScrollArea, Ui};
+use egui_inbox::{UiInbox, UiInboxSender};
+use egui_router::{EguiRouter, HandlerError, HandlerResult, OwnedRequest, Route};
+
+type AppState = UiInboxSender<RouterMessage>;
+
+enum RouterMessage {
+    Navigate(String),
+    Back,
+}
+
+#[tokio::main]
+async fn main() -> eframe::Result<()> {
+    let mut router: Option<EguiRouter<AppState>> = None;
+
+    let inbox = UiInbox::new();
+    let mut sender = inbox.sender();
+
+    eframe::run_simple_native(
+        "Router Example",
+        NativeOptions::default(),
+        move |ctx, _frame| {
+            let router = router.get_or_insert_with(|| {
+                EguiRouter::builder()
+                    .error_ui(|ui, state: &AppState, error| {
+                        ui.label(format!("Error: {}", error));
+                        if ui.button("back").clicked() {
+                            state.clone().send(RouterMessage::Back).ok();
+                        }
+                    })
+                    .loading_ui(|ui, _| {
+                        ui.label("Loading...");
+                        ui.spinner();
+                    })
+                    .route("/", home)
+                    .async_route("/post/{id}", post)
+                    .default_path("/")
+                    .build(&mut sender)
+            });
+
+            inbox.read(ctx).for_each(|msg| match msg {
+                RouterMessage::Navigate(route) => {
+                    router.navigate(&mut sender, route).ok();
+                }
+                RouterMessage::Back => {
+                    router.back().ok();
+                }
+            });
+
+            CentralPanel::default().show(ctx, |ui| {
+                router.ui(ui, &mut sender);
+            });
+        },
+    )
+}
+
+fn home() -> impl Route<AppState> {
+    |ui: &mut Ui, inbox: &mut UiInboxSender<RouterMessage>| {
+        background(ui, ui.style().visuals.faint_bg_color, |ui| {
+            ui.heading("Home!");
+
+            ui.label("Navigate to post:");
+
+            if ui.link("Post 1").clicked() {
+                inbox
+                    .send(RouterMessage::Navigate("/post/1".to_string()))
+                    .ok();
+            }
+
+            if ui.link("Post 2").clicked() {
+                inbox
+                    .send(RouterMessage::Navigate("/post/2".to_string()))
+                    .ok();
+            }
+
+            if ui.link("Error Post").clicked() {
+                inbox
+                    .send(RouterMessage::Navigate("/post/error".to_string()))
+                    .ok();
+            }
+        });
+    }
+}
+
+async fn post(request: OwnedRequest<AppState>) -> HandlerResult<impl Route<AppState>> {
+    let id = request.params.get("id").map(ToOwned::to_owned);
+
+    tokio::time::sleep(std::time::Duration::from_secs(1)).await;
+
+    if id.as_deref() == Some("error") {
+        Err(HandlerError::Message("Error Loading Post!".to_string()))?;
+    }
+
+    Ok(move |ui: &mut Ui, sender: &mut AppState| {
+        background(ui, ui.style().visuals.extreme_bg_color, |ui| {
+            ScrollArea::vertical().show(ui, |ui| {
+                if let Some(id) = &id {
+                    ui.label(format!("Post: {}", id));
+
+                    if ui.button("back").clicked() {
+                        sender.send(RouterMessage::Back).ok();
+                    }
+
+                    ui.label(include_str!("../../../README.md"));
+                } else {
+                    ui.label("Post not found");
+                    if ui.button("back").clicked() {
+                        sender.send(RouterMessage::Back).ok();
+                    }
+                }
+            });
+        });
+    })
+}
+
+fn background(ui: &mut Ui, color: Color32, content: impl FnOnce(&mut Ui)) {
+    Frame::none().fill(color).inner_margin(16.0).show(ui, |ui| {
+        ui.set_width(ui.available_width());
+        ui.set_height(ui.available_height());
+        content(ui);
+    });
+}