.cargo/config.toml

@@ -0,0 +1,6 @@
+# clipboard api is still unstable, so web-sys requires the below flag to be passed for copy (ctrl + c) to work
+# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
+# check status at https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+# we don't use `[build]` because of rust analyzer's build cache invalidation https://github.com/emilk/eframe_template/issues/93
+[target.wasm32-unknown-unknown]
+rustflags = ["--cfg=web_sys_unstable_apis"]

.gitignore

@@ -1,22 +1,13 @@
-
+# Mac stuff:
-.obsidian/*
+.DS_Store
-.vscode/*
-
-# ---> Rust
-# Generated by Cargo
-# will have compiled files and executables
-debug/
-target/
-
-# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
-# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-Cargo.lock
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# MSVC Windows builds of rustc generate these, which store debugging information
-*.pdb
 
 # trunk output folder
 dist
+
+# Rust compile target directories:
+target
+target_ra
+target_wasm
+
+# https://github.com/lycheeverse/lychee
+.lycheecache

Cargo.toml

@@ -1,42 +1,57 @@
-[package]
+[package]
-name = "egui-circles"
+name = "egui_circles"
-version = "0.2.0"
+version = "0.2.1"
-authors = ["Andriy Djmil <andriy@djmil.dev>"]
+authors = ["Andriy Djmil <andriy@djmil.dev>"]
-edition = "2021"
+edition = "2021"
-rust-version = "1.76"
+include = ["LICENSE", "**/*.rs", "Cargo.toml"]
-
+rust-version = "1.76"
-[package.metadata.docs.rs]
+
-all-features = true
+[package.metadata.docs.rs]
-targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
+all-features = true
-
+targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
-[dependencies]
+
-egui = "0.28"
+[dependencies]
-eframe = { version = "0.28", default-features = false, features = [
+egui = "0.28"
-#   "accesskit",     # Make egui compatible with screen readers. NOTE: adds a lot of dependencies.
+eframe = { version = "0.28", default-features = false, features = [
-    "default_fonts", # Embed the default egui fonts.
+#   "accesskit",     # Make egui compatible with screen readers. NOTE: adds a lot of dependencies.
-    "glow",          # Use the glow rendering backend. Alternative: "wgpu".
+    "default_fonts", # Embed the default egui fonts.
-#   "persistence",   # Enable restoring app state when restarting the app.
+    "glow",          # Use the glow rendering backend. Alternative: "wgpu".
-] }
+    "persistence",   # Enable restoring app state when restarting the app.
-log = "0.4"
+] }
-emath  = "0.28.0"
+log = "0.4"
-rand = "0.8"
+emath  = "0.28.0"
-getrandom = { version = "0.2", features = ["js"] }
+rand = "0.8"
-
+getrandom = { version = "0.2", features = ["js"] }
-# native:
+
-[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+# You only need serde if you want app persistence:
-env_logger = "0.10"
+serde = { version = "1", features = ["derive"] }
-
+
-# web:
+# native:
-[target.'cfg(target_arch = "wasm32")'.dependencies]
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-wasm-bindgen-futures = "0.4"
+env_logger = "0.10"
-
+
-# to access the DOM (to hide the loading text)
+# web:
-[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
+[target.'cfg(target_arch = "wasm32")'.dependencies]
-version = "0.3.4"
+wasm-bindgen-futures = "0.4"
-
+
-[profile.release]
+# to access the DOM (to hide the loading text)
-opt-level = 2 # fast and small wasm
+[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
-
+version = "0.3.4"
-# Optimize all dependencies even in debug builds:
+
-[profile.dev.package."*"]
+[profile.release]
-opt-level = 2
+opt-level = 2 # fast and small wasm
+
+# Optimize all dependencies even in debug builds:
+[profile.dev.package."*"]
+opt-level = 2
+
+
+[patch.crates-io]
+
+# If you want to use the bleeding edge version of egui and eframe:
+# egui = { git = "https://github.com/emilk/egui", branch = "master" }
+# eframe = { git = "https://github.com/emilk/egui", branch = "master" }
+
+# If you fork https://github.com/emilk/egui you can test with:
+# egui = { path = "../egui/crates/egui" }
+# eframe = { path = "../egui/crates/eframe" }

assets/sw.js

@@ -1,9 +1,9 @@
-var cacheName = 'egui-circles';
+var cacheName = 'egui_circles';
 var filesToCache = [
   './',
   './index.html',
-  './egui-circles.js',
+  './egui_circles.js',
-  './egui-circles_bg.wasm',
+  './egui_circles_bg.wasm',
 ];
 
 /* Start the service worker and cache all of the app's content */

index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
-<meta http-equiv="Content-Type" charset="utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <!-- Disable zooming: -->
-<meta name="viewport" content="width=device-width, initial-scale=1.5, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
 <head>
     <!-- change this to your project name -->
@@ -56,15 +56,16 @@
             width: 100%;
         }
 
-        /* Position canvas in center-top: */
+        /* Make canvas fill entire document: */
         canvas {
             margin-right: auto;
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 0%;
+            top: 0;
-            left: 50%;
+            left: 0;
-            transform: translate(-50%, 0%);
+            width: 100%;
+            height: 100%;
         }
 
         .centered {
@@ -110,14 +111,21 @@
                 transform: rotate(360deg);
             }
         }
-
     </style>
 </head>
 
 <body>
     <!-- The WASM code will resize the canvas dynamically -->
     <!-- the id is hardcoded in main.rs . so, make sure both match. -->
-    <canvas id="the_canvas_id" width="800" height="600"></canvas>
+    <canvas id="the_canvas_id"></canvas>
+
+    <!-- the loading spinner will be removed in main.rs -->
+    <div class="centered" id="loading_text">
+        <p style="font-size:16px">
+            Loading…
+        </p>
+        <div class="lds-dual-ring"></div>
+    </div>
 
     <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
     <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->

src/app.rs

@@ -1,25 +1,24 @@
-extern crate emath;
+use egui::{Color32, Stroke, Vec2};
-extern crate rand;
+use rand::Rng;
-extern crate eframe;
-
-use self::emath::Vec2;
-use self::eframe::egui;
-use self::egui::Color32;
-use self::egui::Stroke;
-use self::rand::Rng;
 
 use crate::circle::Circle;
 
+/// We derive Deserialize/Serialize so we can persist app state on shutdown.
+#[derive(serde::Deserialize, serde::Serialize)]
+#[serde(default)] // if we add new fields, give them default values when deserializing old state
+
 pub struct Simulation {
-    circles: Vec<Circle>,
     circles_count: usize,
 
+    #[serde(skip)] // This how you opt-out of serialization of a field
+    circles: Vec<Circle>,
+    #[serde(skip)]
     colors: Vec<egui::Color32>,
 }
 
 impl Default for Simulation {
     fn default() -> Self {
-        Self {
+        Self {            
             circles: Vec::new(),
             circles_count: 2,
             colors: Vec::new(),
@@ -27,26 +26,87 @@ impl Default for Simulation {
     }
 }
 
-impl eframe::App for Simulation {
+impl Simulation {
-    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+    /// Called once before the first frame.
+    pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        // This is also where you can customize the look and feel of egui using
+        // `cc.egui_ctx.set_visuals` and `cc.egui_ctx.set_fonts`.
+
         // Looks better on 4k montior
-        ctx.set_pixels_per_point(1.5);
+        cc.egui_ctx.set_pixels_per_point(1.5);
+
+        // Load previous app state (if any).
+        // Note that you must enable the `persistence` feature for this to work.
+        if let Some(storage) = cc.storage {
+            return eframe::get_value(storage, eframe::APP_KEY).unwrap_or_default();
+        }
+
+        Default::default()
+    }
+}
+
+impl eframe::App for Simulation {
+    /// Called by the frame work to save state before shutdown.
+    fn save(&mut self, storage: &mut dyn eframe::Storage) {
+        eframe::set_value(storage, eframe::APP_KEY, self);
+    }
+
+    /// Called each time the UI needs repainting, which may be many times per second.
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        // Put your widgets into a `SidePanel`, `TopBottomPanel`, `CentralPanel`, `Window` or `Area`.
+        // For inspiration and more examples, go to https://emilk.github.io/egui
 
         egui::TopBottomPanel::top("top_panel").show(ctx, |ui| {
             // The top panel is often a good place for a menu bar:
-            egui::widgets::global_dark_light_mode_buttons(ui);
+
+            egui::menu::bar(ui, |ui| {
+                // NOTE: no File->Quit on web pages!
+                let is_web = cfg!(target_arch = "wasm32");
+                if !is_web {
+                    ui.menu_button("File", |ui| {
+                        if ui.button("Quit").clicked() {
+                            ctx.send_viewport_cmd(egui::ViewportCommand::Close);
+                        }
+                    });
+                    ui.add_space(16.0);
+                }
+
+                egui::widgets::global_dark_light_mode_buttons(ui);
+
+                ui.with_layout(egui::Layout::top_down(egui::Align::RIGHT), |ui| {
+                    ui.horizontal(|ui| {
+                        ui.spacing_mut().item_spacing.x = 4.0;
+                        ui.hyperlink_to(
+                            "source code",
+                            "https://gitea.djmil.dev/djmil/egui-circles",
+                        );
+                        ui.label("rust");
+                    });
+                });
+            });
         });
 
         egui::CentralPanel::default().show(ctx, |ui| {
-            if ui.button("halt").clicked() {
+            // The central panel the region left after adding TopPanel's and SidePanel's
-                self.circles.iter_mut().for_each(|c| (*c).v = Vec2{x: 0.0, y: 0.0});
-            };
 
-            if ui.button("push").clicked() {
+            // Simulatiom
-                self.circles.iter_mut().for_each(|c| (*c).v = Vec2{
+            ui.horizontal(|ui| {
-                    x: rand::thread_rng().gen_range(-2.0..2.0),
+                ui.label("Click on circles or press");
-                    y: rand::thread_rng().gen_range(-2.0..2.0)});
+
-            };
+                if ui.button("push").clicked() {
+                    self.circles.iter_mut().for_each(|c| (*c).v = Vec2{
+                        x: rand::thread_rng().gen_range(-4.0..4.0),
+                        y: rand::thread_rng().gen_range(-4.0..4.0)});
+                };
+
+                ui.label("or");
+
+                if ui.button("halt").clicked() {
+                    self.circles.iter_mut().for_each(|c| (*c).v = Vec2{x: 0.0, y: 0.0});
+                };
+
+                ui.label("buttons");
+            });
 
             ui.add(egui::Slider::new(&mut self.circles_count, 0..=25).text("circles count"));
 
@@ -100,6 +160,16 @@ impl eframe::App for Simulation {
                     Stroke{width: 2.0, color: Color32::from_rgb(200, 255, 255)}
                 );
             }
+            // End simultion
+
+            ui.separator();
+
+
+
+            ui.with_layout(egui::Layout::bottom_up(egui::Align::LEFT), |ui| {
+                powered_by_egui_and_eframe(ui);
+                egui::warn_if_debug_build(ui);
+            });
         });
 
         for circle in &mut self.circles {
@@ -126,9 +196,22 @@ impl eframe::App for Simulation {
 
         // This is how to go into continuous mode - uncomment this to see example of continuous mode
         ctx.request_repaint();
+
     }
 }
 
+fn powered_by_egui_and_eframe(ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        ui.spacing_mut().item_spacing.x = 0.0;
+        ui.label("Powered by ");
+        ui.hyperlink_to("egui", "https://github.com/emilk/egui");
+        ui.label(" and ");
+        ui.hyperlink_to(
+            "eframe",
+            "https://github.com/emilk/egui/tree/master/crates/eframe",
+        );
+    });
+}
 
 fn collision(c1: &Circle, c2: &Circle) -> (Vec2, Vec2) {
     let m1 = c1.r;
@@ -173,5 +256,3 @@ fn collision(c1: &Circle, c2: &Circle) -> (Vec2, Vec2) {
         vec2n + vec2t
     );
 }
-
-//}

src/circle.rs

@@ -1,10 +1,5 @@
-extern crate emath;
+use egui::{Pos2, Rect, Vec2};
-extern crate rand;
+use rand::Rng;
-
-use self::emath::Vec2;
-use self::emath::Pos2;
-use self::emath::Rect;
-use self::rand::Rng;
 
 pub static FRICTION: f32 = 0.995;
 

src/lib.rs

@@ -0,0 +1,6 @@
+#![warn(clippy::all, rust_2018_idioms)]
+
+mod app;
+pub use app::Simulation;
+
+mod circle;

src/main.rs

@@ -1,64 +1,63 @@
-mod app;
+#![warn(clippy::all, rust_2018_idioms)]
-mod circle;
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
-
+
-// When compiling natively:
+// When compiling natively:
-#[cfg(not(target_arch = "wasm32"))]
+#[cfg(not(target_arch = "wasm32"))]
-fn main() -> eframe::Result<()> {
+fn main() -> eframe::Result {
-    //env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
+    env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
-
+
-    let native_options = eframe::NativeOptions {
+    let native_options = eframe::NativeOptions {
-        viewport: eframe::egui::ViewportBuilder::default()
+        viewport: egui::ViewportBuilder::default()
-            .with_inner_size([800.0, 600.0])
+            .with_inner_size([800.0, 600.0])
-            .with_min_inner_size([300.0, 220.0])
+            .with_min_inner_size([300.0, 220.0])
-            .with_icon( 
+            .with_icon(
-                // NOTE: Adding an icon is optional
+                // NOTE: Adding an icon is optional
-                eframe::icon_data::from_png_bytes(&include_bytes!("../assets/icon-192.png")[..])
+                eframe::icon_data::from_png_bytes(&include_bytes!("../assets/icon-192.png")[..])
-                    .expect("Failed to load icon"),
+                    .expect("Failed to load icon"),
-            ),
+            ),
-        ..Default::default()
+        ..Default::default()
-    };
+    };
-
+
-    eframe::run_native(
+    eframe::run_native(
-        "egui-circles",
+        "eGUI Circles",
-        native_options,
+        native_options,
-        Box::new(|_| Ok(Box::<crate::app::Simulation>::default())),
+        Box::new(|cc| Ok(Box::new(egui_circles::Simulation::new(cc)))),
-    )
+    )
-}
+}
-
+
-// When compiling to web using trunk:
+// When compiling to web using trunk:
-#[cfg(target_arch = "wasm32")]
+#[cfg(target_arch = "wasm32")]
-fn main() {
+fn main() {
-    // Redirect `log` message to `console.log` and friends:
+    // Redirect `log` message to `console.log` and friends:
-    eframe::WebLogger::init(log::LevelFilter::Debug).ok();
+    eframe::WebLogger::init(log::LevelFilter::Debug).ok();
-
+
-    let web_options = eframe::WebOptions::default();
+    let web_options = eframe::WebOptions::default();
-
+
-    wasm_bindgen_futures::spawn_local(async {
+    wasm_bindgen_futures::spawn_local(async {
-        let start_result = eframe::WebRunner::new()
+        let start_result = eframe::WebRunner::new()
-            .start(
+            .start(
-                "the_canvas_id",
+                "the_canvas_id",
-                web_options,
+                web_options,
-                //Box::new(|cc| Ok(Box::new(eframe_template::TemplateApp::new(cc)))),
+                Box::new(|cc| Ok(Box::new(egui_circles::Simulation::new(cc)))),
-                Box::new(|_| Ok(Box::<crate::app::Simulation>::default())),
+            )
-            )
+            .await;
-            .await;
+
-
+        // Remove the loading text and spinner:
-        // Remove the loading text and spinner:
+        let loading_text = web_sys::window()
-        let loading_text = web_sys::window()
+            .and_then(|w| w.document())
-            .and_then(|w| w.document())
+            .and_then(|d| d.get_element_by_id("loading_text"));
-            .and_then(|d| d.get_element_by_id("loading_text"));
+        if let Some(loading_text) = loading_text {
-        if let Some(loading_text) = loading_text {
+            match start_result {
-            match start_result {
+                Ok(_) => {
-                Ok(_) => {
+                    loading_text.remove();
-                    loading_text.remove();
+                }
-                }
+                Err(e) => {
-                Err(e) => {
+                    loading_text.set_inner_html(
-                    loading_text.set_inner_html(
+                        "<p> The app has crashed. See the developer console for details. </p>",
-                        "<p> The app has crashed. See the developer console for details. </p>",
+                    );
-                    );
+                    panic!("Failed to start eframe: {e:?}");
-                    panic!("Failed to start eframe: {e:?}");
+                }
-                }
+            }
-            }
+        }
-        }
+    });
-    });
+}
-}

wasm32/build.sh

@@ -33,8 +33,8 @@ if has_docker_container $TRAGET; then
 		--attach
 else
 	docker run \
-		--volume $(pwd)/..:/$NAME \
+		--volume $(pwd):/$NAME \
-		--name $TRAGET            \	  
+		--name $TRAGET            \
 		$BUILDER \
-		build --release
+		build --release --public-url /$NAME --verbose
 fi