Use parley main (use Brush for node id) (#183)

Signed-off-by: Nico Burns <[email protected]>

Cargo.toml

@@ -47,7 +47,7 @@ taffy = { git = "https://github.com/dioxuslabs/taffy", rev = "51e21564", default
 color = "0.2"
 peniko = "0.3"
 vello = { version = "0.4", features = [ "wgpu" ] }
-parley = { version = "0.2", git = "https://github.com/linebender/parley", rev = "b648f143" } # external-span-ids
+parley = { git = "https://github.com/linebender/parley", rev = "c961a82" }
 wgpu = "23"
 
 # SVG dependencies

packages/blitz-dom/src/layout/construct.rs

@@ -423,19 +423,16 @@ fn node_list_item_child(
     let position = match list_style_position {
         ListStylePosition::Inside => ListItemLayoutPosition::Inside,
         ListStylePosition::Outside => {
-            let mut parley_style = stylo_to_parley::style(&styles);
+            let mut parley_style = stylo_to_parley::style(child_id, &styles);
 
             if let Some(font_stack) = font_for_bullet_style(list_style_type) {
                 parley_style.font_stack = font_stack;
             }
 
             // Create a parley tree builder
-            let mut builder = doc.layout_ctx.tree_builder(
-                &mut doc.font_ctx,
-                doc.viewport.scale(),
-                child_id as u64,
-                &parley_style,
-            );
+            let mut builder =
+                doc.layout_ctx
+                    .tree_builder(&mut doc.font_ctx, doc.viewport.scale(), &parley_style);
 
             match &marker {
                 Marker::Char(char) => builder.push_text(&char.to_string()),
@@ -669,7 +666,7 @@ fn create_text_editor(doc: &mut BaseDocument, input_element_id: usize, is_multil
     let parley_style = node
         .primary_styles()
         .as_ref()
-        .map(|s| stylo_to_parley::style(s))
+        .map(|s| stylo_to_parley::style(node.id, s))
         .unwrap_or_default();
 
     let element = &mut node.data.downcast_element_mut().unwrap();
@@ -724,20 +721,17 @@ pub(crate) fn build_inline_layout(
 
     let parley_style = root_node_style
         .as_ref()
-        .map(|s| stylo_to_parley::style(s))
+        .map(|s| stylo_to_parley::style(inline_context_root_node_id, s))
         .unwrap_or_default();
 
     // dbg!(&parley_style);
 
     let root_line_height = parley_style.line_height;
 
     // Create a parley tree builder
-    let mut builder = doc.layout_ctx.tree_builder(
-        &mut doc.font_ctx,
-        doc.viewport.scale(),
-        inline_context_root_node_id as u64,
-        &parley_style,
-    );
+    let mut builder =
+        doc.layout_ctx
+            .tree_builder(&mut doc.font_ctx, doc.viewport.scale(), &parley_style);
 
     // Set whitespace collapsing mode
     let collapse_mode = root_node_style
@@ -887,15 +881,16 @@ pub(crate) fn build_inline_layout(
                                 height: 0.0,
                             });
                         } else if *tag_name == local_name!("br") {
-                            builder.push_style_modification_span(node_id as u64, &[]);
+                            // TODO: update span id for br spans
+                            builder.push_style_modification_span(&[]);
                             builder.set_white_space_mode(WhiteSpaceCollapse::Preserve);
                             builder.push_text("\n");
                             builder.pop_style_span();
                             builder.set_white_space_mode(collapse_mode);
                         } else {
                             let mut style = node
                                 .primary_styles()
-                                .map(|s| stylo_to_parley::style(&s))
+                                .map(|s| stylo_to_parley::style(node.id, &s))
                                 .unwrap_or_default();
 
                             // dbg!(&style);
@@ -909,7 +904,7 @@ pub(crate) fn build_inline_layout(
                             // dbg!(node_id);
                             // dbg!(&style);
 
-                            builder.push_style_span(node_id as u64, style);
+                            builder.push_style_span(style);
 
                             if let Some(before_id) = node.before {
                                 build_inline_layout_recursive(

packages/blitz-dom/src/layout/inline.rs

@@ -127,7 +127,9 @@ impl BaseDocument {
                             - pbw
                     });
 
-                inline_layout.layout.align(Some(alignment_width), alignment);
+                inline_layout
+                    .layout
+                    .align(Some(alignment_width), alignment, false);
 
                 // Store sizes and positions of inline boxes
                 for line in inline_layout.layout.lines() {

packages/blitz-dom/src/node.rs

@@ -1,4 +1,5 @@
 use atomic_refcell::{AtomicRef, AtomicRefCell};
+use color::{AlphaColor, Srgb};
 use image::DynamicImage;
 use keyboard_types::Modifiers;
 use markup5ever::{local_name, LocalName, QualName};
@@ -701,7 +702,29 @@ impl std::fmt::Debug for ListItemLayout {
     }
 }
 
-pub type TextBrush = peniko::Brush;
+#[derive(Debug, Clone, Default, PartialEq)]
+/// Parley Brush type for Blitz which contains a `peniko::Brush` and a Blitz node id
+pub struct TextBrush {
+    /// The node id for the span
+    pub id: usize,
+    /// Peniko brush for the span (represents text color)
+    pub brush: peniko::Brush,
+}
+
+impl TextBrush {
+    pub(crate) fn from_peniko_brush(brush: peniko::Brush) -> Self {
+        Self { id: 0, brush }
+    }
+    pub(crate) fn from_color(color: AlphaColor<Srgb>) -> Self {
+        Self::from_peniko_brush(peniko::Brush::Solid(color))
+    }
+    pub(crate) fn from_id_and_color(id: usize, color: AlphaColor<Srgb>) -> Self {
+        Self {
+            id,
+            brush: peniko::Brush::Solid(color),
+        }
+    }
+}
 
 #[derive(Clone)]
 pub struct TextLayout {
@@ -1066,7 +1089,8 @@ impl Node {
                     let scale = layout.scale();
 
                     Cluster::from_point(layout, x * scale, y * scale).map(|(cluster, _)| {
-                        let node_id = cluster.external_span_id() as usize;
+                        let style_index = cluster.glyphs().next().unwrap().style_index();
+                        let node_id = layout.styles()[style_index].brush.id;
                         HitResult { node_id, x, y }
                     })
                 } else {

packages/blitz-dom/src/stylo_to_parley.rs

@@ -31,7 +31,10 @@ pub(crate) fn white_space_collapse(input: stylo::WhiteSpaceCollapse) -> parley::
     }
 }
 
-pub(crate) fn style(style: &stylo::ComputedValues) -> parley::TextStyle<'static, TextBrush> {
+pub(crate) fn style(
+    span_id: usize,
+    style: &stylo::ComputedValues,
+) -> parley::TextStyle<'static, TextBrush> {
     let font_styles = style.get_font();
     // let text_styles = style.get_text();
     let itext_styles = style.get_inherited_text();
@@ -107,7 +110,7 @@ pub(crate) fn style(style: &stylo::ComputedValues) -> parley::TextStyle<'static,
         .text_decoration_color
         .as_absolute()
         .map(ToColorColor::as_color_color)
-        .map(peniko::Brush::Solid);
+        .map(TextBrush::from_color);
 
     parley::TextStyle {
         // font_stack: parley::FontStack::Single(FontFamily::Generic(GenericFamily::SystemUi)),
@@ -119,7 +122,7 @@ pub(crate) fn style(style: &stylo::ComputedValues) -> parley::TextStyle<'static,
         font_variations: parley::FontSettings::List(Cow::Borrowed(&[])),
         font_features: parley::FontSettings::List(Cow::Borrowed(&[])),
         locale: Default::default(),
-        brush: peniko::Brush::Solid(color),
+        brush: TextBrush::from_id_and_color(span_id, color),
         has_underline: itext_styles.text_decorations_in_effect.underline,
         underline_offset: Default::default(),
         underline_size: Default::default(),

packages/blitz-renderer-vello/src/renderer/render.rs

@@ -840,7 +840,7 @@ impl ElementCx<'_> {
 
                     scene
                         .draw_glyphs(font)
-                        .brush(&style.brush)
+                        .brush(&style.brush.brush)
                         .hint(true)
                         .transform(transform)
                         .glyph_transform(glyph_xform)
@@ -866,7 +866,13 @@ impl ElementCx<'_> {
                         let w = glyph_run.advance() as f64;
                         let y = (glyph_run.baseline() - offset + size / 2.0) as f64;
                         let line = kurbo::Line::new((x, y), (x + w, y));
-                        scene.stroke(&Stroke::new(size as f64), transform, brush, None, &line)
+                        scene.stroke(
+                            &Stroke::new(size as f64),
+                            transform,
+                            &brush.brush,
+                            None,
+                            &line,
+                        )
                     };
 
                     if let Some(underline) = &style.underline {