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

Implement repaint_after for eframe web (#1760)

Browse source 
* Implement repaint_after for eframe web

Follow-up to #1694

* cargo fmt

* Simplify demo UI for "repaint_after"
This commit is contained in:
Emil Ernerfeldt 2022-06-22 14:25:42 +02:00 committed by GitHub
parent 935913b1ec
commit eeae485629
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 73 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
eframe/src/web/backend.rs
View file

@ -2,7 +2,9 @@ use super::{glow_wrapping::WrappedGlowPainter, *};
use crate::epi; use crate::epi;
use egui::mutex::{Mutex, MutexGuard};
use egui::TexturesDelta; use egui::TexturesDelta;
pub use egui::{pos2, Color32}; pub use egui::{pos2, Color32};
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -34,21 +36,34 @@ impl WebInput {
use std::sync::atomic::Ordering::SeqCst; use std::sync::atomic::Ordering::SeqCst;
pub struct NeedRepaint(std::sync::atomic::AtomicBool); /// Stores when to do the next repaint.
pub struct NeedRepaint(Mutex<f64>);
impl Default for NeedRepaint { impl Default for NeedRepaint {
fn default() -> Self { fn default() -> Self {
Self(true.into()) Self(Mutex::new(f64::NEG_INFINITY)) // start with a repaint
} }
} }
impl NeedRepaint { impl NeedRepaint {
pub fn fetch_and_clear(&self) -> bool { /// Returns the time (in [`now_sec`] scale) when
self.0.swap(false, SeqCst) /// we should next repaint.
pub fn when_to_repaint(&self) -> f64 {
*self.0.lock()
} }
pub fn set_true(&self) { /// Unschedule repainting.
self.0.store(true, SeqCst); pub fn clear(&self) {
*self.0.lock() = f64::INFINITY;
}
pub fn repaint_after(&self, num_seconds: f64) {
let mut repaint_time = self.0.lock();
*repaint_time = repaint_time.min(now_sec() + num_seconds);
}
pub fn repaint_asap(&self) {
*self.0.lock() = f64::NEG_INFINITY;
} }
} }
@ -194,7 +209,7 @@ impl AppRunner {
{ {
let needs_repaint = needs_repaint.clone(); let needs_repaint = needs_repaint.clone();
egui_ctx.set_request_repaint_callback(move || { egui_ctx.set_request_repaint_callback(move || {
needs_repaint.0.store(true, SeqCst); needs_repaint.repaint_asap();
}); });
} }
@ -420,7 +435,6 @@ fn start_runner(app_runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
super::events::install_canvas_events(&runner_container)?; super::events::install_canvas_events(&runner_container)?;
super::events::install_document_events(&runner_container)?; super::events::install_document_events(&runner_container)?;
text_agent::install_text_agent(&runner_container)?; text_agent::install_text_agent(&runner_container)?;
super::events::repaint_every_ms(&runner_container, 1000)?; // just in case. TODO(emilk): make it a parameter
super::events::paint_and_schedule(&runner_container.runner, runner_container.panicked.clone())?; super::events::paint_and_schedule(&runner_container.runner, runner_container.panicked.clone())?;

78
eframe/src/web/events.rs
View file

@ -7,14 +7,14 @@ pub fn paint_and_schedule(
) -> Result<(), JsValue> { ) -> Result<(), JsValue> {
fn paint_if_needed(runner_ref: &AppRunnerRef) -> Result<(), JsValue> { fn paint_if_needed(runner_ref: &AppRunnerRef) -> Result<(), JsValue> {
let mut runner_lock = runner_ref.lock(); let mut runner_lock = runner_ref.lock();
if runner_lock.needs_repaint.fetch_and_clear() { if runner_lock.needs_repaint.when_to_repaint() <= now_sec() {
runner_lock.needs_repaint.clear();
runner_lock.clear_color_buffer(); runner_lock.clear_color_buffer();
let (repaint_after, clipped_primitives) = runner_lock.logic()?; let (repaint_after, clipped_primitives) = runner_lock.logic()?;
runner_lock.paint(&clipped_primitives)?; runner_lock.paint(&clipped_primitives)?;
if repaint_after.is_zero() { runner_lock
runner_lock.needs_repaint.set_true(); .needs_repaint
} .repaint_after(repaint_after.as_secs_f64());
// TODO: schedule a repaint after `repaint_after` when it is not zero
runner_lock.auto_save(); runner_lock.auto_save();
} }
@ -75,7 +75,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
{ {
runner_lock.input.raw.events.push(egui::Event::Text(key)); runner_lock.input.raw.events.push(egui::Event::Text(key));
} }
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
let egui_wants_keyboard = runner_lock.egui_ctx().wants_keyboard_input(); let egui_wants_keyboard = runner_lock.egui_ctx().wants_keyboard_input();
@ -123,7 +123,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
modifiers, modifiers,
}); });
} }
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
}, },
)?; )?;
@ -137,7 +137,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
let text = text.replace("\r\n", "\n"); let text = text.replace("\r\n", "\n");
if !text.is_empty() { if !text.is_empty() {
runner_lock.input.raw.events.push(egui::Event::Paste(text)); runner_lock.input.raw.events.push(egui::Event::Paste(text));
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
@ -152,7 +152,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
"cut", "cut",
|_: web_sys::ClipboardEvent, mut runner_lock| { |_: web_sys::ClipboardEvent, mut runner_lock| {
runner_lock.input.raw.events.push(egui::Event::Cut); runner_lock.input.raw.events.push(egui::Event::Cut);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
}, },
)?; )?;
@ -162,7 +162,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
"copy", "copy",
|_: web_sys::ClipboardEvent, mut runner_lock| { |_: web_sys::ClipboardEvent, mut runner_lock| {
runner_lock.input.raw.events.push(egui::Event::Copy); runner_lock.input.raw.events.push(egui::Event::Copy);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
}, },
)?; )?;
@ -171,7 +171,7 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
&window, &window,
event_name, event_name,
|_: web_sys::Event, runner_lock| { |_: web_sys::Event, runner_lock| {
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
}, },
)?; )?;
} }
@ -190,38 +190,6 @@ pub fn install_document_events(runner_container: &AppRunnerContainer) -> Result<
Ok(()) Ok(())
} }
/// Repaint at least every `ms` milliseconds.
pub fn repaint_every_ms(
runner_container: &AppRunnerContainer,
milliseconds: i32,
) -> Result<(), JsValue> {
assert!(milliseconds >= 0);
use wasm_bindgen::JsCast;
let window = web_sys::window().unwrap();
let closure = Closure::wrap(Box::new({
let runner = runner_container.runner.clone();
let panicked = runner_container.panicked.clone();
move || {
// Do not lock the runner if the code has panicked
if !panicked.load(Ordering::SeqCst) {
runner.lock().needs_repaint.set_true();
}
}
}) as Box<dyn FnMut()>);
window.set_interval_with_callback_and_timeout_and_arguments_0(
closure.as_ref().unchecked_ref(),
milliseconds,
)?;
closure.forget();
Ok(())
}
pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<(), JsValue> { pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<(), JsValue> {
use wasm_bindgen::JsCast; use wasm_bindgen::JsCast;
let canvas = canvas_element(runner_container.runner.lock().canvas_id()).unwrap(); let canvas = canvas_element(runner_container.runner.lock().canvas_id()).unwrap();
@ -254,7 +222,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
pressed: true, pressed: true,
modifiers, modifiers,
}); });
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
event.stop_propagation(); event.stop_propagation();
// Note: prevent_default breaks VSCode tab focusing, hence why we don't call it here. // Note: prevent_default breaks VSCode tab focusing, hence why we don't call it here.
@ -271,7 +239,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
.raw .raw
.events .events
.push(egui::Event::PointerMoved(pos)); .push(egui::Event::PointerMoved(pos));
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -294,7 +262,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
pressed: false, pressed: false,
modifiers, modifiers,
}); });
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
text_agent::update_text_agent(runner_lock); text_agent::update_text_agent(runner_lock);
} }
@ -308,7 +276,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
"mouseleave", "mouseleave",
|event: web_sys::MouseEvent, mut runner_lock| { |event: web_sys::MouseEvent, mut runner_lock| {
runner_lock.input.raw.events.push(egui::Event::PointerGone); runner_lock.input.raw.events.push(egui::Event::PointerGone);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -336,7 +304,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
}); });
push_touches(&mut *runner_lock, egui::TouchPhase::Start, &event); push_touches(&mut *runner_lock, egui::TouchPhase::Start, &event);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -358,7 +326,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
.push(egui::Event::PointerMoved(pos)); .push(egui::Event::PointerMoved(pos));
push_touches(&mut *runner_lock, egui::TouchPhase::Move, &event); push_touches(&mut *runner_lock, egui::TouchPhase::Move, &event);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -385,7 +353,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
runner_lock.input.raw.events.push(egui::Event::PointerGone); runner_lock.input.raw.events.push(egui::Event::PointerGone);
push_touches(&mut *runner_lock, egui::TouchPhase::End, &event); push_touches(&mut *runner_lock, egui::TouchPhase::End, &event);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
} }
@ -444,7 +412,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
.push(egui::Event::Scroll(delta)); .push(egui::Event::Scroll(delta));
} }
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -464,7 +432,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
}); });
} }
} }
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
} }
@ -476,7 +444,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
"dragleave", "dragleave",
|event: web_sys::DragEvent, mut runner_lock| { |event: web_sys::DragEvent, mut runner_lock| {
runner_lock.input.raw.hovered_files.clear(); runner_lock.input.raw.hovered_files.clear();
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
event.stop_propagation(); event.stop_propagation();
event.prevent_default(); event.prevent_default();
}, },
@ -488,7 +456,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
move |event: web_sys::DragEvent, mut runner_lock| { move |event: web_sys::DragEvent, mut runner_lock| {
if let Some(data_transfer) = event.data_transfer() { if let Some(data_transfer) = event.data_transfer() {
runner_lock.input.raw.hovered_files.clear(); runner_lock.input.raw.hovered_files.clear();
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
// Unlock the runner so it can be locked after a future await point // Unlock the runner so it can be locked after a future await point
drop(runner_lock); drop(runner_lock);
@ -524,7 +492,7 @@ pub fn install_canvas_events(runner_container: &AppRunnerContainer) -> Result<()
..Default::default() ..Default::default()
}, },
); );
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
Err(err) => { Err(err) => {
tracing::error!("Failed to read file: {:?}", err); tracing::error!("Failed to read file: {:?}", err);

5
eframe/src/web/mod.rs
View file

@ -20,7 +20,6 @@ use std::sync::{
Arc, Arc,
}; };
use egui::mutex::{Mutex, MutexGuard};
use wasm_bindgen::prelude::*; use wasm_bindgen::prelude::*;
use web_sys::EventTarget; use web_sys::EventTarget;
@ -30,7 +29,9 @@ use crate::Theme;
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
/// Current time in seconds (since undefined point in time) /// Current time in seconds (since undefined point in time).
///
/// Monotonically increasing.
pub fn now_sec() -> f64 { pub fn now_sec() -> f64 {
web_sys::window() web_sys::window()
.expect("should have a Window") .expect("should have a Window")

8
eframe/src/web/text_agent.rs
View file

@ -55,7 +55,7 @@ pub fn install_text_agent(runner_container: &AppRunnerContainer) -> Result<(), J
if !text.is_empty() && !is_composing.get() { if !text.is_empty() && !is_composing.get() {
input_clone.set_value(""); input_clone.set_value("");
runner_lock.input.raw.events.push(egui::Event::Text(text)); runner_lock.input.raw.events.push(egui::Event::Text(text));
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
} }
})?; })?;
@ -75,7 +75,7 @@ pub fn install_text_agent(runner_container: &AppRunnerContainer) -> Result<(), J
.raw .raw
.events .events
.push(egui::Event::CompositionStart); .push(egui::Event::CompositionStart);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
})?; })?;
@ -85,7 +85,7 @@ pub fn install_text_agent(runner_container: &AppRunnerContainer) -> Result<(), J
move |event: web_sys::CompositionEvent, mut runner_lock: MutexGuard<'_, AppRunner>| { move |event: web_sys::CompositionEvent, mut runner_lock: MutexGuard<'_, AppRunner>| {
if let Some(event) = event.data().map(egui::Event::CompositionUpdate) { if let Some(event) = event.data().map(egui::Event::CompositionUpdate) {
runner_lock.input.raw.events.push(event); runner_lock.input.raw.events.push(event);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
}, },
)?; )?;
@ -99,7 +99,7 @@ pub fn install_text_agent(runner_container: &AppRunnerContainer) -> Result<(), J
if let Some(event) = event.data().map(egui::Event::CompositionEnd) { if let Some(event) = event.data().map(egui::Event::CompositionEnd) {
runner_lock.input.raw.events.push(event); runner_lock.input.raw.events.push(event);
runner_lock.needs_repaint.set_true(); runner_lock.needs_repaint.repaint_asap();
} }
} }
})?; })?;

