UI borders and outlines clipping fix

[ickshonpe]

Objective

fixes #15502

Clipped borders and outlines aren't drawn correctly.

Borders aren't clipped

Spawn two nodes with the same dimensions and border thickness, but clip on of the nodes so that only its top left quarter is visible:

You can see that instead of clipping the border, instead the border is scaled to fit inside of the unclipped section.

use bevy::color::palettes::css::BLUE;
use bevy::prelude::*;
use bevy::winit::WinitSettings;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .insert_resource(WinitSettings::desktop_app())
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands
        .spawn(Node {
            width: Val::Percent(100.),
            height: Val::Percent(100.),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..Default::default()
        })
        .with_children(|commands| {
            commands
                .spawn(Node {
                    column_gap: Val::Px(10.),
                    ..Default::default()
                })
                .with_children(|commands| {
                    commands
                        .spawn(Node {
                            width: Val::Px(100.),
                            height: Val::Px(100.),
                            overflow: Overflow::clip(),
                            ..Default::default()
                        })
                        .with_child((
                            Node {
                                position_type: PositionType::Absolute,
                                width: Val::Px(100.),
                                height: Val::Px(100.),
                                border: UiRect::all(Val::Px(10.)),
                                ..Default::default()
                            },
                            BackgroundColor(Color::WHITE),
                            BorderColor(BLUE.into()),
                        ));

                    commands
                        .spawn(Node {
                            width: Val::Px(50.),
                            height: Val::Px(50.),
                            overflow: Overflow::clip(),
                            ..Default::default()
                        })
                        .with_child((
                            Node {
                                position_type: PositionType::Absolute,
                                width: Val::Px(100.),
                                height: Val::Px(100.),
                                border: UiRect::all(Val::Px(10.)),
                                ..Default::default()
                            },
                            BackgroundColor(Color::WHITE),
                            BorderColor(BLUE.into()),
                        ));
                });
        });
}

You can also see this problem in the overflow example. If you hover over any of the clipped nodes you'll see that the outline only wraps the visible section of the node

Outlines are clipped incorrectly

A UI nodes Outline's are drawn outside of its bounds, so applying the local clipping rect to the outline doesn't make any sense.
Instead an Outline should be clipped using its parent's clipping rect.

Solution

• Pass the point value into the vertex shader instead of calculating it in the shader.
• In extract_uinode_borders use the parents clipping rect when clipping outlines.

The extra parameter isn't a great solution I think, but I wanted to fix borders for the 0.15 release and this is the most minimal approach I could think of without replacing the whole shader and prepare function.

Showcase

[ickshonpe]

I'll update the docs for the new paramater in a few hours, got some errands I need to run.