[web] Separate text fragmenting from layout (#34085)

Author: mdebbar

ci/licenses_golden/licenses_flutter

@@ -1926,6 +1926,8 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/svg.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/test_embedding.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/font_collection.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/fragmenter.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/layout_fragmenter.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/layout_service.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/line_break_properties.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/line_breaker.dart

lib/web_ui/lib/src/engine.dart

@@ -148,6 +148,8 @@ export 'engine/svg.dart';
 export 'engine/test_embedding.dart';
 export 'engine/text/canvas_paragraph.dart';
 export 'engine/text/font_collection.dart';
+export 'engine/text/fragmenter.dart';
+export 'engine/text/layout_fragmenter.dart';
 export 'engine/text/layout_service.dart';
 export 'engine/text/line_break_properties.dart';
 export 'engine/text/line_breaker.dart';

lib/web_ui/lib/src/engine/dom.dart

@@ -634,6 +634,8 @@ extension DomCanvasRenderingContext2DExtension on DomCanvasRenderingContext2D {
   external set fillStyle(Object? style);
   external String get font;
   external set font(String value);
+  external String get direction;
+  external set direction(String value);
   external set lineWidth(num? value);
   external set strokeStyle(Object? value);
   external Object? get strokeStyle;

lib/web_ui/lib/src/engine/html/bitmap_canvas.dart

@@ -913,9 +913,11 @@ class BitmapCanvas extends EngineCanvas {
     _cachedLastCssFont = null;
   }
 
-  void setCssFont(String cssFont) {
+  void setCssFont(String cssFont, ui.TextDirection textDirection) {
+    final DomCanvasRenderingContext2D ctx = _canvasPool.context;
+    ctx.direction = textDirection == ui.TextDirection.ltr ? 'ltr' : 'rtl';
+
     if (cssFont != _cachedLastCssFont) {
-      final DomCanvasRenderingContext2D ctx = _canvasPool.context;
       ctx.font = cssFont;
       _cachedLastCssFont = cssFont;
     }

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

@@ -9,13 +9,16 @@ import '../embedder.dart';
 import '../html/bitmap_canvas.dart';
 import '../profiler.dart';
 import '../util.dart';
+import 'layout_fragmenter.dart';
 import 'layout_service.dart';
 import 'paint_service.dart';
 import 'paragraph.dart';
 import 'word_breaker.dart';
 
 const ui.Color _defaultTextColor = ui.Color(0xFFFF0000);
 
+final String _placeholderChar = String.fromCharCode(0xFFFC);
+
 /// A paragraph made up of a flat list of text spans and placeholders.
 ///
 /// [CanvasParagraph] doesn't use a DOM element to represent the structure of
@@ -32,7 +35,7 @@ class CanvasParagraph implements ui.Paragraph {
     required this.plainText,
     required this.placeholderCount,
     required this.canDrawOnCanvas,
-  });
+  }) : assert(spans.isNotEmpty);
 
   /// The flat list of spans that make up this paragraph.
   final List<ParagraphSpan> spans;
@@ -168,38 +171,28 @@ class CanvasParagraph implements ui.Paragraph {
 
     // 2. Append all spans to the paragraph.
 
-    DomHTMLElement? lastSpanElement;
     for (int i = 0; i < lines.length; i++) {
       final ParagraphLine line = lines[i];
-      final List<RangeBox> boxes = line.boxes;
-      final StringBuffer buffer = StringBuffer();
-
-      int j = 0;
-      while (j < boxes.length) {
-        final RangeBox box = boxes[j++];
-
-        if (box is SpanBox) {
-          lastSpanElement = domDocument.createElement('flt-span') as
-              DomHTMLElement;
-          applyTextStyleToElement(
-            element: lastSpanElement,
-            style: box.span.style,
-            isSpan: true,
-          );
-          _positionSpanElement(lastSpanElement, line, box);
-          lastSpanElement.appendText(box.toText());
-          rootElement.append(lastSpanElement);
-          buffer.write(box.toText());
-        } else if (box is PlaceholderBox) {
-          lastSpanElement = null;
-        } else {
-          throw UnimplementedError('Unknown box type: ${box.runtimeType}');
+      for (final LayoutFragment fragment in line.fragments) {
+        if (fragment.isPlaceholder) {
+          continue;
+        }
+
+        final String text = fragment.getText(this);
+        if (text.isEmpty) {
+          continue;
         }
-      }
 
-      final String? ellipsis = line.ellipsis;
-      if (ellipsis != null) {
-        (lastSpanElement ?? rootElement).appendText(ellipsis);
+        final DomHTMLElement spanElement = domDocument.createElement('flt-span') as DomHTMLElement;
+        applyTextStyleToElement(
+          element: spanElement,
+          style: fragment.style,
+          isSpan: true,
+        );
+        _positionSpanElement(spanElement, line, fragment);
+
+        spanElement.appendText(text);
+        rootElement.append(spanElement);
       }
     }
 
@@ -283,8 +276,8 @@ class CanvasParagraph implements ui.Paragraph {
   }
 }
 
-void _positionSpanElement(DomElement element, ParagraphLine line, RangeBox box) {
-  final ui.Rect boxRect = box.toTextBox(line, forPainting: true).toRect();
+void _positionSpanElement(DomElement element, ParagraphLine line, LayoutFragment fragment) {
+  final ui.Rect boxRect = fragment.toPaintingTextBox().toRect();
   element.style
     ..position = 'absolute'
     ..top = '${boxRect.top}px'
@@ -304,6 +297,9 @@ abstract class ParagraphSpan {
 
   /// The index of the end of the range of text represented by this span.
   int get end;
+
+  /// The resolved style of the span.
+  EngineTextStyle get style;
 }
 
 /// Represent a span of text in the paragraph.
@@ -323,7 +319,7 @@ class FlatTextSpan implements ParagraphSpan {
     required this.end,
   });
 
-  /// The resolved style of the span.
+  @override
   final EngineTextStyle style;
 
   @override
@@ -341,14 +337,24 @@ class FlatTextSpan implements ParagraphSpan {
 
 class PlaceholderSpan extends ParagraphPlaceholder implements ParagraphSpan {
   PlaceholderSpan(
-    int index,
-    super.width,
-    super.height,
-    super.alignment, {
-    required super.baselineOffset,
-    required super.baseline,
-  })   : start = index,
-        end = index;
+    this.style,
+    this.start,
+    this.end,
+    double width,
+    double height,
+    ui.PlaceholderAlignment alignment, {
+    required double baselineOffset,
+    required ui.TextBaseline baseline,
+  }) : super(
+          width,
+          height,
+          alignment,
+          baselineOffset: baselineOffset,
+          baseline: baseline,
+        );
+
+  @override
+  final EngineTextStyle style;
 
   @override
   final int start;
@@ -624,10 +630,19 @@ class CanvasParagraphBuilder implements ui.ParagraphBuilder {
             alignment == ui.PlaceholderAlignment.belowBaseline ||
             alignment == ui.PlaceholderAlignment.baseline) || baseline != null);
 
+    final int start = _plainTextBuffer.length;
+    _plainTextBuffer.write(_placeholderChar);
+    final int end = _plainTextBuffer.length;
+
+    final EngineTextStyle style = _currentStyleNode.resolveStyle();
+    _updateCanDrawOnCanvas(style);
+
     _placeholderCount++;
     _placeholderScales.add(scale);
     _spans.add(PlaceholderSpan(
-      _plainTextBuffer.length,
+      style,
+      start,
+      end,
       width * scale,
       height * scale,
       alignment,
@@ -652,37 +667,54 @@ class CanvasParagraphBuilder implements ui.ParagraphBuilder {
 
   @override
   void addText(String text) {
-    final EngineTextStyle style = _currentStyleNode.resolveStyle();
     final int start = _plainTextBuffer.length;
     _plainTextBuffer.write(text);
     final int end = _plainTextBuffer.length;
 
-    if (_canDrawOnCanvas) {
-      final ui.TextDecoration? decoration = style.decoration;
-      if (decoration != null && decoration != ui.TextDecoration.none) {
-        _canDrawOnCanvas = false;
-      }
+    final EngineTextStyle style = _currentStyleNode.resolveStyle();
+    _updateCanDrawOnCanvas(style);
+
+    _spans.add(FlatTextSpan(style: style, start: start, end: end));
+  }
+
+  void _updateCanDrawOnCanvas(EngineTextStyle style) {
+    if (!_canDrawOnCanvas) {
+      return;
     }
 
-    if (_canDrawOnCanvas) {
-      final List<ui.FontFeature>? fontFeatures = style.fontFeatures;
-      if (fontFeatures != null && fontFeatures.isNotEmpty) {
-        _canDrawOnCanvas = false;
-      }
+    final ui.TextDecoration? decoration = style.decoration;
+    if (decoration != null && decoration != ui.TextDecoration.none) {
+      _canDrawOnCanvas = false;
+      return;
     }
 
-    if (_canDrawOnCanvas) {
-      final List<ui.FontVariation>? fontVariations = style.fontVariations;
-      if (fontVariations != null && fontVariations.isNotEmpty) {
-        _canDrawOnCanvas = false;
-      }
+    final List<ui.FontFeature>? fontFeatures = style.fontFeatures;
+    if (fontFeatures != null && fontFeatures.isNotEmpty) {
+      _canDrawOnCanvas = false;
+      return;
     }
 
-    _spans.add(FlatTextSpan(style: style, start: start, end: end));
+    final List<ui.FontVariation>? fontVariations = style.fontVariations;
+    if (fontVariations != null && fontVariations.isNotEmpty) {
+      _canDrawOnCanvas = false;
+      return;
+    }
   }
 
   @override
   CanvasParagraph build() {
+    if (_spans.isEmpty) {
+      // In case `addText` and `addPlaceholder` were never called.
+      //
+      // We want the paragraph to always have a non-empty list of spans to match
+      // the expectations of the [LayoutFragmenter].
+      _spans.add(FlatTextSpan(
+        style: _rootStyleNode.resolveStyle(),
+        start: 0,
+        end: 0,
+      ));
+    }
+
     return CanvasParagraph(
       _spans,
       paragraphStyle: _paragraphStyle,

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

@@ -0,0 +1,34 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// Splits [text] into a list of [TextFragment]s.
+///
+/// Various subclasses can perform the fragmenting based on their own criteria.
+///
+/// See:
+///
+/// - [LineBreakFragmenter]: Fragments text based on line break opportunities.
+/// - [BidiFragmenter]: Fragments text based on directionality.
+abstract class TextFragmenter {
+  const TextFragmenter(this.text);
+
+  /// The text to be fragmented.
+  final String text;
+
+  /// Performs the fragmenting of [text] and returns a list of [TextFragment]s.
+  List<TextFragment> fragment();
+}
+
+/// Represents a fragment produced by [TextFragmenter].
+abstract class TextFragment {
+  const TextFragment(this.start, this.end);
+
+  final int start;
+  final int end;
+
+  /// Whether this fragment's range overlaps with the range from [start] to [end].
+  bool overlapsWith(int start, int end) {
+    return start < this.end && this.start < end;
+  }
+}