text input selection radius (#24307)

# Objective

Allow rounded corners for text input selection regions.

Fixes #23952

## Solution

* Added a `selection_radius` field to `TextCursorStyle`, defaults to
`0.`.
* In `extract_text_cursor` set a corner radius for each selection rect,
after clamping for short and inner corners.

---

Left rounded inner corners for a follow up, as they are significantly
more complicated to implement.

## Testing

Added an option to set the selection radius to the
`multiline_text_input` example:

```
cargo run --example multiline_text_input --features="system_clipboard"
```

<img width="400" alt="image"
src="https://github.com/user-attachments/assets/a10bb552-ac03-4e06-a287-53c57e5c2f45"
/>

## Showcase

<img width="400" alt="rounded"
src="https://github.com/user-attachments/assets/79d59c66-7fb0-4ad4-8a17-308c755c1f23"
/>
<img width="400" alt="r2"
src="https://github.com/user-attachments/assets/a3dfd8a6-f85f-4534-ba61-4a8c74e9793d"
/>
<img width="400" alt="r3"
src="https://github.com/user-attachments/assets/78e4d863-198e-4ee0-ad33-22e7cde7016a"
/>

Author: ickshonpe

crates/bevy_text/src/cursor.rs

@@ -23,6 +23,10 @@ pub struct TextCursorStyle {
     pub unfocused_selection_color: Color,
     /// If some, overrides the color of selected text
     pub selected_text_color: Option<Color>,
+    /// Corner radius of selection highlight rectangles, normalized relative to the selection height.
+    ///
+    /// Values are clamped between `0.0` and `0.5`.
+    pub selection_radius: f32,
 }
 
 impl Default for TextCursorStyle {
@@ -32,6 +36,7 @@ impl Default for TextCursorStyle {
             selection_color: Color::from(SKY_300),
             unfocused_selection_color: Color::from(SKY_400),
             selected_text_color: None,
+            selection_radius: 0.,
         }
     }
 }

crates/bevy_ui_render/src/text.rs

@@ -92,8 +92,50 @@ pub fn extract_text_cursor(
 
         if !text_layout_info.selection_rects.is_empty() && !sc.is_fully_transparent() {
             let selection_color = sc.to_linear();
+            let selection_radius = cursor_style.selection_radius.clamp(0.0, 0.5);
+
+            for (prev, selection, next) in
+                text_layout_info
+                    .selection_rects
+                    .iter()
+                    .enumerate()
+                    .map(|(i, current)| {
+                        (
+                            i.checked_sub(1)
+                                .map(|i| text_layout_info.selection_rects[i]),
+                            current,
+                            text_layout_info.selection_rects.get(i + 1),
+                        )
+                    })
+            {
+                let radius = selection.height() * selection_radius;
+                let mut border_radius = ResolvedBorderRadius {
+                    top_left: radius,
+                    top_right: radius,
+                    bottom_right: radius,
+                    bottom_left: radius,
+                };
+
+                if let Some(prev) = prev {
+                    if selection.min.x <= prev.max.x {
+                        border_radius.top_left = (prev.min.x - selection.min.x).clamp(0., radius);
+                    }
+                    if prev.min.x <= selection.max.x {
+                        border_radius.top_right = (selection.max.x - prev.max.x).clamp(0., radius);
+                    }
+                }
+
+                if let Some(next) = next {
+                    if selection.min.x <= next.max.x {
+                        border_radius.bottom_left =
+                            (next.min.x - selection.min.x).clamp(0., radius);
+                    }
+                    if next.min.x <= selection.max.x {
+                        border_radius.bottom_right =
+                            (selection.max.x - next.max.x).clamp(0., radius);
+                    }
+                }
 
-            for selection in text_layout_info.selection_rects.iter() {
                 extracted_uinodes.uinodes.push(ExtractedUiNode {
                     render_entity: commands.spawn(TemporaryRenderEntity).id(),
                     z_order: stack_index.0 as f32 + stack_z_offsets::TEXT_SELECTION,
@@ -111,7 +153,7 @@ pub fn extract_text_cursor(
                         flip_x: false,
                         flip_y: false,
                         border: BorderRect::default(),
-                        border_radius: ResolvedBorderRadius::default(),
+                        border_radius,
                         node_type: NodeType::Rect,
                     },
                     main_entity: entity.into(),

examples/ui/text/multiline_text_input.rs

@@ -24,6 +24,9 @@ struct VisibleLinesInput;
 #[derive(Component)]
 struct FontSizeInput;
 
+#[derive(Component)]
+struct SelectionRadiusInput;
+
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
@@ -264,6 +267,86 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     FontSize::Px(font_size.clamp(5., 50.));
                             },
                         );
+
+                    parent
+                        .spawn((
+                            Node {
+                                flex_direction: FlexDirection::Row,
+                                column_gap: px(10.),
+                                ..default()
+                            },
+                            children![
+                                (
+                                    Text::new("corner radius:"),
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraMono-Medium.ttf").into(),
+                                        font_size: FontSize::Px(30.),
+                                        ..default()
+                                    },
+                                ),
+                                (
+                                    Node {
+                                        width: px(100.),
+                                        border: px(2.).all(),
+                                        ..default()
+                                    },
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraMono-Medium.ttf").into(),
+                                        font_size: FontSize::Px(30.),
+                                        ..default()
+                                    },
+                                    TextLayout {
+                                        justify: Justify::End,
+                                        ..default()
+                                    },
+                                    BackgroundColor(DARK_SLATE_GRAY.into()),
+                                    BorderColor::all(SLATE_300),
+                                    EditableText::new("0"),
+                                    EditableTextFilter::new(|c| c.is_ascii_digit() || c == '.'),
+                                    TextCursorStyle {
+                                        color: Color::WHITE,
+                                        selected_text_color: Some(Color::BLACK),
+                                        ..default()
+                                    },
+                                    SelectionRadiusInput,
+                                    TabIndex(2),
+                                )
+                            ],
+                        ))
+                        .observe(
+                            |on: On<FocusedInput<KeyboardInput>>,
+                             radius_input_query: Query<
+                                &EditableText,
+                                With<SelectionRadiusInput>,
+                            >,
+                             mut cursor_style: Single<
+                                &mut TextCursorStyle,
+                                With<MultilineInput>,
+                            >| {
+                                if !(on.input.state.is_pressed()
+                                    && on.input.logical_key == Key::Enter)
+                                {
+                                    return;
+                                }
+
+                                let Ok(input) = radius_input_query.get(on.original_event_target())
+                                else {
+                                    return;
+                                };
+
+                                let mut output = String::new();
+                                output.reserve(input.value().into_iter().map(str::len).sum());
+                                for sub_str in input.value() {
+                                    output.push_str(sub_str);
+                                }
+
+                                let Ok(radius) = output.parse::<f32>() else {
+                                    return;
+                                };
+
+                                cursor_style.selection_radius = radius.clamp(0., 0.5);
+                            },
+                        );
                 });
         });
 }