nandi/frq · nim_renderer.dart

nandi/frqpublic⑂ Fork 0
⑂ f1e99b45fe553489e43293e795175dc08ca4bb88
nim_renderer.dart · 587 lines · 21.3 KBDart    Blame HistoryRaw
The data model, in Nim   1/// The renderer: a Nim widget tree, walked into Flutter widgets.
The renderer, and a transport bug that took four tries   3/// This knows the tag vocabulary and nothing else — no screens, no state, no
4/// idea what "connect" means. Nim decides what the screen is; this decides
5/// what a `vbox` looks like.
The data model, in Nim   6
The renderer, and a transport bug that took four tries   7/// The measure of whether the split is honest is how boring this file is. If a
8/// feature ever needs a change here AND in Nim, the boundary is in the wrong
9/// place. The treatments are `flutter/src/frq/hiccup.cljd`'s, so a tree from
10/// Nim paints the way the same tree painted under ClojureDart.
The data model, in Nim   13import 'dart:async';
The renderer, and a transport bug that took four tries   14import 'dart:io';
The data model, in Nim   15
16import 'package:flutter/material.dart';
17import 'package:frq_core/frq_core.dart' as core;
The renderer, and a transport bug that took four tries   19import 'nim_theme.dart' as t;
The data model, in Nim   21class NimApp extends StatefulWidget {
const NimApp({super.key});
@override
State<NimApp> createState() => _NimAppState();
27class _NimAppState extends State<NimApp> {
late core.UiNode _tree = core.render();
Timer? _poll;
The renderer, and a transport bug that took four tries   31  // One controller and one focus node per keyed entry, kept across rebuilds.
// This is why `:key` is on every entry in both the Clojure and the Nim: a
// controller identified by position instead of name meant the host field and
// the port field shared one and both showed the port. The focus node is the
// same bug one layer up — the field is rebuilt from a fresh tree on every
// keystroke, so without a node held per key the caret goes nowhere after the
// first line.
final _controllers = <String, TextEditingController>{};
final _focus = <String, FocusNode>{};
The data model, in Nim   42  @override
void initState() {
  super.initState();
  // Polling, because the socket lives on a Nim thread and there is no
The renderer, and a transport bug that took four tries   46    // callback into Dart. At ~70µs a render a 100ms timer costs nothing.
The data model, in Nim   47    _poll = Timer.periodic(const Duration(milliseconds: 100), (_) {
The renderer, and a transport bug that took four tries   48      final next = core.poll();
    if (next.toString() != _tree.toString()) {
      setState(() => _tree = next);
The data model, in Nim   51
void _send(String id, [String value = '']) {
The renderer, and a transport bug that took four tries   56    if (id.isEmpty) return;
The data model, in Nim   57    setState(() => _tree = core.dispatch(id, value));
  if (id == 'send') _focus['draft']?.requestFocus();
@override
void dispose() {
  _poll?.cancel();
  for (final c in _controllers.values) {
    c.dispose();
  for (final f in _focus.values) {
    f.dispose();
  super.dispose();
@override
Widget build(BuildContext context) => MaterialApp(
      title: 'frq',
The renderer, and a transport bug that took four tries   76        debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: t.bg,
        colorScheme: const ColorScheme.dark(
          primary: t.accent,
          onPrimary: t.onAccent,
          surface: t.bg,
          onSurface: t.onBg,
          error: t.destructive,
The data model, in Nim   88
The renderer, and a transport bug that took four tries   89        home: Scaffold(backgroundColor: t.bg, body: SafeArea(child: _build(_tree))),
The data model, in Nim   90
The renderer, and a transport bug that took four tries   92  // ---------------------------------------------------------------- helpers
TextStyle _style(double size, Color color) =>
    TextStyle(fontSize: size, color: color, height: 1.35);
double _d(dynamic v, double fallback) =>
    v is num ? v.toDouble() : fallback;
/// Gaps between children, as real widgets rather than a `spacing:` — the
/// same layout on every Flutter version this might be built against.
List<Widget> _spaced(List<Widget> kids, double gap, {required bool vertical}) {
  if (gap <= 0 || kids.length < 2) return kids;
  final out = <Widget>[];
  for (var i = 0; i < kids.length; i++) {
    if (i > 0) {
      out.add(vertical ? SizedBox(height: gap) : SizedBox(width: gap));
    out.add(kids[i]);
  return out;
/// A source that may be a bundled asset, a file on disk, or a URL — the
/// three the screens hand over, named apart by an `asset:` prefix so they
/// stay one property.
ImageProvider? _imageProvider(String src) {
  if (src.isEmpty) return null;
  if (src.startsWith('asset:')) return AssetImage(src.substring(6));
  if (src.startsWith('http://') || src.startsWith('https://')) {
    return NetworkImage(src);
  return FileImage(File(src));
Widget _wrapTap(String onClick, Widget child, {BorderRadius? radius}) {
  if (onClick.isEmpty) return child;
  return InkWell(
    onTap: () => _send(onClick),
    borderRadius: radius,
    child: child,
// ------------------------------------------------------------------ build
Expanded only where a Flex can hold it   137  /// The axis of the widget a node is being built *into*, because `Expanded`
/// is only legal inside a Flex and there is no way to ask Flutter after the
/// fact.
/// Getting this wrong is what "Cannot hit test a render box that has never
/// been laid out" means, in a pile: an `Expanded` inside a `Wrap` fails the
/// layout, and every box under it is then asked to hit-test without ever
/// having been laid out. The chats screen did exactly that — two unsized
/// entries in an `hbox`, which is a Wrap.
static const _noAxis = '';
static const _row = 'row';
static const _column = 'column';
Widget _build(core.UiNode n, [String axis = _noAxis]) {
The renderer, and a transport bug that took four tries   151    final spacing = _d(n.props['spacing'], 0);
Expanded only where a Flex can hold it   152    final flex = axis == _row || axis == _column;
  // What this node's own children are being built into.
  final childAxis = switch (n.tag) {
    'page' || 'vbox' || 'card' || 'scroll' || 'dialog' => _column,
    'hbox' => n.prop('wrap', true) ? _noAxis : _row,
    _ => _noAxis,
  final kids = n.children.map((c) => _build(c, childAxis)).toList();
The data model, in Nim   161
  switch (n.tag) {
    case 'page':
The renderer, and a transport bug that took four tries   164        return SingleChildScrollView(
        child: Center(
          child: ConstrainedBox(
            constraints:
                BoxConstraints(maxWidth: _d(n.props['maxWidth'], 520)),
            child: Padding(
              padding: const EdgeInsets.all(t.spaceM),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   175
    case 'vbox':
The renderer, and a transport bug that took four tries   180
        Widget col = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: _spaced(kids, spacing, vertical: true),
        col = _margins(n, col);
        final w = _d(n.props['widthRequest'], 0);
        if (w > 0) col = SizedBox(width: w, child: col);
        // `fillHeight` is what keeps the compose bar at the bottom instead
Expanded only where a Flex can hold it   190          // of wherever the backlog happens to end — but only a Flex can be
        // told to expand into.
        return (n.prop('fillHeight', false) && flex)
            ? Expanded(child: col)
            : col;
The renderer, and a transport bug that took four tries   195
The data model, in Nim   196
    case 'hbox':
The renderer, and a transport bug that took four tries   198
        // Wrap and not Row: `:hbox` in the screens means "these go together
        // across", not "these fit". The head row of the chat screen asks for
        // more than 360 points has, and a Row answers that with an overflow
        // rather than a second line.
        final wrapping = n.prop('wrap', true);
        final align = n.prop('align', 'center');
        if (!wrapping) {
Expanded only where a Flex can hold it   206            // A child asking to fill the height gets it from the row's cross
          // axis, not from an Expanded — Expanded in a Row is about width.
          final stretches =
              n.children.any((c) => c.prop('fillHeight', false));
The renderer, and a transport bug that took four tries   210            return _margins(
Expanded only where a Flex can hold it   213                crossAxisAlignment: stretches
                  ? CrossAxisAlignment.stretch
                  : (align == 'end'
                      ? CrossAxisAlignment.end
                      : CrossAxisAlignment.center),
The renderer, and a transport bug that took four tries   218                children: _spaced(kids, spacing, vertical: false),
        return _margins(
          Wrap(
            spacing: spacing,
            runSpacing: spacing,
            crossAxisAlignment: align == 'end'
                ? WrapCrossAlignment.end
                : WrapCrossAlignment.center,
            children: kids,
The data model, in Nim   231
The renderer, and a transport bug that took four tries   232
The data model, in Nim   234
The renderer, and a transport bug that took four tries   235      // Container::Card in the Clojure: padding 12, fills its width.
The data model, in Nim   236      case 'card':
The renderer, and a transport bug that took four tries   237        return Container(
        width: double.infinity,
        margin: const EdgeInsets.symmetric(vertical: t.spaceXxxs),
        padding: const EdgeInsets.all(t.spaceXs),
        decoration: BoxDecoration(
          color: t.card,
          borderRadius: BorderRadius.circular(t.radiusS),
The data model, in Nim   244
The renderer, and a transport bug that took four tries   245          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _spaced(kids, spacing > 0 ? spacing : t.spaceXxs,
                vertical: true)),
The data model, in Nim   249
    case 'title':
      return Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   253            style: _style(t.textTitle3, t.onBg)
              .copyWith(fontWeight: FontWeight.bold));
The data model, in Nim   255
    case 'title-2':
      return Padding(
The renderer, and a transport bug that took four tries   258          padding: const EdgeInsets.only(top: t.spaceXxs, bottom: t.spaceXxxs),
The data model, in Nim   259          child: Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   260              style: _style(t.textTitle4, t.onBg)
                .copyWith(fontWeight: FontWeight.w600)),
The data model, in Nim   262
    case 'label':
The renderer, and a transport bug that took four tries   265        return Text(n.prop('label', ''), style: _style(t.textBody, t.onBg));
The data model, in Nim   266
    case 'dim-label':
The renderer, and a transport bug that took four tries   268        return Text(n.prop('label', ''), style: _style(t.textCaption, t.dim));
    /// Prose, as opposed to a label: this is what a message is, and it
    /// wraps. Kept apart from `label` because a wrapping label in a row
    /// lays out against the row's width rather than the column's.
    case 'text':
      return Text(n.prop('text', ''), style: _style(t.textBody, t.onBg));
    case 'link':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(
          n.prop('label', ''),
          style: _style(t.textBody, t.accent)
              .copyWith(decoration: TextDecoration.underline,
                        decorationColor: t.accent),
    case 'separator':
      return const Divider(height: 1, thickness: 1, color: t.divider);
    case 'spacer':
        final s = _d(n.props['size'], t.spaceXxs);
        return SizedBox(width: s, height: s);
The data model, in Nim   295
    case 'spinner':
The renderer, and a transport bug that took four tries   297        return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(
              width: 16,
              height: 16,
              child: CircularProgressIndicator(
                  strokeWidth: 2, color: t.accent)),
          if (n.prop('label', '').isNotEmpty) ...[
            const SizedBox(width: t.spaceXxs),
            Text(n.prop('label', ''), style: _style(t.textCaption, t.dim)),
    /// A dot that says whether the thing is live, and the words beside it.
    case 'status':
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 8,
            height: 8,
            decoration: BoxDecoration(
              color: n.prop('live', false) ? t.success : t.dim,
              borderRadius: BorderRadius.circular(t.radiusXs),
          const SizedBox(width: 6),
          Text(n.prop('label', ''), style: _style(t.textCaption, t.dim)),
The data model, in Nim   329
    case 'button':
The renderer, and a transport bug that took four tries   331
        final onClick = n.prop('onClick', '');
        final kind = n.prop('kind', 'default');
        final label = Text(n.prop('label', ''));
        if (kind == 'primary') {
          return FilledButton(
              onPressed: () => _send(onClick), child: label);
        if (kind == 'destructive') {
          return FilledButton(
            style: FilledButton.styleFrom(
                backgroundColor: t.destructive,
                foregroundColor: t.onDestructive),
            onPressed: () => _send(onClick),
            child: label,
        return OutlinedButton(onPressed: () => _send(onClick), child: label);
The data model, in Nim   350
    case 'checkbutton':
The renderer, and a transport bug that took four tries   352
        // The label is part of the target. 20 logical pixels is a fine tick
        // on a desktop pointer and a miss on a thumb, so the whole row taps.
        final onToggled = n.prop('onToggled', '');
        return InkWell(
          onTap: () => _send(onToggled),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Checkbox(
                value: n.prop('active', false),
                onChanged: (_) => _send(onToggled),
              Text(n.prop('label', ''), style: _style(t.textBody, t.onBg)),
    case 'emoji':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(n.prop('glyph', n.prop('emoji', '')),
            style: TextStyle(fontSize: _d(n.props['size'], 16))),
    /// A reaction pill: the glyph, and the tally beside it where there is
    /// one to show. The same shape whether it is a reaction under a message,
    /// a swatch in the picker, or a chip on the sender's row — which is the
    /// point: what you press to react and what appears once you have should
    /// look like one family.
383
    /// A count of zero is no count. The picker passes 0 for every swatch,
    /// and a grid of little grey zeroes is noise where a reader is scanning
    /// for a face. `mine` is the accent, because the only thing a pill has
    /// to say at a glance is whether pressing it again takes yours off.
    case 'reaction':
        final size = _d(n.props['size'], 14);
        final count = n.prop('count', 0);
        final mine = n.prop('mine', false);
        final pad = (0.25 * size).clamp(2.0, 8.0);
        return _wrapTap(
          n.prop('onClick', ''),
          Container(
            padding: EdgeInsets.symmetric(horizontal: pad, vertical: pad / 2),
            decoration: BoxDecoration(
              color: mine ? t.accent : t.component,
              borderRadius: BorderRadius.circular(t.radiusS),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(n.prop('emoji', ''), style: TextStyle(fontSize: size)),
                if (count > 0) ...[
                  const SizedBox(width: 4),
                  Text('$count',
                      style: _style(t.textCaption,
                          mine ? t.onAccent : t.dim)),
    /// A face is a way in to who someone is, so it takes the press that
    /// opens their profile. A picture that will not load is a face that
    /// stays its initial and nothing else.
    case 'avatar':
        final size = _d(n.props['size'], 32);
        final provider = _imageProvider(n.prop('url', ''));
        final fallback = n.prop('fallback', '');
        final face = CircleAvatar(
          radius: size / 2,
          backgroundColor: t.component,
          backgroundImage: provider,
          onBackgroundImageError: provider == null ? null : (_, __) {},
          child: provider == null
              ? Text(
                  fallback.isNotEmpty
                      ? fallback.substring(0, 1).toUpperCase()
                  style: _style(t.textBody, t.onBg))
              : null,
        final onClick = n.prop('onClick', '');
        if (onClick.isEmpty) return face;
        return InkWell(
          onTap: () => _send(onClick),
          customBorder: const CircleBorder(),
          child: face,
    case 'image':
        final provider = _imageProvider(n.prop('src', ''));
        if (provider == null) return const SizedBox.shrink();
        final maxW = _d(n.props['maxWidth'], 0);
        final maxH = _d(n.props['maxHeight'], 0);
        Widget img = Image(
          image: provider,
          fit: BoxFit.contain,
          // A half-written cache file, or one deleted under us: the decoder
          // throws during the build, and an exception in a build is a red
          // screen for the whole conversation rather than a gap where one
          // picture was.
          errorBuilder: (_, __, ___) => const SizedBox.shrink(),
        if (maxW > 0 || maxH > 0) {
          img = ConstrainedBox(
            constraints: BoxConstraints(
              maxWidth: maxW > 0 ? maxW : double.infinity,
              maxHeight: maxH > 0 ? maxH : double.infinity,
            child: img,
        return _wrapTap(n.prop('onClick', ''), img);
The data model, in Nim   474
    case 'entry':
The renderer, and a transport bug that took four tries   476
        final key = n.prop('key', '');
        final value = n.prop('text', '');
        final c = _controllers.putIfAbsent(
            key, () => TextEditingController(text: value));
        // Only when it actually differs: assigning unconditionally moves the
        // caret to the end on every keystroke.
        if (c.text != value) {
          c.value = c.value.copyWith(
            text: value,
            selection: TextSelection.collapsed(offset: value.length),
        final field = TextField(
          controller: c,
          focusNode: _focus.putIfAbsent(key, FocusNode.new),
          style: _style(t.textBody, t.onBg),
          decoration: InputDecoration(
            hintText: n.prop('placeholder', ''),
            hintStyle: _style(t.textBody, t.dim),
            isDense: true,
            filled: true,
            fillColor: t.component,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(t.radiusS),
              borderSide: BorderSide.none,
          onChanged: (v) => _send(n.prop('onChange', ''), v),
          onSubmitted: (_) => _send(n.prop('onSubmit', '')),
        final w = _d(n.props['widthRequest'], 0);
Expanded only where a Flex can hold it   508          if (w > 0) return SizedBox(width: w, child: field);
        // No width asked for: take the rest of the row where there is a row
        // to take it from, and otherwise a definite width. NOT Expanded
        // unconditionally — a TextField has no intrinsic width, so in a Wrap
        // it is both illegal and unmeasurable, and that combination is what
        // took the whole screen down rather than one field.
        return axis == _row
            ? Expanded(child: field)
            : SizedBox(width: 320, child: field);
The renderer, and a transport bug that took four tries   517
    case 'scroll':
        Widget body = SingleChildScrollView(
          // The backlog reads from the bottom; a settings list from the top.
          reverse: n.prop('stickToBottom', false),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   527
The renderer, and a transport bug that took four tries   528          body = Scrollbar(child: body);
        final h = _d(n.props['height'], 0);
        if (h > 0) return SizedBox(height: h, child: body);
Expanded only where a Flex can hold it   531          // No fixed height: take what the column has left, where there is a
        // column. `reserve` is the Clojure's way of saying the same thing to
        // a backend that could not do this, and is ignored here on purpose.
        return flex ? Expanded(child: body) : SizedBox(height: 400, child: body);
The data model, in Nim   535
The renderer, and a transport bug that took four tries   536
    /// A panel over the screen rather than a screen of its own.
    case 'dialog':
      return Card(
        color: t.cardComponent,
        child: Padding(
          padding: const EdgeInsets.all(t.spaceS),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              if (n.prop('title', '').isNotEmpty)
                Padding(
                  padding: const EdgeInsets.only(bottom: t.spaceXxs),
                  child: Text(n.prop('title', ''),
                      style: _style(t.textTitle4, t.onCard)
                          .copyWith(fontWeight: FontWeight.w600)),
              ..._spaced(kids, spacing, vertical: true),
The data model, in Nim   557
    default:
      // An unknown tag paints as itself rather than crashing or vanishing.
      // Nim can add one and see it before this file has heard of it, which
The renderer, and a transport bug that took four tries   563        // is what makes the boundary pleasant to work across.
The data model, in Nim   564        return Container(
        padding: const EdgeInsets.all(4),
        color: Colors.orange.withValues(alpha: 0.3),
        child: Text('?${n.tag}'),
The renderer, and a transport bug that took four tries   572  /// `margin`, `marginTop`, `marginBottom`, `marginRight` — the props the
/// screens use to buy air without a wrapper each time.
Widget _margins(core.UiNode n, Widget child) {
  final all = _d(n.props['margin'], 0);
  final top = _d(n.props['marginTop'], all);
  final bottom = _d(n.props['marginBottom'], all);
  final right = _d(n.props['marginRight'], all);
  final left = _d(n.props['marginLeft'], all);
  if (top == 0 && bottom == 0 && right == 0 && left == 0) return child;
  return Padding(
    padding: EdgeInsets.only(
        top: top, bottom: bottom, right: right, left: left),
    child: child,
The data model, in Nim   586