[web] port all remaining JS code to Rust

egui_web/src/lib.rs

@@ -8,18 +8,18 @@ pub mod webgl;
 use std::sync::Arc;
 use wasm_bindgen::JsValue;
 
-pub struct State {
+pub struct EguiWeb {
     ctx: Arc<egui::Context>,
     webgl_painter: webgl::Painter,
     frame_times: egui::MovementTracker<f32>,
     frame_start: Option<f64>,
 }
 
-impl State {
-    pub fn new(canvas_id: &str) -> Result<State, JsValue> {
+impl EguiWeb {
+    pub fn new(canvas_id: &str) -> Result<EguiWeb, JsValue> {
         let ctx = egui::Context::new();
         load_memory(&ctx);
-        Ok(State {
+        Ok(EguiWeb {
             ctx,
             webgl_painter: webgl::Painter::new(canvas_id)?,
             frame_times: egui::MovementTracker::new(1000, 1.0),
@@ -27,6 +27,11 @@ impl State {
         })
     }
 
+    /// id of the canvas html element containing the rendering
+    pub fn canvas_id(&self) -> &str {
+        self.webgl_painter.canvas_id()
+    }
+
     pub fn begin_frame(&mut self, raw_input: egui::RawInput) -> egui::Ui {
         self.frame_start = Some(now_sec());
         self.ctx.begin_frame(raw_input)
@@ -109,12 +114,37 @@ pub fn pixels_per_point() -> f32 {
     }
 }
 
-pub fn resize_to_screen_size(canvas_id: &str) -> Option<()> {
+pub fn canvas_element(canvas_id: &str) -> Option<web_sys::HtmlCanvasElement> {
     use wasm_bindgen::JsCast;
     let document = web_sys::window()?.document()?;
     let canvas = document.get_element_by_id(canvas_id)?;
-    let canvas: web_sys::HtmlCanvasElement =
-        canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok()?;
+    canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok()
+}
+
+pub fn canvas_element_or_die(canvas_id: &str) -> web_sys::HtmlCanvasElement {
+    crate::canvas_element(canvas_id)
+        .unwrap_or_else(|| panic!("Failed to find canvas with id '{}'", canvas_id))
+}
+
+pub fn pos_from_mouse_event(canvas_id: &str, event: &web_sys::MouseEvent) -> egui::Pos2 {
+    let canvas = canvas_element(canvas_id).unwrap();
+    let rect = canvas.get_bounding_client_rect();
+    egui::Pos2 {
+        x: event.client_x() as f32 - rect.left() as f32,
+        y: event.client_y() as f32 - rect.top() as f32,
+    }
+}
+
+pub fn pos_from_touch_event(event: &web_sys::TouchEvent) -> egui::Pos2 {
+    let t = event.touches().get(0).unwrap();
+    egui::Pos2 {
+        x: t.page_x() as f32,
+        y: t.page_y() as f32,
+    }
+}
+
+pub fn resize_to_screen_size(canvas_id: &str) -> Option<()> {
+    let canvas = canvas_element(canvas_id)?;
 
     let screen_size = screen_size()?;
     let pixels_per_point = pixels_per_point();
@@ -218,3 +248,27 @@ pub fn open_url(url: &str) -> Option<()> {
 pub fn location_hash() -> Option<String> {
     web_sys::window()?.location().hash().ok()
 }
+
+pub fn translate_key(key: &str) -> Option<egui::Key> {
+    match key {
+        "Alt" => Some(egui::Key::Alt),
+        "Backspace" => Some(egui::Key::Backspace),
+        "Control" => Some(egui::Key::Control),
+        "Delete" => Some(egui::Key::Delete),
+        "ArrowDown" => Some(egui::Key::Down),
+        "End" => Some(egui::Key::End),
+        "Escape" => Some(egui::Key::Escape),
+        "Home" => Some(egui::Key::Home),
+        "Help" => Some(egui::Key::Insert),
+        "ArrowLeft" => Some(egui::Key::Left),
+        "Meta" => Some(egui::Key::Logo),
+        "PageDown" => Some(egui::Key::PageDown),
+        "PageUp" => Some(egui::Key::PageUp),
+        "Enter" => Some(egui::Key::Return),
+        "ArrowRight" => Some(egui::Key::Right),
+        "Shift" => Some(egui::Key::Shift),
+        "Tab" => Some(egui::Key::Tab),
+        "ArrowUp" => Some(egui::Key::Up),
+        _ => None,
+    }
+}

egui_web/src/webgl.rs

@@ -13,6 +13,7 @@ use egui::{
 type Gl = WebGlRenderingContext;
 
 pub struct Painter {
+    canvas_id: String,
     canvas: web_sys::HtmlCanvasElement,
     gl: WebGlRenderingContext,
     texture: WebGlTexture,
@@ -38,9 +39,7 @@ impl Painter {
     }
 
     pub fn new(canvas_id: &str) -> Result<Painter, JsValue> {
-        let document = web_sys::window().unwrap().document().unwrap();
-        let canvas = document.get_element_by_id(canvas_id).unwrap();
-        let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::<web_sys::HtmlCanvasElement>()?;
+        let canvas = crate::canvas_element_or_die(canvas_id);
 
         let gl = canvas
             .get_context("webgl")?
@@ -101,6 +100,7 @@ impl Painter {
         let color_buffer = gl.create_buffer().ok_or("failed to create color_buffer")?;
 
         Ok(Painter {
+            canvas_id: canvas_id.to_owned(),
             canvas,
             gl,
             texture: gl_texture,
@@ -114,6 +114,11 @@ impl Painter {
         })
     }
 
+    /// id of the canvas html element containing the rendering
+    pub fn canvas_id(&self) -> &str {
+        &self.canvas_id
+    }
+
     fn upload_texture(&mut self, texture: &Texture) {
         if self.current_texture_id == Some(texture.id) {
             return; // No change