[web] Implement TextAlign.justify (flutter#29158)

Author: mdebbar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 9c36f57f1a673a7ab444f4f20df16601dde15335
+revision: 8e169f3ca5cf4af283a2ff4cfd98a564fb173adf

lib/web_ui/lib/src/engine/text/canvas_paragraph.dart

@@ -185,7 +185,7 @@ class CanvasParagraph implements EngineParagraph {
       }
 
       final EngineLineMetrics line = lines[i];
-      final List<RangeBox> boxes = line.boxes!;
+      final List<RangeBox> boxes = line.boxes;
       final StringBuffer buffer = StringBuffer();
 
       int j = 0;

lib/web_ui/lib/src/engine/text/layout_service.dart

@@ -273,7 +273,7 @@ class TextLayoutService {
   List<ui.TextBox> getBoxesForPlaceholders() {
     final List<ui.TextBox> boxes = <ui.TextBox>[];
     for (final EngineLineMetrics line in lines) {
-      for (final RangeBox box in line.boxes!) {
+      for (final RangeBox box in line.boxes) {
         if (box is PlaceholderBox) {
           boxes.add(box.toTextBox(line));
         }
@@ -303,7 +303,7 @@ class TextLayoutService {
 
     for (final EngineLineMetrics line in lines) {
       if (line.overlapsWith(start, end)) {
-        for (final RangeBox box in line.boxes!) {
+        for (final RangeBox box in line.boxes) {
           if (box is SpanBox && box.overlapsWith(start, end)) {
             boxes.add(box.intersect(line, start, end));
           }
@@ -336,7 +336,7 @@ class TextLayoutService {
     }
 
     final double dx = offset.dx - line.left;
-    for (final RangeBox box in line.boxes!) {
+    for (final RangeBox box in line.boxes) {
       if (box.left <= dx && dx <= box.right) {
         return box.getPositionForX(dx);
       }
@@ -892,6 +892,8 @@ class LineBuilder {
   /// Whether the end of this line is a prohibited break.
   bool get isEndProhibited => end.type == LineBreakType.prohibited;
 
+  int _spaceBoxCount = 0;
+
   bool get isEmpty => _segments.isEmpty;
   bool get isNotEmpty => _segments.isNotEmpty;
 
@@ -1131,6 +1133,9 @@ class LineBuilder {
     if (_currentBoxStart.index > poppedSegment.start.index) {
       final RangeBox poppedBox = _boxes.removeLast();
       _currentBoxStartOffset -= poppedBox.width;
+      if (poppedBox is SpanBox && poppedBox.isSpaceOnly) {
+        _spaceBoxCount--;
+      }
     }
 
     return poppedSegment;
@@ -1274,6 +1279,10 @@ class LineBuilder {
       isSpaceOnly: isSpaceOnly,
     ));
 
+    if (isSpaceOnly) {
+      _spaceBoxCount++;
+    }
+
     _currentBoxStartOffset = widthIncludingSpace;
   }
 
@@ -1308,6 +1317,7 @@ class LineBuilder {
       ascent: ascent,
       descent: descent,
       boxes: _boxes,
+      spaceBoxCount: _spaceBoxCount,
     );
   }
 

lib/web_ui/lib/src/engine/text/paint_service.dart

@@ -22,60 +22,105 @@ class TextPaintService {
     // individually.
     final List<EngineLineMetrics> lines = paragraph.computeLineMetrics();
 
+    if (lines.isEmpty) {
+      return;
+    }
+
+    final EngineLineMetrics lastLine = lines.last;
     for (final EngineLineMetrics line in lines) {
-      for (final RangeBox box in line.boxes!) {
-        _paintBox(canvas, offset, line, box);
+      if (line.boxes.isEmpty) {
+        continue;
+      }
+
+      final RangeBox lastBox = line.boxes.last;
+      final double justifyPerSpaceBox =
+          _calculateJustifyPerSpaceBox(paragraph, line, lastLine, lastBox);
+
+      ui.Offset justifiedOffset = offset;
+
+      for (final RangeBox box in line.boxes) {
+        final bool isTrailingSpaceBox =
+            box == lastBox && box is SpanBox && box.isSpaceOnly;
+
+        // Don't paint background for the trailing space in the line.
+        if (!isTrailingSpaceBox) {
+          _paintBackground(canvas, justifiedOffset, line, box, justifyPerSpaceBox);
+        }
+        _paintText(canvas, justifiedOffset, line, box);
+
+        if (box is SpanBox && box.isSpaceOnly && justifyPerSpaceBox != 0.0) {
+          justifiedOffset = justifiedOffset.translate(justifyPerSpaceBox, 0.0);
+        }
       }
     }
   }
 
-  void _paintBox(
+  void _paintBackground(
     BitmapCanvas canvas,
     ui.Offset offset,
     EngineLineMetrics line,
     RangeBox box,
+    double justifyPerSpaceBox,
   ) {
-    // Placeholder spans don't need any painting. Their boxes should remain
-    // empty so that their underlying widgets do their own painting.
     if (box is SpanBox) {
       final FlatTextSpan span = box.span;
 
       // Paint the background of the box, if the span has a background.
       final SurfacePaint? background = span.style.background as SurfacePaint?;
       if (background != null) {
-        canvas.drawRect(
-          box.toTextBox(line).toRect().shift(offset),
-          background.paintData,
-        );
+        ui.Rect rect = box.toTextBox(line).toRect().shift(offset);
+        if (box.isSpaceOnly) {
+          rect = ui.Rect.fromPoints(
+            rect.topLeft,
+            rect.bottomRight.translate(justifyPerSpaceBox, 0.0),
+          );
+        }
+        canvas.drawRect(rect, background.paintData);
       }
+    }
+  }
+
+  void _paintText(
+    BitmapCanvas canvas,
+    ui.Offset offset,
+    EngineLineMetrics line,
+    RangeBox box,
+  ) {
+    // There's no text to paint in placeholder spans.
+    if (box is SpanBox) {
+      final FlatTextSpan span = box.span;
 
-      // Paint the actual text.
       _applySpanStyleToCanvas(span, canvas);
       final double x = offset.dx + line.left + box.left;
       final double y = offset.dy + line.baseline;
-      final String text = paragraph.toPlainText().substring(
-            box.start.index,
-            box.end.indexWithoutTrailingNewlines,
-          );
-      final double? letterSpacing = span.style.letterSpacing;
-      if (letterSpacing == null || letterSpacing == 0.0) {
-        canvas.fillText(text, x, y, shadows: span.style.shadows);
-      } else {
-        // TODO(mdebbar): Implement letter-spacing on canvas more efficiently:
-        //                https://github.com/flutter/flutter/issues/51234
-        double charX = x;
-        final int len = text.length;
-        for (int i = 0; i < len; i++) {
-          final String char = text[i];
-          canvas.fillText(char, charX.roundToDouble(), y,
-              shadows: span.style.shadows);
-          charX += letterSpacing + canvas.measureText(char).width!;
+
+      // Don't paint the text for space-only boxes. This is just an
+      // optimization, it doesn't have any effect on the output.
+      if (!box.isSpaceOnly) {
+        final String text = paragraph.toPlainText().substring(
+              box.start.index,
+              box.end.indexWithoutTrailingNewlines,
+            );
+        final double? letterSpacing = span.style.letterSpacing;
+        if (letterSpacing == null || letterSpacing == 0.0) {
+          canvas.fillText(text, x, y, shadows: span.style.shadows);
+        } else {
+          // TODO(mdebbar): Implement letter-spacing on canvas more efficiently:
+          //                https://github.com/flutter/flutter/issues/51234
+          double charX = x;
+          final int len = text.length;
+          for (int i = 0; i < len; i++) {
+            final String char = text[i];
+            canvas.fillText(char, charX.roundToDouble(), y,
+                shadows: span.style.shadows);
+            charX += letterSpacing + canvas.measureText(char).width!;
+          }
         }
       }
 
       // Paint the ellipsis using the same span styles.
       final String? ellipsis = line.ellipsis;
-      if (ellipsis != null && box == line.boxes!.last) {
+      if (ellipsis != null && box == line.boxes.last) {
         final double x = offset.dx + line.left + box.right;
         canvas.fillText(ellipsis, x, y);
       }
@@ -97,3 +142,31 @@ class TextPaintService {
     canvas.setUpPaint(paint.paintData, null);
   }
 }
+
+/// Calculates for the given [line], the amount of extra width that needs to be
+/// added to each space box in order to align the line with the rest of the
+/// paragraph.
+double _calculateJustifyPerSpaceBox(
+  CanvasParagraph paragraph,
+  EngineLineMetrics line,
+  EngineLineMetrics lastLine,
+  RangeBox lastBox,
+) {
+  // Don't apply any justification on the last line.
+  if (line != lastLine &&
+      paragraph.width.isFinite &&
+      paragraph.paragraphStyle.textAlign == ui.TextAlign.justify) {
+    final double justifyTotal = paragraph.width - line.width;
+
+    int spaceBoxesToJustify = line.spaceBoxCount;
+    // If the last box is a space box, we can't use it to justify text.
+    if (lastBox is SpanBox && lastBox.isSpaceOnly) {
+      spaceBoxesToJustify--;
+    }
+    if (spaceBoxesToJustify > 0) {
+      return justifyTotal / spaceBoxesToJustify;
+    }
+  }
+
+  return 0.0;
+}

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -31,33 +31,8 @@ class EngineLineMetrics implements ui.LineMetrics {
         endIndex = -1,
         endIndexWithoutNewlines = -1,
         widthWithTrailingSpaces = width,
-        boxes = null;
-
-  EngineLineMetrics.withText(
-    String this.displayText, {
-    required this.startIndex,
-    required this.endIndex,
-    required this.endIndexWithoutNewlines,
-    required this.hardBreak,
-    required this.width,
-    required this.widthWithTrailingSpaces,
-    required this.left,
-    required this.lineNumber,
-  })  : assert(displayText != null), // ignore: unnecessary_null_comparison,
-        assert(startIndex != null), // ignore: unnecessary_null_comparison
-        assert(endIndex != null), // ignore: unnecessary_null_comparison
-        assert(endIndexWithoutNewlines != null), // ignore: unnecessary_null_comparison
-        assert(hardBreak != null), // ignore: unnecessary_null_comparison
-        assert(width != null), // ignore: unnecessary_null_comparison
-        assert(left != null), // ignore: unnecessary_null_comparison
-        assert(lineNumber != null && lineNumber >= 0), // ignore: unnecessary_null_comparison
-        ellipsis = null,
-        ascent = double.infinity,
-        descent = double.infinity,
-        unscaledAscent = double.infinity,
-        height = double.infinity,
-        baseline = double.infinity,
-        boxes = null;
+        boxes = <RangeBox>[],
+        spaceBoxCount = 0;
 
   EngineLineMetrics.rich(
     this.lineNumber, {
@@ -74,6 +49,7 @@ class EngineLineMetrics implements ui.LineMetrics {
     required this.ascent,
     required this.descent,
     required this.boxes,
+    required this.spaceBoxCount,
   })  : displayText = null,
         unscaledAscent = double.infinity;
 
@@ -101,7 +77,10 @@ class EngineLineMetrics implements ui.LineMetrics {
 
   /// The list of boxes representing the entire line, possibly across multiple
   /// spans.
-  final List<RangeBox>? boxes;
+  final List<RangeBox> boxes;
+
+  /// The number of boxes that are space-only.
+  final int spaceBoxCount;
 
   @override
   final bool hardBreak;