egui 0.31 and wasm example fixes

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "egui-toast"
 description = "Toast notifications for the egui library"
-version = "0.16.0"
+version = "0.17.0"
 authors = ["Urho Laukkarinen <[email protected]>"]
 edition = "2021"
 
@@ -16,4 +16,4 @@ keywords = ["egui", "toast", "notification"]
 members = ["demo"]
 
 [dependencies]
-egui = { version = "0.30", default-features = false }
+egui = { version = "0.31", default-features = false }

demo/Cargo.toml

@@ -4,10 +4,12 @@ version = "0.8.0"
 edition = "2021"
 
 [dependencies]
-eframe = "0.30"
+eframe = "0.31"
 egui-toast = { path = ".." }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.7"
 tracing-wasm = "0.2"
+web-sys = "0.3"
+wasm-bindgen = "0.2.100"
 wasm-bindgen-futures = "0.4"

demo/index.html

@@ -47,9 +47,10 @@
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 0%;
-            left: 50%;
-            transform: translate(-50%, 0%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
 
         .centered {
@@ -79,9 +80,8 @@
             display: block;
             width: 24px;
             height: 24px;
-            margin: 0px;
+            margin: 0;
             border-radius: 50%;
-            border: 3px solid #fff;
             border-color: #fff transparent #fff transparent;
             animation: lds-dual-ring 1.2s linear infinite;
         }

demo/src/main.rs

@@ -29,11 +29,30 @@ fn main() {
 
     let web_options = eframe::WebOptions::default();
 
+
+    // Retrieve canvas from index.html
+    // Starting from eframe 0.29:
+    // * `WebRunner::start` now expects a `HtmlCanvasElement` rather than the id of it ([#4780](https://github.com/emilk/egui/pull/4780))
+    fn get_canvas_element_by_id_or_die(canvas_id: &str) -> web_sys::HtmlCanvasElement {
+        use wasm_bindgen::JsCast;
+        let window = web_sys::window()
+            .unwrap_or_else(|| panic!("Failed to retrieve the window instance"));
+        let document = window.document()
+            .unwrap_or_else(|| panic!("Failed to retrieve the document instance"));
+        let canvas = document.get_element_by_id(canvas_id)
+            .unwrap_or_else(|| panic!("Failed to find element with id {canvas_id:?}"));
+        let c = canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok();
+        c.unwrap_or_else(|| panic!("Failed to find canvas with id {canvas_id:?}"))
+    }
+
+    let canvas = get_canvas_element_by_id_or_die("canvas");
+
     wasm_bindgen_futures::spawn_local(async {
-        eframe::start_web(
-            "canvas",
+        eframe::WebRunner::new()
+            .start(
+            canvas,
             web_options,
-            Box::new(|_cc| Box::<Demo>::default()),
+            Box::new(|_cc| Ok(Box::<Demo>::default())),
         )
         .await
         .expect("failed to start eframe");
@@ -201,8 +220,8 @@ impl Demo {
 fn my_custom_toast_contents(ui: &mut egui::Ui, toast: &mut Toast) -> egui::Response {
     Frame::default()
         .fill(Color32::from_rgb(33, 150, 243))
-        .inner_margin(Margin::same(12.0))
-        .rounding(4.0)
+        .inner_margin(Margin::same(12))
+        .corner_radius(4)
         .show(ui, |ui| {
             ui.label(toast.text.clone().color(Color32::WHITE).monospace());
 

src/lib.rs

@@ -73,9 +73,7 @@ use std::sync::Arc;
 use std::time::Duration;
 
 use egui::epaint::RectShape;
-use egui::{
-    Align2, Area, Context, Direction, Frame, Id, Order, Pos2, Response, Rounding, Shape, Stroke, Ui,
-};
+use egui::{Align2, Area, Context, Direction, Frame, Id, Order, Pos2, Response, CornerRadius, Shape, Stroke, Ui, StrokeKind};
 
 pub type ToastContents = dyn Fn(&mut Ui, &mut Toast) -> Response + Send + Sync;
 
@@ -271,19 +269,20 @@ fn default_toast_contents(ui: &mut Ui, toast: &mut Toast) -> Response {
     // Draw the frame's stroke last
     let frame_shape = Shape::Rect(RectShape::stroke(
         response.rect,
-        frame.rounding,
+        frame.corner_radius,
         ui.visuals().window_stroke,
+        StrokeKind::Inside
     ));
     ui.painter().add(frame_shape);
 
     response
 }
 
 fn progress_bar(ui: &mut Ui, response: &Response, toast: &Toast) {
-    let rounding = Rounding {
-        nw: 0.0,
-        ne: 0.0,
-        ..ui.visuals().window_rounding
+    let rounding = CornerRadius {
+        nw: 0,
+        ne: 0,
+        ..ui.visuals().window_corner_radius
     };
     let mut clip_rect = response.rect;
     clip_rect.set_top(clip_rect.bottom() - 2.0);