Update kb modifiers from web mouse events (#4156)

Update modifier state from web mouse events. This allows modifiers to be
correctly updated when the window is not in focus but the mouse is still
moving over the window.

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(),