[web] Multi-threaded skwasm hangs or crashes in FreeType: SkMutex is a no-op under -sWASM_WORKERS, so main-thread text layout and the raster worker share one FT_Face #193439

// Minimal repro: skwasm (multi-threaded) freezes or crashes when the main
// thread lays out text while the raster worker draws the same font.
//
// One font (fetched, registered with loadFontFromList). The canvas draws a
// block of text under a continuously changing zoom (the raster worker
// rasterises glyph images at new sizes: FT_Load_Glyph -> autofitter), while
// the main thread keeps laying out paragraphs of the same font at new sizes
// (SkParagraph shaping -> glyph metrics: FT_Load_Glyph -> autofitter on the
// same FT_Face).
//
// Query parameters:
//   font=montserrat|roboto   bundled font (default montserrat)
//   layout=0        no main-thread layout (control: worker alone)
//   zoom=0          no zooming (control: main thread alone)
//   wght=<n>        fontVariations wght (default 400; 0 = none)
//   burst=<ms> period=<ms> start=<s>   main-thread layout duty cycle
//
// Probe from JS: window.__race = {builds, rasters, layouts, lastRaster}.
import 'dart:async';
import 'dart:js_interop';
import 'dart:math' as math;
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';

@JS('globalThis')
external JSObject get _global;

extension on JSObject {
  external set __race(JSAny value);
}

const _text =
    'Оформление заказа Доставка курьером Итого к оплате 12 345,67 ₽ '
    'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ абвгдеёжзийклмнопрстуфхцчшщъыьэюя '
    'ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 '
    '()*+,-.:@«»|•';

int builds = 0, rasters = 0, layouts = 0;
double lastRasterMs = 0;

void _publish() {
  _global.__race = {
    'builds': builds,
    'rasters': rasters,
    'layouts': layouts,
    'lastRaster': lastRasterMs,
  }.jsify()!;
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final q = Uri.base.queryParameters;
  final font = q['font'] ?? 'montserrat';
  final data = await rootBundle.load('assets/$font.ttf');
  await ui.loadFontFromList(data.buffer.asUint8List(), fontFamily: 'RaceFont');
  final wght = double.tryParse(q['wght'] ?? '400') ?? 400;
  final variations = wght > 0 ? [ui.FontVariation('wght', wght)] : null;
  final doLayout = q['layout'] != '0';
  final doZoom = q['zoom'] != '0';


  SchedulerBinding.instance.addTimingsCallback((timings) {
    rasters += timings.length;
    lastRasterMs = DateTime.now().millisecondsSinceEpoch.toDouble();
    _publish();
  });

  if (doLayout) {
    // Keep the main thread in SkParagraph/FreeType as much as possible,
    // with a fresh size (a fresh strike) every paragraph.
    final rnd = math.Random(1);
    final burst = int.tryParse(q['burst'] ?? '6') ?? 6;
    final period = int.tryParse(q['period'] ?? '1') ?? 1;
    final start = DateTime.now().add(
      Duration(seconds: int.tryParse(q['start'] ?? '0') ?? 0),
    );
    Timer.periodic(Duration(milliseconds: period), (_) {
      if (DateTime.now().isBefore(start)) return;
      final end = DateTime.now().add(Duration(milliseconds: burst));
      while (DateTime.now().isBefore(end)) {
        final size = 4 + rnd.nextDouble() * 60;
        final b = ui.ParagraphBuilder(ui.ParagraphStyle())
          ..pushStyle(
            ui.TextStyle(
              fontFamily: 'RaceFont',
              fontSize: size,
              fontVariations: variations,
            ),
          )
          ..addText(_text);
        b.build()
          ..layout(const ui.ParagraphConstraints(width: 400))
          ..dispose();
        layouts++;
      }
      _publish();
    });
  }

  runApp(_App(variations: variations, zoom: doZoom));
}

class _App extends StatefulWidget {
  const _App({required this.variations, required this.zoom});
  final List<ui.FontVariation>? variations;
  final bool zoom;
  @override
  State<_App> createState() => _AppState();
}

class _AppState extends State<_App> with SingleTickerProviderStateMixin {
  late final Ticker _ticker;
  double _t = 0;

  @override
  void initState() {
    super.initState();
    _ticker = createTicker((d) {
      builds++;
      setState(() => _t = d.inMicroseconds / 1e6);
    })..start();
  }

  @override
  void dispose() {
    _ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Directionality(
    textDirection: TextDirection.ltr,
    child: CustomPaint(
      painter: _Painter(widget.zoom ? _t : 0, widget.variations),
      size: Size.infinite,
    ),
  );
}

class _Painter extends CustomPainter {
  _Painter(this.t, this.variations);
  final double t;
  final List<ui.FontVariation>? variations;
  static ui.Paragraph? _p;

  @override
  void paint(Canvas canvas, Size size) {
    final p = _p ??= (ui.ParagraphBuilder(ui.ParagraphStyle())
          ..pushStyle(
            ui.TextStyle(
              fontFamily: 'RaceFont',
              fontSize: 12,
              color: const Color(0xFF000000),
              fontVariations: variations,
            ),
          )
          ..addText(_text))
        .build()
      ..layout(const ui.ParagraphConstraints(width: 300));
    canvas.drawColor(const Color(0xFFFFFFFF), BlendMode.src);
    // Several copies at different, continuously changing, odd fractional
    // zooms: every frame asks the worker for glyph images at new ppems
    // (up to the atlas limit and past it).
    for (var i = 0; i < 6; i++) {
      final z = 0.8 + 12 * (0.5 + 0.5 * math.sin(t * (0.37 + i * 0.11) + i));
      canvas
        ..save()
        ..translate(10.0 + i * 3, 10.0 + i * 40)
        ..scale(z * (1 + i * 0.0137))
        ..drawParagraph(p, Offset.zero)
        ..restore();
    }
  }

  @override
  bool shouldRepaint(_Painter old) => old.t != t;
}