feat: Devtools fixes and improvements (#366)

* feat: Devtools fixes and improvements

* improvements

crates/components/src/scroll_views/scroll_bar.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{use_get_theme, ScrollbarTheme};
+use freya_hooks::use_get_theme;
 
 #[derive(Props)]
 pub struct ScrollBarProps<'a> {
@@ -17,12 +17,29 @@ pub struct ScrollBarProps<'a> {
 
     #[props(default = "0".to_string(), into)]
     offset_y: String,
+
+    clicking_scrollbar: bool,
+}
+
+enum ScrollBarStatus {
+    Idle,
+    Hovering,
 }
 
 #[allow(non_snake_case)]
 pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
+    let status = use_state(cx, || ScrollBarStatus::Idle);
     let theme = use_get_theme(cx);
-    let ScrollbarTheme { background, .. } = &theme.scrollbar;
+
+    let onmouseenter = |_| status.set(ScrollBarStatus::Hovering);
+
+    let onmouseleave = |_| status.set(ScrollBarStatus::Idle);
+
+    let background = match status.get() {
+        _ if cx.props.clicking_scrollbar => theme.scrollbar.background,
+        ScrollBarStatus::Hovering => theme.scrollbar.background,
+        ScrollBarStatus::Idle => "transparent",
+    };
 
     render!(
         rect {
@@ -33,6 +50,8 @@ pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
             offset_x: "{cx.props.offset_x}",
             offset_y: "{cx.props.offset_y}",
             background: "{background}",
+            onmouseenter: onmouseenter,
+            onmouseleave: onmouseleave,
             &cx.props.children
         }
     )

crates/components/src/scroll_views/scroll_view.rs

@@ -296,6 +296,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
                     width: "100%",
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
+                    clicking_scrollbar: is_scrolling_x,
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
@@ -308,6 +309,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
                 width: "{vertical_scrollbar_size}",
                 height: "100%",
                 offset_y: "{scrollbar_y}",
+                clicking_scrollbar: is_scrolling_y,
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,

crates/components/src/scroll_views/virtual_scroll_view.rs

@@ -49,6 +49,9 @@ pub struct VirtualScrollViewProps<'a, T: 'a> {
     /// Enable scrolling with arrow keys.
     #[props(default = true, into)]
     pub scroll_with_arrows: bool,
+    /// Tracker for the vertical scroll.
+    #[props(optional)]
+    pub scrolled_y: Option<UseRef<i32>>,
 }
 
 fn get_render_range(
@@ -347,6 +350,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) ->
                     width: "100%",
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
+                    clicking_scrollbar: is_scrolling_x,
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
@@ -359,6 +363,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) ->
                 width: "{vertical_scrollbar_size}",
                 height: "100%",
                 offset_y: "{scrollbar_y}",
+                clicking_scrollbar: is_scrolling_y,
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,

crates/core/src/node.rs

@@ -3,7 +3,7 @@ use freya_dom::prelude::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::{
     Border, CornerRadius, CursorSettings, Fill, FontStyleState, LayoutState, References, Shadow,
-    Style, Transform,
+    Style, TextOverflow, Transform,
 };
 use torin::{alignment::Alignment, direction::DirectionMode, gaps::Gaps, size::Size};
 
@@ -114,20 +114,28 @@ impl<'a> Iterator for NodeStateIterator<'a> {
                 "line_height",
                 AttributeType::Measure(self.state.font_style.line_height),
             )),
-            17 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))),
-            18 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))),
+            17 => Some((
+                "text_align",
+                AttributeType::TextAlignment(&self.state.font_style.text_align),
+            )),
+            18 => Some((
+                "text_overflow",
+                AttributeType::TextOverflow(&self.state.font_style.text_overflow),
+            )),
+            19 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))),
+            20 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))),
             n => {
                 let shadows = &self.state.style.shadows;
                 let shadow = shadows
-                    .get(n - 19)
+                    .get(n - 21)
                     .map(|shadow| ("shadow", AttributeType::Shadow(shadow)));
 
                 if shadow.is_some() {
                     shadow
                 } else {
                     let text_shadows = &self.state.font_style.text_shadows;
                     text_shadows
-                        .get(n - 19 + shadows.len())
+                        .get(n - 21 + shadows.len())
                         .map(|text_shadow| ("text_shadow", AttributeType::TextShadow(text_shadow)))
                 }
             }
@@ -155,4 +163,23 @@ pub enum AttributeType<'a> {
     TextShadow(&'a TextShadow),
     Text(String),
     Border(&'a Border),
+    TextAlignment(&'a TextAlign),
+    TextOverflow(&'a TextOverflow),
+}
+
+pub trait ExternalPretty {
+    fn pretty(&self) -> String;
+}
+
+impl ExternalPretty for TextAlign {
+    fn pretty(&self) -> String {
+        match self {
+            TextAlign::Left => "left".to_string(),
+            TextAlign::Right => "right".to_string(),
+            TextAlign::Center => "center".to_string(),
+            TextAlign::Justify => "justify".to_string(),
+            TextAlign::Start => "start".to_string(),
+            TextAlign::End => "end".to_string(),
+        }
+    }
 }

crates/devtools/src/tab.rs

@@ -54,24 +54,25 @@ pub fn TabButton<'a>(cx: Scope<'a, TabButtonProps<'a>>) -> Element<'a> {
         ButtonStatus::Idle => theme.button.background,
     };
     let color = theme.button.font_theme.color;
+    let border_fill = theme.button.border_fill;
     let content = cx.props.label;
 
     render!(
         rect {
+            margin: "2",
             overflow: "clip",
             background: "{background}",
             onclick: onclick,
             onmouseover: onmouseover,
             onmouseleave: onmouseleave,
-            width: "125",
             corner_radius: "7",
             height: "100%",
             color: "{color}",
-            padding: "7.5",
+            padding: "6 14",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            border: "1 solid {border_fill}",
+            main_align: "center",
             label {
-                text_align: "center",
-                height: "100%",
-                width: "100%",
                 content
             }
         }

crates/devtools/src/tabs/style.rs

@@ -141,6 +141,24 @@ pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element {
                                     }
                                 }
                             }
+                            AttributeType::TextAlignment(text_align) => {
+                                rsx!{
+                                    Property {
+                                        key: "{i}",
+                                        name: "{name}",
+                                        value: text_align.pretty()
+                                    }
+                                }
+                            }
+                            AttributeType::TextOverflow(text_overflow) => {
+                                rsx!{
+                                    Property {
+                                        key: "{i}",
+                                        name: "{name}",
+                                        value: text_overflow.pretty()
+                                    }
+                                }
+                            }
                         }
                     })
                 }

crates/state/src/values/font.rs

@@ -114,6 +114,14 @@ impl TextOverflow {
             Self::Custom(custom) => Some(custom),
         }
     }
+
+    pub fn pretty(&self) -> String {
+        match self {
+            TextOverflow::Clip => "clip".to_string(),
+            TextOverflow::Ellipsis => "ellipsis".to_string(),
+            TextOverflow::Custom(text_overflow) => text_overflow.to_string(),
+        }
+    }
 }
 
 #[derive(Debug, PartialEq, Eq)]

crates/torin/src/values/alignment.rs

@@ -12,6 +12,10 @@ impl Alignment {
     }
 
     pub fn pretty(&self) -> String {
-        format!("{self:?}")
+        match self {
+            Alignment::Start => "start".to_string(),
+            Alignment::Center => "center".to_string(),
+            Alignment::End => "end".to_string(),
+        }
     }
 }

crates/torin/src/values/size.rs

@@ -21,7 +21,7 @@ impl Default for Size {
 impl Size {
     pub fn pretty(&self) -> String {
         match self {
-            Size::Inner => "inner".to_string(),
+            Size::Inner => "auto".to_string(),
             Size::Pixels(s) => format!("{}", s.get()),
             Size::DynamicCalculations(calcs) => format!(
                 "calc({})",