djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[web] move all reusable web code into egui_web

Browse source
This commit is contained in:
Emil Ernerfeldt 2020-07-18 18:35:17 +02:00
parent 1a4c399e41
commit dfa4d52a94
8 changed files with 385 additions and 383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Cargo.lock generated
View file

@ -391,6 +391,7 @@ version = "0.1.0"
dependencies = [
"egui 0.1.2",
"js-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
"parking_lot 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
"serde 1.0.114 (registry+https://github.com/rust-lang/crates.io-index)",
"serde_json 1.0.56 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
@ -420,11 +421,9 @@ dependencies = [
"egui 0.1.2",
"egui_web 0.1.0",
"js-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
"parking_lot 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
"serde 1.0.114 (registry+https://github.com/rust-lang/crates.io-index)",
"serde_json 1.0.56 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
"web-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]

64
docs/example_wasm.js
View file

@ -207,39 +207,38 @@ function makeMutClosure(arg0, arg1, dtor, f) {
real.original = state;
return real;
}
function __wbg_adapter_26(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
function __wbg_adapter_26(arg0, arg1) {
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5402719cc6dde927(arg0, arg1);
}
function __wbg_adapter_29(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_32(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_35(arg0, arg1) {
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h352b9cbf82e6c0ee(arg0, arg1);
function __wbg_adapter_35(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_38(arg0, arg1) {
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1322780ee0c72b2c(arg0, arg1);
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h84da5f062b972f09(arg0, arg1);
}
function __wbg_adapter_41(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
}
/**
* This is the entry-point for all the web-assembly.
* @param {string} canvas_id
* @returns {StateRef}
*/
__exports.start = function(canvas_id) {
var ptr0 = passStringToWasm0(canvas_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
var ret = wasm.start(ptr0, len0);
return StateRef.__wrap(ret);
wasm.start(ptr0, len0);
};
function handleError(f) {
@ -256,25 +255,6 @@ function handleError(f) {
function getArrayU8FromWasm0(ptr, len) {
return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len);
}
/**
*/
class StateRef {
static __wrap(ptr) {
const obj = Object.create(StateRef.prototype);
obj.ptr = ptr;
return obj;
}
free() {
const ptr = this.ptr;
this.ptr = 0;
wasm.__wbg_stateref_free(ptr);
}
}
__exports.StateRef = StateRef;
async function load(module, imports) {
if (typeof Response === 'function' && module instanceof Response) {
@ -745,28 +725,28 @@ async function init(input) {
var ret = wasm.memory;
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper176 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_35);
imports.wbg.__wbindgen_closure_wrapper373 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_35);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper170 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_26);
imports.wbg.__wbindgen_closure_wrapper375 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_29);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper166 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_38);
imports.wbg.__wbindgen_closure_wrapper371 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_38);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper172 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_41);
imports.wbg.__wbindgen_closure_wrapper365 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_26);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper168 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_29);
imports.wbg.__wbindgen_closure_wrapper369 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_41);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper174 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_32);
imports.wbg.__wbindgen_closure_wrapper366 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_32);
return addHeapObject(ret);
};

BIN
docs/example_wasm_bg.wasm
View file

Binary file not shown.

6
egui/src/widgets.rs
View file

