WebParagraph initial commit (flutter#167559)

This is the current (initial) state of WebParagraph project which is an
implementation of SkParagraph
on top of TextCluster
(https://github.com/fserb/canvas2D/blob/master/spec/enhanced-textmetrics.md).

Multilined text, mixed LTR/RTL text supported.

---------

Co-authored-by: Mouad Debbar <[email protected]>

Author: 2 people

engine/src/flutter/ci/licenses_golden/licenses_flutter

@@ -52823,7 +52823,12 @@ ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/flutter_view_ma
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/global_html_attributes.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/hot_restart_cache_handler.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/code_unit_flags.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/debug.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/layout.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/paint.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/paragraph.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/wrapper.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/window.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/text.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/tile_mode.dart + ../../../flutter/LICENSE
@@ -55896,7 +55901,12 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/flutter_view_mana
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/global_html_attributes.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/hot_restart_cache_handler.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/code_unit_flags.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/debug.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/layout.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/paint.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/paragraph.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/web_paragraph/wrapper.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/window.dart
 FILE: ../../../flutter/lib/web_ui/lib/text.dart
 FILE: ../../../flutter/lib/web_ui/lib/tile_mode.dart

engine/src/flutter/lib/web_ui/lib/src/engine.dart

@@ -162,5 +162,10 @@ export 'engine/view_embedder/flutter_view_manager.dart';
 export 'engine/view_embedder/global_html_attributes.dart';
 export 'engine/view_embedder/hot_restart_cache_handler.dart';
 export 'engine/view_embedder/style_manager.dart';
+export 'engine/web_paragraph/code_unit_flags.dart';
+export 'engine/web_paragraph/debug.dart';
+export 'engine/web_paragraph/layout.dart';
+export 'engine/web_paragraph/paint.dart';
 export 'engine/web_paragraph/paragraph.dart';
+export 'engine/web_paragraph/wrapper.dart';
 export 'engine/window.dart';

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -99,6 +99,10 @@ extension type CanvasKit(JSObject _) implements JSObject {
     Uint16List? indices,
   ) => _MakeVertices(mode, positions.toJS, textureCoordinates?.toJS, colors?.toJS, indices?.toJS);
 
+  external BidiNamespace get Bidi;
+
+  external CodeUnitsNamespace get CodeUnits;
+
   external SkParagraphBuilderNamespace get ParagraphBuilder;
   external SkParagraphStyle ParagraphStyle(SkParagraphStyleProperties properties);
   external SkTextStyle TextStyle(SkTextStyleProperties properties);
@@ -1778,11 +1782,45 @@ extension type SkPicture(JSObject _) implements JSObject {
 
   @JS('cullRect')
   external JSFloat32Array _cullRect();
+
   Float32List cullRect() => _cullRect().toDart;
 
   external int approximateBytesUsed();
 }
 
+extension type BidiRegion(JSObject _) implements JSObject {
+  external int get start;
+  external int get end;
+  external int get level;
+}
+
+extension type BidiIndex(JSObject _) implements JSObject {
+  external int get index;
+}
+
+extension type BidiNamespace(JSObject _) implements JSObject {
+  @JS('getBidiRegions')
+  external JSArray<JSAny?> _getBidiRegions(String text, SkTextDirection dir);
+  List<BidiRegion> getBidiRegions(String text, ui.TextDirection dir) =>
+      _getBidiRegions(text, toSkTextDirection(dir)).toDart.cast<BidiRegion>();
+
+  @JS('reorderVisual')
+  // TODO(jlavrova): Use a JSInt32Array return type instead of `List<BidiIndex>`
+  external JSArray<JSAny?> _reorderVisual(JSUint8Array visuals);
+  List<BidiIndex> reorderVisual(Uint8List visuals) =>
+      _reorderVisual(visuals.toJS).toDart.cast<BidiIndex>();
+}
+
+extension type CodeUnitInfo(JSObject _) implements JSObject {
+  external int get flags;
+}
+
+extension type CodeUnitsNamespace(JSObject _) implements JSObject {
+  @JS('compute')
+  external JSArray<JSAny?> _compute(String text);
+  List<CodeUnitInfo> compute(String text) => _compute(text).toDart.cast<CodeUnitInfo>();
+}
+
 extension type SkParagraphBuilderNamespace(JSObject _) implements JSObject {
   external SkParagraphBuilder MakeFromFontCollection(
     SkParagraphStyle paragraphStyle,

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/renderer.dart

@@ -363,29 +363,31 @@ class CanvasKitRenderer implements Renderer {
     List<ui.Shadow>? shadows,
     List<ui.FontFeature>? fontFeatures,
     List<ui.FontVariation>? fontVariations,
-  }) => CkTextStyle(
-    color: color,
-    decoration: decoration,
-    decorationColor: decorationColor,
-    decorationStyle: decorationStyle,
-    decorationThickness: decorationThickness,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
-    textBaseline: textBaseline,
-    fontFamily: fontFamily,
-    fontFamilyFallback: fontFamilyFallback,
-    fontSize: fontSize,
-    letterSpacing: letterSpacing,
-    wordSpacing: wordSpacing,
-    height: height,
-    leadingDistribution: leadingDistribution,
-    locale: locale,
-    background: background as CkPaint?,
-    foreground: foreground as CkPaint?,
-    shadows: shadows,
-    fontFeatures: fontFeatures,
-    fontVariations: fontVariations,
-  );
+  }) => isExperimentalWebParagraph
+      ? WebTextStyle(fontFamily: fontFamily, fontSize: fontSize, color: color)
+      : CkTextStyle(
+          color: color,
+          decoration: decoration,
+          decorationColor: decorationColor,
+          decorationStyle: decorationStyle,
+          decorationThickness: decorationThickness,
+          fontWeight: fontWeight,
+          fontStyle: fontStyle,
+          textBaseline: textBaseline,
+          fontFamily: fontFamily,
+          fontFamilyFallback: fontFamilyFallback,
+          fontSize: fontSize,
+          letterSpacing: letterSpacing,
+          wordSpacing: wordSpacing,
+          height: height,
+          leadingDistribution: leadingDistribution,
+          locale: locale,
+          background: background as CkPaint?,
+          foreground: foreground as CkPaint?,
+          shadows: shadows,
+          fontFeatures: fontFeatures,
+          fontVariations: fontVariations,
+        );
 
   @override
   ui.ParagraphStyle createParagraphStyle({
@@ -402,7 +404,12 @@ class CanvasKitRenderer implements Renderer {
     String? ellipsis,
     ui.Locale? locale,
   }) => isExperimentalWebParagraph
-      ? WebParagraphStyle()
+      ? WebParagraphStyle(
+          textDirection: textDirection,
+          textAlign: textAlign,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+        )
       : CkParagraphStyle(
           textAlign: textAlign,
           textDirection: textDirection,
@@ -445,7 +452,7 @@ class CanvasKitRenderer implements Renderer {
 
   @override
   ui.ParagraphBuilder createParagraphBuilder(ui.ParagraphStyle style) =>
-      isExperimentalWebParagraph ? WebParagraphBuilder() : CkParagraphBuilder(style);
+      isExperimentalWebParagraph ? WebParagraphBuilder(style) : CkParagraphBuilder(style);
 
   // TODO(harryterkelsen): Merge this logic with the async logic in
   // [EngineScene], https://github.com/flutter/flutter/issues/142072.

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/text_fragmenter.dart

@@ -138,8 +138,8 @@ Uint32List fragmentUsingIntlSegmenter(String text, IntlSegmenterGranularity gran
 }
 
 // These are the soft/hard line break values expected by Skia's SkParagraph.
-const int _kSoftLineBreak = 0;
-const int _kHardLineBreak = 1;
+const int kSoftLineBreak = 0;
+const int kHardLineBreak = 100;
 
 final DomV8BreakIterator _v8LineBreaker = createV8BreakIterator();
 
@@ -154,15 +154,15 @@ Uint32List fragmentUsingV8LineBreaker(String text) {
   final Uint32List typedArray = Uint32List(size);
 
   typedArray[0] = 0; // start index
-  typedArray[1] = _kSoftLineBreak; // break type
+  typedArray[1] = kSoftLineBreak; // break type
 
   for (int i = 0; i < fragments.length; i++) {
     final LineBreakFragment fragment = fragments[i];
     final int uint32Index = 2 + i * 2;
     typedArray[uint32Index] = fragment.end;
     typedArray[uint32Index + 1] = fragment.type == LineBreakType.mandatory
-        ? _kHardLineBreak
-        : _kSoftLineBreak;
+        ? kHardLineBreak
+        : kSoftLineBreak;
   }
 
   return typedArray;

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

@@ -1038,6 +1038,8 @@ extension type DomCanvasRenderingContext2D._(JSObject _) implements JSObject {
   );
   external void strokeText(String text, num x, num y);
   external set globalAlpha(num? value);
+
+  external void fillTextCluster(DomTextCluster textCluster, double x, double y);
 }
 
 @JS('ImageBitmapRenderingContext')
@@ -1477,6 +1479,21 @@ DomText createDomText(String data) => domDocument.createTextNode(data);
 @JS('TextMetrics')
 extension type DomTextMetrics._(JSObject _) implements JSObject {
   external double? get width;
+
+  @JS('getTextClusters')
+  external JSArray<JSAny?> _getTextClusters();
+  List<DomTextCluster> getTextClusters() => _getTextClusters().toDart.cast<DomTextCluster>();
+
+  external DomRectReadOnly getActualBoundingBox(int begin, int end);
+
+  external double get fontBoundingBoxAscent;
+
+  external double get fontBoundingBoxDescent;
+
+  @JS('getSelectionRects')
+  external JSArray<JSAny> _getSelectionRects(int begin, int end);
+  List<DomRectReadOnly> getSelectionRects(int begin, int end) =>
+      _getSelectionRects(begin, end).toDart.cast<DomRectReadOnly>();
 }
 
 @JS('DOMException')
@@ -2543,3 +2560,13 @@ extension JSArrayExtension on JSArray<JSAny?> {
   // TODO(srujzs): Delete this when we add `JSArray.length` in the SDK.
   external int get length;
 }
+
+@JS('TextCluster')
+extension type DomTextCluster._(JSObject _) implements JSObject {
+  // TODO(jlavrova): This has been renamed to `start` in the spec.
+  // See: https://github.com/fserb/canvas2D/blob/master/spec/enhanced-textmetrics.md
+  external int get begin;
+  external int get end;
+  external double get x;
+  external double get y;
+}

engine/src/flutter/lib/web_ui/lib/src/engine/skwasm/skwasm_impl/paragraph.dart

@@ -11,9 +11,6 @@ import 'package:ui/src/engine/skwasm/skwasm_impl.dart';
 import 'package:ui/ui.dart' as ui;
 import 'package:ui/ui_web/src/ui_web.dart' as ui_web;
 
-const int _kSoftLineBreak = 0;
-const int _kHardLineBreak = 100;
-
 final List<String> _testFonts = <String>['FlutterTest', 'Ahem'];
 List<String> _computeEffectiveFontFamilies(List<String> fontFamilies) {
   if (!ui_web.TestEnvironment.instance.forceTestFonts) {
@@ -1050,8 +1047,8 @@ class SkwasmParagraphBuilder extends SkwasmObjectWrapper<RawParagraphBuilder>
       final LineBreakFragment fragment = lineBreaks[i];
       lineBreakPointer[i + 1].position = fragment.end;
       lineBreakPointer[i + 1].lineBreakType = fragment.type == LineBreakType.mandatory
-          ? _kHardLineBreak
-          : _kSoftLineBreak;
+          ? kHardLineBreak
+          : kSoftLineBreak;
     }
     paragraphBuilderSetLineBreaksUtf16(handle, lineBreakBuffer);
     lineBreakBufferFree(lineBreakBuffer);

engine/src/flutter/lib/web_ui/lib/src/engine/web_paragraph/code_unit_flags.dart

@@ -0,0 +1,82 @@
+// 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.
+
+import '../canvaskit/canvaskit_api.dart';
+import '../canvaskit/text_fragmenter.dart';
+import 'paragraph.dart';
+
+class CodeUnitFlags {
+  CodeUnitFlags(this._value);
+
+  static List<CodeUnitFlags> extractForParagraph(WebParagraph paragraph) {
+    final List<CodeUnitInfo> ckFlags = canvasKit.CodeUnits.compute(paragraph.text);
+    assert(ckFlags.length == (paragraph.text.length + 1));
+
+    final codeUnitFlags = ckFlags.map((info) => CodeUnitFlags(info.flags)).toList();
+
+    // Get text segmentation resuls using browser APIs.
+    final SegmentationResult result = segmentText(paragraph.text);
+
+    // Fill out grapheme flags
+    for (final grapheme in result.graphemes) {
+      codeUnitFlags[grapheme].graphemeStart = true;
+    }
+    // Fill out word flags
+    for (final word in result.words) {
+      codeUnitFlags[word].wordBreak = true;
+    }
+    // Fill out line break flags
+    for (int index = 0; index < result.breaks.length; index += 2) {
+      final int lineBreak = result.breaks[index];
+      if (result.breaks[index + 1] == kSoftLineBreak) {
+        codeUnitFlags[lineBreak].softLineBreak = true;
+      } else {
+        codeUnitFlags[lineBreak].hardLineBreak = true;
+      }
+    }
+    return codeUnitFlags;
+  }
+
+  bool get isWhitespace => hasFlag(kWhitespaceFlag);
+  set whitespace(bool enable) => _setFlag(kWhitespaceFlag, enable);
+
+  bool get isGraphemeStart => hasFlag(kGraphemeFlag);
+  set graphemeStart(bool enable) => _setFlag(kGraphemeFlag, enable);
+
+  bool get isSoftLineBreak => hasFlag(kSoftLineBreakFlag);
+  set softLineBreak(bool enable) => _setFlag(kSoftLineBreakFlag, enable);
+
+  bool get isHardLineBreak => hasFlag(kHardLineBreakFlag);
+  set hardLineBreak(bool enable) => _setFlag(kHardLineBreakFlag, enable);
+
+  bool get isWordBreak => hasFlag(kWordBreakFlag);
+  set wordBreak(bool enable) => _setFlag(kWordBreakFlag, enable);
+
+  bool hasFlag(int flag) {
+    return (_value & flag) != 0;
+  }
+
+  void _setFlag(int flag, bool enable) {
+    _value = enable ? (_value | flag) : (_value & ~flag);
+  }
+
+  int _value;
+
+  @override
+  String toString() {
+    return [
+      if (isWhitespace) 'whitespace',
+      if (isGraphemeStart) 'grapheme',
+      if (isSoftLineBreak) 'softBreak',
+      if (isHardLineBreak) 'hardBreak',
+      if (isWordBreak) 'word',
+    ].join(' ');
+  }
+
+  static const int kWhitespaceFlag = 1 << 0;
+  static const int kGraphemeFlag = 1 << 1;
+  static const int kSoftLineBreakFlag = 1 << 2;
+  static const int kHardLineBreakFlag = 1 << 3;
+  static const int kWordBreakFlag = 1 << 4;
+}

engine/src/flutter/lib/web_ui/lib/src/engine/web_paragraph/debug.dart

@@ -0,0 +1,17 @@
+// 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.
+
+class WebParagraphDebug {
+  static const bool logging = false;
+
+  static void log(String arg) {
+    if (logging) {
+      print(arg);
+    }
+  }
+
+  static void error(String arg) {
+    print('ERROR: $arg');
+  }
+}