Implement cursor grabbing on web using Pointer Lock API

[alvinhochun]

Pointer Lock API

This locks the mouse cursor at a specific position and hides it so that relative mouse movements can be captured without the cursor ever leaving the element or getting stuck on the screen edge. It does not just limit movement within the canvas area like it does on Windows, however the docs indicates that this behaviour is also the same for macOS and Wayland (minus the automatic hiding of cursor) so I believe this will fit nicely.

[willcrichton]

I implemented a proof-of-concept that seems to work: willcrichton@5fac5af

[TotalKrill]

@willcrichton Sorry for bothering you here, but I am in the same boat as you are in #1827

Using bevy for the web and wanting to grab the cursor. Could you somehow give me a quick rundown of how I easiest could achieve what you did in your proof of concept? I am assuming I need to patch the winit dependency somehow from my cargo.toml, but I am a bit lost on how to do that.

[willcrichton]

@TotalKrill are you using latest bevy main? Your winit needs to be 0.25.0. The released Bevy 0.5.0 is on winit 0.24.0. The winit version was bumped after the last release.

[TotalKrill]

im using bevy 0.5, since there are a few nice libraries out there for it already. Ideally I wish I could just patch the winit 0.24 -> winit 0.25, but from my crate I cannot force my dependencies to do this ( just tried ).

So it seems my only way forward would be to vendor every single library I am using, point their version to bevy main and patch whatever needs patching, right?

[willcrichton]

Sadly, yes. The downsides of an ecosystem split across many workspaces...

However, last I looked, I found that many of the repos either have branches or PRs that reach parity with Bevy main. See: https://github.com/willcrichton/crateton/blob/master/Cargo.toml#L46-L49

[TotalKrill]

@willcrichton yeah, but you were right, when starting to port, it wasnt that hard to get working, as long as you make sure to specify the dependencies exactly the same everywhere, was debugging a bevy import from git, that both pointed to the same commit, but one dependecy specified the main branch as well. So even though it was the same git commit, they were treated differently, and traits were not imported. :)

Anyway, I did not get the cursor grab working even with latest bevy, and winit 0.25, still the same error as previous, do I need to upgrade something inside of bevy_winit?

[willcrichton]

Eheh yep it's a bit of a nightmare. Good luck!

Yeah set_cursor_lock_mode seems to not work (I don't remember if it ever worked?). But you can use web_sys directly: https://github.com/willcrichton/crateton/blob/master/src/ui/mod.rs#L69-L92

[TotalKrill]

I actually grabbed your proof of concept on the implementation for winit, found it after going down the rabbit hole. So basically forked bevy, applied your winit PoC. And everything started working.

Not flawless since the window grabbing can be exited from the browsers own escape, and bevy will not know about that then. But maybe that can be patched as well.

Thx for all your help! Do you have any idea as to why your solution for window grabbing wasn't merged?

[willcrichton]

I might have just never gotten around to submitting a PR. Feel free to pick it up!

[TotalKrill]

#2025

Cherry picked from your branch and jumped through the hoops of commiting it :)

[TotalKrill]

I found a way to make this compatible with bevy 0.5 from crates.io, it requires you to patch winit that is used in all bevy related assets. I created a branch that contains @willcrichtons implementation, and on top of that added some dummy-fixes that enables the latest version of winit, with all the fixes included to be patched on top of bevy 0.5. Meaning that all addon crates also works with this ( as far as i can tell).

It only requires two lines to the Cargo.toml file of your project

TLDR: Add the below to your Cargo.toml to enable cursor grab in web, for bevy 0.5 projects.

[patch.crates-io]
winit = { git  = "https://github.com/TotalKrill/winit.git", branch = "dummy-feature", version = "0.24" }

[daxpedda]

I just tried the example, seems to work correctly.
From the comments it seems to me that back then there was just no released version with this PR.

Feel free to reopen if there is still an issue with this.

Fixed by #1827 (I think).