@ -120,6 +120,12 @@ impl Into<Label> for &str {
}
}
impl Into<Label> for &String {
fn into(self) -> Label {
Label::new(self)
}
}
impl Into<Label> for String {
fn into(self) -> Label {
Label::new(self)

3
egui_web/Cargo.toml
View file

@ -10,6 +10,7 @@ crate-type = ["cdylib", "rlib"]
[dependencies]
js-sys = "0.3"
parking_lot = "0.11"
serde = "1"
serde_json = "1"
wasm-bindgen = "0.2"
@ -26,7 +27,9 @@ features = [
'Element',
'HtmlCanvasElement',
'HtmlElement',
'KeyboardEvent',
'Location',
'MouseEvent',
'Performance',
'Storage',
'Touch',

348
egui_web/src/lib.rs
View file

@ -3,25 +3,43 @@
pub mod webgl;
use parking_lot::Mutex;
use std::sync::Arc;
use wasm_bindgen::prelude::*;
// ----------------------------------------------------------------------------
use std::sync::Arc;
use wasm_bindgen::JsValue;
pub struct BackendInfo {
pub painter_debug_info: String,
/// excludes call to paint backend
pub cpu_time: f32,
pub fps: f32,
pub struct EguiWeb {
/// e.g. "#fragment" part of "www.example.com/index.html#fragment"
pub web_location_hash: String,
}
/// Implement this and use `egui_web::AppRunner` to run your app.
pub trait App {
fn ui(&mut self, ui: &mut egui::Ui, info: &BackendInfo);
}
// ----------------------------------------------------------------------------
pub struct Backend {
ctx: Arc<egui::Context>,
webgl_painter: webgl::Painter,
painter: webgl::Painter,
frame_times: egui::MovementTracker<f32>,
frame_start: Option<f64>,
}
impl EguiWeb {
pub fn new(canvas_id: &str) -> Result<EguiWeb, JsValue> {
impl Backend {
pub fn new(canvas_id: &str) -> Result<Backend, JsValue> {
let ctx = egui::Context::new();
load_memory(&ctx);
Ok(EguiWeb {
Ok(Backend {
ctx,
webgl_painter: webgl::Painter::new(canvas_id)?,
painter: webgl::Painter::new(canvas_id)?,
frame_times: egui::MovementTracker::new(1000, 1.0),
frame_start: None,
})
@ -29,7 +47,7 @@ impl EguiWeb {
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
self.webgl_painter.canvas_id()
self.painter.canvas_id()
}
pub fn begin_frame(&mut self, raw_input: egui::RawInput) -> egui::Ui {
@ -49,7 +67,7 @@ impl EguiWeb {
let now = now_sec();
self.frame_times.add(now, (now - frame_start) as f32);
self.webgl_painter.paint_batches(
self.painter.paint_batches(
bg_color,
batches,
self.ctx.texture(),
@ -62,11 +80,11 @@ impl EguiWeb {
}
pub fn painter_debug_info(&self) -> String {
self.webgl_painter.debug_info()
self.painter.debug_info()
}
/// excludes painting
pub fn cpu_usage(&self) -> f32 {
pub fn cpu_time(&self) -> f32 {
self.frame_times.average().unwrap_or_default()
}
@ -75,6 +93,87 @@ impl EguiWeb {
}
}
// ----------------------------------------------------------------------------
/// Data gathered between frames.
/// Is translated to `egui::RawInput` at the start of each frame.
#[derive(Default)]
pub struct WebInput {
pub mouse_pos: Option<egui::Pos2>,
pub mouse_down: bool, // TODO: which button
pub is_touch: bool,
pub scroll_delta: egui::Vec2,
pub events: Vec<egui::Event>,
}
impl WebInput {
pub fn new_frame(&mut self) -> egui::RawInput {
egui::RawInput {
mouse_down: self.mouse_down,
mouse_pos: self.mouse_pos,
scroll_delta: std::mem::take(&mut self.scroll_delta),
screen_size: screen_size().unwrap(),
pixels_per_point: Some(pixels_per_point()),
time: now_sec(),
seconds_since_midnight: Some(seconds_since_midnight()),
events: std::mem::take(&mut self.events),
}
}
}
// ----------------------------------------------------------------------------
pub struct AppRunner {
pub backend: Backend,
pub web_input: WebInput,
pub app: Box<dyn App>,
}
impl AppRunner {
pub fn new(canvas_id: &str, app: Box<dyn App>) -> Result<Self, JsValue> {
Ok(Self {
backend: Backend::new(canvas_id)?,
web_input: Default::default(),
app,
})
}
pub fn canvas_id(&self) -> &str {
self.backend.canvas_id()
}
pub fn paint(&mut self) -> Result<(), JsValue> {
resize_to_screen_size(self.backend.canvas_id());
let raw_input = self.web_input.new_frame();
let info = BackendInfo {
painter_debug_info: self.backend.painter_debug_info(),
cpu_time: self.backend.cpu_time(),
fps: self.backend.fps(),
web_location_hash: location_hash().unwrap_or_default(),
};
let mut ui = self.backend.begin_frame(raw_input);
self.app.ui(&mut ui, &info);
let output = self.backend.end_frame()?;
handle_output(&output);
Ok(())
}
}
/// Install event listeners to register different input events
/// and starts running the given `AppRunner`.
pub fn run(runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
let runner = AppRunnerRef(Arc::new(Mutex::new(runner)));
install_canvas_events(&runner)?;
install_document_events(&runner)?;
paint_and_schedule(runner.clone())?;
Ok(runner)
}
// ----------------------------------------------------------------------------
// Helpers to hide some of the verbosity of web_sys
@ -272,3 +371,228 @@ pub fn translate_key(key: &str) -> Option<egui::Key> {
_ => None,
}
}
// ----------------------------------------------------------------------------
#[derive(Clone)]
pub struct AppRunnerRef(Arc<Mutex<AppRunner>>);
/// If true, paint at full framerate always.
/// If false, only paint on input.
/// TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
const ANIMATION_FRAME: bool = true;
fn paint_and_schedule(runner: AppRunnerRef) -> Result<(), JsValue> {
runner.0.lock().paint()?;
if ANIMATION_FRAME {
request_animation_frame(runner)?;
}
Ok(())
}
fn request_animation_frame(runner: AppRunnerRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let window = web_sys::window().unwrap();
let closure = Closure::once(move || paint_and_schedule(runner));
window.request_animation_frame(closure.as_ref().unchecked_ref())?;
closure.forget(); // We must forget it, or else the callback is canceled on drop
Ok(())
}
fn invalidate(runner: &mut AppRunner) -> Result<(), JsValue> {
if ANIMATION_FRAME {
Ok(()) // No need to invalidate - we repaint all the time
} else {
runner.paint() // TODO: schedule repaint instead?
}
}
fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let document = web_sys::window().unwrap().document().unwrap();
{
// keydown
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut runner = runner.0.lock();
let key = event.key();
if let Some(key) = translate_key(&key) {
runner
.web_input
.events
.push(egui::Event::Key { key, pressed: true });
} else {
runner.web_input.events.push(egui::Event::Text(key));
}
invalidate(&mut runner).unwrap();
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
// keyup
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut runner = runner.0.lock();
let key = event.key();
if let Some(key) = translate_key(&key) {
runner.web_input.events.push(egui::Event::Key {
key,
pressed: false,
});
invalidate(&mut runner).unwrap();
}
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
closure.forget();
}
for event_name in &["load", "pagehide", "pageshow", "resize"] {
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move || {
invalidate(&mut runner.0.lock()).unwrap();
}) as Box<dyn FnMut()>);
document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}
fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let canvas = canvas_element(runner.0.lock().canvas_id()).unwrap();
{
let event_name = "mousedown";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut runner = runner.0.lock();
if !runner.web_input.is_touch {
runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
runner.web_input.mouse_down = true;
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mousemove";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut runner = runner.0.lock();
if !runner.web_input.is_touch {
runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseup";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut runner = runner.0.lock();
if !runner.web_input.is_touch {
runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
runner.web_input.mouse_down = false;
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseleave";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut runner = runner.0.lock();
if !runner.web_input.is_touch {
runner.web_input.mouse_pos = None;
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchstart";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut runner = runner.0.lock();
runner.web_input.is_touch = true;
runner.web_input.mouse_pos = Some(pos_from_touch_event(&event));
runner.web_input.mouse_down = true;
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchmove";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut runner = runner.0.lock();
runner.web_input.is_touch = true;
runner.web_input.mouse_pos = Some(pos_from_touch_event(&event));
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchend";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut runner = runner.0.lock();
runner.web_input.is_touch = true;
runner.web_input.mouse_down = false; // First release mouse to click...
runner.paint().unwrap(); // ...do the clicking...
runner.web_input.mouse_pos = None; // ...remove hover effect
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "wheel";
let runner = runner.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::WheelEvent| {
let mut runner = runner.0.lock();
runner.web_input.scroll_delta.x -= event.delta_x() as f32;
runner.web_input.scroll_delta.y -= event.delta_y() as f32;
invalidate(&mut runner).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}

24
example_wasm/Cargo.toml
View file

@ -10,33 +10,9 @@ crate-type = ["cdylib", "rlib"]
[dependencies]
js-sys = "0.3"
parking_lot = "0.11"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
wasm-bindgen = "0.2"
egui = { path = "../egui" }
egui_web = { path = "../egui_web" }
[dependencies.web-sys]
version = "0.3"
features = [
'console',
'CssStyleDeclaration',
'Document',
'Element',
'HtmlCanvasElement',
'HtmlElement',
'KeyboardEvent',
'Location',
'MouseEvent',
'Performance',
'Storage',
'WebGlBuffer',
'WebGlProgram',
'WebGlRenderingContext',
'WebGlShader',
'WebGlTexture',
'WebGlUniformLocation',
'Window',
]

320
example_wasm/src/lib.rs
View file

@ -1,68 +1,32 @@
#![deny(warnings)]
#![warn(clippy::all)]
use egui::{examples::ExampleApp, label, widgets::Separator, Align, RawInput, TextStyle, *};
use egui::{label, widgets::Separator, Align, TextStyle, *};
use wasm_bindgen::prelude::*;
// ----------------------------------------------------------------------------
/// Data gathered between frames.
/// Is translated to `egui::RawInput` at the start of each frame.
#[derive(Default)]
pub struct WebInput {
pub mouse_pos: Option<Pos2>,
pub mouse_down: bool, // TODO: which button
pub is_touch: bool,
pub scroll_delta: Vec2,
pub events: Vec<Event>,
}
impl WebInput {
pub fn new_frame(&mut self) -> egui::RawInput {
egui::RawInput {
mouse_down: self.mouse_down,
mouse_pos: self.mouse_pos,
scroll_delta: std::mem::take(&mut self.scroll_delta),
screen_size: egui_web::screen_size().unwrap(),
pixels_per_point: Some(egui_web::pixels_per_point()),
time: egui_web::now_sec(),
seconds_since_midnight: Some(egui_web::seconds_since_midnight()),
events: std::mem::take(&mut self.events),
}
}
/// This is the entry-point for all the web-assembly.
#[wasm_bindgen]
pub fn start(canvas_id: &str) -> Result<(), JsValue> {
let app = Box::new(MyApp::default());
let runner = egui_web::AppRunner::new(canvas_id, app)?;
egui_web::run(runner)?;
Ok(())
}
// ----------------------------------------------------------------------------
pub struct State {
egui_web: egui_web::EguiWeb,
web_input: WebInput,
example_app: ExampleApp,
#[derive(Default)]
pub struct MyApp {
example_app: egui::examples::ExampleApp,
}
impl State {
fn new(canvas_id: &str) -> Result<State, JsValue> {
Ok(State {
egui_web: egui_web::EguiWeb::new(canvas_id)?,
web_input: Default::default(),
example_app: Default::default(),
})
}
impl egui_web::App for MyApp {
fn ui(&mut self, ui: &mut egui::Ui, info: &egui_web::BackendInfo) {
self.example_app.ui(ui, &info.web_location_hash);
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
self.egui_web.canvas_id()
}
fn run(&mut self, raw_input: RawInput, web_location_hash: &str) -> Result<Output, JsValue> {
let mut ui = self.egui_web.begin_frame(raw_input);
self.ui(&mut ui, web_location_hash);
self.egui_web.end_frame()
}
fn ui(&mut self, ui: &mut egui::Ui, web_location_hash: &str) {
self.example_app.ui(ui, web_location_hash);
let mut ui = ui.centered_column(ui.available().width().min(480.0));
ui.set_layout(Layout::vertical(Align::Min));
ui.add(label!("Egui!").text_style(TextStyle::Heading));
@ -80,266 +44,16 @@ impl State {
ui.label("WebGl painter info:");
ui.indent("webgl region id", |ui| {
ui.label(self.egui_web.painter_debug_info());
ui.label(&info.painter_debug_info);
});
ui.add(
label!(
"CPU usage: {:.2} ms (excludes painting)",
1e3 * self.egui_web.cpu_usage()
1e3 * info.cpu_time
)
.text_style(TextStyle::Monospace),
);
ui.add(label!("FPS: {:.1}", self.egui_web.fps()).text_style(TextStyle::Monospace));
ui.add(label!("FPS: {:.1}", info.fps).text_style(TextStyle::Monospace));
}
}
// ----------------------------------------------------------------------------
use parking_lot::Mutex;
use std::sync::Arc;
#[wasm_bindgen]
#[derive(Clone)]
pub struct StateRef(Arc<Mutex<State>>);
/// If true, paint at full framerate always.
/// If false, only paint on input.
/// TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
const ANIMATION_FRAME: bool = true;
#[wasm_bindgen]
pub fn start(canvas_id: &str) -> Result<StateRef, JsValue> {
let state = State::new(canvas_id)?;
let state = StateRef(Arc::new(Mutex::new(state)));
install_canvas_events(&state)?;
install_document_events(&state)?;
paint_and_schedule(state.clone())?;
Ok(state)
}
fn paint_and_schedule(state: StateRef) -> Result<(), JsValue> {
paint(&mut state.0.lock())?;
if ANIMATION_FRAME {
request_animation_frame(state)?;
}
Ok(())
}
fn request_animation_frame(state: StateRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let window = web_sys::window().unwrap();
let closure = Closure::once(move || paint_and_schedule(state));
window.request_animation_frame(closure.as_ref().unchecked_ref())?;
closure.forget(); // We must forget it, or else the callback is canceled on drop
Ok(())
}
fn paint(state: &mut State) -> Result<(), JsValue> {
egui_web::resize_to_screen_size(state.canvas_id());
let raw_input = state.web_input.new_frame();
let web_location_hash = egui_web::location_hash().unwrap_or_default();
let output = state.run(raw_input, &web_location_hash)?;
egui_web::handle_output(&output);
Ok(())
}
fn invalidate(state: &mut State) -> Result<(), JsValue> {
if ANIMATION_FRAME {
Ok(()) // No need to invalidate - we repaint all the time
} else {
paint(state) // TODO: schedule repaint instead?
}
}
fn install_document_events(state: &StateRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let document = web_sys::window().unwrap().document().unwrap();
{
// keydown
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut state = state.0.lock();
let key = event.key();
if let Some(key) = egui_web::translate_key(&key) {
state
.web_input
.events
.push(Event::Key { key, pressed: true });
} else {
state.web_input.events.push(Event::Text(key));
}
invalidate(&mut state).unwrap();
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
// keyup
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut state = state.0.lock();
let key = event.key();
if let Some(key) = egui_web::translate_key(&key) {
state.web_input.events.push(Event::Key {
key,
pressed: false,
});
invalidate(&mut state).unwrap();
}
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
closure.forget();
}
for event_name in &["load", "pagehide", "pageshow", "resize"] {
let state = state.clone();
let closure = Closure::wrap(Box::new(move || {
invalidate(&mut state.0.lock()).unwrap();
}) as Box<dyn FnMut()>);
document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}
fn install_canvas_events(state: &StateRef) -> Result<(), JsValue> {
use egui_web::pos_from_mouse_event;
use wasm_bindgen::JsCast;
let canvas = egui_web::canvas_element(state.0.lock().canvas_id()).unwrap();
{
let event_name = "mousedown";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
state.web_input.mouse_down = true;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mousemove";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseup";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
state.web_input.mouse_down = false;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseleave";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = None;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchstart";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
state.web_input.mouse_down = true;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchmove";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchend";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_down = false; // First release mouse to click...
paint(&mut state).unwrap(); // ...do the clicking...
state.web_input.mouse_pos = None; // ...remove hover effect
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "wheel";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::WheelEvent| {
let mut state = state.0.lock();
state.web_input.scroll_delta.x -= event.delta_x() as f32;
state.web_input.scroll_delta.y -= event.delta_y() as f32;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}