app/text: add letter spacing property

bin/app/src/app/node.rs

@@ -538,6 +538,14 @@ pub fn create_text(name: &str) -> SceneNode {
     prop.allow_exprs();
     node.add_property(prop).unwrap();
 
+    let mut prop =
+        Property::new("letter_spacing", PropertyType::Float32, PropertySubType::Null, PERM_STYLE);
+    prop.set_ui_text("Letter Spacing", "Extra spacing between letters");
+    prop.set_defaults_f32(vec![0.]).unwrap();
+    prop.set_range_f32(-100., 1000.);
+    prop.allow_exprs();
+    node.add_property(prop).unwrap();
+
     let mut prop = Property::new("text_align", PropertyType::Enum, PropertySubType::Null, PERM_APP);
     prop.set_enum_items(vec!["start", "end", "left", "center", "right", "justify"]).unwrap();
     prop.set_defaults_str(vec!["start".to_string()]).unwrap();

bin/app/src/app/schema/wallet/util.rs

@@ -188,6 +188,7 @@ pub async fn create_title(
     let prop = node.get_property("text_color").unwrap();
     prop.set_default_f32_multi(&[0.6471, 0.8667, 0.8157, 1.]).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
+    node.set_property_f32(atom, Role::App, "letter_spacing", TITLE_FONTSIZE * 0.11).unwrap();
     let node = node
         .setup(|me| {
             Text::new(

bin/app/src/text/mod.rs

@@ -169,6 +169,7 @@ pub fn make_layout(
         text_color,
         font_size,
         lineheight,
+        0.,
         window_scale,
         width,
         underlines,
@@ -183,6 +184,7 @@ pub fn make_layout2(
     text_color: Color,
     font_size: f32,
     lineheight: f32,
+    letter_spacing: f32,
     window_scale: f32,
     width: Option<f32>,
     underlines: &[Range<usize>],
@@ -195,6 +197,7 @@ pub fn make_layout2(
         text_color,
         font_size,
         lineheight,
+        letter_spacing,
         window_scale,
         width,
         underlines,
@@ -211,6 +214,7 @@ pub fn make_layout_with_indent(
     text_color: Color,
     font_size: f32,
     lineheight: f32,
+    letter_spacing: f32,
     window_scale: f32,
     width: Option<f32>,
     underlines: &[Range<usize>],
@@ -229,6 +233,7 @@ pub fn make_layout_with_indent(
         builder.push_default(parley::StyleProperty::from(FONT_STACK));
         builder.push_default(parley::StyleProperty::Brush(text_color));
         builder.push_default(parley::StyleProperty::OverflowWrap(overflow_wrap));
+        builder.push_default(parley::StyleProperty::LetterSpacing(letter_spacing));
 
         for underline in underlines {
             builder.push(parley::StyleProperty::Underline(true), underline.clone());

bin/app/src/ui/chatview/msg/privmsg.rs

@@ -386,6 +386,7 @@ impl PrivMsgNode {
             sig.body_color,
             sig.font_size,
             line_height / sig.font_size,
+            0.,
             window_scale,
             Some(sig.width),
             &[],

bin/app/src/ui/dropdown.rs

@@ -322,6 +322,7 @@ impl Dropdown {
                     text_color,
                     font_size,
                     1.,
+                    0.,
                     window_scale,
                     None,
                     &[],

bin/app/src/ui/text.rs

@@ -56,6 +56,7 @@ pub struct Text {
     font_size: PropertyFloat32,
     text_color: PropertyColor,
     lineheight: PropertyFloat32,
+    letter_spacing: PropertyFloat32,
     text_align: PropertyEnum,
     overflow_wrap: PropertyEnum,
     use_i18n: PropertyBool,
@@ -85,6 +86,8 @@ impl Text {
         let font_size = PropertyFloat32::wrap(node_ref, Role::Internal, "font_size", 0).unwrap();
         let text_color = PropertyColor::wrap(node_ref, Role::Internal, "text_color").unwrap();
         let lineheight = PropertyFloat32::wrap(node_ref, Role::Internal, "lineheight", 0).unwrap();
+        let letter_spacing =
+            PropertyFloat32::wrap(node_ref, Role::Internal, "letter_spacing", 0).unwrap();
         let text_align = PropertyEnum::wrap(node_ref, Role::Internal, "text_align", 0).unwrap();
         let overflow_wrap =
             PropertyEnum::wrap(node_ref, Role::Internal, "overflow_wrap", 0).unwrap();
@@ -109,6 +112,7 @@ impl Text {
             font_size,
             text_color,
             lineheight,
+            letter_spacing,
             text_align,
             overflow_wrap,
             use_i18n,
@@ -125,6 +129,7 @@ impl Text {
         let text = self.text.get();
         let font_size = self.font_size.get();
         let lineheight = self.lineheight.get();
+        let letter_spacing = self.letter_spacing.get();
         let text_color = self.text_color.get();
         let window_scale = self.window_scale.get();
         let width = self.rect.get_width();
@@ -158,6 +163,7 @@ impl Text {
             text_color,
             font_size,
             lineheight,
+            letter_spacing,
             window_scale,
             Some(width),
             &[],
@@ -197,6 +203,7 @@ impl Text {
         self.text_color.eval(atom).expect("text_color");
         self.font_size.eval(atom).expect("font_size");
         self.lineheight.eval(atom).expect("lineheight");
+        self.letter_spacing.eval(atom).expect("letter_spacing");
 
         // Layout depends on the width, so a rect change invalidates the
         // layout even if the text itself did not change. Compute under the
@@ -269,6 +276,10 @@ impl UIObject for Text {
             self_.draw_cache.clear();
             self_.redraw.trigger();
         });
+        on_modify.when_change_external(self.letter_spacing.prop(), |self_, _| async move {
+            self_.draw_cache.clear();
+            self_.redraw.trigger();
+        });
         on_modify.when_change_external(self.text_color.prop(), |self_, _| async move {
             self_.draw_cache.clear();
             self_.redraw.trigger();

bin/app/src/ui/text_scramble.rs

@@ -246,6 +246,7 @@ impl TextScramble {
             text_color,
             font_size,
             lineheight,
+            0.,
             window_scale,
             Some(width),
             &[],