From e50fb26bddb888fb02bc238eeab0063ce959bbe4 Mon Sep 17 00:00:00 2001 From: Mikolaj Wielgus Date: Sat, 2 Mar 2024 16:09:01 +0000 Subject: [PATCH] egui: make the WASM port actually work --- assets/favicon.ico | Bin 0 -> 4286 bytes assets/sw.js | 26 ++++++++ index.html | 122 ++++++++++++++++++++++++++++++++++++ src/bin/topola-egui/app.rs | 45 +++++++------ src/bin/topola-egui/main.rs | 4 +- 5 files changed, 176 insertions(+), 21 deletions(-) create mode 100644 assets/favicon.ico create mode 100644 assets/sw.js create mode 100644 index.html diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..66ab34e9efc03407372090833c11e45e93f69a91 GIT binary patch literal 4286 zcmeHKO-NKx6nuQ5e)J+O#O5g;WqYg@m;T2?`SmE;-7RIQ}V>x(Ew&?J9+Lw_J^RR6T zZOA029GlIbtv~l!w*R6BBYXbDy(8p*zJCgRKK-qxnIZdLnyLQgQyUvBlkc!hbXD!z z$oqVsJiigLvARE#oN_Go<0no{GrE)I2j(%ab+62kiSF~6N15|>viz!QT;a9WWs*~l z1!og;)+Wmj+#z1;eVHSD-O2&qAaQ!V=GJ8SHSMK~^N*C4KFm!&uN{fKZ?XBzA-}(E zHd#r+X3&7Youtdv<`lUw@54a9=sSfiT?wA+#D#HLa8y-wEoR#U$*mERn;HJ_EdFE>)L_%2nP25_jfs*@jBwhxQex$BOSI&GB?-YC;3#> zJRtj$>F8l6*8kDYp`VGx<30%5K65|L#CBUZ`eJd|`!V(nmzSHXWBu{w=;H-+&v9Hx zRlDcNILueVH$?;bQuN|H=wpOOkI>g{>4~1*XXL}^#~PMM&S@(6@_`fhL64_%RV)bg zK5g@vkAx5NTWq^1Y(i2_`1)lf*&22HPmxpCqae?E#n{gu{Aw3tk~{UaFa60yWTc7tfC#-^VvR>bKH zL@EmdQM~*Md4}WXSeKF8bUq7Hf&+X_4H#Q7RSPfw-l0OoN6psfY)l-2# DucR>g literal 0 HcmV?d00001 diff --git a/assets/sw.js b/assets/sw.js new file mode 100644 index 0000000..983fcc6 --- /dev/null +++ b/assets/sw.js @@ -0,0 +1,26 @@ +var cacheName = 'topola-egui'; +var filesToCache = [ + './', + './index.html', + // I'm not sure if these two work, as teir filenames in dist/ have an alphanumeric string appended. + './topola-egui.js', + './topola-egui_bg.wasm', +]; + +// Start the service worker and cache all of the app's content. +self.addEventListener('install', function (e) { + e.waitUntil( + caches.open(cacheName).then(function (cache) { + return cache.addAll(filesToCache); + }) + ); +}); + +// Serve cached content when offline. +self.addEventListener('fetch', function (e) { + e.respondWith( + caches.match(e.request).then(function (response) { + return response || fetch(e.request); + }) + ); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..184e7a2 --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + + + + Topola + + + + + + + + + + + + + + + + + + + + + diff --git a/src/bin/topola-egui/app.rs b/src/bin/topola-egui/app.rs index 7a7209d..4fa8429 100644 --- a/src/bin/topola-egui/app.rs +++ b/src/bin/topola-egui/app.rs @@ -19,8 +19,9 @@ pub struct App { // Example stuff: label: String, - //#[serde(skip)] // Don't serialize this field. - //text_channel: (Sender, Receiver), + #[serde(skip)] // Don't serialize this field. + file_handle_channel: (Sender, Receiver), + #[serde(skip)] design: Option, } @@ -30,7 +31,7 @@ impl Default for App { Self { // Example stuff: label: "Hello World!".to_owned(), - //text_channel: channel(), + file_handle_channel: channel(), design: None, } } @@ -59,32 +60,38 @@ impl eframe::App for App { egui::TopBottomPanel::top("top_panel").show(ctx, |ui| { egui::menu::bar(ui, |ui| { ui.menu_button("File", |ui| { + if let Ok(file_handle) = self.file_handle_channel.1.try_recv() { + dbg!(file_handle); + // TODO: actually load the file from the handle. + } + if ui.button("Open").clicked() { // `Context` is cheap to clone as it's wrapped in an `Arc`. let ctx = ui.ctx().clone(); - // NOTE: This requires Zenity to be installed on your system. + // NOTE: On Linux, this requires Zenity to be installed on your system. + let sender = self.file_handle_channel.0.clone(); + let task = rfd::AsyncFileDialog::new().pick_file(); - // Doing this synchronously may not work on WASM. I haven't tested this - // yet, so I'm leaving a commented-out asynchronous version further below. - let maybe_path = rfd::FileDialog::new().pick_file(); + execute(async move { + let maybe_file_handle = task.await; - if let Some(path) = maybe_path { - self.design = DsnDesign::load_from_file(path.to_str().unwrap()).ok(); - } - - //let task = rfd::AsyncFileDialog::new().pick_file(); - /*execute(async move { - let file = task.await; - if let Some(file) = file { + if let Some(file_handle) = maybe_file_handle { + let _ = sender.send(file_handle); + ctx.request_repaint(); + } + /*if let Some(file) = file { let text = file.read().await; let _ = sender.send(String::from_utf8_lossy(&text).to_string()); ctx.request_repaint(); - } - });*/ + }*/ + }); } - if ui.button("Quit").clicked() { - ctx.send_viewport_cmd(egui::ViewportCommand::Close); + // "Quit" button wouldn't work on a Web page. + if !cfg!(target_arch = "wasm32") { + if ui.button("Quit").clicked() { + ctx.send_viewport_cmd(egui::ViewportCommand::Close); + } } }); ui.add_space(16.0); diff --git a/src/bin/topola-egui/main.rs b/src/bin/topola-egui/main.rs index 6452fd2..5ea573a 100644 --- a/src/bin/topola-egui/main.rs +++ b/src/bin/topola-egui/main.rs @@ -33,9 +33,9 @@ fn main() { wasm_bindgen_futures::spawn_local(async { eframe::WebRunner::new() .start( - "the_canvas_id", + "topola-egui", web_options, - Box::new(|cc| Box::new(TemplateApp::new(cc))), + Box::new(|cc| Box::new(App::new(cc))), ) .await .expect("failed to start eframe");