Border radius now uses Corner

bevy_kayak_ui/src/render/unified/font/extract.rs

@@ -4,6 +4,7 @@ use bevy::{
     sprite::Rect,
 };
 use kayak_core::render_primitive::RenderPrimitive;
+use kayak_core::styles::Corner;
 use kayak_font::{Alignment, CoordinateSystem, KayakFont};
 
 use crate::{
@@ -77,7 +78,7 @@ pub fn extract_texts(
                 z_index: layout.z_index,
                 quad_type: UIQuadType::Text,
                 type_index: 0,
-                border_radius: (0.0, 0.0, 0.0, 0.0),
+                border_radius: Corner::default(),
                 image: None,
                 uv_max: None,
                 uv_min: None,

bevy_kayak_ui/src/render/unified/mod.rs

@@ -9,7 +9,7 @@ use bevy::{
     sprite::Rect,
     window::Windows,
 };
-use kayak_core::{render_primitive::RenderPrimitive, Binding, Bound};
+use kayak_core::{render_primitive::RenderPrimitive, styles::Corner, Binding, Bound};
 use kayak_font::KayakFont;
 
 use crate::{
@@ -129,7 +129,7 @@ pub fn extract(
                         font_handle: None,
                         quad_type: UIQuadType::Clip,
                         type_index: 0,
-                        border_radius: (0.0, 0.0, 0.0, 0.0),
+                        border_radius: Corner::default(),
                         image: None,
                         uv_min: None,
                         uv_max: None,

bevy_kayak_ui/src/render/unified/nine_patch/extract.rs

@@ -5,6 +5,7 @@ use bevy::{
     sprite::Rect,
 };
 use kayak_core::render_primitive::RenderPrimitive;
+use kayak_core::styles::Corner;
 
 use crate::{
     render::unified::pipeline::{ExtractQuadBundle, ExtractedQuad, UIQuadType},
@@ -60,7 +61,7 @@ pub fn extract_nine_patch(
         font_handle: None,
         quad_type: UIQuadType::Image,
         type_index: 0,
-        border_radius: (0.0, 0.0, 0.0, 0.0),
+        border_radius: Corner::default(),
         image: image_handle,
         uv_max: None,
         uv_min: None,

bevy_kayak_ui/src/render/unified/pipeline.rs

@@ -37,6 +37,7 @@ use kayak_font::{
     KayakFont,
 };
 
+use kayak_core::styles::Corner;
 use super::{Dpi, UNIFIED_SHADER_HANDLE};
 use crate::{render::ui_pass::TransparentUI, WindowSize};
 
@@ -320,7 +321,7 @@ pub struct ExtractedQuad {
     pub font_handle: Option<Handle<KayakFont>>,
     pub quad_type: UIQuadType,
     pub type_index: u32,
-    pub border_radius: (f32, f32, f32, f32),
+    pub border_radius: Corner<f32>,
     pub image: Option<Handle<Image>>,
     pub uv_min: Option<Vec2>,
     pub uv_max: Option<Vec2>,
@@ -413,25 +414,25 @@ pub fn prepare_quads(
             uv_min.x,
             uv_max.y,
             extracted_sprite.char_id as f32,
-            extracted_sprite.border_radius.0,
+            extracted_sprite.border_radius.top_left,
         );
         let top_left = Vec4::new(
             uv_min.x,
             uv_min.y,
             extracted_sprite.char_id as f32,
-            extracted_sprite.border_radius.1,
+            extracted_sprite.border_radius.bottom_left,
         );
         let top_right = Vec4::new(
             uv_max.x,
             uv_min.y,
             extracted_sprite.char_id as f32,
-            extracted_sprite.border_radius.2,
+            extracted_sprite.border_radius.bottom_right,
         );
         let bottom_right = Vec4::new(
             uv_max.x,
             uv_max.y,
             extracted_sprite.char_id as f32,
-            extracted_sprite.border_radius.3,
+            extracted_sprite.border_radius.top_right,
         );
 
         let uvs: [[f32; 4]; 6] = [

examples/image.rs

@@ -7,7 +7,7 @@ use kayak_core::styles::PositionType;
 use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, ImageManager, UICameraBundle};
 use kayak_ui::core::{
     render,
-    styles::{Style, StyleProp, Units},
+    styles::{Corner, Style, StyleProp, Units},
     Index,
 };
 use kayak_ui::widgets::{App, Image};
@@ -27,7 +27,7 @@ fn startup(
             position_type: StyleProp::Value(PositionType::SelfDirected),
             left: StyleProp::Value(Units::Pixels(10.0)),
             top: StyleProp::Value(Units::Pixels(10.0)),
-            border_radius: StyleProp::Value((500.0, 500.0, 500.0, 500.0)),
+            border_radius: StyleProp::Value(Corner::all(500.0)),
             width: StyleProp::Value(Units::Pixels(200.0)),
             height: StyleProp::Value(Units::Pixels(182.0)),
             ..Style::default()

examples/todo/add_button.rs

@@ -3,7 +3,7 @@ use kayak_ui::core::{
     color::Color,
     render_command::RenderCommand,
     rsx,
-    styles::{Style, StyleProp, Units},
+    styles::{Corner, Style, StyleProp, Units},
     use_state, widget, EventType, OnEvent, WidgetProps,
 };
 
@@ -30,7 +30,7 @@ pub fn AddButton(props: AddButtonProps) {
     });
 
     let background_styles = Some(Style {
-        border_radius: StyleProp::Value((5.0, 5.0, 5.0, 5.0)),
+        border_radius: StyleProp::Value(Corner::all(5.0)),
         background_color: StyleProp::Value(color),
         cursor: CursorIcon::Hand.into(),
         padding_left: StyleProp::Value(Units::Pixels(9.0)),

examples/todo/delete_button.rs

@@ -3,7 +3,7 @@ use kayak_ui::core::{
     color::Color,
     render_command::RenderCommand,
     rsx,
-    styles::{Style, StyleProp, Units},
+    styles::{Corner, Style, StyleProp, Units},
     use_state, widget, EventType, OnEvent, WidgetProps,
 };
 
@@ -31,7 +31,7 @@ pub fn DeleteButton(props: DeleteButtonProps) {
     });
 
     let background_styles = Some(Style {
-        border_radius: StyleProp::Value((5.0, 5.0, 5.0, 5.0)),
+        border_radius: StyleProp::Value(Corner::all(5.0)),
         background_color: StyleProp::Value(color),
         cursor: CursorIcon::Hand.into(),
         padding_left: StyleProp::Value(Units::Pixels(8.0)),

kayak_core/src/render_primitive.rs

@@ -2,7 +2,7 @@ use crate::{
     color::Color,
     layout_cache::Rect,
     render_command::RenderCommand,
-    styles::{Edge, Style, StyleProp},
+    styles::{Corner, Edge, Style, StyleProp},
 };
 
 #[derive(Debug, Clone, PartialEq)]
@@ -16,7 +16,7 @@ pub enum RenderPrimitive {
         background_color: Color,
         border_color: Color,
         border: Edge<f32>,
-        border_radius: (f32, f32, f32, f32),
+        border_radius: Corner<f32>,
     },
     Text {
         color: Color,
@@ -28,7 +28,7 @@ pub enum RenderPrimitive {
         size: f32,
     },
     Image {
-        border_radius: (f32, f32, f32, f32),
+        border_radius: Corner<f32>,
         layout: Rect,
         handle: u16,
     },

kayak_core/src/styles/mod.rs

@@ -145,7 +145,7 @@ define_styles! {
     pub struct Style {
         pub background_color : StyleProp<Color>,
         pub border_color: StyleProp<Color>,
-        pub border_radius: StyleProp<(f32, f32, f32, f32)>,
+        pub border_radius: StyleProp<Corner<f32>>,
         pub border: StyleProp<Edge<f32>>,
         pub bottom: StyleProp<Units>,
         pub color: StyleProp<Color>,

src/widgets/button.rs

 use crate::core::{
     render_command::RenderCommand,
     rsx,
-    styles::{Style, StyleProp, Units},
+    styles::{Corner, Style, StyleProp, Units},
     widget, Children, Color, Fragment, OnEvent, WidgetProps,
 };
 use kayak_core::CursorIcon;
@@ -48,7 +48,7 @@ pub fn Button(props: ButtonProps) {
             .with_style(&props.styles)
             .with_style(Style {
                 background_color: StyleProp::Value(Color::new(0.0781, 0.0898, 0.101, 1.0)),
-                border_radius: StyleProp::Value((5.0, 5.0, 5.0, 5.0)),
+                border_radius: StyleProp::Value(Corner::all(5.0)),
                 height: StyleProp::Value(Units::Pixels(45.0)),
                 padding_left: StyleProp::Value(Units::Stretch(1.0)),
                 padding_right: StyleProp::Value(Units::Stretch(1.0)),

src/widgets/inspector.rs

-use kayak_core::styles::{PositionType, Style, StyleProp, Units};
+use kayak_core::styles::{Corner, PositionType, Style, StyleProp, Units};
 use kayak_core::{Bound, Color, EventType, OnEvent, VecTracker};
 use kayak_render_macros::{constructor, use_state};
 
@@ -24,7 +24,7 @@ pub fn Inspector(props: InspectorProps) {
 
     let background_styles = Some(Style {
         background_color: StyleProp::Value(Color::new(0.125, 0.125, 0.125, 1.0)),
-        border_radius: StyleProp::Value((0.0, 0.0, 0.0, 0.0)),
+        border_radius: StyleProp::Value(Corner::all(0.0)),
         position_type: StyleProp::Value(PositionType::SelfDirected),
         left: StyleProp::Value(Units::Stretch(1.0)),
         top: StyleProp::Value(Units::Stretch(0.0)),

src/widgets/text_box.rs

 use crate::core::{
     render_command::RenderCommand,
     rsx,
-    styles::{Style, Units},
+    styles::{Corner, Style, Units},
     widget, Bound, Children, Color, EventType, MutableBound, OnEvent, WidgetProps,
 };
 use kayak_core::CursorIcon;
@@ -102,7 +102,7 @@ pub fn TextBox(props: TextBoxProps) {
 
     let background_styles = Style {
         background_color: Color::new(0.176, 0.196, 0.215, 1.0).into(),
-        border_radius: (5.0, 5.0, 5.0, 5.0).into(),
+        border_radius: Corner::all(5.0).into(),
         height: Units::Pixels(26.0).into(),
         padding_left: Units::Pixels(5.0).into(),
         padding_right: Units::Pixels(5.0).into(),

src/widgets/window.rs

@@ -2,7 +2,7 @@ use crate::core::{
     color::Color,
     render_command::RenderCommand,
     rsx,
-    styles::{Edge, PositionType, Style, StyleProp, Units},
+    styles::{Corner, Edge, PositionType, Style, StyleProp, Units},
     use_state, widget, Children, EventType, OnEvent, WidgetProps,
 };
 use kayak_core::CursorIcon;
@@ -65,7 +65,7 @@ pub fn Window(props: WindowProps) {
         background_color: StyleProp::Value(Color::new(0.125, 0.125, 0.125, 1.0)),
         border_color: StyleProp::Value(Color::new(0.0781, 0.0898, 0.101, 1.0)),
         border: StyleProp::Value(Edge::all(4.0)),
-        border_radius: StyleProp::Value((5.0, 5.0, 5.0, 5.0)),
+        border_radius: StyleProp::Value(Corner::all(5.0)),
         render_command: StyleProp::Value(RenderCommand::Quad),
         position_type: StyleProp::Value(PositionType::SelfDirected),
         left: StyleProp::Value(Units::Pixels(pos.0)),
@@ -98,7 +98,7 @@ pub fn Window(props: WindowProps) {
 
     let title_background_styles = Style {
         background_color: StyleProp::Value(Color::new(0.0781, 0.0898, 0.101, 1.0)),
-        border_radius: StyleProp::Value((5.0, 5.0, 5.0, 5.0)),
+        border_radius: StyleProp::Value(Corner::all(5.0)),
         cursor: cursor.into(),
         height: StyleProp::Value(Units::Pixels(24.0)),
         width: StyleProp::Value(Units::Stretch(1.0)),