mathtool2/lib/calculator_page.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';
import 'package:provider/provider.dart';

import 'curve_plot.dart';
import 'expr_editor.dart';
import 'expr_node.dart';
import 'symja.dart';
import 'symja_functions.dart';

/// 科学计算器（默认主界面）。
///
/// 输入用**结构化节点树**（见 lib/expr_node.dart），不是字符串：
/// 按键把节点插进当前光标槽，分数竖排、指数上标、多参数函数各有自己的槽。
/// 纯文本输入留给控制台。
class CalculatorPage extends StatefulWidget {
  const CalculatorPage({super.key});

  @override
  State<CalculatorPage> createState() => _CalculatorPageState();
}

class _CalculatorPageState extends State<CalculatorPage> {
  final _doc = ExprDoc();

  SymjaResult? _preview;
  SymjaResult? _committed;
  String? _error;

  Timer? _debounce;
  int _seq = 0;

  @override
  void dispose() {
    _debounce?.cancel();
    super.dispose();
  }

  // ------------------------------------------------------------------ 求值

  /// 编辑器每次变化都走这里：清掉上次的提交态，防抖后重算预览。
  void _onDocChanged() {
    setState(() {
      _committed = null;
      _error = null;
    });
    _debounce?.cancel();
    _debounce = Timer(const Duration(milliseconds: 500), _runPreview);
  }

  String get _source => _doc.toSymja();

  Future<void> _runPreview() async {
    final expr = _source;
    if (expr.isEmpty || expr == 'Null') {
      if (mounted) setState(() => _preview = null);
      return;
    }
    final session = context.read<SymjaSession>();
    final id = ++_seq;
    final r = await session.preview(expr);
    if (!mounted || id != _seq) return; // 已有更新的预览在路上
    setState(() => _preview = r);
  }

  Future<void> _commit() async {
    final expr = _source;
    if (expr.isEmpty || expr == 'Null') return;
    _debounce?.cancel();
    final session = context.read<SymjaSession>();
    final id = ++_seq; // 让在途的预览作废
    try {
      final r = await session.evaluate(expr);
      if (!mounted || id != _seq) return;
      setState(() {
        _committed = r;
        _preview = null;
        _error = null;
      });
    } on SymjaException catch (e) {
      if (!mounted || id != _seq) return;
      setState(() {
        _error = '$e';
        _committed = null;
        _preview = null;
      });
    }
    await session.refreshVariables();
  }

