TextAgent assumes canvas is aligned to the top #4060
Comments
|
Web stuff is not really my skill set, so any help here would be appreciated. |
Would be happy to help. Am I understanding correctly that this is for mobile keyboard input support? Was this behind a feature flag in the past? If this was for that, what's the intention behind changing the position of the canvas element at all? At a quick glance, it appears the intention would be to slide it up and down to accommodate the keyboard that would slide in on a mobile device but my assumption would be that the keyboard appearing would already have that effect. |
|
canselcik@be66734 Since it is non-trivial accessing some configuration in that closure, I figured this would be a compromise-free option. If the canvas isn't flush to the upper left corner of the page, pushing it up like it is currently done will result in potentially broken page layout. So if the canvas is flush to the upper left corner, we do what is currently done and then set an attribute on the canvas. We prefix it with |
|
The current workaround is to add some CSS to the canvas: canvas {
position: initial !important;
top: unset !important;
}Ideally, egui would never set the style of the canvas element for any reason. |
- Closes #4060 - no longer aligned to top - Closes #4479 - `canvas.style` is not set anywhere anymore - Closes #2231 - same as #4060 - Closes #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: #4572
- Closes emilk#4060 - no longer aligned to top - Closes emilk#4479 - `canvas.style` is not set anywhere anymore - Closes emilk#2231 - same as emilk#4060 - Closes emilk#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: emilk#4572
egui/crates/eframe/src/web/text_agent.rs
Lines 153 to 154 in f7fc3b0
There seems to be no way to disable this. Any input to the canvas makes the canvas get a
position: absolute, top: 0%, breaking layout.Maybe
mouseupshouldn't result intext_agent::update_text_agent(runner)getting called.Maybe eframe should save some of the original style attributes of the canvas and then restore them instead of making this assumption.
The text was updated successfully, but these errors were encountered: