Skip to content

Commit

Permalink
fix: Show missing attributes in devtools (#801)
Browse files Browse the repository at this point in the history 
* fix: Show missing attributes in devtools

* fmt
  • Loading branch information
@marc2332
marc2332 authored Aug 3, 2024
1 parent 2312a96 commit 8177800
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 102 deletions.
162 changes: 61 additions & 101 deletions crates/core/src/node.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ use torin::{
alignment::Alignment,
direction::DirectionMode,
gaps::Gaps,
prelude::{
Content,
Position,
},
size::Size,
};

Expand Down Expand Up @@ -75,125 +79,79 @@ pub fn get_node_state(node: &DioxusNode) -> NodeState {
}

impl NodeState {
pub fn iter(&self) -> NodeStateIterator {
NodeStateIterator {
state: self,
curr: 0,
}
}
}

pub struct NodeStateIterator<'a> {
state: &'a NodeState,
curr: usize,
}

impl<'a> Iterator for NodeStateIterator<'a> {
type Item = (&'a str, AttributeType<'a>);

fn nth(&mut self, n: usize) -> Option<Self::Item> {
match n {
0 => Some(("width", AttributeType::Size(&self.state.size.width))),
1 => Some(("height", AttributeType::Size(&self.state.size.height))),
2 => Some((
"min_width",
AttributeType::Size(&self.state.size.minimum_width),
)),
3 => Some((
"min_height",
AttributeType::Size(&self.state.size.minimum_height),
)),
4 => Some((
"max_width",
AttributeType::Size(&self.state.size.maximum_width),
)),
5 => Some((
"max_height",
AttributeType::Size(&self.state.size.maximum_height),
)),
6 => Some((
"direction",
AttributeType::Direction(&self.state.size.direction),
)),
7 => Some(("padding", AttributeType::Measures(self.state.size.padding))),
8 => Some((
pub fn attributes(&self) -> Vec<(&str, AttributeType)> {
let mut attributes = vec![
("width", AttributeType::Size(&self.size.width)),
("height", AttributeType::Size(&self.size.height)),
("min_width", AttributeType::Size(&self.size.minimum_width)),
("min_height", AttributeType::Size(&self.size.minimum_height)),
("max_width", AttributeType::Size(&self.size.maximum_width)),
("max_height", AttributeType::Size(&self.size.maximum_height)),
("direction", AttributeType::Direction(&self.size.direction)),
("padding", AttributeType::Measures(self.size.padding)),
("margin", AttributeType::Measures(self.size.margin)),
("position", AttributeType::Position(&self.size.position)),
(
"main_alignment",
AttributeType::Alignment(&self.state.size.main_alignment),
)),
9 => Some((
AttributeType::Alignment(&self.size.main_alignment),
),
(
"cross_alignment",
AttributeType::Alignment(&self.state.size.cross_alignment),
)),
10 => {
let background = &self.state.style.background;
AttributeType::Alignment(&self.size.cross_alignment),
),
{
let background = &self.style.background;
let fill = match *background {
Fill::Color(_) => AttributeType::Color(background.clone()),
Fill::LinearGradient(_) => AttributeType::Gradient(background.clone()),
Fill::RadialGradient(_) => AttributeType::Gradient(background.clone()),
Fill::ConicGradient(_) => AttributeType::Gradient(background.clone()),
};
Some(("background", fill))
}
11 => Some(("border", AttributeType::Border(&self.state.style.border))),
12 => Some((
("background", fill)
},
("border", AttributeType::Border(&self.style.border)),
(
"corner_radius",
AttributeType::CornerRadius(self.state.style.corner_radius),
)),
13 => Some((
"color",
AttributeType::Color(self.state.font_style.color.into()),
)),
14 => Some((
AttributeType::CornerRadius(self.style.corner_radius),
),
("color", AttributeType::Color(self.font_style.color.into())),
(
"font_family",
AttributeType::Text(self.state.font_style.font_family.join(",")),
)),
15 => Some((
AttributeType::Text(self.font_style.font_family.join(",")),
),
(
"font_size",
AttributeType::Measure(self.state.font_style.font_size),
)),
16 => Some((
AttributeType::Measure(self.font_style.font_size),
),
(
"line_height",
AttributeType::Measure(self.state.font_style.line_height),
)),
17 => Some((
AttributeType::Measure(self.font_style.line_height),
),
(
"text_align",
AttributeType::TextAlignment(&self.state.font_style.text_align),
)),
18 => Some((
AttributeType::TextAlignment(&self.font_style.text_align),
),
(
"text_overflow",
AttributeType::TextOverflow(&self.state.font_style.text_overflow),
)),
19 => Some((
"offset_x",
AttributeType::Measure(self.state.size.offset_x.get()),
)),
20 => Some((
"offset_y",
AttributeType::Measure(self.state.size.offset_y.get()),
)),
n => {
let shadows = &self.state.style.shadows;
let shadow = shadows
.get(n - 21)
.map(|shadow| ("shadow", AttributeType::Shadow(shadow)));
AttributeType::TextOverflow(&self.font_style.text_overflow),
),
("offset_x", AttributeType::Measure(self.size.offset_x.get())),
("offset_y", AttributeType::Measure(self.size.offset_y.get())),
("content", AttributeType::Content(&self.size.content)),
];

if shadow.is_some() {
shadow
} else {
let text_shadows = &self.state.font_style.text_shadows;
text_shadows
.get(n - 21 + shadows.len())
.map(|text_shadow| ("text_shadow", AttributeType::TextShadow(text_shadow)))
}
}
let shadows = &self.style.shadows;
for shadow in shadows {
attributes.push(("shadow", AttributeType::Shadow(shadow)));
}
}

fn next(&mut self) -> Option<Self::Item> {
let current = self.curr;
self.curr += 1;
let text_shadows = &self.font_style.text_shadows;

for text_shadow in text_shadows {
attributes.push(("text_shadow", AttributeType::TextShadow(text_shadow)));
}

self.nth(current)
attributes
}
}

Expand All @@ -205,6 +163,8 @@ pub enum AttributeType<'a> {
Measures(Gaps),
CornerRadius(CornerRadius),
Direction(&'a DirectionMode),
Position(&'a Position),
Content(&'a Content),
Alignment(&'a Alignment),
Shadow(&'a Shadow),
TextShadow(&'a TextShadow),
Expand Down
20 changes: 19 additions & 1 deletion crates/devtools/src/tabs/style.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ pub fn NodeInspectorStyle(node_id: String) -> Element {
width: "100%".into(),
}
),
{node.state.iter().enumerate().map(|(i, (name, attr))| {
{node.state.attributes().into_iter().enumerate().map(|(i, (name, attr))| {
match attr {
AttributeType::Measure(measure) => {
rsx!{
Expand Down Expand Up @@ -118,6 +118,24 @@ pub fn NodeInspectorStyle(node_id: String) -> Element {
}
}
}
AttributeType::Position(position) => {
rsx!{
Property {
key: "{i}",
name: "{name}",
value: position.pretty()
}
}
}
AttributeType::Content(content) => {
rsx!{
Property {
key: "{i}",
name: "{name}",
value: content.pretty()
}
}
}
AttributeType::Alignment(alignment) => {
rsx!{
Property {
Expand Down
9 changes: 9 additions & 0 deletions crates/torin/src/values/content.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,12 @@ impl Content {
self == &Self::Fit
}
}

impl Content {
pub fn pretty(&self) -> String {
match self {
Self::Normal => "normal".to_owned(),
Self::Fit => "fit".to_owned(),
}
}
}
15 changes: 15 additions & 0 deletions crates/torin/src/values/position.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,18 @@ impl Scaled for Position {
}
}
}

impl Position {
pub fn pretty(&self) -> String {
match self {
Self::Stacked => "horizontal".to_string(),
Self::Absolute(positions) => format!(
"{}, {}, {}, {}",
positions.top.unwrap_or_default(),
positions.right.unwrap_or_default(),
positions.bottom.unwrap_or_default(),
positions.left.unwrap_or_default()
),
}
}
}

0 comments on commit 8177800

Please sign in to comment.