Implement inline box layout (#67)

### Objective

- Resolve #25 

### Changes made

The concept of a "layout item" has been introduced. This is either a run
of text or an inline box.

Author: nicoburns

examples/swash_render/src/main.rs

@@ -6,9 +6,9 @@
 
 use image::codecs::png::PngEncoder;
 use image::{self, Pixel, Rgba, RgbaImage};
-use parley::layout::{Alignment, Glyph, GlyphRun, Layout};
+use parley::layout::{Alignment, Glyph, GlyphRun, Layout, PositionedLayoutItem};
 use parley::style::{FontStack, FontWeight, StyleProperty};
-use parley::{FontContext, LayoutContext};
+use parley::{FontContext, InlineBox, LayoutContext};
 use peniko::Color;
 use std::fs::File;
 use swash::scale::image::Content;
@@ -63,11 +63,25 @@ fn main() {
     let bold_style = StyleProperty::FontWeight(bold);
     builder.push(&bold_style, 0..4);
 
+    builder.push_inline_box(InlineBox {
+        id: 0,
+        index: 40,
+        width: 50.0,
+        height: 50.0,
+    });
+    builder.push_inline_box(InlineBox {
+        id: 1,
+        index: 50,
+        width: 50.0,
+        height: 30.0,
+    });
+
     // Build the builder into a Layout
     let mut layout: Layout<Color> = builder.build();
 
     // Perform layout (including bidi resolution and shaping) with start alignment
-    layout.break_all_lines(max_advance, Alignment::Start);
+    layout.break_all_lines(max_advance);
+    layout.align(max_advance, Alignment::Start);
 
     // Create image to render into
     let width = layout.width().ceil() as u32 + (padding * 2);
@@ -77,8 +91,21 @@ fn main() {
     // Iterate over laid out lines
     for line in layout.lines() {
         // Iterate over GlyphRun's within each line
-        for glyph_run in line.glyph_runs() {
-            render_glyph_run(&mut scale_cx, &glyph_run, &mut img, padding);
+        for item in line.items() {
+            match item {
+                PositionedLayoutItem::GlyphRun(glyph_run) => {
+                    render_glyph_run(&mut scale_cx, &glyph_run, &mut img, padding);
+                }
+                PositionedLayoutItem::InlineBox(inline_box) => {
+                    for x_off in 0..(inline_box.width.floor() as u32) {
+                        for y_off in 0..(inline_box.height.floor() as u32) {
+                            let x = inline_box.x as u32 + x_off + padding;
+                            let y = inline_box.y as u32 + y_off + padding;
+                            img.put_pixel(x, y, Rgba([0, 0, 0, 255]));
+                        }
+                    }
+                }
+            };
         }
     }
 

examples/tiny_skia_render/src/main.rs

@@ -7,16 +7,16 @@
 //! Note: Emoji rendering is not currently implemented in this example. See the swash example
 //! if you need emoji rendering.
 
-use parley::layout::{Alignment, GlyphRun, Layout};
+use parley::layout::{Alignment, GlyphRun, Layout, PositionedLayoutItem};
 use parley::style::{FontStack, FontWeight, StyleProperty};
-use parley::{FontContext, LayoutContext};
+use parley::{FontContext, InlineBox, LayoutContext};
 use peniko::Color as PenikoColor;
 use skrifa::instance::{LocationRef, NormalizedCoord, Size};
 use skrifa::outline::{DrawSettings, OutlinePen};
 use skrifa::raw::FontRef as ReadFontsRef;
 use skrifa::{GlyphId, MetadataProvider, OutlineGlyph};
 use tiny_skia::{
-    Color as TinySkiaColor, FillRule, Paint, PathBuilder, Pixmap, PixmapMut, Transform,
+    Color as TinySkiaColor, FillRule, Paint, PathBuilder, Pixmap, PixmapMut, Rect, Transform,
 };
 
 fn main() {
@@ -64,11 +64,19 @@ fn main() {
     let bold_style = StyleProperty::FontWeight(bold);
     builder.push(&bold_style, 0..4);
 
+    builder.push_inline_box(InlineBox {
+        id: 0,
+        index: 40,
+        width: 50.0,
+        height: 50.0,
+    });
+
     // Build the builder into a Layout
     let mut layout: Layout<PenikoColor> = builder.build();
 
     // Perform layout (including bidi resolution and shaping) with start alignment
-    layout.break_all_lines(max_advance, Alignment::Start);
+    layout.break_all_lines(max_advance);
+    layout.align(max_advance, Alignment::Start);
     let width = layout.width().ceil() as u32;
     let height = layout.height().ceil() as u32;
     let padded_width = width + padding * 2;
@@ -85,8 +93,17 @@ fn main() {
 
     // Render each glyph run
     for line in layout.lines() {
-        for glyph_run in line.glyph_runs() {
-            render_glyph_run(&glyph_run, &mut pen, padding);
+        for item in line.items() {
+            match item {
+                PositionedLayoutItem::GlyphRun(glyph_run) => {
+                    render_glyph_run(&glyph_run, &mut pen, padding);
+                }
+                PositionedLayoutItem::InlineBox(inline_box) => {
+                    pen.set_origin(inline_box.x + padding as f32, inline_box.y + padding as f32);
+                    pen.set_color(to_tiny_skia(foreground_color));
+                    pen.fill_rect(inline_box.width, inline_box.height);
+                }
+            };
         }
     }
 
@@ -177,6 +194,12 @@ impl TinySkiaPen<'_> {
         self.paint.set_color(color);
     }
 
+    fn fill_rect(&mut self, width: f32, height: f32) {
+        let rect = Rect::from_xywh(self.x, self.y, width, height).unwrap();
+        self.pixmap
+            .fill_rect(rect, &self.paint, Transform::identity(), None);
+    }
+
     fn draw_glyph(
         &mut self,
         glyph: &OutlineGlyph<'_>,

parley/src/context.rs

@@ -20,11 +20,14 @@ use swash::text::cluster::CharInfo;
 
 use core::ops::RangeBounds;
 
+use crate::inline_box::InlineBox;
+
 /// Context for building a text layout.
 pub struct LayoutContext<B: Brush = [u8; 4]> {
     bidi: bidi::BidiResolver,
     rcx: ResolveContext,
     styles: Vec<RangedStyle<B>>,
+    inline_boxes: Vec<InlineBox>,
     rsb: RangedStyleBuilder<B>,
     info: Vec<(CharInfo, u16)>,
     scx: ShapeContext,
@@ -36,6 +39,7 @@ impl<B: Brush> LayoutContext<B> {
             bidi: bidi::BidiResolver::new(),
             rcx: ResolveContext::default(),
             styles: vec![],
+            inline_boxes: vec![],
             rsb: RangedStyleBuilder::default(),
             info: vec![],
             scx: ShapeContext::default(),
@@ -112,6 +116,10 @@ impl<'a, B: Brush, T: TextSource> RangedBuilder<'a, B, T> {
         self.lcx.rsb.push(resolved, range);
     }
 
+    pub fn push_inline_box(&mut self, inline_box: InlineBox) {
+        self.lcx.inline_boxes.push(inline_box);
+    }
+
     #[cfg(feature = "std")]
     pub fn build_into(&mut self, layout: &mut Layout<B>) {
         layout.data.clear();
@@ -121,6 +129,7 @@ impl<'a, B: Brush, T: TextSource> RangedBuilder<'a, B, T> {
         let is_empty = text.is_empty();
         if is_empty {
             // Force a layout to have at least one line.
+            // TODO: support layouts with no text
             text = " ";
         }
         layout.data.has_bidi = !lcx.bidi.levels().is_empty();
@@ -135,44 +144,42 @@ impl<'a, B: Brush, T: TextSource> RangedBuilder<'a, B, T> {
                 char_index += 1;
             }
         }
-        use super::layout::{Decoration, Style};
-        fn conv_deco<B: Brush>(
-            deco: &ResolvedDecoration<B>,
-            default_brush: &B,
-        ) -> Option<Decoration<B>> {
-            if deco.enabled {
-                Some(Decoration {
-                    brush: deco.brush.clone().unwrap_or_else(|| default_brush.clone()),
-                    offset: deco.offset,
-                    size: deco.size,
-                })
-            } else {
-                None
-            }
-        }
-        layout.data.styles.extend(lcx.styles.iter().map(|s| {
-            let s = &s.style;
-            Style {
-                brush: s.brush.clone(),
-                underline: conv_deco(&s.underline, &s.brush),
-                strikethrough: conv_deco(&s.strikethrough, &s.brush),
-                line_height: s.line_height,
-            }
-        }));
+
+        // Copy the visual styles into the layout
+        layout
+            .data
+            .styles
+            .extend(lcx.styles.iter().map(|s| s.style.as_layout_style()));
+
+        // Sort the inline boxes as subsequent code assumes that they are in text index order.
+        // Note: It's important that this is a stable sort to allow users to control the order of contiguous inline boxes
+        lcx.inline_boxes.sort_by_key(|b| b.index);
+
+        // dbg!(&lcx.inline_boxes);
+
         {
             let query = fcx.collection.query(&mut fcx.source_cache);
             super::shape::shape_text(
                 &lcx.rcx,
                 query,
                 &lcx.styles,
+                &lcx.inline_boxes,
                 &lcx.info,
                 lcx.bidi.levels(),
                 &mut lcx.scx,
                 text,
                 layout,
             );
         }
+
+        // Move inline boxes into the layout
+        layout.data.inline_boxes.clear();
+        core::mem::swap(&mut layout.data.inline_boxes, &mut lcx.inline_boxes);
+
         layout.data.finish();
+
+        // Extra processing if the text is empty
+        // TODO: update this logic to work with inline boxes
         if is_empty {
             layout.data.text_len = 0;
             let run = &mut layout.data.runs[0];

parley/src/inline_box.rs

@@ -0,0 +1,17 @@
+// Copyright 2024 the Parley Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+/// A box to be laid out inline with text
+#[derive(Debug, Clone)]
+pub struct InlineBox {
+    /// User-specified identifier for the box, which can be used by the user to determine which box in
+    /// parley's output corresponds to which box in it's input.
+    pub id: u64,
+    /// The byte offset into the underlying text string at which the box should be placed.
+    /// This must not be within a unicode code point.
+    pub index: usize,
+    /// The width of the box in pixels
+    pub width: f32,
+    /// The height of the box in pixels
+    pub height: f32,
+}

parley/src/layout/alignment.rs

@@ -0,0 +1,132 @@
+// Copyright 2024 the Parley Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::{Alignment, BreakReason, LayoutData};
+use crate::style::Brush;
+
+pub(crate) fn align<B: Brush>(
+    layout: &mut LayoutData<B>,
+    alignment_width: Option<f32>,
+    alignment: Alignment,
+) {
+    let alignment_width = alignment_width.unwrap_or_else(|| {
+        let max_line_length = layout
+            .lines
+            .iter()
+            .map(|line| line.metrics.advance)
+            .max_by(f32::total_cmp)
+            .unwrap_or(0.0);
+        max_line_length.min(max_line_length)
+    });
+
+    // Apply alignment to line items
+    for line in &mut layout.lines {
+        // TODO: remove this field
+        line.alignment = alignment;
+
+        // Compute free space.
+        let free_space = alignment_width - line.metrics.advance + line.metrics.trailing_whitespace;
+
+        // Alignment only applies if free_space > 0
+        if free_space <= 0. {
+            continue;
+        }
+
+        match alignment {
+            Alignment::Start => {
+                // Do nothing
+            }
+            Alignment::End => {
+                line.metrics.offset = free_space;
+            }
+            Alignment::Middle => {
+                line.metrics.offset = free_space * 0.5;
+            }
+            Alignment::Justified => {
+                if line.break_reason == BreakReason::None || line.num_spaces == 0 {
+                    continue;
+                }
+
+                let adjustment = free_space / line.num_spaces as f32;
+                let mut applied = 0;
+                for line_item in layout.line_items[line.item_range.clone()]
+                    .iter()
+                    .filter(|item| item.is_text_run())
+                {
+                    // Iterate over clusters in the run
+                    //   - Iterate forwards for even bidi levels (which represent RTL runs)
+                    //   - Iterate backwards for odd bidi levels (which represent RTL runs)
+                    let clusters = &mut layout.clusters[line_item.cluster_range.clone()];
+                    let bidi_level_is_odd = line_item.bidi_level & 1 != 0;
+                    if bidi_level_is_odd {
+                        for cluster in clusters.iter_mut().rev() {
+                            if applied == line.num_spaces {
+                                break;
+                            }
+                            if cluster.info.whitespace().is_space_or_nbsp() {
+                                cluster.advance += adjustment;
+                                applied += 1;
+                            }
+                        }
+                    } else {
+                        for cluster in clusters.iter_mut() {
+                            if applied == line.num_spaces {
+                                break;
+                            }
+                            if cluster.info.whitespace().is_space_or_nbsp() {
+                                cluster.advance += adjustment;
+                                applied += 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Removes previous justification applied to clusters.
+/// This is part of resetting state in preparation for re-linebreaking the same layout.
+pub(crate) fn unjustify<B: Brush>(layout: &mut LayoutData<B>) {
+    for line in &layout.lines {
+        if line.alignment == Alignment::Justified
+            && line.max_advance.is_finite()
+            && line.max_advance < f32::MAX
+        {
+            let extra = line.max_advance - line.metrics.advance + line.metrics.trailing_whitespace;
+            if line.break_reason != BreakReason::None && line.num_spaces != 0 {
+                let adjustment = extra / line.num_spaces as f32;
+                let mut applied = 0;
+                for line_run in layout.line_items[line.item_range.clone()]
+                    .iter()
+                    .filter(|item| item.is_text_run())
+                {
+                    if line_run.bidi_level & 1 != 0 {
+                        for cluster in layout.clusters[line_run.cluster_range.clone()]
+                            .iter_mut()
+                            .rev()
+                        {
+                            if applied == line.num_spaces {
+                                break;
+                            }
+                            if cluster.info.whitespace().is_space_or_nbsp() {
+                                cluster.advance -= adjustment;
+                                applied += 1;
+                            }
+                        }
+                    } else {
+                        for cluster in layout.clusters[line_run.cluster_range.clone()].iter_mut() {
+                            if applied == line.num_spaces {
+                                break;
+                            }
+                            if cluster.info.whitespace().is_space_or_nbsp() {
+                                cluster.advance -= adjustment;
+                                applied += 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}