Rename UiColor to BackgroundColor (#6087)

# Objective

Fixes #6078. The `UiColor` component is unhelpfully named: it is unclear, ambiguous with border color and 

## Solution

Rename the `UiColor` component (and associated fields) to `BackgroundColor` / `background_colorl`.

## Migration Guide

`UiColor` has been renamed to `BackgroundColor`. This change affects `NodeBundle`, `ButtonBundle` and `ImageBundle`. In addition, the corresponding field on `ExtractedUiNode` has been renamed to `background_color` for consistency.
This commit is contained in:
Alice Cecile 2022-09-25 00:39:17 +00:00
parent e7cd9c1b86
commit 481eec2c92
14 changed files with 78 additions and 68 deletions

View file

@ -2,7 +2,7 @@
use crate::{
widget::{Button, ImageMode},
CalculatedSize, FocusPolicy, Interaction, Node, Style, UiColor, UiImage,
BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage,
};
use bevy_ecs::{
bundle::Bundle,
@ -23,8 +23,8 @@ pub struct NodeBundle {
pub node: Node,
/// Describes the style including flexbox settings
pub style: Style,
/// Describes the color of the node
pub color: UiColor,
/// The background color, which serves as a "fill" for this node
pub background_color: BackgroundColor,
/// Describes the image of the node
pub image: UiImage,
/// Whether this node should block interaction with lower nodes
@ -50,8 +50,10 @@ pub struct ImageBundle {
pub image_mode: ImageMode,
/// The calculated size based on the given image
pub calculated_size: CalculatedSize,
/// The color of the node
pub color: UiColor,
/// The background color, which serves as a "fill" for this node
///
/// When combined with `UiImage`, tints the provided image.
pub background_color: BackgroundColor,
/// The image of the node
pub image: UiImage,
/// Whether this node should block interaction with lower nodes
@ -152,8 +154,10 @@ pub struct ButtonBundle {
pub interaction: Interaction,
/// Whether this node should block interaction with lower nodes
pub focus_policy: FocusPolicy,
/// The color of the node
pub color: UiColor,
/// The background color, which serves as a "fill" for this node
///
/// When combined with `UiImage`, tints the provided image.
pub background_color: BackgroundColor,
/// The image of the node
pub image: UiImage,
/// The transform of the node
@ -174,7 +178,7 @@ impl Default for ButtonBundle {
focus_policy: Default::default(),
node: Default::default(),
style: Default::default(),
color: Default::default(),
background_color: Default::default(),
image: Default::default(),
transform: Default::default(),
global_transform: Default::default(),

View file

@ -90,7 +90,7 @@ impl Plugin for UiPlugin {
.register_type::<Size>()
.register_type::<UiRect>()
.register_type::<Style>()
.register_type::<UiColor>()
.register_type::<BackgroundColor>()
.register_type::<UiImage>()
.register_type::<Val>()
.register_type::<widget::Button>()

View file

@ -5,7 +5,7 @@ use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
pub use pipeline::*;
pub use render_pass::*;
use crate::{prelude::UiCameraConfig, CalculatedClip, Node, UiColor, UiImage};
use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage};
use bevy_app::prelude::*;
use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
use bevy_ecs::prelude::*;
@ -161,7 +161,7 @@ fn get_ui_graph(render_app: &mut App) -> RenderGraph {
pub struct ExtractedUiNode {
pub transform: Mat4,
pub color: Color,
pub background_color: Color,
pub rect: Rect,
pub image: Handle<Image>,
pub atlas_size: Option<Vec2>,
@ -180,7 +180,7 @@ pub fn extract_uinodes(
Query<(
&Node,
&GlobalTransform,
&UiColor,
&BackgroundColor,
&UiImage,
&ComputedVisibility,
Option<&CalculatedClip>,
@ -203,7 +203,7 @@ pub fn extract_uinodes(
}
extracted_uinodes.uinodes.push(ExtractedUiNode {
transform: transform.compute_matrix(),
color: color.0,
background_color: color.0,
rect: Rect {
min: Vec2::ZERO,
max: uinode.size,
@ -328,7 +328,7 @@ pub fn extract_text_uinodes(
extracted_uinodes.uinodes.push(ExtractedUiNode {
transform: extracted_transform,
color,
background_color: color,
rect,
image: texture,
atlas_size,
@ -490,7 +490,7 @@ pub fn prepare_uinodes(
ui_meta.vertices.push(UiVertex {
position: positions_clipped[i].into(),
uv: uvs[i].into(),
color: extracted_uinode.color.as_linear_rgba_f32(),
color: extracted_uinode.background_color.as_linear_rgba_f32(),
});
}

View file

@ -375,18 +375,21 @@ pub struct CalculatedSize {
pub size: Size,
}
/// The color of the node
/// The background color of the node
///
/// This serves as the "fill" color.
/// When combined with [`UiImage`], tints the provided texture.
#[derive(Component, Default, Copy, Clone, Debug, Reflect)]
#[reflect(Component, Default)]
pub struct UiColor(pub Color);
pub struct BackgroundColor(pub Color);
impl From<Color> for UiColor {
impl From<Color> for BackgroundColor {
fn from(color: Color) -> Self {
Self(color)
}
}
/// The image of the node
/// The 2D texture displayed for this UI node
#[derive(Component, Clone, Debug, Reflect, Deref, DerefMut)]
#[reflect(Component, Default)]
pub struct UiImage(pub Handle<Image>);

View file

@ -52,7 +52,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center,
..default()
},
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
})
.with_children(|parent| {
@ -72,7 +72,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
fn menu(
mut state: ResMut<State<AppState>>,
mut interaction_query: Query<
(&Interaction, &mut UiColor),
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {

View file

@ -379,7 +379,7 @@ fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: R
align_items: AlignItems::Center,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
})
.with_children(|parent| {

View file

@ -161,7 +161,7 @@ mod game {
align_items: AlignItems::Center,
..default()
},
color: Color::BLACK.into(),
background_color: Color::BLACK.into(),
..default()
},
OnGameScreen,
@ -349,7 +349,7 @@ mod menu {
// This system handles changing all buttons color based on mouse interaction
fn button_system(
mut interaction_query: Query<
(&Interaction, &mut UiColor, Option<&SelectedOption>),
(&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
(Changed<Interaction>, With<Button>),
>,
) {
@ -367,7 +367,7 @@ mod menu {
// the button as the one currently selected
fn setting_button<T: Resource + Component + PartialEq + Copy>(
interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
mut selected_query: Query<(Entity, &mut UiColor), With<SelectedOption>>,
mut selected_query: Query<(Entity, &mut BackgroundColor), With<SelectedOption>>,
mut commands: Commands,
mut setting: ResMut<T>,
) {
@ -424,7 +424,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
},
OnMainMenuScreen,
@ -454,7 +454,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style.clone(),
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
MenuButtonAction::Play,
@ -475,7 +475,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style.clone(),
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
MenuButtonAction::Settings,
@ -496,7 +496,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style,
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
MenuButtonAction::Quit,
@ -537,7 +537,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
},
OnSettingsMenuScreen,
@ -552,7 +552,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style.clone(),
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
action,
@ -591,7 +591,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
},
OnDisplaySettingsMenuScreen,
@ -605,7 +605,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
})
.with_children(|parent| {
@ -625,7 +625,7 @@ mod menu {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
..button_style.clone()
},
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
});
entity.insert(quality_setting).with_children(|parent| {
@ -644,7 +644,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style,
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
MenuButtonAction::BackToSettings,
@ -682,7 +682,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
},
OnSoundSettingsMenuScreen,
@ -694,7 +694,7 @@ mod menu {
align_items: AlignItems::Center,
..default()
},
color: Color::CRIMSON.into(),
background_color: Color::CRIMSON.into(),
..default()
})
.with_children(|parent| {
@ -708,7 +708,7 @@ mod menu {
size: Size::new(Val::Px(30.0), Val::Px(65.0)),
..button_style.clone()
},
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
});
entity.insert(Volume(volume_setting));
@ -721,7 +721,7 @@ mod menu {
.spawn((
ButtonBundle {
style: button_style,
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
},
MenuButtonAction::BackToSettings,

View file

@ -124,7 +124,7 @@ fn setup_scene(
fn button_handler(
mut interaction_query: Query<
(&Interaction, &mut UiColor),
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {

View file

@ -25,10 +25,13 @@ fn main() {
}
#[derive(Component)]
struct IdleColor(UiColor);
struct IdleColor(BackgroundColor);
fn button_system(
mut interaction_query: Query<(&Interaction, &mut UiColor, &IdleColor), Changed<Interaction>>,
mut interaction_query: Query<
(&Interaction, &mut BackgroundColor, &IdleColor),
Changed<Interaction>,
>,
) {
for (interaction, mut material, IdleColor(idle_color)) in interaction_query.iter_mut() {
if matches!(interaction, Interaction::Hovered) {
@ -74,7 +77,7 @@ fn setup(mut commands: Commands, font: Res<UiFont>) {
fn spawn_button(
commands: &mut ChildBuilder,
font: Handle<Font>,
color: UiColor,
color: BackgroundColor,
total: f32,
i: usize,
j: usize,
@ -95,7 +98,7 @@ fn spawn_button(
position_type: PositionType::Absolute,
..default()
},
color,
background_color: color,
..default()
},
IdleColor(color),

View file

@ -19,7 +19,7 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
fn button_system(
mut interaction_query: Query<
(&Interaction, &mut UiColor, &Children),
(&Interaction, &mut BackgroundColor, &Children),
(Changed<Interaction>, With<Button>),
>,
mut text_query: Query<&mut Text>,
@ -58,7 +58,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center,
..default()
},
color: NORMAL_BUTTON.into(),
background_color: NORMAL_BUTTON.into(),
..default()
})
.with_children(|parent| {

View file

@ -44,7 +44,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
align_items: AlignItems::Center,
..default()
},
color: Color::ANTIQUE_WHITE.into(),
background_color: Color::ANTIQUE_WHITE.into(),
..default()
})
.with_children(|parent| {
@ -54,7 +54,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
size: Size::new(Val::Px(40.), Val::Px(40.)),
..default()
},
color: Color::RED.into(),
background_color: Color::RED.into(),
..default()
})
.with_children(|parent| {
@ -65,7 +65,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
size: Size::new(Val::Percent(15.), Val::Percent(15.)),
..default()
},
color: Color::BLUE.into(),
background_color: Color::BLUE.into(),
..default()
});
parent.spawn(ImageBundle {

View file

@ -25,7 +25,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center,
..default()
},
color: Color::rgb(0.1, 0.5, 0.1).into(),
background_color: Color::rgb(0.1, 0.5, 0.1).into(),
..default()
})
.with_children(|parent| {
@ -51,7 +51,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center,
..default()
},
color: Color::rgb(0.5, 0.1, 0.5).into(),
background_color: Color::rgb(0.5, 0.1, 0.5).into(),
..default()
})
.with_children(|parent| {

View file

@ -28,7 +28,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
justify_content: JustifyContent::SpaceBetween,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
})
.with_children(|parent| {
@ -40,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
border: UiRect::all(Val::Px(2.0)),
..default()
},
color: Color::rgb(0.65, 0.65, 0.65).into(),
background_color: Color::rgb(0.65, 0.65, 0.65).into(),
..default()
})
.with_children(|parent| {
@ -52,7 +52,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::FlexEnd,
..default()
},
color: Color::rgb(0.15, 0.15, 0.15).into(),
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
..default()
})
.with_children(|parent| {
@ -82,7 +82,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
..default()
},
color: Color::rgb(0.15, 0.15, 0.15).into(),
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
..default()
})
.with_children(|parent| {
@ -116,7 +116,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
overflow: Overflow::Hidden,
..default()
},
color: Color::rgb(0.10, 0.10, 0.10).into(),
background_color: Color::rgb(0.10, 0.10, 0.10).into(),
..default()
})
.with_children(|parent| {
@ -130,7 +130,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
max_size: Size::UNDEFINED,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
},
ScrollingList::default(),
@ -177,7 +177,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
border: UiRect::all(Val::Px(20.0)),
..default()
},
color: Color::rgb(0.4, 0.4, 1.0).into(),
background_color: Color::rgb(0.4, 0.4, 1.0).into(),
..default()
})
.with_children(|parent| {
@ -186,7 +186,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
..default()
},
color: Color::rgb(0.8, 0.8, 1.0).into(),
background_color: Color::rgb(0.8, 0.8, 1.0).into(),
..default()
});
});
@ -200,7 +200,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
justify_content: JustifyContent::Center,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
})
.with_children(|parent| {
@ -210,7 +210,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
size: Size::new(Val::Px(100.0), Val::Px(100.0)),
..default()
},
color: Color::rgb(1.0, 0.0, 0.0).into(),
background_color: Color::rgb(1.0, 0.0, 0.0).into(),
..default()
})
.with_children(|parent| {
@ -225,7 +225,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
..default()
},
color: Color::rgb(1.0, 0.3, 0.3).into(),
background_color: Color::rgb(1.0, 0.3, 0.3).into(),
..default()
});
parent.spawn(NodeBundle {
@ -239,7 +239,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
..default()
},
color: Color::rgb(1.0, 0.5, 0.5).into(),
background_color: Color::rgb(1.0, 0.5, 0.5).into(),
..default()
});
parent.spawn(NodeBundle {
@ -253,7 +253,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
..default()
},
color: Color::rgb(1.0, 0.7, 0.7).into(),
background_color: Color::rgb(1.0, 0.7, 0.7).into(),
..default()
});
// alpha test
@ -268,7 +268,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
..default()
},
color: Color::rgba(1.0, 0.9, 0.9, 0.4).into(),
background_color: Color::rgba(1.0, 0.9, 0.9, 0.4).into(),
..default()
});
});
@ -283,7 +283,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::FlexEnd,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
})
.with_children(|parent| {

View file

@ -28,7 +28,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
justify_content: JustifyContent::SpaceBetween,
..default()
},
color: Color::NONE.into(),
background_color: Color::NONE.into(),
..default()
})
.with_children(|parent| {
@ -40,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
border: UiRect::all(Val::Px(2.0)),
..default()
},
color: Color::rgb(0.65, 0.65, 0.65).into(),
background_color: Color::rgb(0.65, 0.65, 0.65).into(),
..default()
})
.with_children(|parent| {