use cotis::cotis_app::UiFn;
use cotis::element_configuring::{ConfigureElements, ConfiguredParentElement};
use cotis::utils::ElementIdConfig;
use cotis_defaults::colors::{
Color, ColorAttachmentPoint, ColorLayer, ColorPos, GradientStop, LayeredColor, LinearGradient,
RadialGradient,
};
use cotis_defaults::element_configs::style::sizing::AxisSizing::{Fit, Grow};
use cotis_defaults::element_configs::style::sizing::{AxisSizing, DoubleAxisSizing, Sizing};
use cotis_defaults::element_configs::style::types::{
Alignment, LayoutAlignmentX, LayoutAlignmentY, LayoutDirection, Padding,
};
use cotis_defaults::element_configs::style::{
BorderElementStyle, BorderWidthStyle, CornerRadiiStyle, CotisStyle, LayoutStyle,
};
use cotis_defaults::element_configs::text_config::{
TextAlignment, TextConfig, TextElementConfig, TextElementConfigWrapMode, TextStyle,
};
use cotis_raylib::prelude::RaylibRender;
use raylib::consts::TextureFilter;
mod support;
use support::{
ExampleConfig, SimpleRenderCmds, compute_frame, empty_example_config, new_cotis_app,
};
fn main() {
test_entry(RaylibRender::auto_start());
}
fn test_entry(mut renderer: RaylibRender) {
let mut app = new_cotis_app(renderer, cotis_utils::math::Dimensions::new(920.0, 640.0));
let _font = app
.render()
.load_font_ex_and_keep(
"./examples/fonts/Roboto-Regular.ttf",
24,
None,
Some(TextureFilter::TEXTURE_FILTER_BILINEAR),
)
.unwrap();
let demo = GradientsDemo {};
while !app.render().window_should_close() {
compute_frame::<SimpleRenderCmds, _>(&mut app, &demo);
}
}
struct GradientsDemo {}
impl GradientsDemo {
fn row_label_style() -> CotisStyle<Sizing> {
CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: Fit(0.0, f32::MAX),
height: Fit(0.0, f32::MAX),
}),
layout: LayoutStyle {
padding: Padding {
top: 4.0,
bottom: 4.0,
left: 8.0,
right: 12.0,
},
child_gap: 0.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Left,
y: LayoutAlignmentY::Center,
},
layout_direction: LayoutDirection::LeftToRight,
},
background_color: ColorLayer::Solid(Color::rgba(0.0, 0.0, 0.0, 0.0)),
corner_radius: CornerRadiiStyle {
top_left: 0.0,
top_right: 0.0,
bottom_left: 0.0,
bottom_right: 0.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(0.0, 0.0, 0.0, 0.0),
width: BorderWidthStyle {
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 0.0,
between_children: 0.0,
},
},
clip: Default::default(),
}
}
fn swatch_style(fill: ColorLayer) -> CotisStyle<Sizing> {
CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: AxisSizing::Fixed(280.0),
height: AxisSizing::Fixed(72.0),
}),
layout: LayoutStyle {
padding: Padding {
top: 0.0,
bottom: 0.0,
right: 0.0,
left: 0.0,
},
child_gap: 0.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Center,
y: LayoutAlignmentY::Center,
},
layout_direction: LayoutDirection::LeftToRight,
},
background_color: fill,
corner_radius: CornerRadiiStyle {
top_left: 20.0,
top_right: 20.0,
bottom_left: 20.0,
bottom_right: 20.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(60.0, 60.0, 70.0, 200.0),
width: BorderWidthStyle {
left: 1.0,
right: 1.0,
top: 1.0,
bottom: 1.0,
between_children: 0.0,
},
},
clip: Default::default(),
}
}
fn linear_lr() -> ColorLayer {
ColorLayer::Linear(LinearGradient {
start: ColorPos {
x: 0.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::CenterLeft,
},
end: ColorPos {
x: 1.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::CenterRight,
},
stops: vec![
GradientStop {
offset: 0.0,
color: Color::rgb(220.0, 70.0, 90.0),
},
GradientStop {
offset: 0.55,
color: Color::rgb(120.0, 40.0, 180.0),
},
GradientStop {
offset: 1.0,
color: Color::rgb(40.0, 160.0, 220.0),
},
],
})
}
fn linear_tb() -> ColorLayer {
ColorLayer::Linear(LinearGradient {
start: ColorPos {
x: 0.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::TopLeft,
},
end: ColorPos {
x: 0.0,
y: 1.0,
attachment_point: ColorAttachmentPoint::TopLeft,
},
stops: vec![
GradientStop {
offset: 0.0,
color: Color::rgb(30.0, 200.0, 140.0),
},
GradientStop {
offset: 1.0,
color: Color::rgb(20.0, 40.0, 90.0),
},
],
})
}
fn radial_sample() -> ColorLayer {
ColorLayer::Radial(RadialGradient {
center: ColorPos {
x: 0.5,
y: 0.45,
attachment_point: ColorAttachmentPoint::TopLeft,
},
radius: 0.65,
stops: vec![
GradientStop {
offset: 0.0,
color: Color::rgb(255.0, 245.0, 200.0),
},
GradientStop {
offset: 0.65,
color: Color::rgb(80.0, 120.0, 220.0),
},
GradientStop {
offset: 1.0,
color: Color::rgb(15.0, 25.0, 60.0),
},
],
})
}
fn layered_sample() -> ColorLayer {
ColorLayer::Layered(LayeredColor {
layers: vec![
ColorLayer::Solid(Color::rgb(45.0, 45.0, 52.0)),
ColorLayer::Linear(LinearGradient {
start: ColorPos {
x: 0.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::BottomRight,
},
end: ColorPos {
x: 0.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::TopLeft,
},
stops: vec![
GradientStop {
offset: 0.0,
color: Color::rgba(255.0, 140.0, 40.0, 0.0),
},
GradientStop {
offset: 1.0,
color: Color::rgba(255.0, 140.0, 40.0, 180.0),
},
],
}),
],
})
}
fn text_gradient() -> ColorLayer {
ColorLayer::Linear(LinearGradient {
start: ColorPos {
x: 0.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::CenterLeft,
},
end: ColorPos {
x: 1.0,
y: 0.0,
attachment_point: ColorAttachmentPoint::CenterRight,
},
stops: vec![
GradientStop {
offset: 0.0,
color: Color::rgb(255.0, 80.0, 200.0),
},
GradientStop {
offset: 0.5,
color: Color::rgb(120.0, 220.0, 255.0),
},
GradientStop {
offset: 1.0,
color: Color::rgb(200.0, 255.0, 120.0),
},
],
})
}
}
impl<'inside, Configurer> UiFn<'inside, Configurer, ExampleConfig> for &GradientsDemo
where
Configurer: ConfigureElements<ExampleConfig>
+ cotis::element_configuring::ConfigureLeafElements<
cotis_defaults::element_configs::text_config::TextElementConfig<'static>,
>,
{
fn draw_in(self, layout: &mut ConfiguredParentElement<'inside, Configurer, ExampleConfig>) {
let mut root = layout.new_element();
root.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: Grow(0.0, f32::MAX),
height: Grow(0.0, f32::MAX),
}),
layout: LayoutStyle {
padding: Padding {
top: 16.0,
bottom: 16.0,
left: 20.0,
right: 20.0,
},
child_gap: 10.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Left,
y: LayoutAlignmentY::Top,
},
layout_direction: LayoutDirection::TopToBottom,
},
background_color: ColorLayer::Solid(Color::rgb(18.0, 18.0, 22.0)),
corner_radius: CornerRadiiStyle {
top_left: 0.0,
top_right: 0.0,
bottom_left: 0.0,
bottom_right: 0.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(0.0, 0.0, 0.0, 0.0),
width: BorderWidthStyle {
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 0.0,
between_children: 0.0,
},
},
clip: Default::default(),
},
image: None,
custom: None,
extra_data: None,
});
let mut col = root.make_parent();
let mut add_row = |label: &str, fill: ColorLayer| {
let mut row = col.new_element();
row.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: Grow(0.0, f32::MAX),
height: Fit(0.0, f32::MAX),
}),
layout: LayoutStyle {
padding: Padding {
top: 0.0,
bottom: 0.0,
right: 0.0,
left: 0.0,
},
child_gap: 12.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Left,
y: LayoutAlignmentY::Center,
},
layout_direction: LayoutDirection::LeftToRight,
},
background_color: ColorLayer::Solid(Color::rgba(0.0, 0.0, 0.0, 0.0)),
corner_radius: CornerRadiiStyle {
top_left: 0.0,
top_right: 0.0,
bottom_left: 0.0,
bottom_right: 0.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(0.0, 0.0, 0.0, 0.0),
width: BorderWidthStyle {
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 0.0,
between_children: 0.0,
},
},
clip: Default::default(),
},
image: None,
custom: None,
extra_data: None,
});
let mut row_p = row.make_parent();
let mut lab = row_p.new_element();
lab.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: GradientsDemo::row_label_style(),
image: None,
custom: None,
extra_data: None,
});
let mut lab_p = lab.make_parent();
let mut lt = lab_p.new_element();
lt.set_config(empty_example_config());
lt.set_leaf_config(TextElementConfig {
text: cotis::utils::OwnedOrRef::Owned(label.to_owned().into_boxed_str()),
config: TextConfig {
font_id: 0,
font_size: 20.0,
letter_spacing: 0.5,
line_height: 0.0,
wrap_mode: TextElementConfigWrapMode::None,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: ColorLayer::Solid(Color::rgb(220.0, 220.0, 228.0)),
},
});
lab_p.close_element();
let mut sw = row_p.new_element();
sw.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: GradientsDemo::swatch_style(fill),
image: None,
custom: None,
extra_data: None,
});
sw.close_element();
row_p.close_element();
};
add_row("Linear (left → right)", GradientsDemo::linear_lr());
add_row("Linear (top → bottom)", GradientsDemo::linear_tb());
add_row("Radial", GradientsDemo::radial_sample());
add_row(
"Layered (base + diagonal wash)",
GradientsDemo::layered_sample(),
);
let mut text_row = col.new_element();
text_row.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: Grow(0.0, f32::MAX),
height: Fit(0.0, f32::MAX),
}),
layout: LayoutStyle {
padding: Padding {
top: 8.0,
bottom: 4.0,
left: 0.0,
right: 0.0,
},
child_gap: 0.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Left,
y: LayoutAlignmentY::Top,
},
layout_direction: LayoutDirection::TopToBottom,
},
background_color: ColorLayer::Solid(Color::rgba(0.0, 0.0, 0.0, 0.0)),
corner_radius: CornerRadiiStyle {
top_left: 0.0,
top_right: 0.0,
bottom_left: 0.0,
bottom_right: 0.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(0.0, 0.0, 0.0, 0.0),
width: BorderWidthStyle {
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 0.0,
between_children: 0.0,
},
},
clip: Default::default(),
},
image: None,
custom: None,
extra_data: None,
});
let mut text_row_p = text_row.make_parent();
let mut cap = text_row_p.new_element();
cap.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: GradientsDemo::row_label_style(),
image: None,
custom: None,
extra_data: None,
});
let mut cap_p = cap.make_parent();
let mut cap_t = cap_p.new_element();
cap_t.set_config(empty_example_config());
cap_t.set_leaf_config(TextElementConfig {
text: cotis::utils::OwnedOrRef::Owned(
"Text (linear along line)".to_owned().into_boxed_str(),
),
config: TextConfig {
font_id: 0,
font_size: 18.0,
letter_spacing: 0.4,
line_height: 0.0,
wrap_mode: TextElementConfigWrapMode::None,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: ColorLayer::Solid(Color::rgb(200.0, 200.0, 210.0)),
},
});
cap_p.close_element();
let mut big = text_row_p.new_element();
big.set_config(ExampleConfig {
id_config: ElementIdConfig::new_empty(),
style: CotisStyle {
sizing: Sizing::DoubleAxis(DoubleAxisSizing {
width: Grow(0.0, f32::MAX),
height: Fit(0.0, f32::MAX),
}),
layout: LayoutStyle {
padding: Padding {
top: 4.0,
bottom: 8.0,
left: 8.0,
right: 8.0,
},
child_gap: 0.0,
child_alignment: Alignment {
x: LayoutAlignmentX::Left,
y: LayoutAlignmentY::Top,
},
layout_direction: LayoutDirection::LeftToRight,
},
background_color: ColorLayer::Solid(Color::rgba(0.0, 0.0, 0.0, 0.0)),
corner_radius: CornerRadiiStyle {
top_left: 0.0,
top_right: 0.0,
bottom_left: 0.0,
bottom_right: 0.0,
},
floating: None,
border: BorderElementStyle {
color: Color::rgba(0.0, 0.0, 0.0, 0.0),
width: BorderWidthStyle {
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 0.0,
between_children: 0.0,
},
},
clip: Default::default(),
},
image: None,
custom: None,
extra_data: None,
});
let mut big_p = big.make_parent();
let mut big_t = big_p.new_element();
big_t.set_config(empty_example_config());
big_t.set_leaf_config(TextElementConfig {
text: cotis::utils::OwnedOrRef::Owned(
"cotis-raylib · cotis ColorLayer gradients"
.to_owned()
.into_boxed_str(),
),
config: TextConfig {
font_id: 0,
font_size: 34.0,
letter_spacing: 1.2,
line_height: 0.0,
wrap_mode: TextElementConfigWrapMode::None,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: GradientsDemo::text_gradient(),
},
});
big_p.close_element();
text_row_p.close_element();
col.close_element();
}
}