  Future<void> _plotCurrent() async {
    final expr = _source;
    if (expr.isEmpty || expr == 'Null') return;
    final session = context.read<SymjaSession>();
    final messenger = ScaffoldMessenger.of(context);
    try {
      final s = await session.sample(expr, from: -6.3, to: 6.3, count: 240);
      if (!mounted) return;
      await showDialog<void>(
        context: context,
        builder: (_) => AlertDialog(
          title: Text('$expr   （${s.ys.length} 点，${s.elapsedMs} ms）'),
          content: SizedBox(
            width: 360,
            height: 280,
            child: CurvePlot(series: [
              CurveSeries(
                label: expr,
                color: const Color(0xFF3F51B5),
                points: [
                  for (var i = 0; i < s.ys.length; i++)
                    Offset(s.xAt(i), s.ys[i]),
                ],
              ),
            ]),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('关闭'),
            ),
          ],
        ),
      );
    } on SymjaException catch (e) {
      messenger.showSnackBar(SnackBar(content: Text('$e')));
    }
  }

  // ------------------------------------------------------------------ 按键

  void _press(_Key k) {
    switch (k.act) {
      case _Act.char:
        if (k.mergeDigit) {
          // 数字键并入左边那个数字字面量，`42` 才是一个数而不是两个节点
          _doc.insertChar(k.payload);
        } else {
          _doc.insert(LitNode(k.payload));
        }
      case _Act.fn:
        _doc.makeFunction(k.payload);
      case _Act.fnPrefixed:
        // 像 Integrate 这种，第一个参数是要填的，后面预置好
        _doc.makeFunction(k.payload, prefill: k.prefill);
        // prefill 之后光标停在第一个槽（空的），正是要填的位置
      case _Act.sqrt:
        _doc.makeSqrt();
      case _Act.group:
        _doc.makeGroup();
      case _Act.power:
        _doc.makePower();
      case _Act.frac:
        _doc.makeFraction();
      case _Act.postfix:
        // 阶乘是后缀：把光标左边那个节点收进来当操作数
        final operand = _doc.takeLeft();
        _doc.insert(PostfixNode(
          operand: SeqNode(operand == null ? null : [operand]),
        ));
      case _Act.comma:
        _doc.nextArgument();
      case _Act.back:
        _doc.backspace();
      case _Act.clear:
        _doc.clear();
      case _Act.commit:
        _commit();
        return; // 提交不改文档，不用刷新
    }
    _onDocChanged();
  }

  Future<void> _showPalette() async {
    final picked = await showModalBottomSheet<({String value, bool isFn})>(
      context: context,
      isScrollControlled: true,
      showDragHandle: true,
      builder: (_) => const _FunctionPalette(),
    );
    if (picked == null) return;
    if (picked.isFn) {
      _doc.makeFunction(picked.value);
    } else {
      _doc.insert(LitNode(picked.value));
    }
    _onDocChanged();
  }

  // ------------------------------------------------------------------ UI

  @override
  Widget build(BuildContext context) {
    final session = context.watch<SymjaSession>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('计算器'),
        actions: [
          // 精确 / 近似 切换。默认精确：`1/3` 就是 `1/3`，这是符号计算的意义所在。
          TextButton(
            onPressed: () {
              session.approximate = !session.approximate;
              _onDocChanged(); // 立刻按新模式重算预览
            },
            child: Text(
              session.approximate ? '≈ 近似' : '精确',
              style: TextStyle(
                fontFamily: 'monospace',
                fontSize: 13,
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
          IconButton(
            tooltip: '画图（x ∈ [-6.3, 6.3]）',
            icon: const Icon(Icons.show_chart),
            onPressed: _plotCurrent,
          ),
          IconButton(
            tooltip: '函数面板',
            icon: const Icon(Icons.functions),
            onPressed: _showPalette,
          ),
          IconButton(
            tooltip: '清空',
            icon: const Icon(Icons.refresh),
            onPressed: () {
              _doc.clear();
              _onDocChanged();
            },
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: [
            _display(context),
            const Divider(height: 1),
            Expanded(child: _keypad(context)),
          ],
        ),
      ),
    );
  }

  Widget _display(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    final shown = _committed ?? _preview;

    return Container(
      width: double.infinity,
      constraints: const BoxConstraints(minHeight: 132),
      padding: const EdgeInsets.fromLTRB(12, 10, 12, 10),
      color: scheme.surfaceContainerLow,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          ExprEditor(doc: _doc, onChanged: _onDocChanged),
          const SizedBox(height: 6),
          // 序列化结果摆在明面上：用户能看到"到底会被求值成什么"
          Text(
            _source,
            textAlign: TextAlign.right,
            style: TextStyle(
              fontFamily: 'monospace',
              fontSize: 11,
              color: scheme.outline,
            ),
          ),
          const SizedBox(height: 6),
          SizedBox(
            height: 52,
            width: double.infinity,
            // 等比缩到放得下，**不横向滚动** ——
            // 滚动的话长结果只能看到尾巴，"显示不全"就是这么来的。
            child: FittedBox(
              fit: BoxFit.scaleDown,
              alignment: Alignment.centerRight,
              child: _resultView(context, shown),
            ),
          ),
        ],
      ),
    );
  }

  Widget _resultView(BuildContext context, SymjaResult? shown) {
    final scheme = Theme.of(context).colorScheme;

    if (_error != null) {
      return SelectableText(
        _error!,
        style: TextStyle(
          fontFamily: 'monospace',
          fontSize: 13,
          color: scheme.error,
        ),
      );
    }
    if (shown == null) return const SizedBox.shrink();

    final plain = SelectableText(
      shown.text,
      style: const TextStyle(fontFamily: 'monospace', fontSize: 22),
    );
    final tex = shown.tex;
    final body = tex == null
        ? plain
        : Math.tex(
            tex,
            mathStyle: MathStyle.display,
            textStyle: TextStyle(fontSize: 26, color: scheme.onSurface),
            onErrorFallback: (_) => plain,
          );

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        if (_committed != null) ...[
          Icon(Icons.check_circle, size: 16, color: scheme.primary),
          const SizedBox(width: 6),
          Text('${_committed!.elapsedMs} ms',
              style: TextStyle(fontSize: 11, color: scheme.outline)),
          const SizedBox(width: 10),
        ],
        body,
      ],
    );
  }

  Widget _keypad(BuildContext context) {
    return LayoutBuilder(
      builder: (context, box) {
        final rows = <List<_Key>>[
          [
            _Key('∫', _Act.fnPrefixed, payload: 'Integrate', prefill: ['', 'x']),
            _Key('Σ', _Act.fnPrefixed,
                payload: 'Sum', prefill: ['', '{n, 1, Infinity}']),
            _Key('d/dx', _Act.fnPrefixed, payload: 'D', prefill: ['', 'x']),
            _Key('lim', _Act.fnPrefixed, payload: 'Limit', prefill: ['', 'x->0']),
            _Key('solve', _Act.fnPrefixed, payload: 'Solve', prefill: ['', 'x']),
          ],
          [
            _Key('sin', _Act.fn, payload: 'Sin'),
            _Key('cos', _Act.fn, payload: 'Cos'),
            _Key('tan', _Act.fn, payload: 'Tan'),
            _Key('ln', _Act.fn, payload: 'Log'),
            _Key('√', _Act.sqrt),
          ],
          [
            _Key('7', _Act.char, payload: '7', mergeDigit: true),
            _Key('8', _Act.char, payload: '8', mergeDigit: true),
            _Key('9', _Act.char, payload: '9', mergeDigit: true),
            _Key('(', _Act.group),
            _Key('/', _Act.frac),
          ],
          [
            _Key('4', _Act.char, payload: '4', mergeDigit: true),
            _Key('5', _Act.char, payload: '5', mergeDigit: true),
            _Key('6', _Act.char, payload: '6', mergeDigit: true),
            _Key('×', _Act.char, payload: '*'),
            _Key('!', _Act.postfix),
          ],
          [
            _Key('1', _Act.char, payload: '1', mergeDigit: true),
            _Key('2', _Act.char, payload: '2', mergeDigit: true),
            _Key('3', _Act.char, payload: '3', mergeDigit: true),
            _Key('+', _Act.char, payload: '+'),
            _Key('−', _Act.char, payload: '-'),
          ],
          [
            _Key('0', _Act.char, payload: '0', mergeDigit: true),
            _Key('.', _Act.char, payload: '.', mergeDigit: true),
            _Key('^', _Act.power),
            _Key('x', _Act.char, payload: 'x'),
            _Key('n', _Act.char, payload: 'n'),
          ],
          [
            _Key('⌫', _Act.back, tint: true),
            _Key('CLR', _Act.clear, tint: true),
            _Key(',', _Act.comma),
            _Key('ANS', _Act.char, payload: '%', tint: true),
            _Key('=', _Act.commit, primary: true),
          ],
        ];

        // 7 行 + 6 个间隙，再扣掉 Padding 上下各 6 ——
        // box.maxHeight 是 padding **之前**的高度，漏掉会溢出。
        final h = (box.maxHeight - 12 - 6 * 6) / 7;
        return Padding(
          padding: const EdgeInsets.all(6),
          child: Column(
            children: [
              for (var r = 0; r < rows.length; r++) ...[
                if (r > 0) const SizedBox(height: 6),
                SizedBox(
                  height: h,
                  child: Row(
                    children: [
                      for (var c = 0; c < rows[r].length; c++) ...[
                        if (c > 0) const SizedBox(width: 6),
                        Expanded(child: _keyButton(rows[r][c])),
                      ],
                    ],
                  ),
                ),
              ],
            ],
          ),
        );
      },
    );
  }

  Widget _keyButton(_Key k) {
    final scheme = Theme.of(context).colorScheme;
    final bg = k.primary
        ? scheme.primary
        : k.tint
            ? scheme.surfaceContainerHighest
            : scheme.surfaceContainerLow;
    final fg = k.primary ? scheme.onPrimary : scheme.onSurface;

    return Material(
      // 加 key 是为了让测试能精确定位按键 —— 编辑器里渲染出的字面量（比如 'x'）
      // 和键盘上同名的按键都符合 find.text，会撞车。
      key: ValueKey('key-${k.label}'),
      color: bg,
      borderRadius: BorderRadius.circular(10),
      child: InkWell(
        borderRadius: BorderRadius.circular(10),
        onTap: () => _press(k),
        child: Center(
          child: Text(
            k.label,
            style: TextStyle(
              color: fg,
              fontSize: k.label.length > 2 ? 13 : 17,
              fontFamily: k.label.length > 2 ? null : 'monospace',
            ),
          ),
        ),
      ),
    );
  }
}

enum _Act {
  char,
  fn,
  fnPrefixed,
  sqrt,
  group,
  power,
  frac,
  postfix,
  comma,
  back,
  clear,
  commit,
}

@immutable
class _Key {
  final String label;
  final _Act act;
  final String payload;

  /// fnPrefixed 用：第一个参数留空给用户填，其余的预置。
  final List<String> prefill;

  /// 数字键：并入左边那个数字字面量，而不是各建一个节点。
  final bool mergeDigit;

  final bool tint;
  final bool primary;

  const _Key(
    this.label,
    this.act, {
    this.payload = '',
    this.prefill = const [],
    this.mergeDigit = false,
    this.tint = false,
    this.primary = false,
  });
}

/// 函数面板：检索 Symja 的两百多个函数名，选中后插入一个函数节点。
class _FunctionPalette extends StatefulWidget {
  const _FunctionPalette();

  @override
  State<_FunctionPalette> createState() => _FunctionPaletteState();
}

class _FunctionPaletteState extends State<_FunctionPalette> {
  final _search = TextEditingController();
  String _q = '';

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

  @override
  Widget build(BuildContext context) {
    final q = _q.trim().toLowerCase();
    final fns = kSymjaFunctions
        .where((f) => q.isEmpty || f.toLowerCase().contains(q))
        .toList(growable: false);

    return DraggableScrollableSheet(
      expand: false,
      initialChildSize: 0.75,
      maxChildSize: 0.95,
      builder: (context, scroll) => Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
            child: TextField(
              controller: _search,
              autofocus: true,
              decoration: InputDecoration(
                isDense: true,
                hintText: '函数名（共 ${kSymjaFunctions.length} 个）',
                prefixIcon: const Icon(Icons.search),
                border: const OutlineInputBorder(),
              ),
              onChanged: (v) => setState(() => _q = v),
            ),
          ),
          // 常量做成可点的 —— 它们从键盘上挪走了，得有个地方能按。
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Wrap(
              spacing: 8,
              runSpacing: 4,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: [
                Text('常量', style: Theme.of(context).textTheme.bodySmall),
                for (final c in kSymjaConstants)
                  ActionChip(
                    label: Text(
                      c,
                      style: const TextStyle(
                          fontFamily: 'monospace', fontSize: 12),
                    ),
                    visualDensity: VisualDensity.compact,
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    onPressed: () =>
                        Navigator.pop(context, (value: c, isFn: false)),
                  ),
              ],
            ),
          ),
          const Divider(height: 16),
          Expanded(
            child: fns.isEmpty
                ? const Center(child: Text('没有匹配的函数'))
                : ListView.builder(
                    controller: scroll,
                    itemCount: fns.length,
                    itemBuilder: (_, i) => ListTile(
                      dense: true,
                      title: Text(
                        fns[i],
                        style: const TextStyle(fontFamily: 'monospace'),
                      ),
                      onTap: () => Navigator.pop(
                          context, (value: fns[i], isFn: true)),
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}