migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-06-26 14:49:06 -04:00
Code Activity

eframe web: ignore keyboard events unless canvas has focus (#4718)

Browse Source 
* 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
This commit is contained in:
Emil Ernerfeldt
2024-06-28 15:01:06 +02:00
committed by GitHub
parent 779312ac0c
commit 3b9f964aed
8 changed files with 223 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web_demo/index.html
View File

@@ -96,8 +96,8 @@
</head>
<body>
<!-- The WASM code will resize the canvas dynamically -->
<canvas id="the_canvas_id"></canvas>
<div class="centered" id="center_text">
<p style="font-size:16px">
Loading…
@@ -175,6 +175,9 @@
console.debug("App started.");
document.getElementById("center_text").innerHTML = '';
// Make sure the canvas is focused so it can receive keyboard events right away:
document.getElementById("the_canvas_id").focus();
}
function on_error(error) {

3
web_demo/multiple_apps.html
View File

@@ -38,7 +38,7 @@
margin: 8px;
padding: 8px;
width: 45%;
height: 98%;
height: 110%;
}
.centered {
@@ -94,7 +94,6 @@
Stop one app
</button>
<canvas id="canvas_id_one"></canvas>
<canvas id="canvas_id_two"></canvas>