* Closes <https://github.com/emilk/egui/issues/8295>
* [x] I have followed the instructions in the PR template
When an eframe app is embedded in a scrollable host page, the host page
jumped to the top whenever the app booted or grabbed keyboard focus.
Cause: the hidden text-agent `<input>` sat at (0,0) of `<body>` with the
`autofocus` attribute, and all focus calls (text agent and canvas) used
plain `focus()`, so the browser scrolled the focused element into view —
i.e. to the top of the page.
Changes:
* All focus calls in `eframe` web (text agent, canvas, Gboard
blur/refocus workaround) now go through a new `focus_without_scroll()`
helper that uses `focus_with_options` with `preventScroll: true`
(supported by all evergreen browsers).
* The `autofocus` attribute is replaced with an explicit focus call
after DOM insertion — the browser-internal autofocus path always scrolls
the element into view and cannot be prevented by any focus option.
Boot-focus behavior is preserved.
* The text-agent input is initially parked at the canvas origin instead
of (0,0) of the page, so any residual scroll-into-view would target the
canvas rather than the top of the host page. (`move_to` keeps
repositioning it for IME as before.)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
<!--
Please read the "Making a PR" section of
[`CONTRIBUTING.md`](https://github.com/emilk/egui/blob/main/CONTRIBUTING.md)
before opening a Pull Request!
* Keep your PR:s small and focused.
* The PR title is what ends up in the changelog, so make it descriptive!
* If applicable, add a screenshot or gif.
* If it is a non-trivial addition, consider adding a demo for it to
`egui_demo_lib`, or a new example.
* Do NOT open PR:s from your `master` branch, as that makes it hard for
maintainers to test and add commits to your PR.
* Remember to run `cargo fmt` and `cargo clippy`.
* Open the PR as a draft until you have self-reviewed it and run
`./scripts/check.sh`.
* When you have addressed a PR comment, mark it as resolved.
Please be patient! I will review your PR, but my time is limited!
-->
This improves cases where the canvas does not cover the full screen,
which was a goal in [release
0.28.0](https://github.com/emilk/egui/releases/tag/0.28.0).
* Closes <https://github.com/emilk/egui/issues/8035>
* [X] I have followed the instructions in the PR template
* [x] I have followed the instructions in the PR template
This updates wgpu to v29 across the egui crate stack.
There a a few API changes due to the requirement to provide a display
handle up front to properly support GLES on linux. I have done my best
to make the api changes as reasonable as possible, but I don't have all
the greater project context, so lmk if things should be done a bit
differently.
I've also updated glow to 0.17 to make cargo deny happy, there are no
source changes. I'm not sure how you want to land these.
---------
Co-authored-by: lucasmerlin <hi@lucasmerlin.me>
* Closes https://github.com/emilk/egui/issues/5889
See the above issue for motivation.
To use glow instead, disable the default features of `eframe` and opt-in
to `glow`.
This also changes egui.rs to use wgpu, which means WebGPU when
available, and WebGL otherwise
* Part of https://github.com/emilk/egui/issues/5889
* Closes https://github.com/emilk/egui/issues/7106
This changes the `eframe/wgpu` feature to also enable all the `default`
features of `wgpu` and `egui-wgpu`. This makes switching `eframe`
backend from `glow` to `wgpu` a lot easier.
To get the old behavior (depend on `wgpu` but you must opt-in to all its
features), use the new `wgpu_no_default_features` feature.
I don't think this will make a difference in practice, but technically
there are three preference states:
* `dark`
* `light`
* `no-preference`
Previously we would only check for `dark`, and if not set would assume
`light`.
Not we also check `light` and if we're neither `dark` or `light` we
assume nothing.
* [x] I have followed the instructions in the PR template
This PR handles pointer events and focus which did following changes:
- `element_from_point` and focus is now acquired from root node object
by using `get_root_node` from document or a shadow root.
- `TextAgent` is appended individually in each shadow root.
These changes handles pointer events and focus well in a web app that
are running in a shadow dom, or else the hover pointer actions and
keyboard input events are not triggered in a shadow dom.
Helpful for building embeddable/multi-view web-apps.
* Closes https://github.com/emilk/egui/issues/5246
Tested on
* [x] Chromium
* [x] Firefox
* [x] Safari
On Chromium and Firefox we get one annoying frame with the wrong size,
which can mess up the layout of egui apps, but this PR is still a huge
improvement, and I don't want to spend more time on this right now.
<!--
Please read the "Making a PR" section of
[`CONTRIBUTING.md`](https://github.com/emilk/egui/blob/master/CONTRIBUTING.md)
before opening a Pull Request!
* Keep your PR:s small and focused.
* The PR title is what ends up in the changelog, so make it descriptive!
* If applicable, add a screenshot or gif.
* If it is a non-trivial addition, consider adding a demo for it to
`egui_demo_lib`, or a new example.
* Do NOT open PR:s from your `master` branch, as that makes it hard for
maintainers to test and add commits to your PR.
* Remember to run `cargo fmt` and `cargo clippy`.
* Open the PR as a draft until you have self-reviewed it and run
`./scripts/check.sh`.
* When you have addressed a PR comment, mark it as resolved.
Please be patient! I will review your PR, but my time is limited!
-->
I removed (I hope so) all wildcard imports I found.
For me on my pc this improved the build time:
- for egui -5s
- for eframe -12s
* [x] I have followed the instructions in the PR template
Hello,
I have made several corrections to stabilize the virtual keyboard on
Android and IOS (Chrome and Safari).
I don't know if these corrections can have a negative impact in certain
situations, but at the moment they don't cause me any problems.
I'll be happy to answer any questions you may have about these fixes.
These fixes correct several issues with the display of the virtual
keyboard, particularly since update 0.28, which can be reproduced on the
egui demo site.
We hope to be able to help you.
Thanks a lot for your work, I'm having a lot of fun with egui :)
* Some initial progress towards #4490
This PR just moves `Theme` and the "follow system theme" settings to
egui and adds `RawInput.system_theme`.
A follow-up PR can then introduce the two separate `dark_mode_style` and
`light_mode_style` fields on `Options`.
<!--
Please read the "Making a PR" section of
[`CONTRIBUTING.md`](https://github.com/emilk/egui/blob/master/CONTRIBUTING.md)
before opening a Pull Request!
* If applicable, add a screenshot or gif.
* If it is a non-trivial addition, consider adding a demo for it to
`egui_demo_lib`, or a new example.
* Do NOT open PR:s from your `master` branch, as that makes it hard for
maintainers to test and add commits to your PR.
* Remember to run `cargo fmt` and `cargo clippy`.
* Open the PR as a draft until you have self-reviewed it and run
`./scripts/check.sh`.
* When you have addressed a PR comment, mark it as resolved.
Please be patient! I will review your PR, but my time is limited!
-->
* [x] I have followed the instructions in the PR template
### Breaking changes
The options `follow_system_theme` and `default_theme` has been moved
from `eframe` into `egui::Options`, settable with `ctx.options_mut`
---------
Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
- Closes https://github.com/emilk/egui/issues/4060 - no longer aligned
to top
- Closes https://github.com/emilk/egui/issues/4479 - `canvas.style` is
not set anywhere anymore
- Closes https://github.com/emilk/egui/issues/2231 - same as #4060
- Closes https://github.com/emilk/egui/issues/3618 - there is now one
`<input>` per `eframe` app, and it's removed transitively by
`WebRunner::destroy -> AppRunner::drop -> TextAgent::drop`
This PR improves the text agent to make fewer assumptions about how
`egui` is embedded into the page:
- Text agent no longer sets the canvas position
- There is now a text agent for each instance of `WebRunner`
- The input element is now moved to the correct position, so the OS can
display the IME window in the correct place. Before it would typically
be outside of the viewport
The best way to test this is to build & server the web demo locally:
```
scripts/build_demo_web.sh && scripts/start_server.sh
```
Then open the EasyMark editor, and try using IME to input some emojis:
http://localhost:8888/#EasyMarkEditor
To open the emoji keyboard use:
- <kbd>win + .</kbd> on Windows
- <kbd>ctrl + cmd + space</kbd> on Mac
Tested on:
- [x] Windows
- [x] Linux
- [x] MacOS
- [x] Android
- [x] iOS
## Migration guide
The canvas no longer controls its own size/position on the page. This
means that those properties can now be controlled entirely via HTML and
CSS, and multiple separate `eframe` apps can coexist better on a single
page.
To match the old behavior, set the `canvas` width and height to 100% of
the `body` element:
```html
<html>
<body>
<canvas></canvas>
</body>
</html>
```
```css
/* remove default margins and use full viewport */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
canvas {
/* match parent element size */
width: 100%;
height: 100%;
}
```
Note that there is no need to set `position: absolute`/`left: 50%;
transform: translateX(-50%)`/etc., and setting those properties may
poorly affect the sharpness of `egui`-rendered text.
Because `eframe` no longer updates the canvas style in any way, it also
means that on mobile, the canvas no longer collapses upwards to make
space for a mobile keyboard. This should be solved in other ways:
https://github.com/emilk/egui/issues/4572
Currently, if the size of the canvas element changes independently of
the size of the browser window (e.g. due to its parent element
shrinking), then no repaints are scheduled.
This PR replaces the `resize` event with a `ResizeObserver`, which
ensures that _any_ resize of the canvas element (including those caused
by browser window resizes) trigger a repaint. The repaint is done
synchronously as part of the resize event, to reduce any potential
flickering.
The result seems to pass the rendering tests on most platform+browser
combinations. We tested:
- Chrome, Firefox, Safari on macOS
- Chrome, Firefox on Linux (ubuntu and arch, both running wayland)
- Chrome, Firefox on Windows
Firefox still has some antialiasing issues on Linux platforms, but this
antialiasing also happens on `master`, so this PR is not a regression
there.
The code setting `canvas.style.width` and `canvas.style.height` at the
start of `AppRunner::logic` was also removed - the canvas _display_ size
is now fully controlled by CSS, e.g. by setting `canvas { width: 100%;
height: 100%; }`.
The approach used here is described in
https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
Note: The only remaining place where egui updates the style of the
canvas it is rendering to is some of the IME/mobile input handling code.
Fixing that is out of scope for this PR, and will be done in a followup
PR.
* Closes https://github.com/emilk/egui/issues/4241
I would love some more testers of this.
I'm not sure if we really need the round-to-even code, but I'm hesitant
to out-right revert https://github.com/emilk/egui/pull/151 when I cannot
reproduce its problem. Keeping it seems quite safe though.
---
# Testing
Checkout the branch and run:
* `./scripts/start_server.sh`
* `./scripts/build_demo_web.sh` and then open
`http://localhost:8888/index.html#Rendering`
* `./scripts/build_demo_web.sh --wgpu` and then open
`http://localhost:8888/index.html#Rendering`
Check the "Rendering test" that the squares in the pixel alignment test
are perfectly sharp, like this:
<img width="576" alt="Screenshot 2024-04-01 at 13 27 20"
src="https://github.com/emilk/egui/assets/1148717/fb6c4824-9e25-4304-bc0c-3c50fbd44a52">
If it looks something like this, something is WRONG:
<img width="488" alt="Screenshot 2024-04-01 at 13 29 07"
src="https://github.com/emilk/egui/assets/1148717/04bd93ff-2108-40c5-95f6-76e3bcb9cd7f">
Please try it on different zoom levels in different browsers, and if
possible on different monitors with different native dpi scaling. Report
back the results!
### Mac
I have tested on a high-DPI Mac:
* Chromium (Brave): ✅ Can reproduce problem on `master`, and it's now
fixed
* Firefox: ✅ Can reproduce problem on `master`, and it's now fixed
* Safari: ❌ Can't get it to work; giving up for now
Before, when setting the `zoom_factor`, the website was already
enlarged, but the zoom was ignored when calculating the logical window
size and mouse position, causing an offset between the actual cursor and
selected elements. That is addressed here
---------
Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
Previously, any frames in flight (`requestAnimationFrame`) on web were
not being cancelled (`cancelAnimationFrame`) when `WebRunner::destroy`
was called. If a user called `destroy`, then immediately removed the
canvas from the DOM, eframe could panic with a "failed to find (canvas)
element by id" error message.
This PR changes two things:
- The canvas element is directly referenced everywhere it's needed
instead of being looked up by `canvas_id`[^1]
- The RAF handle is stored in `WebRunner` and `cancelAnimationFrame` is
called on it inside of `WebRunner::destroy`[^2]
[^1]: The WebGL/WGPU backends were already holding onto the canvas (and
associated GPU context), so the change is just converting all the
`get_element_by_id` lookups to retrieve the canvas from the web runner
handle.
[^2]: There is only ever one frame in flight, so we store it directly as
a scalar field.
We were using [`tts`](https://github.com/ndarilek/tts-rs) for the
web-only screen reader. This was overkill, to say the least. It is now
replaced with ten lines of `web-sys` calls.
* Follow-up to https://github.com/emilk/egui/pull/3621 and
https://github.com/emilk/egui/pull/3513
To work around a Safari limitation, we run the app logic in the event
handler of copy, cut, and mouse up and down.
Previously the output of that frame was discarded, but in this PR it is
now saved to be used in the next requestAnimationFrame.
The result is noticeable more distinct clicks on buttons (one more frame
of highlight)
Bonus: also fix auto-save of a sleeping web app
* Detect panics during initialization and show them to the user
* PanicHandler now also logs the panics
* Add example of how to call into your app from JS
* Refactor: break out AppRunner and AppRunnerRef to own files
* Hide AppRunner
* Simplify user code
* AppRunnerRef -> WebRunner
* Better docs
* Don't paint until first animation frame
* Update multiple_apps.html
* Update web demo
* Cleanup and fixes
* left-align panic message in html
* Log warning instead of error when failing to decode RON in storage
* New web demo
* Clean up some warn/error logging
* Avoid deadlock that could happen on crash
* Log errors using console.warn, because console.error can cause crashes
* Use patched version of wasm-bindgen-cli, allowing >2GB memory
* New web demo
* Refactor: remove extra store of events
* Remove unnecessary extra function
* Refactor: simplify event registering
* Store panic summary
* egui_demo_app: move web-part to own module
* index.html: await
* Properly unsubscribe from events on panic
* Better error handling
* Demo app html: hide the wasm canvas and show an error message on panic
* egui_demo_app: add panic button to test panic response on web
* fix typo
* Use a constructor to create WebHandle
* Refactor: less use of locks in the interfaces
* More consistent naming
* Replace tracing crate with log
It's just so much simpler to use
* Add `bacon wasm` job
* eframe: add a WebLogger for piping log events to the web console
* React to ThemeChanged event from winit
* React to theme change using media query change event in WASM
* Share conversion from bool -> Theme
* Suppress too_many_arguments warning
* Document limitations of automatically following the dark vs light mode preference
* Simplify expression
* Conditionally compile code to prevent unused item warnings
* Remove needless borrow
* Remove another needless borrow
* Make associated functions to standalone
* Request repaint after theme has changed
* Only install event listener when `follow_system_theme` is enabled
* Remove dark-light feature gate
* Detect system theme using winit
* Update documentation
* Fix typos
* fix warning about unused argument
---------
Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
* basic working wgpu @ webgl on websys
* fix glow compile error
* introduced WebPainter trait, provide wgpu renderstate
* WebPainterWgpu destroy implemented
* make custom3d demo work on wgpu backend
* changelog entry for wgpu support eframe wasm
* remove temporary logging hack
* stop using pollster for web
we're actually not allowed to block - this only worked because wgpu on webgl doesn't actually cause anything blocking. However, when trying webgpu this became an issue
* revert cargo update
* compile error if neither glow nor wgpu features are enabled
* code cleanup
* Error handling
* Update changelog with link
* Make sure --all-features work
* Select best framebuffer format from the available ones
* update to wasm-bindgen 0.2.83
* Fix typo
* Clean up Cargo.toml
* Log about using the wgpu painter
* fixup wgpu labels
* fix custom3d_wgpu_shader ub padding
* remove duplicated uniforms struct in wgsl shader for custom3d
* Update docs: add async/await to the web 'start' function
Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
* egui_demo_app: remove wgpu and pollster as direct dependencies
* eframe: use same web-sys version as wgpu crate
* Make note that web_sys_unstable_apis is required by the wgpu crate
* Rename the glow web painter in eframe
* Remove trait DummyWebGLConstructor from web_glow_painter.rs
* cargo fmt
* Fix check.sh
