osui-rs/osui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

ghost elements

Browse Source
This commit is contained in:
selimaj-dev
2024-12-24 13:15:19 +01:00
parent e98285a360
commit ea7e9c1e1c
6 changed files with 112 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css.rs
+40 -10
View File
@@ -38,25 +38,55 @@ macro_rules! __css {
macro_rules! _css { macro_rules! _css {
($_style:expr,) => {}; ($_style:expr,) => {};
( (
$hm:expr, $name:literal { $($inner:tt)* } $($rest:tt)* $hm:expr, $($($name:ident)-+),* { $($inner:tt)* } $($rest:tt)*
) => {{ ) => {{
let mut _style = $crate::ui::StyleElement::default(); let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*); $crate::__css!(_style, $($inner)*);
$hm.insert( $(
$crate::ui::StyleName::Class(String::from($name)), $hm.insert(
_style, $crate::ui::StyleName::Class(String::from(stringify!($($name)-+).replace(' ', ""))),
); _style.clone(),
);
)*
$crate::_css!($hm, $($rest)*); $crate::_css!($hm, $($rest)*);
}}; }};
( (
$hm:expr, $name:literal: $state:literal { $($inner:tt)* } $($rest:tt)* $hm:expr, $($($name:ident)-+),*: $state:literal { $($inner:tt)* } $($rest:tt)*
) => {{ ) => {{
let mut _style = $crate::ui::StyleElement::default(); let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*); $crate::__css!(_style, $($inner)*);
$hm.insert( $(
$crate::ui::StyleName::ClassState(String::from($name), String::from($state)), $hm.insert(
_style, $crate::ui::StyleName::ClassState(String::from(stringify!($($name)-+).replace(' ', "")), String::from($state)),
); _style.clone(),
);
)*
$crate::_css!($hm, $($rest)*);
}};
(
$hm:expr, $($name:literal),+ { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::Class(String::from($name)),
_style,
);
)+
$crate::_css!($hm, $($rest)*);
}};
(
$hm:expr, $($name:literal),+: $state:literal { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::ClassState(String::from($name), String::from($state)),
_style,
);
)+
$crate::_css!($hm, $($rest)*); $crate::_css!($hm, $($rest)*);
}}; }};
} }
src/examples.rs
+10 -9
View File
@@ -22,7 +22,7 @@ pub mod counter_example {
pub fn styling() -> Css { pub fn styling() -> Css {
css! { css! {
"btn" { btn {
outline: true, outline: true,
outline_color: Red outline_color: Red
} }
@@ -39,6 +39,7 @@ pub mod todo_example {
rsx! { rsx! {
@SetStyle(styling()) @SetStyle(styling())
@SetChild(2)
text { class: "title", static "Todo list app made with OSUI" } text { class: "title", static "Todo list app made with OSUI" }
text { class: "title", "{}", "-".repeat(crossterm::terminal::size().unwrap().0 as usize) } text { class: "title", "{}", "-".repeat(crossterm::terminal::size().unwrap().0 as usize) }
@@ -56,27 +57,27 @@ pub mod todo_example {
pub fn styling() -> Css { pub fn styling() -> Css {
css! { css! {
"todo" { todo {
x: 0 px, x: 0 px,
y: Auto, y: Auto,
color: Red, color: Red,
} }
"todo": "hover" { todo: "hover" {
color: Blue, color: Blue,
} }
"complete" { complete {
x: 0 px, x: 0 px,
y: Auto, y: Auto,
color: Green, color: Green,
} }
"complete": "hover" { complete: "hover" {
color: Cyan color: Cyan
} }
"title" { title {
x: 0 px, x: 0 px,
y: Auto, y: Auto,
} }
"title": "hover" { title: "hover" {
color: Blue color: Blue
} }
} }
@@ -115,14 +116,14 @@ pub mod login_example {
pub fn styling() -> Css { pub fn styling() -> Css {
css! { css! {
"input" { input {
width: 50 px, width: 50 px,
outline: true, outline: true,
y: Auto, y: Auto,
x: 0 px, x: 0 px,
caret: String::new(), caret: String::new(),
} }
"input": "hover" { input: "hover" {
outline_color: Red, outline_color: Red,
caret: String::from("█"), caret: String::from("█"),
} }
src/main.rs
+13 -16
View File
@@ -6,9 +6,20 @@ fn main() {
#[component] #[component]
pub fn App() { pub fn App() {
rsx! { rsx! {
@SetStyle(app_style()) @SetChild(1)
@SetStyle(css! {
example {
outline: true,
y: Auto,
x: 0 px,
}
example: "hover" {
color: Blue,
outline_color: Red,
}
})
text { static "Select an example" } %text { class: "red-bg", static "Select an example" }
button { class: "example", on_click: fn(_, _, document) { button { class: "example", on_click: fn(_, _, document) {
document.clear_css(); document.clear_css();
@@ -26,17 +37,3 @@ pub fn App() {
}, static "Login" } }, static "Login" }
} }
} }
pub fn app_style() -> Css {
css! {
"example" {
outline: true,
y: Auto,
x: 0 px,
}
"example": "hover" {
color: Blue,
outline_color: Red,
}
}
}
src/rsx.rs
+10
View File
@@ -12,6 +12,16 @@ macro_rules! check_expr {
} }
#[macro_export] #[macro_export]
macro_rules! parse_rsx_param { macro_rules! parse_rsx_param {
($elem:expr, %$elem_path:path { $($inner:tt)* } $($rest:tt)*) => {
$elem.ghosts.push($elem.ghosts.len());
if let $crate::Children::Children(children, _) = &mut $elem.children {
children.push($crate::ersx!($elem_path { $($inner)* }));
} else {
$elem.children = $crate::Children::Children(vec![$crate::ersx!($elem_path { $($inner)* })], 0)
}
osui::parse_rsx_param!($elem, $($rest)*)
};
($elem:expr, @ $($i:ident)::+($($inner:tt)*) $($rest:tt)*) => { ($elem:expr, @ $($i:ident)::+($($inner:tt)*) $($rest:tt)*) => {
$elem.instructions.push($($i)::+($($inner)*)); $elem.instructions.push($($i)::+($($inner)*));
osui::parse_rsx_param!($elem, $($rest)*); osui::parse_rsx_param!($elem, $($rest)*);
src/ui/mod.rs
+25
View File
@@ -32,12 +32,15 @@ pub fn text<'a>(class: &'a str, id: &'a str, children: Children, style: Style) -
#[derive(Debug)] #[derive(Debug)]
pub enum Instruction { pub enum Instruction {
SetStyle(Css), SetStyle(Css),
SetChild(usize),
Ghost(usize),
} }
#[element] #[element]
#[derive(Default, Debug)] #[derive(Default, Debug)]
pub struct Div { pub struct Div {
pub instructions: Vec<Instruction>, pub instructions: Vec<Instruction>,
pub ghosts: Vec<usize>,
} }
impl ElementWidget for Div<'_> { impl ElementWidget for Div<'_> {
@@ -63,6 +66,13 @@ impl ElementWidget for Div<'_> {
} else { } else {
*i = 0; *i = 0;
} }
while self.ghosts.get(*i).is_some() {
if *i < l - 1 {
*i += 1;
} else {
*i = 0;
}
}
child.event(Event::FocusGained, document); child.event(Event::FocusGained, document);
} }
KeyCode::BackTab => { KeyCode::BackTab => {
@@ -72,6 +82,13 @@ impl ElementWidget for Div<'_> {
} else { } else {
*i = l - 1; *i = l - 1;
} }
while self.ghosts.get(*i).is_some() {
if *i > 0 {
*i -= 1;
} else {
*i = l - 1;
}
}
child.event(Event::FocusGained, document); child.event(Event::FocusGained, document);
} }
_ => child.event(event, document), _ => child.event(event, document),
@@ -87,6 +104,12 @@ impl ElementWidget for Div<'_> {
Instruction::SetStyle(s) => { Instruction::SetStyle(s) => {
document.css.extend(s.clone().into_iter()); document.css.extend(s.clone().into_iter());
} }
Instruction::SetChild(c) => {
self.children.set_index(*c);
}
Instruction::Ghost(idx) => {
self.ghosts.push(*idx);
}
} }
} }
} }
@@ -99,6 +122,7 @@ pub fn div<'a>(
children: Children, children: Children,
style: Style, style: Style,
instructions: Vec<Instruction>, instructions: Vec<Instruction>,
ghosts: Vec<usize>,
) -> Box<Div<'a>> { ) -> Box<Div<'a>> {
Box::new(Div { Box::new(Div {
children: self.children, children: self.children,
@@ -106,6 +130,7 @@ pub fn div<'a>(
id: self.id, id: self.id,
style: self.style, style: self.style,
instructions: self.instructions, instructions: self.instructions,
ghosts: self.ghosts,
}) })
} }
src/utils.rs
+14 -12
View File
@@ -26,19 +26,21 @@ impl<'a> Frame<'a> {
let style = element.get_style(); let style = element.get_style();
let mut style_element = style.clone().get(focused); let mut style_element = style.clone().get(focused);
if let Some(upper) = self.css.get(&ui::StyleName::Class(element.get_class())) { for class in element.get_class().split(" ") {
style_element.merge(upper); if let Some(upper) = self.css.get(&ui::StyleName::Class(class.to_string())) {
} style_element.merge(upper);
}
if let Some(upper) = self.css.get(&ui::StyleName::ClassState( if let Some(upper) = self.css.get(&ui::StyleName::ClassState(
element.get_class(), class.to_string(),
if style.2 == "" && focused { if style.2 == "" && focused {
"hover".to_string() "hover".to_string()
} else { } else {
style.2.clone() style.2.clone()
}, },
)) { )) {
style_element.merge(upper); style_element.merge(upper);
}
} }
if style_element.visible.1 { if style_element.visible.1 {