From b056d7ca060d603597e0c29e29a16a57b056e7f2 Mon Sep 17 00:00:00 2001 From: JMS55 <47158642+JMS55@users.noreply.github.com> Date: Wed, 20 Dec 2023 22:35:53 -0800 Subject: [PATCH] WIP: More attributes --- examples/demo.rs | 8 ++-- src/apply_mutations.rs | 67 ++++++++++++++++++++++------- src/elements.rs | 96 ++++++++++++++++++++++++++++++------------ 3 files changed, 124 insertions(+), 47 deletions(-) diff --git a/examples/demo.rs b/examples/demo.rs index b27d16d..9d93c05 100644 --- a/examples/demo.rs +++ b/examples/demo.rs @@ -31,7 +31,7 @@ fn Editor(cx: Scope) -> Element { node { width: "100vw", height: "100vh", - justify_content: "space-between", + justify_content: "space_between", SceneTree { selected_entity: selected_entity } EntityInspector { selected_entity: selected_entity } } @@ -82,7 +82,7 @@ fn SceneTree<'a>(cx: Scope, selected_entity: &'a UseState>) -> El background_color: NEUTRAL_800, text { text: "Spawn Entity", - font_size: "18" + text_size: "18" } } } @@ -124,9 +124,7 @@ fn EntityInspector<'a>(cx: Scope, selected_entity: &'a UseState>) node { padding: "8", background_color: NEUTRAL_800, - node { - "Component: {name}" - } + "Component: {name}" } } } diff --git a/src/apply_mutations.rs b/src/apply_mutations.rs index 3c9356e..229efa0 100644 --- a/src/apply_mutations.rs +++ b/src/apply_mutations.rs @@ -362,44 +362,81 @@ fn set_attribute( background_color: &mut BackgroundColor, text: Option<&mut Text>, ) { - // TODO: The rest of Style match (name, value) { ("display", "flex") => style.display = Display::Flex, ("display", "grid") => style.display = Display::Grid, ("display", "none") => style.display = Display::None, ("position", "relative") => style.position_type = PositionType::Relative, ("position", "absolute") => style.position_type = PositionType::Absolute, - ("flex-direction", "column") => style.flex_direction = FlexDirection::Column, - ("background-color", hex) => { + ("overflow", "visible") => style.overflow = Overflow::visible(), + ("overflow", "clip") => style.overflow = Overflow::clip(), + ("overflow_x", "visible") => style.overflow.x = OverflowAxis::Visible, + ("overflow_x", "clip") => style.overflow.x = OverflowAxis::Clip, + ("overflow_y", "visible") => style.overflow.y = OverflowAxis::Visible, + ("overflow_y", "clip") => style.overflow.y = OverflowAxis::Clip, + ("left", val) => style.left = parse_val(val), + ("right", val) => style.right = parse_val(val), + ("top", val) => style.top = parse_val(val), + ("bottom", val) => style.bottom = parse_val(val), + ("width", val) => style.width = parse_val(val), + ("height", val) => style.height = parse_val(val), + ("min_width", val) => style.min_width = parse_val(val), + ("min_height", val) => style.min_height = parse_val(val), + ("max_width", val) => style.max_width = parse_val(val), + ("max_height", val) => style.max_height = parse_val(val), + ("aspect_ratio", "none") => style.aspect_ratio = None, + ("aspect_ratio", float) => { + style.aspect_ratio = Some( + float + .parse::() + .unwrap_or_else(|val| panic!("Encountered invalid bevy_dioxus f32 `{val}`.")), + ); + } + ("align_items", "default") => style.align_items = AlignItems::Default, + ("align_items", "start") => style.align_items = AlignItems::Start, + ("align_items", "end") => style.align_items = AlignItems::End, + ("align_items", "flex_start") => style.align_items = AlignItems::FlexStart, + ("align_items", "flex_end") => style.align_items = AlignItems::FlexEnd, + ("align_items", "center") => style.align_items = AlignItems::Center, + ("align_items", "baseline") => style.align_items = AlignItems::Baseline, + ("align_items", "stretch") => style.align_items = AlignItems::Stretch, + // TODO: The rest of the attributes from here on out + ("flex_direction", "column") => style.flex_direction = FlexDirection::Column, + ("background_color", hex) => { background_color.0 = Color::hex(hex).expect(&format!( - "Encountered invalid bevy_dioxus hex Color `{hex}`." + "Encountered invalid bevy_dioxus Color hex `{hex}`." )); } ("padding", val) => style.padding = UiRect::all(parse_val(val)), - ("width", val) => style.width = parse_val(val), - ("height", val) => style.height = parse_val(val), - ("justify-content", "space-between") => { + ("justify_content", "space_between") => { style.justify_content = JustifyContent::SpaceBetween; } - ("align-content", "space-between") => style.align_content = AlignContent::SpaceBetween, - ("text", val) if text.is_some() => text.unwrap().sections[0] = val.into(), - ("text-alignment", "left") if text.is_some() => { + ("align_content", "space_between") => style.align_content = AlignContent::SpaceBetween, + ("text", new_text) if text.is_some() => text.unwrap().sections[0] = new_text.into(), + ("text_direction", "inherit") if text.is_some() => style.direction = Direction::Inherit, + ("text_direction", "left_to_right") if text.is_some() => { + style.direction = Direction::LeftToRight; + } + ("text_direction", "right_to_left") if text.is_some() => { + style.direction = Direction::RightToLeft; + } + ("text_alignment", "left") if text.is_some() => { text.unwrap().alignment = TextAlignment::Left; } - ("text-alignment", "center") if text.is_some() => { + ("text_alignment", "center") if text.is_some() => { text.unwrap().alignment = TextAlignment::Center; } - ("text-alignment", "right") if text.is_some() => { + ("text_alignment", "right") if text.is_some() => { text.unwrap().alignment = TextAlignment::Right; } - ("font-size", val) if text.is_some() => { + ("text_size", val) if text.is_some() => { text.unwrap().sections[0].style.font_size = val .parse::() .unwrap_or_else(|val| panic!("Encountered invalid bevy_dioxus f32 `{val}`.")); } - ("font-color", hex) if text.is_some() => { + ("text_color", hex) if text.is_some() => { text.unwrap().sections[0].style.color = Color::hex(hex).expect(&format!( - "Encountered invalid bevy_dioxus hex Color `{hex}`." + "Encountered invalid bevy_dioxus Color hex `{hex}`." )); } _ => panic!("Encountered unsupported bevy_dioxus attribute `{name}: {value}`."), diff --git a/src/elements.rs b/src/elements.rs index b71fdcb..a875132 100644 --- a/src/elements.rs +++ b/src/elements.rs @@ -1,46 +1,88 @@ +macro_rules! node_attributes { + () => { + pub const display: AttributeDescription = ("display", None, false); + pub const position: AttributeDescription = ("position", None, false); + pub const overflow: AttributeDescription = ("overflow", None, false); + pub const overflow_x: AttributeDescription = ("overflow_x", None, false); + pub const overflow_y: AttributeDescription = ("overflow_y", None, false); + pub const left: AttributeDescription = ("left", None, false); + pub const right: AttributeDescription = ("right", None, false); + pub const top: AttributeDescription = ("top", None, false); + pub const bottom: AttributeDescription = ("bottom", None, false); + pub const width: AttributeDescription = ("width", None, false); + pub const height: AttributeDescription = ("height", None, false); + pub const min_width: AttributeDescription = ("min_width", None, false); + pub const min_height: AttributeDescription = ("min_height", None, false); + pub const aspect_ratio: AttributeDescription = ("aspect_ratio", None, false); + pub const align_items: AttributeDescription = ("align_items", None, false); + pub const justify_items: AttributeDescription = ("justify_items", None, false); + pub const align_self: AttributeDescription = ("align_self", None, false); + pub const justify_self: AttributeDescription = ("justify_self", None, false); + pub const align_content: AttributeDescription = ("align_content", None, false); + pub const justify_content: AttributeDescription = ("justify_content", None, false); + pub const margin: AttributeDescription = ("margin", None, false); + pub const margin_left: AttributeDescription = ("margin_left", None, false); + pub const margin_right: AttributeDescription = ("margin_right", None, false); + pub const margin_top: AttributeDescription = ("margin_top", None, false); + pub const margin_bottom: AttributeDescription = ("margin_bottom", None, false); + pub const padding: AttributeDescription = ("padding", None, false); + pub const padding_left: AttributeDescription = ("padding_left", None, false); + pub const padding_right: AttributeDescription = ("padding_right", None, false); + pub const padding_top: AttributeDescription = ("padding_top", None, false); + pub const padding_bottom: AttributeDescription = ("padding_bottom", None, false); + pub const border_size: AttributeDescription = ("border_size", None, false); + pub const border_size_left: AttributeDescription = ("border_size_left", None, false); + pub const border_size_right: AttributeDescription = ("border_size_right", None, false); + pub const border_size_top: AttributeDescription = ("border_size_top", None, false); + pub const border_size_bottom: AttributeDescription = ("border_size_bottom", None, false); + pub const border_color: AttributeDescription = ("border_color", None, false); + pub const flex_direction: AttributeDescription = ("flex_direction", None, false); + pub const flex_wrap: AttributeDescription = ("flex_wrap", None, false); + pub const flex_grow: AttributeDescription = ("flex_grow", None, false); + pub const flex_shrink: AttributeDescription = ("flex_shrink", None, false); + pub const flex_basis: AttributeDescription = ("flex_basis", None, false); + pub const row_gap: AttributeDescription = ("row_gap", None, false); + pub const column_gap: AttributeDescription = ("column_gap", None, false); + pub const grid_auto_flow: AttributeDescription = ("grid_auto_flow", None, false); + pub const grid_template_rows: AttributeDescription = ("grid_template_rows", None, false); + pub const grid_template_columns: AttributeDescription = + ("grid_template_columns", None, false); + pub const grid_auto_rows: AttributeDescription = ("grid_auto_rows", None, false); + pub const grid_auto_columns: AttributeDescription = ("grid_auto_columns", None, false); + pub const grid_row: AttributeDescription = ("grid_row", None, false); + pub const grid_column: AttributeDescription = ("grid_column", None, false); + pub const background_color: AttributeDescription = ("background_color", None, false); + pub const translation: AttributeDescription = ("translation", None, false); + pub const rotation: AttributeDescription = ("rotation", None, false); + pub const scale: AttributeDescription = ("scale", None, false); + pub const visibility: AttributeDescription = ("visibility", None, false); + pub const z_index: AttributeDescription = ("z_index", None, false); + }; +} + #[allow(non_camel_case_types, non_upper_case_globals)] pub mod dioxus_elements { pub use crate::events::events; - const NAME_SPACE: Option<&'static str> = Some("bevy_ui"); pub type AttributeDescription = (&'static str, Option<&'static str>, bool); + const NAME_SPACE: Option<&'static str> = Some("bevy_ui"); pub struct node; impl node { pub const TAG_NAME: &'static str = "node"; pub const NAME_SPACE: Option<&'static str> = NAME_SPACE; - - // TODO: The rest of Style - pub const display: AttributeDescription = ("display", None, false); - pub const position: AttributeDescription = ("position", None, false); - pub const flex_direction: AttributeDescription = ("flex-direction", None, false); - pub const background_color: AttributeDescription = ("background-color", None, false); - pub const padding: AttributeDescription = ("padding", None, false); - pub const width: AttributeDescription = ("width", None, false); - pub const height: AttributeDescription = ("height", None, false); - pub const justify_content: AttributeDescription = ("justify-content", None, false); - pub const align_content: AttributeDescription = ("align-content", None, false); + node_attributes!(); } pub struct text; impl text { pub const TAG_NAME: &'static str = "text"; pub const NAME_SPACE: Option<&'static str> = NAME_SPACE; - pub const text: AttributeDescription = ("text", None, false); - pub const text_alignment: AttributeDescription = ("text-alignment", None, false); - pub const font_size: AttributeDescription = ("font-size", None, false); - pub const font_color: AttributeDescription = ("font-color", None, false); - // TODO: The rest of Style - // TODO: Reduce duplication - pub const display: AttributeDescription = ("display", None, false); - pub const position: AttributeDescription = ("position", None, false); - pub const flex_direction: AttributeDescription = ("flex-direction", None, false); - pub const background_color: AttributeDescription = ("background-color", None, false); - pub const padding: AttributeDescription = ("padding", None, false); - pub const width: AttributeDescription = ("width", None, false); - pub const height: AttributeDescription = ("height", None, false); - pub const justify_content: AttributeDescription = ("justify-content", None, false); - pub const align_content: AttributeDescription = ("align-content", None, false); + pub const text_direction: AttributeDescription = ("text_direction", None, false); + pub const text_alignment: AttributeDescription = ("text_alignment", None, false); + pub const text_size: AttributeDescription = ("text_size", None, false); + pub const text_color: AttributeDescription = ("text_color", None, false); + node_attributes!(); } }