egui/web_demo
Emil Ernerfeldt 3b9f964aed
eframe web: ignore keyboard events unless canvas has focus (#4718)
* Fixes https://github.com/rerun-io/rerun/issues/6638
* Related? https://github.com/emilk/egui/issues/4563

This improves how an eframe canvas works inside of a larger web page,
and how it works when there are multiple eframe apps in the same page.

`eframe` will set `tabindex="0"` on the canvas automatically, making it
focusable.
It will also set `outline: none` on the CSS, so the focused canvas won't
have an ugly outline.


## Breaking changes
You may wanna add this to your `index.html` to give the canvas focus on
startup:
```js
document.getElementById("the_canvas_id").focus();
```

## Test setup
```sh
./scripts/build_demo_web.sh
./scripts/start_server.sh
open http://localhost:8888/multiple_apps.html
```
Then open the "Input Event History" and "Text Edit" windows

## Tested
* Chromium
	* [x] drag-and-drop of files
	* Test both when a `TextEdit` is focused and when it is not:
	  * [x] `Event::Key`
	  * [x] `Event::Text`
	  * [x] copy-cut-paste
	  * [x] Wheel scroll
	* [x] `Event::PointerGone`
	* [x] Mouse drag
	* [x] Mouse click
	* [x] Mouse right-click
	* [x] Defocus all eframe canvas, and then start typing text
* [x] Firefox (all of the above)
* [x] Desktop Safari (all of the above)
* [x] Mobile Safari


## Future work (pre-existing issues)
* https://github.com/emilk/egui/issues/4723
* https://github.com/emilk/egui/issues/4724
* https://github.com/emilk/egui/issues/4725
* https://github.com/emilk/egui/issues/4726
2024-06-28 15:01:06 +02:00
..
.gitignore Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
CNAME Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
README.md Change web demo local port to 8765 to avoid colliding with Jupyter 2024-06-28 08:37:21 +02:00
example.html Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
favicon.ico Rename `docs/` to `web_demo/` 2023-11-16 16:44:30 +01:00
index.html eframe web: ignore keyboard events unless canvas has focus (#4718) 2024-06-28 15:01:06 +02:00
multiple_apps.html eframe web: ignore keyboard events unless canvas has focus (#4718) 2024-06-28 15:01:06 +02:00

README.md

This folder contains the files required for the egui web demo hosted at https://www.egui.rs/.

Testing locally

Deploying egui.rs

Each merge into master will trigger a new deploy