eframe web: mouse position is wrong when canvas has border or padding #4725
Assignees
Comments
emilk
added
bug
13 tasks
emilk
added a commit
that referenced
this issue
Jun 28, 2024
* Fixes rerun-io/rerun#6638 * Related? #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) * #4723 * #4724 * #4725 * #4726
hacknus
pushed a commit
to hacknus/egui
that referenced
this issue
Oct 30, 2024
…nt (emilk#4729) * Closes emilk#4725 Also fixes touch input being wrong if the web page is scrolled.
hacknus
pushed a commit
to hacknus/egui
that referenced
this issue
Oct 30, 2024
* Fixes rerun-io/rerun#6638 * Related? emilk#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) * emilk#4723 * emilk#4724 * emilk#4725 * emilk#4726
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We use
getBoundingClientRectwhich includes border and padding. We need to manually subtract those.The text was updated successfully, but these errors were encountered: