@simonklee/opentui-tex-native-source 0.2.0

package/native/vendor/microtex/platform/flutter/microtex/example/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>PreviewsEnabled</key>
+	<false/>
+</dict>
+</plist>

package/native/vendor/microtex/platform/flutter/microtex/example/lib/main.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+import 'package:microtex/microtex.dart';
+import 'package:microtex_example/screen/edit_screen.dart';
+import 'package:microtex_example/widget/cmp.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await MicroTeX().initialize(
+    clmAsset: 'assets/xits/XITSMath-Regular.clm2',
+    textLayoutSerif: 'Noto Color Emoji',
+    textLayoutSansSerif: 'Noto Color Emoji',
+    textLayoutMonospace: 'Noto Color Emoji',
+  );
+  debugMicroTeX = true;
+  runApp(
+    const MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: EditScreen(),
+    ),
+  );
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/screen/edit_screen.dart

@@ -0,0 +1,208 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_spinbox/material.dart';
+import 'package:microtex/microtex.dart';
+import 'package:microtex_example/widget/rich.dart';
+import 'package:microtex_example/widget/split.dart';
+import 'package:microtex_example/widget/tex_highlight_controller.dart';
+
+class _Settings {
+  String mode;
+  String mainFontFamily;
+  String mathFont;
+  double textSize;
+
+  _Settings(this.mode, this.mainFontFamily, this.mathFont, this.textSize);
+}
+
+class EditScreen extends StatefulWidget {
+  const EditScreen({Key? key}) : super(key: key);
+
+  @override
+  State<EditScreen> createState() => _EditScreenState();
+}
+
+class _EditScreenState extends State<EditScreen> {
+  final _controller = StreamController<String>();
+
+  @override
+  dispose() {
+    super.dispose();
+    _controller.close();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('MicroTeX Example'),
+        actions: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: IconButton(
+              icon: const Icon(Icons.settings),
+              onPressed: () => _showSettings(context),
+            ),
+          ),
+        ],
+      ),
+      body: SplitView(
+        left: _buildEditor(),
+        right: _buildRich(),
+      ),
+    );
+  }
+
+  _section(
+    String title,
+    String selected,
+    List<String> sections,
+    void Function(String? value) onChanged,
+  ) {
+    return [
+      Text(
+        title,
+        style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 18),
+      ),
+      ...sections.map(
+        (e) => ListTile(
+          title: Text(e),
+          horizontalTitleGap: 0,
+          contentPadding: const EdgeInsets.only(left: 8),
+          leading: Radio(value: e, groupValue: selected, onChanged: onChanged),
+        ),
+      )
+    ];
+  }
+
+  _textSize() {
+    return SpinBox(
+      min: 10,
+      max: 200,
+      value: 20,
+      decoration: const InputDecoration(labelText: 'TextSize'),
+      onChanged: (value) => {},
+    );
+  }
+
+  _settings() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        ..._section('Mode', 'text', ['text', 'LaTeX'], (value) {}),
+        ..._section(
+          'Math Font',
+          MicroTeX().currentMathFontName,
+          MicroTeX().mathFonts.map((e) => e.fontName).toList(),
+          (value) {},
+        ),
+        ..._section(
+          'Main Font',
+          MicroTeX().currentMainFontFamilyName.isEmpty ? 'none' : MicroTeX().currentMainFontFamilyName,
+          MicroTeX().mainFonts.map((e) => e.fontFamily).toSet().toList() + ['none'],
+          (value) {},
+        ),
+        Container(
+          constraints: const BoxConstraints(maxWidth: 300),
+          padding: const EdgeInsets.only(left: 10),
+          child: const Text(
+            'If you just want to use the math font to render the text '
+            'wrapped by command "text", just set it to "none".',
+          ),
+        ),
+        const SizedBox(height: 20),
+        _textSize(),
+      ],
+    );
+  }
+
+  Future<void> _showSettings(BuildContext context) async {
+    final navigator = Navigator.of(context);
+    final settings = await showDialog(
+      context: context,
+      builder: (context) {
+        return AlertDialog(
+          title: const Text('Settings'),
+          content: StatefulBuilder(builder: (context, setState) => _settings()),
+          actions: [
+            TextButton(
+              child: const Text('OK'),
+              onPressed: () {
+                navigator.pop('test');
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  _buildRich() {
+    return SingleChildScrollView(
+      primary: false,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: StreamBuilder(
+          stream: _controller.stream,
+          builder: (context, AsyncSnapshot<String> snapshot) {
+            final data = snapshot.data;
+            if (data == null) {
+              return const Text(
+                'Input sth...',
+                style: TextStyle(fontSize: 25),
+              );
+            }
+            return SimpleRichText(text: data);
+          },
+        ),
+      ),
+    );
+  }
+
+  _buildEditor() {
+    return ConstrainedBox(
+      constraints: const BoxConstraints.expand(),
+      child: LayoutBuilder(builder: (context, constraints) {
+        return SingleChildScrollView(
+          child: ConstrainedBox(
+            constraints: BoxConstraints(
+              minWidth: constraints.maxWidth,
+              minHeight: constraints.maxHeight,
+            ),
+            child: FutureBuilder(
+              future: rootBundle.loadString('assets/EXAMPLE.txt').then((value) {
+                _controller.sink.add(value);
+                return value;
+              }),
+              builder: (context, AsyncSnapshot<String> snapshot) {
+                return _buildTextField(snapshot.data);
+              },
+            ),
+          ),
+        );
+      }),
+    );
+  }
+
+  _buildTextField(String? txt) {
+    final controller = TeXHighlightController(text: txt);
+    // final controller = TeXInputController(text: txt);
+    return TextField(
+      controller: controller,
+      keyboardType: TextInputType.multiline,
+      maxLines: null,
+      style: const TextStyle(
+        fontFamily: 'Monaco',
+        fontFamilyFallback: ['Noto Color Emoji'],
+      ),
+      decoration: const InputDecoration(
+        border: InputBorder.none,
+        contentPadding: EdgeInsets.all(16),
+      ),
+      onChanged: (text) => _controller.sink.add(text),
+    );
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/utils/convert_spans.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:microtex/microtex.dart';
+
+class SpanConverter {
+  SpanConverter._();
+
+  static final _r = RegExp(r'\${1,2}[\s\S]*?\${1,2}');
+  static final _instance = SpanConverter._();
+
+  factory SpanConverter() {
+    return _instance;
+  }
+
+  List<InlineSpan> buildSpans({
+    required String text,
+    required TextStyle style,
+  }) {
+    final children = <InlineSpan>[];
+    text.splitMapJoin(
+      _r,
+      onNonMatch: (span) {
+        if (span.isEmpty) return span;
+        children.add(TextSpan(text: span, style: style));
+        return span;
+      },
+      onMatch: (m) {
+        final tex = m[0] ?? '';
+        if (tex.isEmpty) return '';
+        final isInline = !tex.startsWith('\$\$');
+        children.add(WidgetSpan(
+          alignment: PlaceholderAlignment.baseline,
+          baseline: TextBaseline.alphabetic,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+            child: _buildLaTeX(tex, isInline, style),
+          ),
+        ));
+        return tex.toString();
+      },
+    );
+    return children;
+  }
+
+  _buildLaTeX(String tex, bool isInline, TextStyle style) {
+    final t = LaTeX(
+      latex: tex,
+      textSize: style.fontSize ?? 14,
+      color: style.color ?? Colors.black,
+      style: TeXStyle.display,
+      isRenderGlyphUsePath: false,
+    );
+    if (isInline) {
+      return t;
+    }
+    return LayoutBuilder(builder: (context, constraints) {
+      print('build: ${constraints.maxWidth}');
+      return SizedBox(
+        width: constraints.maxWidth,
+        child: Center(child: t),
+      );
+    });
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/utils/string_ext.dart

@@ -0,0 +1,10 @@
+extension StringExt on String {
+  String takeUntil(bool Function(int j, String char) stop, [int from = 0, bool inclusive = false]) {
+    for (var i = from; i < length; i++) {
+      if (stop(i, this[i])) {
+        return substring(from, inclusive ? i + 1 : i);
+      }
+    }
+    return '';
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/cmp.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:microtex/microtex.dart';
+
+class CmpRenderType extends StatelessWidget {
+  const CmpRenderType({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Compare render types'),
+      ),
+      body: _buildCmp(),
+    );
+  }
+}
+
+Widget _buildCmp() {
+  return Column(
+    mainAxisSize: MainAxisSize.min,
+    children: [
+      _buildRow(
+        'render by text',
+        () => const Text(
+          'Hello World!',
+          style: TextStyle(
+            fontSize: 200,
+            fontFamily: 'XITS Math',
+            color: Colors.black,
+            fontStyle: FontStyle.normal,
+            fontWeight: FontWeight.normal,
+          ),
+        ),
+      ),
+      _buildRow(
+        'render by path with blur filter',
+        () => const LaTeX(
+          latex: "\\text{Hello World!}",
+          textSize: 200,
+          style: TeXStyle.text,
+          color: Colors.black,
+          blur: Blur(BlurStyle.normal, 0.5),
+          isRenderGlyphUsePath: true,
+        ),
+      ),
+      const SizedBox(height: 25),
+      _buildRow(
+        'render by path without blur filter',
+        () => const LaTeX(
+          latex: "\\text{Hello World!}",
+          textSize: 200,
+          style: TeXStyle.text,
+          color: Colors.black,
+          isRenderGlyphUsePath: true,
+        ),
+      ),
+      const SizedBox(height: 25),
+      _buildRow(
+        'render by glyphs',
+        () => const LaTeX(
+          latex: "\\text{Hello World!}",
+          textSize: 200,
+          style: TeXStyle.text,
+          color: Colors.black,
+          isRenderGlyphUsePath: false,
+        ),
+      ),
+      const SizedBox(height: 50),
+      _buildRichText(),
+    ],
+  );
+}
+
+_buildRow(String desc, Widget Function() build) {
+  return Row(
+    mainAxisSize: MainAxisSize.min,
+    children: [
+      SizedBox(
+        width: 150,
+        child: Text(
+          desc,
+          textAlign: TextAlign.right,
+          style: const TextStyle(fontSize: 18),
+        ),
+      ),
+      const SizedBox(width: 10),
+      build(),
+    ],
+  );
+}
+
+_buildRichText() {
+  return RichText(
+    text: const TextSpan(
+      children: [
+        TextSpan(
+          text: "Hello!",
+          style: TextStyle(
+            color: Colors.black,
+            fontSize: 25,
+            fontFamily: 'XITS Math',
+          ),
+        ),
+        WidgetSpan(
+          alignment: PlaceholderAlignment.baseline,
+          baseline: TextBaseline.alphabetic,
+          child: LaTeX(
+            latex: "F(\\omega)=\\int_{-\\infty}^{+\\infty}f(t)e^{-i\\omega_nt}dt",
+            textSize: 25,
+            style: TeXStyle.text,
+            color: Colors.black,
+            blur: Blur(BlurStyle.normal, 0.34),
+          ),
+        )
+      ],
+    ),
+  );
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/draggable.dart

@@ -0,0 +1,75 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class DragPane extends StatefulWidget {
+  final Widget top;
+  final Widget bottom;
+  final double dividerThickness;
+  final double offset;
+
+  const DragPane({
+    Key? key,
+    required this.top,
+    required this.bottom,
+    this.dividerThickness = 16,
+    this.offset = 20,
+  }) : super(key: key);
+
+  @override
+  State<DragPane> createState() => _DragPaneState();
+}
+
+class _DragPaneState extends State<DragPane> {
+  double _offset = 10;
+
+  @override
+  void initState() {
+    super.initState();
+    _offset = widget.offset;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
+      return Stack(
+        children: [
+          Positioned.fill(child: widget.bottom),
+          Positioned(
+            top: _offset,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: _buildTop(constraints),
+          ),
+        ],
+      );
+    });
+  }
+
+  _buildTop(BoxConstraints constraints) {
+    final h = constraints.maxHeight - widget.dividerThickness - _offset;
+    return Column(
+      children: [
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onPanUpdate: (detailes) => setState(() {
+            _offset += detailes.delta.dy;
+            final b = constraints.maxHeight - widget.dividerThickness;
+            _offset = max(0, min(_offset, b));
+          }),
+          child: SizedBox(
+            width: constraints.maxWidth,
+            height: widget.dividerThickness,
+            child: Container(
+              color: Colors.black26,
+              child: const Icon(Icons.drag_handle),
+            ),
+          ),
+        ),
+        SizedBox(height: h, child: widget.top),
+      ],
+    );
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/rich.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:microtex_example/utils/convert_spans.dart';
+
+class SimpleRichText extends StatelessWidget {
+  final String text;
+
+  const SimpleRichText({
+    Key? key,
+    required this.text,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return RichText(
+      text: TextSpan(
+        children: SpanConverter().buildSpans(
+          text: text,
+          style: const TextStyle(color: Colors.black, fontSize: 20),
+        ),
+      ),
+    );
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/split.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+
+class SplitView extends StatefulWidget {
+  final Widget left;
+  final Widget right;
+  final double ratio;
+  final double dividerThickness;
+
+  const SplitView({
+    Key? key,
+    required this.left,
+    required this.right,
+    this.ratio = 0.5,
+    this.dividerThickness = 16,
+  }) : super(key: key);
+
+  @override
+  State<SplitView> createState() => _SplitViewState();
+}
+
+class _SplitViewState extends State<SplitView> {
+  double _ratio = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    _ratio = widget.ratio;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
+      final maxWidth = constraints.maxWidth - widget.dividerThickness;
+      final lw = maxWidth * _ratio;
+      final rw = maxWidth - lw;
+      return SizedBox(
+        width: constraints.maxWidth,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(width: lw, child: widget.left),
+            GestureDetector(
+              behavior: HitTestBehavior.translucent,
+              onPanUpdate: (details) {
+                setState(() {
+                  _ratio += details.delta.dx / maxWidth;
+                  if (_ratio > 1) {
+                    _ratio = 1;
+                  } else if (_ratio < 0) {
+                    _ratio = 0;
+                  }
+                });
+              },
+              child: SizedBox(
+                width: widget.dividerThickness,
+                height: constraints.maxHeight,
+                child: Container(
+                  color: Colors.black26,
+                  child: const RotationTransition(
+                    child: Icon(Icons.drag_handle),
+                    turns: AlwaysStoppedAnimation(0.25),
+                  ),
+                ),
+              ),
+            ),
+            SizedBox(width: rw, child: widget.right),
+          ],
+        ),
+      );
+    });
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/tex_highlight_controller.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+
+class TeXHighlightController extends TextEditingController {
+  TeXHighlightController({String? text}) : super(text: text);
+
+  static final out = RegExp(r'\${1,2}[\s\S]*?\${1,2}');
+  static final cmd = RegExp(r'\${1,2}|\\[a-zA-Z]*|\_|\^|\{|\}');
+
+  @override
+  TextSpan buildTextSpan({
+    required BuildContext context,
+    TextStyle? style,
+    required bool withComposing,
+  }) {
+    final sty = style ?? const TextStyle();
+    final dollarSty = sty.copyWith(color: Colors.deepOrange);
+    final texStyle = sty.copyWith(color: Colors.green);
+    final cmdStyle = sty.copyWith(color: Colors.blue);
+    final keyStyle = sty.copyWith(color: Colors.purple);
+
+    final children = <TextSpan>[];
+
+    matchTeX(String tex) {
+      tex.splitMapJoin(
+        cmd,
+        onNonMatch: (span) {
+          if (span.isEmpty) return span;
+          children.add(TextSpan(text: span, style: texStyle));
+          return span;
+        },
+        onMatch: (m) {
+          final cmd = m[0] ?? '';
+          if (cmd.isEmpty) return '';
+          final TextStyle s;
+          if (cmd == '\$' || cmd == '\$\$') {
+            s = dollarSty;
+          } else if (cmd == '_' || cmd == '^') {
+            s = keyStyle;
+          } else if (cmd == '{' || cmd == '}') {
+            s = sty;
+          } else {
+            s = cmdStyle;
+          }
+          children.add(TextSpan(text: cmd, style: s));
+          return cmd;
+        },
+      );
+    }
+
+    text.splitMapJoin(
+      out,
+      onNonMatch: (span) {
+        if (span.isEmpty) return span;
+        children.add(TextSpan(text: span, style: style));
+        return span;
+      },
+      onMatch: (m) {
+        final tex = m[0] ?? '';
+        if (tex.isEmpty) return '';
+        matchTeX(tex);
+        return tex;
+      },
+    );
+    return TextSpan(style: style, children: children);
+  }
+}

package/native/vendor/microtex/platform/flutter/microtex/example/lib/widget/tex_input_controller.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:microtex_example/utils/convert_spans.dart';
+
+class TeXInputController extends TextEditingController {
+  TeXInputController({String? text}) : super(text: text);
+
+  @override
+  TextSpan buildTextSpan({
+    required BuildContext context,
+    TextStyle? style,
+    required bool withComposing,
+  }) {
+    final children = SpanConverter().buildSpans(
+      text: text,
+      style: style ?? const TextStyle(),
+    );
+    return TextSpan(style: style, children: children);
+  }
+}