38
egui_demo_app/src/backend_panel.rs
View file

@ -49,12 +49,11 @@ pub struct BackendPanel {
pub open: bool, pub open: bool,
#[cfg_attr(feature = "serde", serde(skip))] #[cfg_attr(feature = "serde", serde(skip))]
// go back to [`Reactive`] mode each time we start // go back to [`RunMode::Reactive`] mode each time we start
run_mode: RunMode, run_mode: RunMode,
#[cfg_attr(feature = "serde", serde(skip))] #[cfg_attr(feature = "serde", serde(skip))]
// reset to 1 second as default repaint_after idle timeout. repaint_after_seocnds: f32,
repaint_after_timeout: std::time::Duration,
/// current slider value for current gui scale /// current slider value for current gui scale
#[cfg_attr(feature = "serde", serde(skip))] #[cfg_attr(feature = "serde", serde(skip))]
@ -71,7 +70,7 @@ impl Default for BackendPanel {
Self { Self {
open: false, open: false,
run_mode: Default::default(), run_mode: Default::default(),
repaint_after_timeout: std::time::Duration::from_secs(1), repaint_after_seocnds: 1.0,
pixels_per_point: None, pixels_per_point: None,
frame_history: Default::default(), frame_history: Default::default(),
egui_windows: Default::default(), egui_windows: Default::default(),
@ -85,13 +84,16 @@ impl BackendPanel {
.on_new_frame(ctx.input().time, frame.info().cpu_usage); .on_new_frame(ctx.input().time, frame.info().cpu_usage);
match self.run_mode { match self.run_mode {
RunMode::Reactive => {
ctx.request_repaint_after(self.repaint_after_timeout);
}
RunMode::Continuous => { RunMode::Continuous => {
// Tell the backend to repaint as soon as possible // Tell the backend to repaint as soon as possible
ctx.request_repaint(); ctx.request_repaint();
} }
RunMode::Reactive => {
// let the computer rest for a bit
ctx.request_repaint_after(std::time::Duration::from_secs_f32(
self.repaint_after_seocnds,
));
}
} }
} }
@ -243,16 +245,18 @@ impl BackendPanel {
)); ));
} else { } else {
ui.label("Only running UI code when there are animations or input."); ui.label("Only running UI code when there are animations or input.");
ui.label("but if there's no input for the repaint_after duration, we force an update");
ui.label("repaint_after (in seconds)"); ui.horizontal(|ui| {
let mut seconds = self.repaint_after_timeout.as_secs_f32(); ui.spacing_mut().item_spacing.x = 0.0;
if egui::DragValue::new(&mut seconds) ui.label("(but at least every ");
.clamp_range(0.1..=10.0) egui::DragValue::new(&mut self.repaint_after_seocnds)
.ui(ui) .clamp_range(0.1..=10.0)
.changed() .speed(0.1)
{ .suffix(" s")
self.repaint_after_timeout = std::time::Duration::from_secs_f32(seconds); .ui(ui)
} .on_hover_text("Repaint this often, even if there is no input.");
ui.label(")");
});
} }
} }
} }