use cotis::cotis_app::UiFn;
use cotis::element_configuring::{ConfigureElements, ConfiguredParentElement};
use cotis::utils::ElementIdConfig;
use cotis_defaults::colors::Color;
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 = SolidSwatchesDemo {};
while !app.render().window_should_close() {
compute_frame::<SimpleRenderCmds, _>(&mut app, &demo);
}
}
struct SolidSwatchesDemo {}
impl SolidSwatchesDemo {
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: 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: Color) -> 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 solid_linear_lr() -> Color {
Color::rgb(120.0, 100.0, 160.0)
}
fn solid_linear_tb() -> Color {
Color::rgb(28.0, 110.0, 100.0)
}
fn solid_radial() -> Color {
Color::rgb(95.0, 110.0, 195.0)
}
fn solid_layered() -> Color {
Color::rgb(72.0, 58.0, 48.0)
}
fn solid_title_text() -> Color {
Color::rgb(140.0, 200.0, 230.0)
}
}
impl<'inside, Configurer> UiFn<'inside, Configurer, ExampleConfig> for &SolidSwatchesDemo
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: 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: Color| {
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: 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: SolidSwatchesDemo::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::Newline,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: 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: SolidSwatchesDemo::swatch_style(fill),
image: None,
custom: None,
extra_data: None,
});
sw.close_element();
row_p.close_element();
};
add_row(
"Linear (left → right) — solid",
SolidSwatchesDemo::solid_linear_lr(),
);
add_row(
"Linear (top → bottom) — solid",
SolidSwatchesDemo::solid_linear_tb(),
);
add_row("Radial — solid", SolidSwatchesDemo::solid_radial());
add_row("Layered — solid", SolidSwatchesDemo::solid_layered());
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: 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: SolidSwatchesDemo::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 (solid, no gradient)".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::Newline,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: 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: 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 · solid colors only (no complex-color)"
.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::Newline,
alignment: TextAlignment::Left,
},
style: TextStyle {
color: SolidSwatchesDemo::solid_title_text(),
},
});
big_p.close_element();
text_row_p.close_element();
col.close_element();
}
}
