mirror of
https://github.com/emilk/egui.git
synced 2026-06-26 14:49:06 -04:00
<!-- 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! --> * Closes N/A * [x] I have followed the instructions in the PR template This PR adds visual support for IME composition, including the cursor and conversion segment. These visuals works (mostly) well on native platforms (`egui-winit`). On the web (`eframe/web`), support is limited by browser capabilities: Chromium works well, Firefox shows partial improvement, and Safari remains subpar. > [!NOTE] > > For `eframe` on Windows, this feature is currently gated behind the `windows_new_ime_composition_visuals` feature flag. ## Details We extend `egui::ImeEvent::Preedit(String)` to `egui::ImeEvent::Preedit { text: String, active_range_chars: Option<std::ops::Range<usize>> }`. The new `active_range_chars` field enables rendering of: - the cursor (when the range is empty), and - the conversion segment (when the range is non-empty) in IME composition. In `egui-winit`, we now use the range provided by `winit::event::Ime::Preedit` instead of ignoring it. In `eframe/web`, we derive the range from `selectionStart` and `selectionEnd` on the text agent. This mapping is fully accurate only in Chromium, but represents the best available approach for now. ## Demonstrations ### Chinese IMEs (Shuangpin) We can see where the cursor is now. | What | With this PR | Without this PR | |-|-|-| | macOS builtin |<video src=https://github.com/user-attachments/assets/487c7e7c-ef6d-4a86-8dbc-8c71871b4470 />|<video src=https://github.com/user-attachments/assets/49bd5a60-4b90-4e4a-99e0-cd01d3f7030c />| | macOS builtin (light)|<video src=https://github.com/user-attachments/assets/e84546f6-947b-4cea-a87e-fda903f49164 />|——| | Windows builtin |<video src=https://github.com/user-attachments/assets/fd331884-1f0c-4822-a99e-8140aed54815 />|——| | Wayland iBus Intelligent Pinyin |<video src=https://github.com/user-attachments/assets/b6796c75-1c4e-45e5-b43a-5d8dea320485 />|——| | Chromium (Chrome) macOS | Identical to `macOS builtin`. |——| | Safari macOS | We can now differentiate between IME composition and text selection, but we still can't tell where the cursor is. |——| | Firefox (Zen) macOS | Identical to `macOS builtin`. |——| ### Japanese IMEs We can see where the conversion segment is now. | What | With this PR | Without this PR | |-|-|-| | macOS builtin |<video src=https://github.com/user-attachments/assets/f2994cd4-a966-4ff0-9590-d263c202ec76 />|<video src=https://github.com/user-attachments/assets/7cf5ff35-003d-4f60-8fbf-15c725c3ecb9 />| | macOS builtin (light)|<video src=https://github.com/user-attachments/assets/6f562bdd-12fc-4486-b37b-8fcf11643295 />|——| | Windows builtin |<video src=https://github.com/user-attachments/assets/f0905659-5335-4034-abda-c25cf8f2fd57 />|——| | Wayland iBus Anthy |<video src=https://github.com/user-attachments/assets/94cd3a24-3158-4d79-ae02-d9b30fdfa738 />|——| | Chromium (Chrome) macOS | Identical to `macOS builtin`. |——| | Safari macOS | We can now differentiate between IME composition and text selection, but we still can't tell where the conversion segment is. |——| | Firefox (Zen) macOS | (Limited improvement.) <video src=https://github.com/user-attachments/assets/3daf9b63-6e75-467b-8515-31c2a44adf61 /> |——| ### Korean IMEs We can clearly tell whether we are in composition (in contrast to selection) now. | What | With this PR | Without this PR | |-|-|-| |macOS builtin|<video src=https://github.com/user-attachments/assets/73ca28c7-22a0-493f-8f4d-c6e59a2dec54 />|<video src=https://github.com/user-attachments/assets/f582de7d-7ec0-48fe-910f-0139ef1620d3 />| |macOS builtin (light)|<video src=https://github.com/user-attachments/assets/269f03bd-6f95-498b-9fb1-1adcb043c738 />|——| | Windows builtin| (With a workaround for [this `winit` bug](https://github.com/emilk/egui/pull/8083#issuecomment-4206742668) applied.) <video src=https://github.com/user-attachments/assets/1e82583d-0c41-4f1c-98cf-0606bee5af05 />|——| | Wayland iBus Hangul |<video src=https://github.com/user-attachments/assets/8c9a0de1-9027-4b37-93a3-e9da0251d176 />|——| | Chromium (Chrome) macOS | Identical to `macOS builtin`. |——| | Safari macOS | Identical to `Windows builtin`. |——| | Firefox (Zen) macOS | Identical to `macOS builtin`. (ignoring the fact that the composition breaks when typing the second Hangul. (This bug predates this PR.)) |——| --------- Co-authored-by: lucasmerlin <hi@lucasmerlin.me>
265 lines
7.1 KiB
Rust
265 lines
7.1 KiB
Rust
#![cfg(feature = "snapshot")]
|
|
#![cfg(feature = "wgpu")]
|
|
|
|
use egui::{Modifiers, ScrollArea, Vec2, include_image};
|
|
use egui_kittest::{Harness, SnapshotResults};
|
|
use kittest::Queryable as _;
|
|
|
|
#[test]
|
|
fn test_shrink() {
|
|
let mut harness = Harness::new_ui(|ui| {
|
|
ui.label("Hello, world!");
|
|
ui.separator();
|
|
ui.label("This is a test");
|
|
});
|
|
|
|
harness.fit_contents();
|
|
|
|
#[cfg(all(feature = "snapshot", feature = "wgpu"))]
|
|
harness.snapshot("test_shrink");
|
|
}
|
|
|
|
#[test]
|
|
fn test_tooltip() {
|
|
let mut harness = Harness::new_ui(|ui| {
|
|
ui.label("Hello, world!");
|
|
ui.separator();
|
|
ui.label("This is a test")
|
|
.on_hover_text("This\nis\na\nvery\ntall\ntooltip!");
|
|
});
|
|
|
|
harness.fit_contents();
|
|
|
|
#[cfg(all(feature = "snapshot", feature = "wgpu"))]
|
|
harness.snapshot("test_tooltip_hidden");
|
|
|
|
harness.get_by_label("This is a test").hover();
|
|
harness.run_ok();
|
|
harness.fit_contents();
|
|
|
|
#[cfg(all(feature = "snapshot", feature = "wgpu"))]
|
|
harness.snapshot("test_tooltip_shown");
|
|
}
|
|
|
|
#[test]
|
|
fn test_modifiers() {
|
|
#[derive(Default)]
|
|
struct State {
|
|
cmd_clicked: bool,
|
|
cmd_z_pressed: bool,
|
|
cmd_y_pressed: bool,
|
|
}
|
|
let mut harness = Harness::new_ui_state(
|
|
|ui, state| {
|
|
if ui.button("Click me").clicked() && ui.input(|i| i.modifiers.command) {
|
|
state.cmd_clicked = true;
|
|
}
|
|
if ui.input(|i| i.modifiers.command && i.key_pressed(egui::Key::Z)) {
|
|
state.cmd_z_pressed = true;
|
|
}
|
|
if ui.input(|i| i.modifiers.command && i.key_pressed(egui::Key::Y)) {
|
|
state.cmd_y_pressed = true;
|
|
}
|
|
},
|
|
State::default(),
|
|
);
|
|
|
|
harness
|
|
.get_by_label("Click me")
|
|
.click_modifiers(Modifiers::COMMAND);
|
|
harness.run();
|
|
|
|
harness.key_press_modifiers(Modifiers::COMMAND, egui::Key::Z);
|
|
harness.run();
|
|
|
|
harness.key_combination_modifiers(Modifiers::COMMAND, &[egui::Key::Y]);
|
|
harness.run();
|
|
|
|
let state = harness.state();
|
|
assert!(state.cmd_clicked, "The button wasn't command-clicked");
|
|
assert!(state.cmd_z_pressed, "Cmd+Z wasn't pressed");
|
|
assert!(state.cmd_y_pressed, "Cmd+Y wasn't pressed");
|
|
}
|
|
|
|
#[test]
|
|
fn should_wait_for_images() {
|
|
let mut harness = Harness::builder()
|
|
.with_size(Vec2::new(60.0, 120.0))
|
|
.build_ui(|ui| {
|
|
egui_extras::install_image_loaders(ui.ctx());
|
|
let size = Vec2::splat(30.0);
|
|
ui.label("Url:");
|
|
ui.add_sized(
|
|
size,
|
|
egui::Image::new(
|
|
"https://raw.githubusercontent.com\
|
|
/emilk/egui/refs/heads/main/crates/eframe/data/icon.png",
|
|
),
|
|
);
|
|
|
|
ui.label("Include:");
|
|
ui.add_sized(
|
|
size,
|
|
egui::Image::new(include_image!("../../eframe/data/icon.png")),
|
|
);
|
|
});
|
|
|
|
harness.snapshot("should_wait_for_images");
|
|
}
|
|
|
|
fn test_scroll_harness() -> Harness<'static, bool> {
|
|
Harness::builder()
|
|
.with_size(Vec2::new(100.0, 200.0))
|
|
.build_ui_state(
|
|
|ui, state| {
|
|
ScrollArea::vertical().show(ui, |ui| {
|
|
for i in 0..20 {
|
|
ui.label(format!("Item {i}"));
|
|
}
|
|
if ui.button("Hidden Button").clicked() {
|
|
*state = true;
|
|
}
|
|
});
|
|
},
|
|
false,
|
|
)
|
|
}
|
|
|
|
#[cfg(feature = "snapshot")]
|
|
#[test]
|
|
fn test_scroll_to_me() {
|
|
let mut harness = test_scroll_harness();
|
|
let mut results = SnapshotResults::new();
|
|
|
|
results.add(harness.try_snapshot("test_scroll_initial"));
|
|
|
|
harness.get_by_label("Hidden Button").scroll_to_me();
|
|
|
|
harness.run();
|
|
results.add(harness.try_snapshot("test_scroll_scrolled"));
|
|
|
|
harness.get_by_label("Hidden Button").click();
|
|
harness.run();
|
|
|
|
assert!(
|
|
harness.state(),
|
|
"The button was not clicked after scrolling."
|
|
);
|
|
}
|
|
|
|
#[test]
|
|
fn test_scroll_down() {
|
|
let mut harness = test_scroll_harness();
|
|
|
|
let button = harness.get_by_label("Hidden Button");
|
|
button.scroll_down();
|
|
button.scroll_down();
|
|
harness.run();
|
|
|
|
harness.get_by_label("Hidden Button").click();
|
|
harness.run();
|
|
|
|
assert!(
|
|
harness.state(),
|
|
"The button was not clicked after scrolling down. (Probably not scrolled enough / at all)"
|
|
);
|
|
}
|
|
|
|
#[test]
|
|
fn test_masking() {
|
|
let mut harness = Harness::new_ui(|ui| {
|
|
let timestamp = std::time::SystemTime::now()
|
|
.duration_since(std::time::UNIX_EPOCH)
|
|
.unwrap()
|
|
.as_millis();
|
|
|
|
ui.label("I should not be masked.");
|
|
ui.label(format!("Timestamp: {timestamp}"));
|
|
ui.label("I should also not be masked.");
|
|
});
|
|
|
|
harness.fit_contents();
|
|
|
|
let to_be_masked = harness.get_by_label_contains("Timestamp: ");
|
|
harness.mask(to_be_masked.rect());
|
|
|
|
harness.snapshot("test_masking");
|
|
}
|
|
|
|
#[test]
|
|
fn test_remove_cursor() {
|
|
let hovered = false;
|
|
let mut harness = Harness::new_ui_state(
|
|
|ui, state| {
|
|
let response = ui.button("Click me");
|
|
*state = response.hovered();
|
|
},
|
|
hovered,
|
|
);
|
|
|
|
harness.fit_contents();
|
|
|
|
harness.get_by_label("Click me").click();
|
|
harness.run();
|
|
|
|
assert!(harness.state(), "The button should be hovered");
|
|
let hovered_button_snapshot = harness.render().expect("Failed to render");
|
|
|
|
harness.remove_cursor();
|
|
harness.run();
|
|
assert!(
|
|
!harness.state(),
|
|
"The button should not be hovered after removing cursor"
|
|
);
|
|
|
|
let non_hovered_button_snapshot = harness.render().expect("Failed to render");
|
|
assert_ne!(
|
|
hovered_button_snapshot, non_hovered_button_snapshot,
|
|
"The button appearance should change"
|
|
);
|
|
}
|
|
|
|
#[test]
|
|
fn test_ime_composition_visuals() {
|
|
let mut harness = Harness::new_ui_state(
|
|
|ui, state| {
|
|
egui::TextEdit::multiline(state)
|
|
.desired_width(120.0)
|
|
.desired_rows(5)
|
|
.show(ui);
|
|
},
|
|
"Hello. Bye.".to_owned(),
|
|
);
|
|
|
|
harness.fit_contents();
|
|
|
|
let text_edit = harness.get_by_role(egui::accesskit::Role::MultilineTextInput);
|
|
text_edit.focus();
|
|
harness.run();
|
|
|
|
harness.key_press(egui::Key::Home);
|
|
for _ in 0.."Hello. ".len() {
|
|
harness.key_press(egui::Key::ArrowRight);
|
|
}
|
|
|
|
let text = "Have you ever seen an IME composing English text? You now see it. ";
|
|
let text_index_1 = "Have you ever ".chars().count();
|
|
let text_index_2 = "Have you ever seen an IME composing English text? "
|
|
.chars()
|
|
.count();
|
|
|
|
harness.event(egui::Event::Ime(egui::ImeEvent::Preedit {
|
|
text: text.to_owned(),
|
|
active_range_chars: Some(text_index_1..text_index_2),
|
|
}));
|
|
harness.run();
|
|
harness.snapshot("test_ime_composition_visuals_segment");
|
|
|
|
harness.event(egui::Event::Ime(egui::ImeEvent::Preedit {
|
|
text: text.to_owned(),
|
|
active_range_chars: Some(text_index_2..text_index_2),
|
|
}));
|
|
harness.run();
|
|
harness.snapshot("test_ime_composition_visuals_cursor");
|
|
}
|