Improve the regions with available_width

emgui_wasm/src/app.rs

@@ -9,8 +9,7 @@ pub struct App {
     count: i32,
     selected_alternative: i32,
 
-    width: f32,
-    height: f32,
+    size: Vec2,
     corner_radius: f32,
     stroke_width: f32,
 }
@@ -21,8 +20,7 @@ impl Default for App {
             checked: true,
             selected_alternative: 0,
             count: 0,
-            width: 100.0,
-            height: 50.0,
+            size: vec2(100.0, 50.0),
             corner_radius: 5.0,
             stroke_width: 2.0,
         }
@@ -65,23 +63,25 @@ impl GuiSettings for App {
 
         gui.label(format!("This is a multiline label.\nThe button have been clicked {} times.\nBelow are more options.", self.count));
 
-        gui.foldable("Box rendering options", |gui| {
-            gui.slider_f32("width", &mut self.width, 0.0, 500.0);
-            gui.slider_f32("height", &mut self.height, 0.0, 500.0);
+        gui.foldable("Test box rendering", |gui| {
+            gui.slider_f32("width", &mut self.size.x, 0.0, 500.0);
+            gui.slider_f32("height", &mut self.size.y, 0.0, 500.0);
             gui.slider_f32("corner_radius", &mut self.corner_radius, 0.0, 50.0);
             gui.slider_f32("stroke_width", &mut self.stroke_width, 0.0, 10.0);
-        });
 
-        gui.add_graphic(GuiCmd::PaintCommands(vec![PaintCmd::Rect {
-            corner_radius: self.corner_radius,
-            fill_color: Some(srgba(136, 136, 136, 255)),
-            pos: vec2(300.0, 100.0),
-            size: vec2(self.width, self.height),
-            outline: Some(Outline {
-                width: self.stroke_width,
-                color: srgba(255, 255, 255, 255),
-            }),
-        }]));
+            let pos = gui.cursor();
+            gui.add_graphic(GuiCmd::PaintCommands(vec![PaintCmd::Rect {
+                corner_radius: self.corner_radius,
+                fill_color: Some(srgba(136, 136, 136, 255)),
+                pos,
+                size: self.size,
+                outline: Some(Outline {
+                    width: self.stroke_width,
+                    color: srgba(255, 255, 255, 255),
+                }),
+            }]));
+            gui.reserve_space(self.size, None);
+        });
 
         gui.foldable("LayoutOptions", |gui| {
             let mut options = gui.options().clone();
@@ -101,7 +101,6 @@ impl GuiSettings for emgui::LayoutOptions {
         gui.slider_f32("window_padding.x", &mut self.window_padding.x, 0.0, 10.0);
         gui.slider_f32("window_padding.y", &mut self.window_padding.y, 0.0, 10.0);
         gui.slider_f32("indent", &mut self.indent, 0.0, 100.0);
-        gui.slider_f32("width", &mut self.width, 0.0, 1000.0);
         gui.slider_f32("button_padding.x", &mut self.button_padding.x, 0.0, 20.0);
         gui.slider_f32("button_padding.y", &mut self.button_padding.y, 0.0, 20.0);
         gui.slider_f32("start_icon_width", &mut self.start_icon_width, 0.0, 60.0);

emgui_wasm/src/lib.rs

@@ -5,6 +5,8 @@ extern crate wasm_bindgen;
 
 extern crate emgui;
 
+use std::sync::Arc;
+
 use emgui::{Emgui, Font, RawInput};
 
 use wasm_bindgen::prelude::*;
@@ -38,7 +40,7 @@ pub struct State {
 
 impl State {
     fn new(canvas_id: &str) -> Result<State, JsValue> {
-        let font = Font::new(20); // TODO: Arc to avoid cloning
+        let font = Arc::new(Font::new(20));
         let emgui = Emgui::new(font);
         let webgl_painter = webgl::Painter::new(canvas_id, emgui.texture())?;
         Ok(State {
@@ -58,20 +60,30 @@ impl State {
 
         let mut style = self.emgui.style.clone();
         let mut region = self.emgui.whole_screen_region();
+        let mut region = region.centered_column(300.0);
         self.app.show_gui(&mut region);
 
+        // TODO: move this to some emgui::example module
         region.foldable("Style", |gui| {
             style.show_gui(gui);
         });
 
         let stats = self.stats; // TODO: avoid
+        let webgl_info = self.webgl_painter.debug_info(); // TODO: avoid
         region.foldable("Stats", |gui| {
             gui.label(format!("num_vertices: {}", stats.num_vertices));
             gui.label(format!("num_triangles: {}", stats.num_triangles));
 
+            gui.label("WebGl painter info:");
+            gui.indent(|gui| {
+                gui.label(webgl_info);
+            });
+
             gui.label("Timings:");
-            gui.label(format!("Everything: {:.1} ms", stats.everything_ms));
-            gui.label(format!("WebGL: {:.1} ms", stats.webgl_ms));
+            gui.indent(|gui| {
+                gui.label(format!("Everything: {:.1} ms", stats.everything_ms));
+                gui.label(format!("WebGL: {:.1} ms", stats.webgl_ms));
+            });
         });
 
         self.emgui.style = style;

emgui_wasm/src/webgl.rs

@@ -1,5 +1,3 @@
-#![allow(dead_code)]
-
 use {
     js_sys::WebAssembly,
     wasm_bindgen::{prelude::*, JsCast},
@@ -23,6 +21,17 @@ pub struct Painter {
 }
 
 impl Painter {
+    pub fn debug_info(&self) -> String {
+        format!(
+            "Stored canvas size: {} x {}\n\
+             gl context size: {} x {}",
+            self.canvas.width(),
+            self.canvas.height(),
+            self.gl.drawing_buffer_width(),
+            self.gl.drawing_buffer_height(),
+        )
+    }
+
     pub fn new(
         canvas_id: &str,
         (tex_width, tex_height, pixels): (u16, u16, &[u8]),
@@ -274,6 +283,12 @@ impl Painter {
         let u_sampler_loc = gl.get_uniform_location(&self.program, "u_sampler").unwrap();
         gl.uniform1i(Some(&u_sampler_loc), 0);
 
+        gl.viewport(
+            0,
+            0,
+            self.canvas.width() as i32,
+            self.canvas.height() as i32,
+        );
         gl.clear_color(0.05, 0.05, 0.05, 1.0);
         gl.clear(Gl::COLOR_BUFFER_BIT);