Merge pull request #1 from KrLiam/features

Add global variable injection, marker components and named output slots

Author: TheDudeFromCI

Cargo.lock

@@ -3,7 +3,11 @@ name = "neko-maid"
 version = "0.1.0"
 edition = "2024"
 
+[workspace]
+members = ["neko_derive"]
+
 [dependencies]
+neko_derive = { path="./neko_derive" }
 bevy = { version = "0.17", default-features = false, features = [
   "bevy_core_pipeline",
   "bevy_render",

Cargo.toml

@@ -1,3 +1,7 @@
+// global variables that are controlled dynamically.
+var width = 400;
+var color = #000000;
+
 var text-color = #614a31;
 
 style div +outer-menu {
@@ -16,7 +20,7 @@ style div +inner-menu {
 
 style p +h1 {
   font-size: 32;
-  color: $text-color;
+  color: $color;
 }
 
 def h1 {
@@ -48,7 +52,7 @@ layout div {
   flex-direction: column;
   align-items: center;
 
-  width: 400px;
+  width: $width;
   height: 600px;
 
   margin: auto;

assets/example.neko_ui

@@ -0,0 +1,83 @@
+
+style div +outer-menu {
+  background-color: #D5A96E;
+  border-color: #5B4A31;
+  border-thickness: 4px;
+  border-radius: 12px;
+}
+
+style div +inner-menu {
+  background-color: #d9ad72;
+  border-color: #c1935b;
+  border-thickness: 4px;
+  border-radius: 12px;
+}
+
+style p +h1 {
+  font-size: 32;
+  color: #000000;
+}
+
+def h1 {
+  var text = "Text";
+
+  layout div {
+    class test;
+    
+    flex-direction: column;
+
+    with p {
+      class h1;
+      text: $text;
+    }
+
+    with div {
+      height: 2px;
+      width: 100%;
+
+      background-color: #614a31;
+      border-radius: 4px;
+    }
+
+    output;
+  }
+}
+
+layout div {
+  class outer-menu;
+
+  flex-direction: column;
+  align-items: center;
+
+  width: 500px;
+  height: 600px;
+
+  margin: auto;
+  padding: 8px;
+  row-gap: 8px;
+
+  with h1 {
+    text: "Outer Menu";
+  }
+
+  with div {
+    class inner-menu;
+
+    width: 100%;
+    flex-grow: 1;
+
+    padding: 8px;
+
+    with p {
+      text: "Hiii";
+      color: #000000;
+    }
+
+    with div {
+      class test;
+      
+      width: 100px;
+      height: 100px;
+    }
+  }
+}

assets/marker.neko_ui

@@ -0,0 +1,100 @@
+
+style p {
+    color: #000;
+}
+
+def centered {
+    layout div {
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+
+        // same as output default;
+        output;
+    }
+}
+
+def card {
+    layout centered {
+        // when 'in' is not used, child elements go
+        // to the default slot.
+        with div {
+            flex-direction: column;
+            width: 300px;
+            height: 400px;
+            background-color: #eeeeee;
+            border-radius: 5px;
+
+            with div {
+                width: 100%;
+                height: 50px;
+                border-color: #ccc;
+                border-thickness-bottom: 2px;
+                padding: 10px;
+
+                output header;
+            }
+
+            with div {
+                width: 100%;
+                height: 100%;
+                padding: 10px;
+
+                with div {
+                    width: 100%;
+                    height: 100%;
+                    border-color: #ccc;
+                    border-thickness: 2px;
+                    border-radius: 5px;
+
+                    with p {
+                        text: "[";
+                        color: #aaa;
+                    }
+
+                    output body;
+
+                    with p {
+                        text: "]";
+                        color: #aaa;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+layout div {
+    width: 100%;
+    justify-content: start;
+    align-items: start;
+
+    with card {
+        in header {
+            with div {
+                width: 100%;
+                justify-content: center;
+                background-color: #ccc;
+                padding: 2px;
+                border-radius: 5px;
+
+                with p {
+                    text: "Card Demo";
+                }
+            }
+        }
+
+        in body {
+            with p {
+                text: "Body content.";
+            }
+
+            // this raises an error since top-level layouts
+            // cannot have output slots
+            // output;
+        }
+    }
+
+}

assets/slots.neko_ui

@@ -0,0 +1,49 @@
+use bevy::color::palettes::css::RED;
+use bevy::prelude::*;
+use neko_derive::NekoMarker;
+use neko_maid::components::NekoUITree;
+use neko_maid::marker::{MarkerAppExt, NekoMarker};
+
+#[derive(Component, NekoMarker)]
+#[neko_marker("test")]
+pub struct Test;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_marker::<Test>()
+        .add_systems(Startup, setup)
+        .add_observer(spawned_test)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("marker.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
+
+pub fn spawned_test(event: On<Add, Test>, mut cmds: Commands) {
+    // Could add any arbitrary logic here. We're gonna just build some UI manually.
+
+    println!("Spawned test {}", event.entity);
+    cmds.entity(event.entity).with_children(|parent| {
+        parent.spawn((
+            Node {
+                position_type: PositionType::Absolute,
+                left: Val::Px(0.0),
+                top: Val::Px(0.0),
+                bottom: Val::Px(0.0),
+                right: Val::Px(0.0),
+                width: Val::Auto,
+                height: Val::Auto,
+                border: UiRect::all(Val::Px(2.0)),
+                ..Default::default()
+            },
+            BorderColor::all(RED),
+            BackgroundColor(Color::NONE),
+        ));
+    });
+}

examples/marker.rs

@@ -1,11 +1,13 @@
 use bevy::prelude::*;
 use neko_maid::components::NekoUITree;
+use neko_maid::parse::value::PropertyValue;
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_plugins(neko_maid::NekoMaidPlugin)
         .add_systems(Startup, setup)
+        .add_systems(FixedUpdate, update_color)
         .run();
 }
 
@@ -15,3 +17,14 @@ fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
     let handle = asset_server.load("example.neko_ui");
     commands.spawn(NekoUITree::new(handle));
 }
+
+pub fn update_color(time: Res<Time>, mut q: Query<&mut NekoUITree>) {
+    for mut root in &mut q {
+        let h = (time.elapsed_secs_f64() % 4.0) / 4.0 * 360.0;
+        let color = Color::hsl(h as f32, 0.5, 0.3);
+        root.set_variable("color", PropertyValue::Color(color));
+
+        let width = 400.0 + f64::sin(time.elapsed_secs_f64()) * 100.0;
+        root.set_variable("width", PropertyValue::Number(width));
+    }
+}

examples/menu.rs

@@ -0,0 +1,17 @@
+use bevy::prelude::*;
+use neko_maid::components::NekoUITree;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("slots.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}

examples/slots.rs

@@ -0,0 +1,12 @@
+[package]
+name = "neko_derive"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+proc-macro = true
+
+[dependencies]
+syn = { version = "2", features = ["full"] }
+quote = "1"
+proc-macro2 = "1"

neko_derive/Cargo.toml

@@ -0,0 +1,37 @@
+use proc_macro::TokenStream;
+use quote::quote;
+use syn::{DeriveInput, LitStr, parse_macro_input};
+
+#[proc_macro_derive(NekoMarker, attributes(neko_marker))]
+pub fn derive_neko_marker(input: TokenStream) -> TokenStream {
+    let input = parse_macro_input!(input as DeriveInput);
+    let ident = &input.ident;
+
+    // Find #[neko_marker("...")]
+    let mut marker_value: Option<LitStr> = None;
+
+    for attr in &input.attrs {
+        if attr.path().is_ident("neko_marker") {
+            let lit: LitStr = attr
+                .parse_args()
+                .expect("neko_marker expects a string literal");
+            marker_value = Some(lit);
+        }
+    }
+
+    let marker_value = marker_value.expect("Missing #[neko_marker(\"...\")] attribute");
+
+    let expanded = quote! {
+        impl NekoMarker for #ident {
+            fn new() -> Self {
+                Self
+            }
+
+            fn id() -> &'static str {
+                #marker_value
+            }
+        }
+    };
+
+    expanded.into()
+}