Commit Graph

50 Commits

Author SHA1 Message Date
Emil Ernerfeldt b2995dcb83
Use Rust edition 2024 (#7280) 2025-06-30 14:01:57 +02:00
Lucas Meurer 0152a87519
Create custom `egui_kittest::Node` (#7138)
This adds a custom Node struct with proper support for egui types
(`Key`, `Modifiers`, `egui::Event`, `Rect`) instead of needing to use
the kittest / accesskit types.

I also changed the `click` function to do a proper mouse move / mouse
down instead of the accesskit click. Also added `accesskit_click` to
trigger the accesskit event. This resulted in some changed snapshots,
since the elements are now hovered.

Also renamed `press_key` to `key_press` for consistency with
`key_down/key_up`.

Also removed the Deref to the AccessKit Node, to make it clearer when to
expect egui and when to expect accesskit types.

* Closes #5705 
* [x] I have followed the instructions in the PR template
2025-06-17 12:17:38 +02:00
Emil Ernerfeldt f57cb27386
Include test windows in `egui_demo_lib` snapshot tests (#7070) 2025-05-21 17:44:27 +02:00
Emil Ernerfeldt 54ae2360ec
Fix incorrect color fringe colors on SVG:s (#7069)
This is a problem that affected the fringes on all SVG:s with
transparency, especially on a light background.

## Before

![image](https://github.com/user-attachments/assets/342823ad-005c-4f82-83a6-d2dcccfd3221)


## After

![image](https://github.com/user-attachments/assets/73398265-d333-461b-8c2b-fce405d95a9c)
2025-05-21 17:18:36 +02:00
Emil Ernerfeldt f9245954eb
Enable more clippy lints (#6853)
* Follows https://github.com/emilk/egui/pull/6848
2025-04-24 17:32:50 +02:00
lucasmerlin cd22517280
⚠️ Improved menu based on `egui::Popup` (#5716)
Continuation of #5713

**Silently breaking changes:**
- Menus now close on click by default, this is configurable via
`PopupCloseBehavior`

**Additional additions:**
- `Button::right_text`
- `StyleModifier`

This is a rewrite of the egui menus, with the following goals:
- submenu buttons should work everywhere, in a popup, context menu,
area, in some random Ui
- remove the menu state from Ui
- should work just like the previous menu
- ~proper support for keyboard navigation~
  - It's better now but requires further work to be perfect
- support `PopupCloseBehavior`

* Closes #4607 
* [x] I have followed the instructions in the PR template
2025-03-03 14:56:30 +01:00
lucasmerlin f5b058b908
Add `Ui::close` and `Response::should_close` (#5729)
This adds a generic way of telling containers to close from their child
`Ui`s.

* Part of #5727 
* [x] I have followed the instructions in the PR template

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2025-02-20 17:59:29 +01:00
lucasmerlin a8e98d3f9b
Add `Popup` and `Tooltip`, unifying the previous behaviours (#5713)
This introduces new `Tooltip` and `Popup` structs that unify and extend
the old popups and tooltips.

`Popup` handles the positioning and optionally stores state on whether
the popup is open (for click based popups like `ComboBox`, menus,
context menus).
`Tooltip` is based on `Popup` and handles state of whether the tooltip
should be shown (which turns out to be quite complex to handles all the
edge cases).

Both `Popup` and `Tooltip` can easily be constructed from a `Response`
and then customized via builder methods.

This also introduces `PositionAlign`, for aligning something outside of
a `Rect` (in contrast to `Align2` for aligning inside a `Rect`). But I
don't like the name, any suggestions? Inspired by [mui's tooltip
positioning](https://mui.com/material-ui/react-tooltip/#positioned-tooltips).

* Part of #4607 
* [x] I have followed the instructions in the PR template

TODOs:
- [x] Automatic tooltip positioning based on available space
- [x] Review / fix / remove all code TODOs 
- [x] ~Update the helper fns on `Response` to be consistent in naming
and parameters (Some use tooltip, some hover_ui, some take &self, some
take self)~ actually, I think the naming and parameter make sense on
second thought
- [x] Make sure all old code is marked deprecated

For discussion during review:
- the following check in `show_tooltip_for` still necessary?:
```rust
     let is_touch_screen = ctx.input(|i| i.any_touches());
     let allow_placing_below = !is_touch_screen; // There is a finger below. TODO: Needed?
```
2025-02-18 15:53:07 +01:00
lucasmerlin b8051cc301
Add `SnapshotResults` struct to egui_kittest (#5672)
I got annoyed by all the slightly different variations of "collect
snapshot results and unwrap them at the end of test" I've written, so I
added a struct to make this nice and simple.

One controversial thing: It panics when dropped. I wanted to ensure
people cannot forget to unwrap the results at the end, and this was the
best thing I could come up with. I don't think this is possible via
clippy lint or something like that.

* [x] I have followed the instructions in the PR template
2025-02-04 14:01:32 +01:00
Emil Ernerfeldt 3c07e01d08
Improve tessellation quality (#5669)
## Defining what `Rounding` is
This PR defines what `Rounding` means: it is the corner radius of
underlying `RectShape` rectangle. If you use `StrokeKind::Inside`, this
means the rounding is of the outer part of the stroke. Conversely, if
you use `StrokeKind::Outside`, the stroke is outside the rounded
rectangle, so the stroke has an inner radius or `rounding`, and an outer
radius that is larger by `stroke.width`.

This definitions is the same as Figma uses.

## Improving general shape rendering
The rendering of filled shapes (rectangles, circles, paths, bezier) has
been rewritten. Instead of first painting the fill with the stroke on
top, we now paint them as one single mesh with shared vertices at the
border. This has several benefits:

* Less work (faster and with fewer vertices produced)
* No overdraw (nicer rendering of translucent shapes)
* Correct blending of stroke and fill

The logic for rendering thin strokes has also been improved, so that the
width of a stroke of `StrokeKind::Outside` never affects the filled area
(this used to be wrong for thin strokes).

## Improving of rectangle rendering
Rectangles also has specific improvements in how thin rectangles are
painted.
The handling of "Blur width" is also a lot better, and now works for
rectangles with strokes.
There also used to be bugs with specific combinations of corner radius
and stroke width, that are now fixed.

##  But why?
With the new `egui::Scene` we end up with a lot of zoomed out shapes,
with sub-pixel strokes. These need to look good! One thing led to
another, and then I became obsessive 😅

## Tessellation Test
In order to investigate the rendering, I created a Tessellation Test in
the `egui_demo_lib`.

[Try it
here](https://egui-pr-preview.github.io/pr/5669-emilkimprove-tessellator)

![Screenshot 2025-02-04 at 08 45
50](https://github.com/user-attachments/assets/20b47a30-de6a-4ff5-885b-2e2fd6d88321)


![image](https://github.com/user-attachments/assets/e17c50eb-5ae7-48d4-bb0d-4f2165075897)
2025-02-04 11:30:12 +01:00
Jochen Görtler e8f351b729
Add `egui::Scene` for panning/zooming a `Ui` (#5505)
This is similar to `ScrollArea`, but:
* Supports zooming
* Has no scroll bars
* Has no limits on the scrolling

## TODO
* [x] Automatic sizing of `Scene`s outer bounds
* [x] Fix text selection in scenes
* [x] Implement `fit_rect`
* [x] Document / improve API

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2025-01-28 20:06:10 +01:00
Emil Ernerfeldt 5b740f97ac
Remove `egui::special_emojis::TWITTER` (#5622)
Twitter is gone, as is its icon.

Also, fuck Elon Musk

Find me on https://bsky.app/profile/ernerfeldt.bsky.social
2025-01-21 11:56:45 +01:00
lucasmerlin 52060c0c41
Change `Harness::run` to run until no more repaints are requested (#5580)
Previously, `Harness::run` just called `Harness::step` 3 times. If that
wasn't enough, tests would often call run multiple times so all
animations would finish properly.

Also, I introduced `HarnessBuilder::with_step_dt` to customize with how
big of a dt each frame is called. I set the default to 1.0 / 6.0 (~6fps)
so we don't waste cpu in tests waiting on animations.

`HarnessBuilder::max_steps` allows us to control how many steps
`Harness::run` should run before panicing.
The default is 6, so we run for up to 1.0 logical seconds (six frames at
6 fps), which should be enough to finish most animations.

Turns out a lot of snapshots where rendered before fully shown and had a
light opacity, those are now fixed.

* [x] I have followed the instructions in the PR template
2025-01-07 08:33:44 +01:00
lucasmerlin 46b58e5bcc
Add `Harness::new_eframe` and `TestRenderer` trait (#5539)
Co-authored-by: Andreas Reich <r_andreas2@web.de>
2025-01-02 17:48:39 +01:00
Emil Ernerfeldt bf6ed3adfc
Add `Context::copy_image` (#5533)
* Closes https://github.com/emilk/egui/issues/5424

This adds support for copying images to the system clipboard on native
and on web using `Context::copy_image`.
2024-12-29 18:03:32 +01:00
Emil Ernerfeldt fa95351675
Slight improvements to the demo (#5527) 2024-12-28 22:11:41 +01:00
lucasmerlin 6c1d695fc6
Add screenshot support for eframe web (#5438)
This implements web support for taking screenshots in an eframe app (and
adds a nice demo).
It also updates the native screenshot implementation to work with the
wgpu gl backend.

The wgpu implementation is quite different than the native one because
we can't block to wait for the screenshot result, so instead I use a
channel to pass the result to a future frame asynchronously.

* Closes <https://github.com/emilk/egui/issues/5425>
* [x] I have followed the instructions in the PR template


https://github.com/user-attachments/assets/67cad40b-0384-431d-96a3-075cc3cb98fb
2024-12-12 19:17:42 +01:00
Emil Ernerfeldt c7224aab26
Improve error message when kittest fails (#5427)
* Closes https://github.com/emilk/egui/issues/5423

New output is actionable

```
failures:

---- demo::demo_app_windows::tests::demos_should_match_snapshot stdout ----
thread 'demo::demo_app_windows::tests::demos_should_match_snapshot' panicked at crates/egui_demo_lib/src/demo/demo_app_windows.rs:433:9:
Errors: [
    "'demos/Code Example' Image size did not match snapshot. Expected: (402, 574), Actual: (415, 574).
     Run `UPDATE_SNAPSHOTS=1 cargo test` to update the snapshots.",
]
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace


failures:
    demo::demo_app_windows::tests::demos_should_match_snapshot
```
2024-12-03 13:40:51 +01:00
lucasmerlin 10791cc43d
Add `Modal` and `Memory::set_modal_layer` (#5358)
* Closes #686 
* Closes #839 
* #5370 should be merged before this
* [x] I have followed the instructions in the PR template

This adds modals to egui. 
This PR
- adds a new `Modal` struct
- adds `Memory::set_modal_layer` to limit focus to a layer and above
(used by the modal struct, but could also be used by custom modal
implementations)
- adds `Memory::allows_interaction` to check if a layer is behind a
modal layer, deprecating `Layer::allows_interaction`



Current problems:
- ~When a button is focused before the modal opens, it stays focused and
you also can't hit tab to focus the next widget. Seems like focus is
"stuck" on that widget until you hit escape. This might be related to
https://github.com/emilk/egui/issues/5359~ fixed!

Possible future improvements: 
- The titlebar from `window` should be made into a separate widget and
added to the modal
- The state whether the modal is open should be stored in egui
(optionally), similar to popup and menu. Ideally before this we would
refactor popup state to unify popup and menu

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2024-11-28 16:52:05 +01:00
lucasmerlin e28505077d
Update accesskit to 0.17 (#5372)
Updates accesskit and kittest. 

* [x] I have followed the instructions in the PR template
2024-11-26 15:16:08 +01:00
lucasmerlin dafcfdad80
egui_kittest: Allow customizing the snapshot threshold and path (#5304)
This adds `egui_kittest::try_image_snapshot_options` and
`egui_kittest::image_snapshot_options`, as well as
`Harness::wgpu_snapshot_options` and
`Harness::try_wgpu_snapshot_options`

* [X] I have followed the instructions in the PR template
2024-10-29 19:52:21 +01:00
lucasmerlin 70a01138b7
Add egui testing library (#5166)
- closes #3491 
- closes #3926

This adds a testing library to egui based on
[kittest](https://github.com/rerun-io/kittest). Kittest is a new
[AccessKit](https://github.com/AccessKit/accesskit/)-based testing
library. The api is inspired by the js
[testing-library](https://testing-library.com/) where the idea is also
to query the dom based on accessibility attributes.
We made kittest with egui in mind but it should work with any rust gui
framework with AccessKit support.

It currently has support for:
- running the egui app, frame by frame
- building the AccessKit tree
- ergonomic queries via kittest
  - via e.g. get_by_name, get_by_role
- simulating events based on the accesskit node id
- creating arbitrary events based on Harness::input_mut
- rendering screenshots via wgpu
- snapshot tests with these screenshots

A simple test looks like this: 
```rust
fn main() {
    let mut checked = false;
    let app = |ctx: &Context| {
        CentralPanel::default().show(ctx, |ui| {
            ui.checkbox(&mut checked, "Check me!");
        });
    };

    let mut harness = Harness::builder().with_size(egui::Vec2::new(200.0, 100.0)).build(app);
    
    let checkbox = harness.get_by_name("Check me!");
    assert_eq!(checkbox.toggled(), Some(Toggled::False));
    checkbox.click();
    
    harness.run();

    let checkbox = harness.get_by_name("Check me!");
    assert_eq!(checkbox.toggled(), Some(Toggled::True));

    // You can even render the ui and do image snapshot tests
    #[cfg(all(feature = "wgpu", feature = "snapshot"))]
    egui_kittest::image_snapshot(&egui_kittest::wgpu::TestRenderer::new().render(&harness), "readme_example");
}
```

~Since getting wgpu to run in ci is a hassle, I'm taking another shot at
creating a software renderer for egui (ideally without a huge dependency
like skia)~ (this didn't work as well as I hoped and it turns out in CI
you can just run tests on a mac runner which comes with a real GPU)
 
Here is a example of a failed snapshot test in ci, it will say which
snapshot failed and upload an artifact with the before / after and diff
images:

https://github.com/emilk/egui/actions/runs/11183049487/job/31090724606?pr=5166
2024-10-22 12:39:00 +02:00
lucasmerlin 1b8737cf02
Interactive `Ui`:s: add `UiBuilder::sense` and `Ui::response` (#5054)
<!--
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!
-->

* Closes #5053 
* [x] I have followed the instructions in the PR template


This fixes #5053 by adding a Sense parameter to UiBuilder, using that in
Context::create_widget, so the Widget is registered with the right Sense
/ focusable. Additionally, I've added a ignore_focus param to
create_widget, so the focus isn't surrendered / reregistered on
Ui::interact_bg.

The example from #5053 now works correctly: 


https://github.com/user-attachments/assets/a8a04b5e-7635-4e05-9ed8-e17d64910a35

<details><summary>Updated example code</summary>
<p>

```rust
            ui.button("I can focus");

            ui.scope_builder(
                UiBuilder::new()
                    .sense(Sense::click())
                    .id_source("focus_test"),
                |ui| {
                    ui.label("I can focus for a single frame");
                    let response = ui.interact_bg();
                    let t = if response.has_focus() {
                        "has focus"
                    } else {
                        "doesn't have focus"
                    };
                    ui.label(t);
                },
            );

            ui.button("I can't focus :(");
```

</p>
</details> 



---

Also, I've added `Ui::interact_scope` to make it easier to read a Ui's
response in advance, without having to know about the internals of how
the Ui Ids get created.

This makes it really easy to created interactive container elements or
custom buttons, without having to use Galleys or
Painter::add(Shape::Noop) to style based on the interaction.

<details><summary>
Example usage to create a simple button
</summary>
<p>


```rust
use eframe::egui;
use eframe::egui::{Frame, InnerResponse, Label, RichText, UiBuilder, Widget};
use eframe::NativeOptions;
use egui::{CentralPanel, Sense, WidgetInfo};

pub fn main() -> eframe::Result {
    eframe::run_simple_native("focus test", NativeOptions::default(), |ctx, _frame| {
        CentralPanel::default().show(ctx, |ui| {
            ui.button("Regular egui Button");
            custom_button(ui, |ui| {
                ui.label("Custom Button");
            });

            if custom_button(ui, |ui| {
                ui.label("You can even have buttons inside buttons:");

                if ui.button("button inside button").clicked() {
                    println!("Button inside button clicked!");
                }
            })
            .response
            .clicked()
            {
                println!("Custom button clicked!");
            }
        });
    })
}

fn custom_button<R>(
    ui: &mut egui::Ui,
    content: impl FnOnce(&mut egui::Ui) -> R,
) -> InnerResponse<R> {
    let auto_id = ui.next_auto_id();
    ui.skip_ahead_auto_ids(1);
    let response = ui.interact_scope(
        Sense::click(),
        UiBuilder::new().id_source(auto_id),
        |ui, response| {
            ui.style_mut().interaction.selectable_labels = false;
            let visuals = response
                .map(|r| ui.style().interact(&r))
                .unwrap_or(&ui.visuals().noninteractive());
            let text_color = visuals.text_color();

            Frame::none()
                .fill(visuals.bg_fill)
                .stroke(visuals.bg_stroke)
                .rounding(visuals.rounding)
                .inner_margin(ui.spacing().button_padding)
                .show(ui, |ui| {
                    ui.visuals_mut().override_text_color = Some(text_color);
                    content(ui)
                })
                .inner
        },
    );

    response
        .response
        .widget_info(|| WidgetInfo::new(egui::WidgetType::Button));

    response
}
```

</p>
</details> 



https://github.com/user-attachments/assets/281bd65f-f616-4621-9764-18fd0d07698b

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2024-09-19 11:55:21 +02:00
Juan Campa f2815b423e
Fix blurry lines (#4943)
<!--
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!
-->


* Closes <https://github.com/emilk/egui/issues/4776>
* [x] I have followed the instructions in the PR template



I've been meaning to look into this for a while but finally bit the
bullet this week. Contrary to what I initially thought, the problem of
blurry lines is unrelated to feathering because it also happens with
feathering disabled.

The root cause is that lines tend to land on pixel boundaries, and
because of that, frequently used strokes (e.g. 1pt), end up partially
covering pixels. This is especially noticeable on 1ppp displays.

There were a couple of things to fix, namely: individual lines like
separators and indents but also shape strokes (e.g. Frame).

Lines were easy, I just made sure we round them to the nearest pixel
_center_, instead of the nearest pixel boundary.

Strokes were a little more complicated. To illustrate why, here’s an
example: if we're rendering a 5x5 rect (black fill, red stroke), we
would expect to see something like this:

![Screenshot 2024-08-11 at 15 01
41](https://github.com/user-attachments/assets/5a5d4434-0814-451b-8179-2864dc73c6a6)

The fill and the stroke to cover entire pixels. Instead, egui was
painting the stroke partially inside and partially outside, centered
around the shape’s path (blue line):

![Screenshot 2024-08-11 at 15 00
57](https://github.com/user-attachments/assets/4284dc91-5b6e-4422-994a-17d527a6f13b)

Both methods are valid for different use-cases but the first one is what
we’d typically want for UIs to feel crisp and pixel perfect. It's also
how CSS borders work (related to #4019 and #3284).

Luckily, we can use the normal computed for each `PathPoint` to adjust
the location of the stroke to be outside, inside, or in the middle.
These also are the 3 types of strokes available in tools like Photoshop.

This PR introduces an enum `StrokeKind` which determines if a
`PathStroke` should be tessellated outside, inside, or _on_ the path
itself. Where "outside" is defined by the directions normals point to.

Tessellator will now use `StrokeKind::Outside` for closed shapes like
rect, ellipse, etc. And `StrokeKind::Middle` for the rest since there's
no meaningful "outside" concept for open paths. This PR doesn't expose
`StrokeKind` to user-land, but we can implement that later so that users
can render shapes and decide where to place the stroke.

### Strokes test
(blue lines represent the size of the rect being rendered)

`Stroke::Middle` (current behavior, 1px and 3px are blurry)
![Screenshot 2024-08-09 at 23 55
48](https://github.com/user-attachments/assets/dabeaa9e-2010-4eb6-bd7e-b9cb3660542e)


`Stroke::Outside` (proposed default behavior for closed paths)
![Screenshot 2024-08-09 at 23 51
55](https://github.com/user-attachments/assets/509c261f-0ae1-46a0-b9b8-08de31c3bd85)



`Stroke::Inside` (for completeness but unused at the moment)
![Screenshot 2024-08-09 at 23 54
49](https://github.com/user-attachments/assets/c011b1c1-60ab-4577-baa9-14c36267438a)



### Demo App
The best way to review this PR is to run the demo on a 1ppp display,
especially to test hover effects. Everything should look crisper. Also
run it in a higher dpi screen to test that nothing broke 🙏.

Before:

![egui_old](https://github.com/user-attachments/assets/cd6e9032-d44f-4cb0-bb41-f9eb4c3ae810)


After (notice the sharper lines):

![egui_new](https://github.com/user-attachments/assets/3365fc96-6eb2-4e7d-a2f5-b4712625a702)
2024-08-30 09:57:32 +02:00
Emil Ernerfeldt cb9f30482f
Move `egui_plot` to its own repo (#4828)
* Part of https://github.com/emilk/egui/issues/4705

`egui_plot` can now be found at https://github.com/emilk/egui_plot
2024-07-15 18:45:19 +02:00
Wybe Westra 1adc3d8865
Add undo/redo demo. (#4811)
* Closes https://github.com/emilk/egui/issues/1713 

I almost went to implement my own undo/redo system, and then found the
egui undoer.
Went to make a small demo to test for myself how it worked, and then
found the linked issue.
So here is a tweaked version of that :)

Co-authored-by: Wybe Westra <w.westra@kwantcontrols.nl>
2024-07-15 10:54:34 +02:00
Emil Ernerfeldt 753412193c
Improve `egui_extras::Table` layout (#4755)
Mostly a refactor, but some minor fixes to how it works.

Mostly preparing for a few bigger changes.
2024-07-02 20:57:46 +02:00
Emil Ernerfeldt 44f49713eb
Add an input event history tracker to the egui demo lib (#4693)
This is great for testing how e.g. keyboard events are seen by egui:


![image](https://github.com/emilk/egui/assets/1148717/b2187060-6533-439c-9f43-fc49b8213c28)


* Relevant: https://github.com/emilk/egui/issues/3653
2024-06-23 11:34:38 +02:00
Emil Ernerfeldt fb4c6cc619
Put all `egui_demo_lib` tests into their own files in their own folder (#4691) 2024-06-23 10:53:04 +02:00
Emil Ernerfeldt c0a9800d05
Support interactive widgets in tooltips (#4596)
* Closes https://github.com/emilk/egui/issues/1010

### In short
You can now put interactive widgets, like buttons and hyperlinks, in an
tooltip using `on_hover_ui`. If you do, the tooltip will stay open as
long as the user hovers it.

There is a new demo for this in the egui demo app (egui.rs):


![interactive-tooltips](https://github.com/emilk/egui/assets/1148717/97335ba6-fa3e-40dd-9da0-1276a051dbf2)

### Design
Tooltips can now contain interactive widgets, such as buttons and links.
If they do, they will stay open when the user moves their pointer over
them.

Widgets that do not contain interactive widgets disappear as soon as you
no longer hover the underlying widget, just like before. This is so that
they won't annoy the user.

To ensure not all tooltips with text in them are considered interactive,
`selectable_labels` is `false` for tooltips contents by default. If you
want selectable text in tooltips, either change the `selectable_labels`
setting, or use `Label::selectable`.

```rs
ui.label("Hover me").on_hover_ui(|ui| {
    ui.style_mut().interaction.selectable_labels = true;
    ui.label("This text can be selected.");

    ui.add(egui::Label::new("This too.").selectable(true));
});
```

### Changes
* Layers in `Order::Tooltip` can now be interacted with
2024-06-03 11:37:06 +02:00
Emil Ernerfeldt a768d74411
Add `Ui::is_sizing_pass` for better size estimation of `Area`s, and menus in particular (#4557)
* Part of https://github.com/emilk/egui/issues/4535
* Closes https://github.com/emilk/egui/issues/3974

This adds a special `sizing_pass` mode to `Ui`, in which we have no
centered or justified layouts, and everything is hidden. This is used by
`Area` to use the first frame to measure the size of its contents so
that it can then set the perfectly correct size the subsequent frames.

For menus, where buttons are justified (span the full width), this
finally the problem of auto-sizing. Before you would have to pick a
width manually, and all buttons would expand to that width. If it was
too wide, it looked weird. If it was too narrow, text would wrap. Now
all menus are exactly the width they need to be. By default menus will
wrap at `Spacing::menu_width`.

This affects all situations when you have something that should be as
small as possible, but still span the full width/height of the parent.
For instance: the `egui::Separator` widget now checks the
`ui.is_sizing_pass` flag before deciding on a size. In the sizing pass a
horizontal separator is always 0 wide, and only in subsequent passes
will it span the full width.
2024-05-29 10:27:04 +02:00
Antoine Beyeler bcd91f27a1
Add support for text truncation to `egui::Style` (#4556)
* Closes #4473

This PR introduce `Style::wrap_mode`, which adds support for text
truncation in addition to text wrapping. This PR also update some width
calculation of the ComboBox.

#### Core

- Add `egui::TextWrapMode` (pure enum with `Extend`, `Wrap`, `Truncate`)
- Add `Style::wrap_mode: Option<tTextWrapMode>`
- **DEPRECATED**: `Style::wrap`, use `Style::wrap_mode` instead.
- Add `Ui::wrap_mode()` to return the wrap mode to use in the current
ui. If specified in `Style`, return it. Otherwise, return
`TextWrapMode::Wrap` for vertical layout and wrapping horizontal layout,
and `TextWrapMode::Extend` otherwise.
- **DEPRECATED**: `Ui::wrap_text()`, use `Ui::wrap_mode` instead.

#### Widget

- Update the width calculation of the `ComboBox` button (_not_ its popup
menu).
- Now, `ComboBox::width()` (defaulting to `Spacing::combo_width`) is
always considered a minimum width and will extend the `Ui`, regardless
of the selected text width and wrap mode.
- Introduce `ComboBox::wrap_mode`, which overrides `Ui::wrap_mode` for
the selected text layout.
- Note: since `ComboBox` uses `ui.horizontal` internally, the default
wrap mode is always `TextWrapMode::Extend`, regardless of the caller's
`Ui`'s layout.
- The `ComboBox` button no longer extend to `ui.available_width()` with
wrapping is enabled.
- **BREAKING**: `ComboBox::wrap()` no longer has a `bool` argument and
is now a short-hand for `ComboBox::wrap_mode(TextWrapMode::Wrap)`.
- Added `ComboBox::truncate()` as short-hand for
`ComboBox::wrap_mode(TextWrapMode::Truncate)`.
- Update `Label`
  - Add `Label::wrap_mode()` to specify the text wrap mode.
- **BREAKING**: `Label::wrap()` no longer has a `bool` argument and is
now a short-hand for `Label::wrap_mode(TextWrapMode::Wrap)`.
- **BREAKING**: `Label::truncate()` no longer has a `bool` argument and
is now a short-hand for `Label::wrap_mode(TextWrapMode::Truncate)`.
- Update `Button`
  - Add `Button::wrap_mode()` to specify the text wrap mode.
- **BREAKING**: `Button::wrap()` no longer has a `bool` argument and is
now a short-hand for `Button::wrap_mode(TextWrapMode::Wrap)`.
- Added `Button::truncate()` as short-hand for
`Button::wrap_mode(TextWrapMode::Truncate)`.

#### Low-level

- **BREAKING**: `WidgetText::into_galley()` now takes an
`Option<TextWrapMode>` instead of a `Option<bool>` argument.
- **BREAKING**: `WidgetText::into_galley_impl(()` now takes a
`TextWrapping` argument instead of `wrap: bool` and `availalbe_width:
f32` arguments.

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2024-05-28 13:10:41 +02:00
Emil Ernerfeldt 1354c3e19a
Make the code example demo narrow enough to fit on mobile (#4281)
I think it is a good example, and so I want to open it by default, but
for that it needs to work on mobile.

Hopefully this doesn't make it too cryptic

<img width="415" alt="image"
src="https://github.com/emilk/egui/assets/1148717/83d881fa-675e-4659-bd21-14abcb79fe46">
2024-03-30 17:51:44 +01:00
Emil Ernerfeldt 3dba73e63e
Improve the UI for changing the egui theme (#4257)
I added a new demo - a `Frame` editor:

![frame-editor](https://github.com/emilk/egui/assets/1148717/d0bec169-c211-45a3-9f53-5059fb8fc224)

This whole menu is now just a a bit nicer to use:
<img width="406" alt="Screenshot 2024-03-28 at 09 49 16"
src="https://github.com/emilk/egui/assets/1148717/32d12067-7cf0-4312-aa12-42909a5ed5ac">
2024-03-28 10:09:28 +01:00
Francis Chua 069d7a634d
Add layer transforms, interaction in layer (#3906)
⚠️ Removes `Context::translate_layer`, replacing it with a sticky
`set_transform_layer`

Adds the capability to scale layers.
Allows interaction with scaled and transformed widgets inside
transformed layers.

I've also added a demo of how to have zooming and panning in a window
(see the video below).

This probably closes #1811. Having a panning and zooming container would
just be creating a new
`Area` with a new id, and applying zooming and panning with
`ctx.transform_layer`.

I've run the github workflow scripts in my repository, so hopefully the
formatting and `cargo cranky` is satisfied.

I'm not sure if all call sites where transforms would be relevant have
been handled. This might also be missing are transforming clipping
rects, but I'm not sure where / how to accomplish that. In the demo, the
clipping rect is transformed to match, which seems to work.


https://github.com/emilk/egui/assets/70821802/77e7e743-cdfe-402f-86e3-7744b3ee7b0f

---------

Co-authored-by: tweoss <fchua@puffer5.stanford.edu>
Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
2024-02-17 11:02:56 +01:00
Emil Ernerfeldt 41aad74552
Cross-widget text select (#3870)
* Closes https://github.com/emilk/egui/issues/3816


![cross-widget-text-selection](https://github.com/emilk/egui/assets/1148717/5582b9d2-8b04-47b7-9637-f48e44064a70)

Turn off with `style.interaction.multi_widget_text_select`.

There is an API for this in `LabelSelectionState`, but it's pretty
bare-bones.

This became really hairy implementation-wise, but it works decently
well.

# Limitations
* Drag-select to scroll doesn't work
* A selection disappears if you scroll past one of its end-points
* Only the text of labels and links are selectable
 
## TODO
* [x] An option to turn it off
* [x] An API for querying about the selected text, and to deselect it.
* [x] Scrolling past selection behaves weird
* [x] Shift-click to select a range
2024-01-24 15:45:22 +01:00
Emil Ernerfeldt 63e48dc855
Introduce global `zoom_factor` (#3608)
* Closes https://github.com/emilk/egui/issues/3602

You can now zoom any egui app by pressing Cmd+Plus, Cmd+Minus or Cmd+0,
just like in a browser. This will change the current `zoom_factor`
(default 1.0) which is persisted in the egui memory, and is the same for
all viewports.
You can turn off the keyboard shortcuts with `ctx.options_mut(|o|
o.zoom_with_keyboard = false);`

`zoom_factor` can also be explicitly read/written with
`ctx.zoom_factor()` and `ctx.set_zoom_factor()`.

This redefines `pixels_per_point` as `zoom_factor *
native_pixels_per_point`, where `native_pixels_per_point` is whatever is
the native scale factor for the monitor that the current viewport is in.

This adds some complexity to the interaction with winit, since we need
to know the current `zoom_factor` in a lot of places, because all egui
IO is done in ui points. I'm pretty sure this PR fixes a bunch of subtle
bugs though that used to be in this code.

`egui::gui_zoom::zoom_with_keyboard_shortcuts` is now gone, and is no
longer needed, as this is now the default behavior.

`Context::set_pixels_per_point` is still there, but it is recommended
you use `Context::set_zoom_factor` instead.
2023-11-22 20:34:51 +01:00
Emil Ernerfeldt 1571027556
Replace `eframe::Frame` commands and `WindowInfo` with egui (#3564)
* Part of https://github.com/emilk/egui/issues/3556

## In short
You now almost never need to use `eframe::Frame` - instead use
`ui.input(|i| i.viewport())` for information about the current viewport
(native window), and use `ctx.send_viewport_cmd` to modify it.

## In detail

This PR removes most commands from `eframe::Frame`, and replaces them
with `ViewportCommand`.
So `frame.close()` becomes
`ctx.send_viewport_cmd(ViewportCommand::Close)`, etc.

`frame.info().window_info` is now also gone, replaced with `ui.input(|i|
i.viewport())`.

`frame.info().native_pixels_per_point` is replaced with `ui.input(|i|
i.raw.native_pixels_per_point)`.

`RawInput` now contains one `ViewportInfo` for each viewport.

Screenshots are taken with
`ctx.send_viewport_cmd(ViewportCommand::Screenshots)` and are returned
in `egui::Event` which you can check with:

``` ust
ui.input(|i| {
    for event in &i.raw.events {
        if let egui::Event::Screenshot { viewport_id, image } = event {
            // handle it here
        }
    }
});
```

### Motivation
You no longer need to pass around the `&eframe::Frame` everywhere.
This also opens the door for other integrations to use the same API of
`ViewportCommand`s.
2023-11-18 19:27:53 +01:00
Emil Ernerfeldt a128b10ef4 Update Rerun.io logo and copy 2023-09-27 15:27:51 +02:00
Emil Ernerfeldt 23ce4e70ca
Add option to show a callstack to the widget under the mouse (#3391) 2023-09-26 15:50:35 +02:00
Emil Ernerfeldt 46ea72abe4
Add control of line height and letter spacing (#3302)
* Add `TextFormat::extra_letter_spacing`

* Add control of line height

* Add to text layout demo

* Move the text layout demo to its own window in the demo app

* Fix doclink

* Better document points vs pixels

* Better documentation and code cleanup
2023-09-05 10:45:11 +02:00
Emil Ernerfeldt 08fb447fb5
Increase MSRV to 1.67 (#3234)
* Bump MSRV to 1.67

* clippy fixes

* cargo clippy: inline format args

* Add `clippy::uninlined_format_args` to cranky lints

* Fix clippy on wasm

* More clippy fixes
2023-08-11 13:54:02 +02:00
Emil Ernerfeldt 4d357b0f02 clippy fixes from 1.69.0 2023-04-21 11:33:18 +02:00
Emil Ernerfeldt c72bdb77b5
Add ability to highlight any widget (#2632)
* Add ability to highlight any widget

* Add line to changelog

* Demote the demo to a test
2023-01-27 23:36:14 +01:00
Emil Ernerfeldt 8ce0e1c520
Avoid deadlocks by using lambdas for context lock (#2625)
ctx.input().key_pressed(Key::A) -> ctx.input(|i| i.key_pressed(Key::A))
2023-01-25 10:24:23 +01:00
Emil Ernerfeldt b8a1670781 Change demo keyboard shortcuts to some that work in the browser 2022-12-05 17:57:11 +01:00
Emil Ernerfeldt a0b3f1126b
Add helpers for zooming an app using Ctrl+Plus and Ctrl+Minus (#2239)
* Using tracing-subscriber in hello_world example

* Add Key::Plus/Minus/Equals

* Warn if failing to guess OS from User-Agent

* Remove jitter when using Context::set_pixels_per_point

* Demo app: zoom in/out using ⌘+ and ⌘-

* Demo app: make backend panel GUI scale slider better

* Optimize debug builds a bit

* typo

* Update changelog

* Add helper module `egui::gui_zoom` for zooming an app

* Better names, and update changelog

* Combine Plus and Equals keys

* Last fix

* Fix docs
2022-11-05 11:18:13 +01:00
Emil Ernerfeldt 02b9d2d082
Keyboard shortcut helpers (#2202)
* eframe web: Add WebInfo::user_agent

* Deprecate `Modifier::ALT_SHIFT`

* Add code for formatting Modifiers and Key

* Add type KeyboardShortcut

* Code cleanup

* Add Context::os/set_os to query/set what OS egui believes it is on

* Add Fonts::has_glyph(s)

* Add helper function for formatting keyboard shortcuts

* Faster code

* Add way to set a shortcut text on menu buttons

* Cleanup

* format_keyboard_shortcut -> format_shortcut

* Add TODO about supporting more keyboard sumbols

* Modifiers::plus

* Use the new keyboard shortcuts in emark editor demo

* Explain why ALT+SHIFT is a bad modifier combo

* Fix doctest
2022-10-31 12:58:26 +01:00
Emil Ernerfeldt 29fa63317e
Fix text sizes being too small (#2069)
Closes https://github.com/emilk/egui/issues/2068

Before this PR, the default font, Ubuntu-Light, was ~11% smaller
than it should have been, and the default monospace font, Hack,
was ~14% smaller. This means that setting the font size `12` in egui
would yield smaller text than using that font size in any other app.
Ooops!

The change is that this PR now takes into account the ttf properties
`units_per_em` and `height_unscaled`.

If your egui application has specified you own font sizes or text styles
you will see the text in your application grow
larger, unless you go in and compensate by dividing all font sizes by
~1.21 for Ubuntu-Light/Proportional and ~1.16 for Hack/Monospace,
and with something else if you are using a custom font!
This effects any use of `FontId`, `RichText::size`, etc.

This PR changes the default `Style::text_styles` to compensate,
so the default egui style should look the same before and after this PR.
2022-09-21 21:31:08 +02:00
Emil Ernerfeldt 041f2e64ba
Move all crates into a `crates` directory (#1940) 2022-08-20 10:41:49 +02:00