Merge pull request #7588 from penpot/elenatorro-fix-text-tests

🔧 Fix text align selrect

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -255,8 +255,8 @@ test("Renders a file with different text leaves decoration", async ({
   );
 
   await workspace.goToWorkspace({
-    id: "15b74473-2908-8094-8006-bdb4fbd2c6a3",
-    pageId: "15b74473-2908-8094-8006-bdb4fbd2c6a4",
+    id: "15b74473-2908-8094-8006-bda76b230c6a",
+    pageId: "b4cb802d-4245-807d-8006-b4a4b90b79cd",
   });
 
   await workspace.waitForFirstRender();

render-wasm/src/render.rs

@@ -616,6 +616,7 @@ impl RenderState {
                     text_content.paragraph_builder_group_from_text(Some(true));
                 let mut stroke_paragraphs_list = shape
                     .visible_strokes()
+                    .rev()
                     .map(|stroke| {
                         text::stroke_paragraph_builder_group_from_text(
                             &text_content,
@@ -629,6 +630,7 @@ impl RenderState {
 
                 let mut stroke_paragraphs_with_shadows_list = shape
                     .visible_strokes()
+                    .rev()
                     .map(|stroke| {
                         text::stroke_paragraph_builder_group_from_text(
                             &text_content,

render-wasm/src/render/text.rs

@@ -200,47 +200,45 @@ fn draw_text(
     shape: &Shape,
     paragraph_builder_groups: &mut [Vec<ParagraphBuilder>],
 ) {
-    let container_height = if let crate::shapes::Type::Text(text_content) = &shape.shape_type {
-        text_content.size.height
-    } else {
-        shape.selrect().height()
-    };
-
-    let paragraph_width = shape.selrect().width();
-    let total_content_height =
-        calculate_all_paragraphs_height(paragraph_builder_groups, paragraph_width);
-
+    let text_content = shape.get_text_content();
+    // FIXME: this does not always return the height we need
+    // let text_height = text_content.size.height;
+    let text_width = text_content.get_width();
+    let text_height = text_content.get_height(text_width);
+    let selrect_height = shape.selrect().height();
     let mut global_offset_y = match shape.vertical_align() {
-        VerticalAlign::Center => (container_height - total_content_height) / 2.0,
-        VerticalAlign::Bottom => container_height - total_content_height,
+        VerticalAlign::Center => (selrect_height - text_height) / 2.0,
+        VerticalAlign::Bottom => selrect_height - text_height,
         _ => 0.0,
     };
 
     let layer_rec = SaveLayerRec::default();
     canvas.save_layer(&layer_rec);
-    for paragraph_builder_group in paragraph_builder_groups {
+    for paragraph_builder_group in paragraph_builder_groups.iter_mut() {
         let mut group_offset_y = global_offset_y;
+        let total_paragraphs = paragraph_builder_group.len();
 
         for (paragraph_index, paragraph_builder) in paragraph_builder_group.iter_mut().enumerate() {
             let mut paragraph = paragraph_builder.build();
-            paragraph.layout(paragraph_width);
+            paragraph.layout(text_width);
             let _paragraph_height = paragraph.height();
             // FIXME: I've kept the _paragraph_height variable to have
             // a reminder in the future to keep digging why the ideographic_baseline
             // works so well and not the paragraph_height. I think we should test
             // this more.
-            if paragraph_index == 0 {
+            let xy = (shape.selrect().x(), shape.selrect().y() + group_offset_y);
+            paragraph.paint(canvas, xy);
+
+            if paragraph_index == total_paragraphs - 1 {
                 group_offset_y += paragraph.ideographic_baseline();
             }
-            let xy = (shape.selrect().x(), shape.selrect().y() + global_offset_y);
-            paragraph.paint(canvas, xy);
 
             for line_metrics in paragraph.get_line_metrics().iter() {
                 render_text_decoration(canvas, &paragraph, paragraph_builder, line_metrics, xy);
             }
         }
 
-        global_offset_y += group_offset_y;
+        global_offset_y = group_offset_y;
     }
 }
 
@@ -415,6 +413,7 @@ fn render_text_decoration(
     }
 }
 
+#[allow(dead_code)]
 fn calculate_total_paragraphs_height(paragraphs: &mut [ParagraphBuilder], width: f32) -> f32 {
     paragraphs
         .iter_mut()
@@ -426,6 +425,7 @@ fn calculate_total_paragraphs_height(paragraphs: &mut [ParagraphBuilder], width:
         .sum()
 }
 
+#[allow(dead_code)]
 fn calculate_all_paragraphs_height(
     paragraph_groups: &mut [Vec<ParagraphBuilder>],
     width: f32,

render-wasm/src/shapes.rs

@@ -684,6 +684,13 @@ impl Shape {
             .get_or_init(|| self.calculate_extrect(shapes_pool, modifiers))
     }
 
+    pub fn get_text_content(&self) -> &TextContent {
+        match &self.shape_type {
+            crate::shapes::Type::Text(text_content) => text_content,
+            _ => panic!("Shape is not of type Text"),
+        }
+    }
+
     /// Calculates the bounding rectangle for a selrect shape's shadow, taking into account
     /// stroke widths and shadow properties.
     ///

render-wasm/src/shapes/text.rs

@@ -16,7 +16,7 @@ use std::collections::HashSet;
 
 use super::FontFamily;
 use crate::math::Point;
-use crate::shapes::{self, merge_fills, Shape};
+use crate::shapes::{self, merge_fills, Shape, VerticalAlign};
 use crate::utils::{get_fallback_fonts, get_font_collection};
 use crate::Uuid;
 
@@ -239,20 +239,32 @@ impl TextContent {
     }
 
     pub fn calculate_bounds(&self, shape: &Shape) -> Bounds {
-        let (x, y, transform, center) = (
+        let (x, mut y, transform, center) = (
             shape.selrect.x(),
             shape.selrect.y(),
             &shape.transform,
             &shape.center(),
         );
 
-        let width = shape.selrect.width();
+        let width = if self.grow_type() == GrowType::AutoWidth {
+            self.size.width
+        } else {
+            shape.selrect().width()
+        };
+
         let height = if self.size.width.round() != width.round() {
             self.get_height(width)
         } else {
             self.size.height
         };
 
+        let offset_y = match shape.vertical_align() {
+            VerticalAlign::Center => (shape.selrect().height() - height) / 2.0,
+            VerticalAlign::Bottom => shape.selrect().height() - height,
+            _ => 0.0,
+        };
+        y += offset_y;
+
         let text_rect = Rect::from_xywh(x, y, width, height);
         let mut bounds = Bounds::new(
             Point::new(text_rect.x(), text_rect.y()),
@@ -435,7 +447,15 @@ impl TextContent {
         TextContentLayoutResult(paragraph_builders, paragraphs, size)
     }
 
-    fn get_height(&self, width: f32) -> f32 {
+    pub fn get_width(&self) -> f32 {
+        if self.grow_type() == GrowType::AutoWidth {
+            self.size.width
+        } else {
+            self.bounds.width()
+        }
+    }
+
+    pub fn get_height(&self, width: f32) -> f32 {
         let mut paragraph_builders = self.paragraph_builder_group_from_text(None);
         let paragraphs =
             self.build_paragraphs_from_paragraph_builders(&mut paragraph_builders, width);