From dbc6a620cd8d10dadd97a3190fc55704df04105d Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Fri, 12 Feb 2021 17:57:53 +0100 Subject: [PATCH] Control the maximum egui web canvas size with App::max_size_points --- egui_demo_lib/src/wrap_app.rs | 35 ++++++++++++++++++++++++++++++++++- egui_web/CHANGELOG.md | 4 ++++ egui_web/src/backend.rs | 2 +- egui_web/src/lib.rs | 6 +++--- epi/CHANGELOG.md | 2 ++ epi/src/lib.rs | 6 ++++++ 6 files changed, 50 insertions(+), 5 deletions(-) diff --git a/egui_demo_lib/src/wrap_app.rs b/egui_demo_lib/src/wrap_app.rs index b7fec40d..d3200db9 100644 --- a/egui_demo_lib/src/wrap_app.rs +++ b/egui_demo_lib/src/wrap_app.rs @@ -50,6 +50,10 @@ impl epi::App for WrapApp { epi::set_value(storage, epi::APP_KEY, self); } + fn max_size_points(&self) -> egui::Vec2 { + self.backend_panel.max_size_points_active + } + fn warm_up_enabled(&self) -> bool { // The example windows use a lot of emojis. Pre-cache them by running one frame where everything is open #[cfg(debug_assertions)] @@ -194,7 +198,6 @@ impl Default for RunMode { // ---------------------------------------------------------------------------- -#[derive(Default)] #[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))] #[cfg_attr(feature = "persistence", serde(default))] struct BackendPanel { @@ -207,10 +210,27 @@ struct BackendPanel { /// current slider value for current gui scale pixels_per_point: Option, + /// maximum size of the web browser canvas + max_size_points_ui: egui::Vec2, + max_size_points_active: egui::Vec2, + #[cfg_attr(feature = "persistence", serde(skip))] frame_history: crate::frame_history::FrameHistory, } +impl Default for BackendPanel { + fn default() -> Self { + Self { + open: false, + run_mode: Default::default(), + pixels_per_point: Default::default(), + max_size_points_ui: egui::Vec2::new(1024.0, 2048.0), + max_size_points_active: egui::Vec2::new(1024.0, 2048.0), + frame_history: Default::default(), + } + } +} + impl BackendPanel { fn update(&mut self, ctx: &egui::CtxRef, frame: &mut epi::Frame<'_>) { self.frame_history @@ -251,6 +271,19 @@ impl BackendPanel { ui.label("Project home page:"); ui.hyperlink("https://github.com/emilk/egui"); }); + + ui.separator(); + + ui.add( + egui::Slider::f32(&mut self.max_size_points_ui.x, 512.0..=f32::INFINITY) + .logarithmic(true) + .largest_finite(8192.0) + .text("Max width"), + ) + .on_hover_text("Maximum width of the egui region of the web page."); + if !ui.ctx().is_using_pointer() { + self.max_size_points_active = self.max_size_points_ui; + } } else { if ui .button("📱 Phone Size") diff --git a/egui_web/CHANGELOG.md b/egui_web/CHANGELOG.md index 1d95c165..9f374360 100644 --- a/egui_web/CHANGELOG.md +++ b/egui_web/CHANGELOG.md @@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## Unreleased +### Added ⭐ + +* You can control the maximum egui canvas size with `App::max_size_points`. + ## 0.9.0 - 2021-02-07 diff --git a/egui_web/src/backend.rs b/egui_web/src/backend.rs index 612e097f..d4cbf688 100644 --- a/egui_web/src/backend.rs +++ b/egui_web/src/backend.rs @@ -191,7 +191,7 @@ impl AppRunner { } pub fn logic(&mut self) -> Result<(egui::Output, Vec), JsValue> { - resize_canvas_to_screen_size(self.web_backend.canvas_id()); + resize_canvas_to_screen_size(self.web_backend.canvas_id(), self.app.max_size_points()); let canvas_size = canvas_size_in_points(self.web_backend.canvas_id()); let raw_input = self.input.new_frame(canvas_size); self.web_backend.begin_frame(raw_input); diff --git a/egui_web/src/lib.rs b/egui_web/src/lib.rs index 95b92919..9f3f03ba 100644 --- a/egui_web/src/lib.rs +++ b/egui_web/src/lib.rs @@ -123,15 +123,15 @@ pub fn canvas_size_in_points(canvas_id: &str) -> egui::Vec2 { ) } -pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> { +pub fn resize_canvas_to_screen_size(canvas_id: &str, max_size_points: egui::Vec2) -> Option<()> { let canvas = canvas_element(canvas_id)?; let screen_size_points = screen_size_in_native_points()?; let pixels_per_point = native_pixels_per_point(); + let max_size_pixels = pixels_per_point * max_size_points; + let canvas_size_pixels = pixels_per_point * screen_size_points; - // Some browsers get slow with huge WebGL canvases, so we limit the size: - let max_size_pixels = egui::vec2(2048.0, 4096.0); let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels); let canvas_size_points = canvas_size_pixels / pixels_per_point; diff --git a/epi/CHANGELOG.md b/epi/CHANGELOG.md index eba4b3f8..ecbe9413 100644 --- a/epi/CHANGELOG.md +++ b/epi/CHANGELOG.md @@ -7,6 +7,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## Unreleased +* You can control the maximum egui web canvas size with `App::max_size_points`. + ## 0.9.0 - 2021-02-07 diff --git a/epi/src/lib.rs b/epi/src/lib.rs index 3f83d42f..b6359f1d 100644 --- a/epi/src/lib.rs +++ b/epi/src/lib.rs @@ -97,6 +97,12 @@ pub trait App { true } + /// The size limit of the web app canvas + fn max_size_points(&self) -> egui::Vec2 { + // Some browsers get slow with huge WebGL canvases, so we limit the size: + egui::Vec2::new(1024.0, 2048.0) + } + /// Background color for the app, e.g. what is sent to `gl.clearColor`. /// This is the background of your windows if you don't set a central panel. fn clear_color(&self) -> egui::Rgba {