migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-08-31 22:00:03 -04:00
Code Activity

[web] implement reactive repainting

Browse Source 
meaning: only repaint on new input
This commit is contained in:
Emil Ernerfeldt
2020-07-18 19:40:24 +02:00
parent dfa4d52a94
commit 3ecd6c0297
12 changed files with 230 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
egui_web/src/lib.rs
View File

@@ -9,19 +9,24 @@ use wasm_bindgen::prelude::*;
// ----------------------------------------------------------------------------
pub struct BackendInfo {
pub painter_debug_info: String,
/// excludes call to paint backend
pub cpu_time: f32,
pub fps: f32,
pub struct WebInfo {
/// 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);
fn ui(&mut self, ui: &mut egui::Ui, backend: &mut Backend, info: &WebInfo);
}
#[derive(Clone, Copy, Debug, Eq, PartialEq)]
pub enum RunMode {
/// Uses `request_animation_frame` to repaint the UI on each display Hz.
/// This is good for games and stuff where you want to run logic at e.g. 60 FPS.
Continuous,
/// Only repaint when there is new input (mouse movement, keyboard input etc).
Reactive,
}
// ----------------------------------------------------------------------------
@@ -31,10 +36,13 @@ pub struct Backend {
painter: webgl::Painter,
frame_times: egui::MovementTracker<f32>,
frame_start: Option<f64>,
/// If true, paint at full framerate always.
/// If false, only paint on input.
run_mode: RunMode,
}
impl Backend {
pub fn new(canvas_id: &str) -> Result<Backend, JsValue> {
pub fn new(canvas_id: &str, run_mode: RunMode) -> Result<Backend, JsValue> {
let ctx = egui::Context::new();
load_memory(&ctx);
Ok(Backend {
@@ -42,9 +50,18 @@ impl Backend {
painter: webgl::Painter::new(canvas_id)?,
frame_times: egui::MovementTracker::new(1000, 1.0),
frame_start: None,
run_mode,
})
}
pub fn run_mode(&self) -> RunMode {
self.run_mode
}
pub fn set_run_mode(&mut self, run_mode: RunMode) {
self.run_mode = run_mode;
}
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
self.painter.canvas_id()
@@ -127,14 +144,17 @@ pub struct AppRunner {
pub backend: Backend,
pub web_input: WebInput,
pub app: Box<dyn App>,
/// Used to prevent calling paint() twice in one frame
pub has_requested_animaiton_frame: bool,
}
impl AppRunner {
pub fn new(canvas_id: &str, app: Box<dyn App>) -> Result<Self, JsValue> {
pub fn new(backend: Backend, app: Box<dyn App>) -> Result<Self, JsValue> {
Ok(Self {
backend: Backend::new(canvas_id)?,
backend,
web_input: Default::default(),
app,
has_requested_animaiton_frame: false,
})
}
@@ -142,36 +162,33 @@ impl AppRunner {
self.backend.canvas_id()
}
pub fn paint(&mut self) -> Result<(), JsValue> {
pub fn paint(&mut self) -> Result<egui::Output, 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(),
let info = WebInfo {
web_location_hash: location_hash().unwrap_or_default(),
};
let mut ui = self.backend.begin_frame(raw_input);
self.app.ui(&mut ui, &info);
self.app.ui(&mut ui, &mut self.backend, &info);
let output = self.backend.end_frame()?;
handle_output(&output);
Ok(())
Ok(output)
}
}
/// 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)
pub fn run(app_runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
let runner_ref = AppRunnerRef(Arc::new(Mutex::new(app_runner)));
install_canvas_events(&runner_ref)?;
install_document_events(&runner_ref)?;
paint_and_schedule(runner_ref.clone())?;
Ok(runner_ref)
}
// ----------------------------------------------------------------------------
@@ -377,55 +394,57 @@ pub fn translate_key(key: &str) -> Option<egui::Key> {
#[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)?;
fn paint_and_schedule(runner_ref: AppRunnerRef) -> Result<(), JsValue> {
let needs_repaint = {
let mut runner_lock = runner_ref.0.lock();
runner_lock.has_requested_animaiton_frame = false;
let output = runner_lock.paint()?;
let run_mode = runner_lock.backend.run_mode();
run_mode == RunMode::Continuous || output.needs_repaint
};
if needs_repaint {
request_animation_frame(runner_ref)?;
}
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
fn request_animation_frame(runner_ref: AppRunnerRef) -> Result<(), JsValue> {
if !{ runner_ref.0.lock().has_requested_animaiton_frame } {
runner_ref.0.lock().has_requested_animaiton_frame = true;
use wasm_bindgen::JsCast;
let window = web_sys::window().unwrap();
let closure = Closure::once(move || paint_and_schedule(runner_ref));
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 invalidate(runner_ref: AppRunnerRef) -> Result<(), JsValue> {
request_animation_frame(runner_ref)
}
fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
fn install_document_events(runner_ref: &AppRunnerRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let document = web_sys::window().unwrap().document().unwrap();
{
// keydown
let runner = runner.clone();
let runner_ref = runner_ref.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut runner = runner.0.lock();
let mut runner_lock = runner_ref.0.lock();
let key = event.key();
if let Some(key) = translate_key(&key) {
runner
runner_lock
.web_input
.events
.push(egui::Event::Key { key, pressed: true });
} else {
runner.web_input.events.push(egui::Event::Text(key));
runner_lock.web_input.events.push(egui::Event::Text(key));
}
invalidate(&mut runner).unwrap();
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
closure.forget();
@@ -433,16 +452,17 @@ fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
// keyup
let runner = runner.clone();
let runner_ref = runner_ref.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut runner = runner.0.lock();
let mut runner_lock = runner_ref.0.lock();
let key = event.key();
if let Some(key) = translate_key(&key) {
runner.web_input.events.push(egui::Event::Key {
runner_lock.web_input.events.push(egui::Event::Key {
key,
pressed: false,
});
invalidate(&mut runner).unwrap();
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
}
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
@@ -450,9 +470,9 @@ fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
}
for event_name in &["load", "pagehide", "pageshow", "resize"] {
let runner = runner.clone();
let runner_ref = runner_ref.clone();
let closure = Closure::wrap(Box::new(move || {
invalidate(&mut runner.0.lock()).unwrap();
invalidate(runner_ref.clone()).unwrap();
}) as Box<dyn FnMut()>);
document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
@@ -461,19 +481,21 @@ fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
Ok(())
}
fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
fn install_canvas_events(runner_ref: &AppRunnerRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let canvas = canvas_element(runner.0.lock().canvas_id()).unwrap();
let canvas = canvas_element(runner_ref.0.lock().canvas_id()).unwrap();
{
let event_name = "mousedown";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
if !runner_lock.web_input.is_touch {
runner_lock.web_input.mouse_pos =
Some(pos_from_mouse_event(runner_lock.canvas_id(), &event));
runner_lock.web_input.mouse_down = true;
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}
@@ -484,12 +506,14 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "mousemove";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
if !runner_lock.web_input.is_touch {
runner_lock.web_input.mouse_pos =
Some(pos_from_mouse_event(runner_lock.canvas_id(), &event));
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}
@@ -500,13 +524,15 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "mouseup";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
if !runner_lock.web_input.is_touch {
runner_lock.web_input.mouse_pos =
Some(pos_from_mouse_event(runner_lock.canvas_id(), &event));
runner_lock.web_input.mouse_down = false;
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}
@@ -517,12 +543,13 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "mouseleave";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
if !runner_lock.web_input.is_touch {
runner_lock.web_input.mouse_pos = None;
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}
@@ -533,13 +560,14 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "touchstart";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
runner_lock.web_input.is_touch = true;
runner_lock.web_input.mouse_pos = Some(pos_from_touch_event(&event));
runner_lock.web_input.mouse_down = true;
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
@@ -549,12 +577,13 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "touchmove";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
runner_lock.web_input.is_touch = true;
runner_lock.web_input.mouse_pos = Some(pos_from_touch_event(&event));
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
@@ -564,14 +593,16 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "touchend";
let runner = runner.clone();
let runner_ref = runner_ref.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();
// TODO: this paints twice in one frame, which is not great
let mut runner_lock = runner_ref.0.lock();
runner_lock.web_input.is_touch = true;
runner_lock.web_input.mouse_down = false; // First release mouse to click...
runner_lock.paint().unwrap(); // ...do the clicking...
runner_lock.web_input.mouse_pos = None; // ...remove hover effect
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
@@ -581,12 +612,13 @@ fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
{
let event_name = "wheel";
let runner = runner.clone();
let runner_ref = runner_ref.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();
let mut runner_lock = runner_ref.0.lock();
runner_lock.web_input.scroll_delta.x -= event.delta_x() as f32;
runner_lock.web_input.scroll_delta.y -= event.delta_y() as f32;
drop(runner_lock);
invalidate(runner_ref.clone()).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);