Update kb modifiers from web mouse events

CONTRIBUTING.md

@@ -44,7 +44,7 @@ Please keep pull requests small and focused. The smaller it is, the more likely
 
 Most PR reviews are done by me, Emil, but I very much appreciate any help I can get reviewing PRs!
 
-It is very easy to add complexity to a project, but remember that each line of code added is code that needs to be maintained in perpituity, so we have a high bar on what get merged!
+It is very easy to add complexity to a project, but remember that each line of code added is code that needs to be maintained in perpetuity, so we have a high bar on what get merged!
 
 When reviewing, we look for:
 * The PR title and description should be helpful
@@ -123,7 +123,7 @@ with `Vec2::X` increasing to the right and `Vec2::Y` increasing downwards.
 
 `egui` uses logical _points_ as its coordinate system.
 Those related to physical _pixels_ by the `pixels_per_point` scale factor.
-For example, a high-dpi screeen can have `pixels_per_point = 2.0`,
+For example, a high-dpi screen can have `pixels_per_point = 2.0`,
 meaning there are two physical screen pixels for each logical point.
 
 Angles are in radians, and are measured clockwise from the X-axis, which has angle=0.

crates/eframe/src/web/events.rs

@@ -87,7 +87,7 @@ pub(crate) fn install_document_events(runner_ref: &WebRunner) -> Result<(), JsVa
                 return;
             }
 
-            let modifiers = modifiers_from_event(&event);
+            let modifiers = modifiers_from_kb_event(&event);
             runner.input.raw.modifiers = modifiers;
 
             let key = event.key();
@@ -158,7 +158,7 @@ pub(crate) fn install_document_events(runner_ref: &WebRunner) -> Result<(), JsVa
         &document,
         "keyup",
         |event: web_sys::KeyboardEvent, runner| {
-            let modifiers = modifiers_from_event(&event);
+            let modifiers = modifiers_from_kb_event(&event);
             runner.input.raw.modifiers = modifiers;
             if let Some(key) = translate_key(&event.key()) {
                 runner.input.raw.events.push(egui::Event::Key {
@@ -301,6 +301,8 @@ pub(crate) fn install_canvas_events(runner_ref: &WebRunner) -> Result<(), JsValu
         &canvas,
         "mousedown",
         |event: web_sys::MouseEvent, runner: &mut AppRunner| {
+            let modifiers = modifiers_from_mouse_event(&event);
+            runner.input.raw.modifiers = modifiers;
             if let Some(button) = button_from_mouse_event(&event) {
                 let pos = pos_from_mouse_event(runner.canvas_id(), &event);
                 let modifiers = runner.input.raw.modifiers;
@@ -327,6 +329,8 @@ pub(crate) fn install_canvas_events(runner_ref: &WebRunner) -> Result<(), JsValu
         &canvas,
         "mousemove",
         |event: web_sys::MouseEvent, runner| {
+            let modifiers = modifiers_from_mouse_event(&event);
+            runner.input.raw.modifiers = modifiers;
             let pos = pos_from_mouse_event(runner.canvas_id(), &event);
             runner.input.raw.events.push(egui::Event::PointerMoved(pos));
             runner.needs_repaint.repaint_asap();
@@ -336,6 +340,8 @@ pub(crate) fn install_canvas_events(runner_ref: &WebRunner) -> Result<(), JsValu
     )?;
 
     runner_ref.add_event_listener(&canvas, "mouseup", |event: web_sys::MouseEvent, runner| {
+        let modifiers = modifiers_from_mouse_event(&event);
+        runner.input.raw.modifiers = modifiers;
         if let Some(button) = button_from_mouse_event(&event) {
             let pos = pos_from_mouse_event(runner.canvas_id(), &event);
             let modifiers = runner.input.raw.modifiers;
@@ -474,7 +480,7 @@ pub(crate) fn install_canvas_events(runner_ref: &WebRunner) -> Result<(), JsValu
 
         // Report a zoom event in case CTRL (on Windows or Linux) or CMD (on Mac) is pressed.
         // This if-statement is equivalent to how `Modifiers.command` is determined in
-        // `modifiers_from_event()`, but we cannot directly use that fn for a [`WheelEvent`].
+        // `modifiers_from_kb_event()`, but we cannot directly use that fn for a [`WheelEvent`].
         if event.ctrl_key() || event.meta_key() {
             let factor = (delta.y / 200.0).exp();
             runner.input.raw.events.push(egui::Event::Zoom(factor));

crates/eframe/src/web/input.rs

@@ -115,7 +115,23 @@ pub fn translate_key(key: &str) -> Option<egui::Key> {
     egui::Key::from_name(key)
 }
 
-pub fn modifiers_from_event(event: &web_sys::KeyboardEvent) -> egui::Modifiers {
+pub fn modifiers_from_kb_event(event: &web_sys::KeyboardEvent) -> egui::Modifiers {
+    egui::Modifiers {
+        alt: event.alt_key(),
+        ctrl: event.ctrl_key(),
+        shift: event.shift_key(),
+
+        // Ideally we should know if we are running or mac or not,
+        // but this works good enough for now.
+        mac_cmd: event.meta_key(),
+
+        // Ideally we should know if we are running or mac or not,
+        // but this works good enough for now.
+        command: event.ctrl_key() || event.meta_key(),
+    }
+}
+
+pub fn modifiers_from_mouse_event(event: &web_sys::MouseEvent) -> egui::Modifiers {
     egui::Modifiers {
         alt: event.alt_key(),
         ctrl: event.ctrl_key(),