Replace Handle<M: UiMaterial> component with UiMaterialHandle wra…

…pper (#15740)

# Objective

- Closes #15720

## Solution

Wrap the handle in a new wrapper component: `UiMaterialHandle`
It's not possible to match the naming convention of `MeshMaterial3d/2d`
here with the trait already being called `UiMaterial`

Should we consider renaming to `Material3d/2dHandle` and `Mesh3d/2d` to
`Mesh3d/2dHandle`?

- This shouldn't have any merge conflicts with #15591

## Testing

Tested the `ui_material` example

## Migration Guide

Let's defer the migration guide to the required component port. I just
want to yeet the `Component` impl on `Handle` in the meantime :)

crates/bevy_ui/src/lib.rs

@@ -50,7 +50,7 @@ pub mod prelude {
  pub use {
  crate::{
  geometry::*, node_bundles::*, ui_material::*, ui_node::*, widget::Button,
- widget::Label, Interaction, UiMaterialPlugin, UiScale,
+ widget::Label, Interaction, UiMaterialHandle, UiMaterialPlugin, UiScale,
  },
  // `bevy_sprite` re-exports for texture slicing
  bevy_sprite::{BorderRect, ImageScaleMode, SliceScaleMode, TextureSlicer},

crates/bevy_ui/src/node_bundles.rs

@@ -3,9 +3,8 @@
 use crate::{
  widget::{Button, UiImageSize},
  BackgroundColor, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction, Node,
- ScrollPosition, Style, UiImage, UiMaterial, ZIndex,
+ ScrollPosition, Style, UiImage, UiMaterial, UiMaterialHandle, ZIndex,
 };
-use bevy_asset::Handle;
 use bevy_ecs::bundle::Bundle;
 use bevy_render::view::{InheritedVisibility, ViewVisibility, Visibility};
 use bevy_transform::prelude::{GlobalTransform, Transform};
@@ -294,7 +293,7 @@ pub struct MaterialNodeBundle<M: UiMaterial> {
  /// In some cases these styles also affect how the node drawn/painted.
  pub style: Style,
  /// The [`UiMaterial`] used to render the node.
- pub material: Handle<M>,
+ pub material: UiMaterialHandle<M>,
  /// Whether this node should block interaction with lower nodes
  pub focus_policy: FocusPolicy,
  /// The transform of the node

crates/bevy_ui/src/render/ui_material_pipeline.rs

@@ -60,7 +60,7 @@ where
  Shader::from_wgsl
  );
  app.init_asset::<M>().add_plugins((
- ExtractComponentPlugin::<Handle<M>>::extract_visible(),
+ ExtractComponentPlugin::<UiMaterialHandle<M>>::extract_visible(),
  RenderAssetPlugin::<PreparedUiMaterial<M>>::default(),
  ));
 
@@ -364,7 +364,7 @@ pub fn extract_ui_material_nodes<M: UiMaterial>(
  (
  &Node,
  &GlobalTransform,
- &Handle<M>,
+ &UiMaterialHandle<M>,
  &ViewVisibility,
  Option<&CalculatedClip>,
  Option<&TargetCamera>,

crates/bevy_ui/src/ui_material.rs

@@ -1,7 +1,13 @@
 use core::hash::Hash;
 
-use bevy_asset::Asset;
-use bevy_render::render_resource::{AsBindGroup, RenderPipelineDescriptor, ShaderRef};
+use bevy_asset::{Asset, AssetId, Handle};
+use bevy_derive::{Deref, DerefMut};
+use bevy_ecs::{component::Component, reflect::ReflectComponent};
+use bevy_reflect::{prelude::ReflectDefault, Reflect};
+use bevy_render::{
+ extract_component::ExtractComponent,
+ render_resource::{AsBindGroup, RenderPipelineDescriptor, ShaderRef},
+};
 
 /// Materials are used alongside [`UiMaterialPlugin`](crate::UiMaterialPlugin) and [`MaterialNodeBundle`](crate::prelude::MaterialNodeBundle)
 /// to spawn entities that are rendered with a specific [`UiMaterial`] type. They serve as an easy to use high level
@@ -56,10 +62,10 @@ use bevy_render::render_resource::{AsBindGroup, RenderPipelineDescriptor, Shader
 /// width: Val::Percent(100.0),
 /// ..Default::default()
 /// },
-/// material: materials.add(CustomMaterial {
+/// material: UiMaterialHandle(materials.add(CustomMaterial {
 /// color: LinearRgba::RED,
 /// color_texture: asset_server.load("some_image.png"),
-/// }),
+/// })),
 /// ..Default::default()
 /// });
 /// }
@@ -145,3 +151,31 @@ where
  self.bind_group_data.hash(state);
  }
 }
+
+#[derive(Component, Clone, Debug, Deref, DerefMut, Reflect, PartialEq, Eq, ExtractComponent)]
+#[reflect(Component, Default)]
+pub struct UiMaterialHandle<M: UiMaterial>(pub Handle<M>);
+
+impl<M: UiMaterial> Default for UiMaterialHandle<M> {
+ fn default() -> Self {
+ Self(Handle::default())
+ }
+}
+
+impl<M: UiMaterial> From<Handle<M>> for UiMaterialHandle<M> {
+ fn from(handle: Handle<M>) -> Self {
+ Self(handle)
+ }
+}
+
+impl<M: UiMaterial> From<UiMaterialHandle<M>> for AssetId<M> {
+ fn from(material: UiMaterialHandle<M>) -> Self {
+ material.id()
+ }
+}
+
+impl<M: UiMaterial> From<&UiMaterialHandle<M>> for AssetId<M> {
+ fn from(material: &UiMaterialHandle<M>) -> Self {
+ material.id()
+ }
+}

examples/ui/ui_material.rs

@@ -43,12 +43,12 @@ fn setup(
  border: UiRect::all(Val::Px(10.)),
  ..default()
  },
- material: ui_materials.add(CustomUiMaterial {
+ material: UiMaterialHandle(ui_materials.add(CustomUiMaterial {
  color: LinearRgba::WHITE.to_f32_array().into(),
  slider: 0.5,
  color_texture: asset_server.load("branding/banner.png"),
  border_color: LinearRgba::WHITE.to_f32_array().into(),
- }),
+ })),
  ..default()
  });
  });
@@ -82,7 +82,7 @@ impl UiMaterial for CustomUiMaterial {
 // Also updates the color of the image to a rainbow color
 fn animate(
  mut materials: ResMut<Assets<CustomUiMaterial>>,
- q: Query<&Handle<CustomUiMaterial>>,
+ q: Query<&UiMaterialHandle<CustomUiMaterial>>,
  time: Res<Time>,
 ) {
  let duration = 2.0;