Add Border and BorderRadius components to bevy_ui

Author: oceantume

crates/bevy_ui/src/node_bundles.rs

@@ -4,8 +4,8 @@
 use crate::widget::TextFlags;
 use crate::{
     widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
-    UiMaterial, ZIndex,
+    BackgroundColor, Border, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction,
+    Node, Style, UiImage, UiMaterial, ZIndex,
 };
 use bevy_asset::Handle;
 use bevy_ecs::bundle::Bundle;
@@ -54,6 +54,10 @@ pub struct NodeBundle {
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
     pub z_index: ZIndex,
+    /// Describes the border radius of the node
+    pub border_radius: BorderRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
 }
 
 impl Default for NodeBundle {
@@ -71,6 +75,8 @@ impl Default for NodeBundle {
             inherited_visibility: Default::default(),
             view_visibility: Default::default(),
             z_index: Default::default(),
+            border_radius: Default::default(),
+            border: Default::default(),
         }
     }
 }
@@ -119,6 +125,10 @@ pub struct ImageBundle {
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
     pub z_index: ZIndex,
+    /// Describes the border radius of the node
+    pub border_radius: BorderRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
 }
 
 /// A UI node that is a texture atlas sprite
@@ -390,6 +400,10 @@ pub struct MaterialNodeBundle<M: UiMaterial> {
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
     pub z_index: ZIndex,
+    /// Describes the border radius of the node
+    pub border_radius: BorderRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
 }
 
 impl<M: UiMaterial> Default for MaterialNodeBundle<M> {
@@ -405,6 +419,8 @@ impl<M: UiMaterial> Default for MaterialNodeBundle<M> {
             inherited_visibility: Default::default(),
             view_visibility: Default::default(),
             z_index: Default::default(),
+            border_radius: Default::default(),
+            border: Default::default(),
         }
     }
 }

crates/bevy_ui/src/ui_node.rs

@@ -1917,3 +1917,48 @@ impl<'w, 's> DefaultUiCamera<'w, 's> {
         })
     }
 }
+
+/// The border radius of the node
+///
+/// This doesn't require a [`Border`] component
+#[derive(Component, Default, Copy, Clone, Debug, Reflect)]
+#[reflect(Component)]
+pub struct BorderRadius {
+    pub top_left: f32,
+    pub bottom_left: f32,
+    pub top_right: f32,
+    pub bottom_right: f32,
+}
+
+impl BorderRadius {
+    pub fn all(border_radius: f32) -> Self {
+        Self {
+            top_left: border_radius,
+            bottom_left: border_radius,
+            top_right: border_radius,
+            bottom_right: border_radius,
+        }
+    }
+
+    pub fn to_array(&self) -> [f32; 4] {
+        [
+            self.top_left,
+            self.bottom_left,
+            self.top_right,
+            self.bottom_right,
+        ]
+    }
+}
+
+/// The visual properties of the node's border
+#[derive(Component, Default, Copy, Clone, Debug, Reflect)]
+#[reflect(Component)]
+pub struct Border {
+    /// The width of the border
+    ///
+    /// This is different from [`Style`] border and it will not cause any displacement inside the node.
+    pub width: f32,
+
+    /// The color of the border
+    pub color: LegacyColor,
+}