WIP

.gitea/workflows/test.yaml

@@ -1,6 +1,8 @@
 name: "Test"
 on:
   push:
+    branches:
+      - main
   pull_request:
 
 jobs:
@@ -14,7 +16,9 @@ jobs:
           apt-get update
           apt-get install -y git jq
 
+
       - run: git config --global --add safe.directory '*'
+
       - run: git clone --depth=1 --single-branch --branch=master https://git.pvv.ntnu.no/mugiten/kanjivg.git kanjivg
 
       - name: Setup Flutter

flake.lock

@@ -18,11 +18,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1771848320,
-        "narHash": "sha256-0MAd+0mun3K/Ns8JATeHT1sX28faLII5hVLq0L3BdZU=",
+        "lastModified": 1771369470,
+        "narHash": "sha256-0NBlEBKkN3lufyvFegY4TYv5mCNHbi5OmBDrzihbBMQ=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "2fc6539b481e1d2569f25f8799236694180c0993",
+        "rev": "0182a361324364ae3f436a63005877674cf45efb",
         "type": "github"
       },
       "original": {

lib/animator.dart

@@ -0,0 +1,715 @@
+import 'dart:io';
+import 'dart:math' show min, sqrt, pow;
+
+import 'package:xml/xml.dart';
+
+import 'svg_parser.dart';
+import 'primitives/point.dart';
+import 'primitives/bezier.dart' as bezier;
+
+double _computePathLength(String path) =>
+    parsePath(path).size(error: 1e-8).toDouble();
+
+// String _shescape(String path) =>
+//     "'${path.replaceAll(RegExp(r"(?=['\\\\])"), "\\\\")}'";
+
+extension _Dedent on String {
+  String get dedented {
+    final withoutEmptyLines = split('\n').where((l) => l.isNotEmpty).toList();
+    final whitespaceAmounts = [
+      for (final line in withoutEmptyLines)
+        line.split('').takeWhile((c) => c == ' ').length,
+    ];
+    final whitespaceToRemove = whitespaceAmounts.reduce(min);
+    return withoutEmptyLines
+        .map((l) => l.replaceRange(0, whitespaceToRemove, ''))
+        .join('\n');
+  }
+}
+
+class JsAnimationElement {
+  final XmlDocumentFragment bg;
+  final XmlDocumentFragment anim;
+  final XmlDocumentFragment? brush;
+  final XmlDocumentFragment? brushBorder;
+
+  /// the time set (as default) for each animation
+  final num time;
+
+  const JsAnimationElement({
+    required this.bg,
+    required this.anim,
+    required this.time,
+    this.brush,
+    this.brushBorder,
+  });
+}
+
+// ease, ease-in, etc:
+// https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#ease
+const pt1 = Point(0, 0);
+const easeCt1 = Point(0.25, 0.1);
+const easeCt2 = Point(0.25, 1.0);
+const easeInCt1 = Point(0.42, 0.0);
+const easeInCt2 = Point(1.0, 1.0);
+const easeInOutCt1 = Point(0.42, 0.0);
+const easeInOutCt2 = Point(0.58, 1.0);
+const easeOutCt1 = Point(0.0, 0.0);
+const easeOutCt2 = Point(0.58, 1.0);
+const pt2 = Point(1, 1);
+
+// class  {
+// }
+
+enum TimingFunction { linear, ease, easeIn, easeInOut, easeOut }
+
+extension Funcs on TimingFunction {
+  double Function(double) get func => {
+    TimingFunction.linear: (double x) => x,
+    TimingFunction.ease: (double x) =>
+        bezier.value(pt1, easeCt1, easeCt2, pt2, x),
+    TimingFunction.easeIn: (double x) =>
+        bezier.value(pt1, easeInCt1, easeInCt2, pt2, x),
+    TimingFunction.easeInOut: (double x) =>
+        bezier.value(pt1, easeInOutCt1, easeInOutCt2, pt2, x),
+    TimingFunction.easeOut: (double x) =>
+        bezier.value(pt1, easeOutCt1, easeOutCt2, pt2, x),
+  }[this]!;
+
+  String get name => {
+    TimingFunction.linear: 'linear',
+    TimingFunction.ease: 'ease',
+    TimingFunction.easeIn: 'ease-in',
+    TimingFunction.easeInOut: 'ease-in-out',
+    TimingFunction.easeOut: 'ease-out',
+  }[this]!;
+}
+
+// we will need this to deal with svg
+const namespaces = {
+  'n': 'http://www.w3.org/2000/svg',
+  'xlink': 'http://www.w3.org/1999/xlink',
+};
+// etree.register_namespace("xlink","http://www.w3.org/1999/xlink")
+// final parser = etree.XMLParser(remove_blank_text=true);
+
+// gif settings
+// const DELETE_TEMPORARY_FILES = false;
+const GIF_SIZE = 150;
+const GIF_FRAME_DURATION = 0.04;
+const GIF_BACKGROUND_COLOR = '#ddf';
+// set to true to allow transparent background, much bigger file!
+// const GIF_ALLOW_TRANSPARENT = false;
+
+// edit here to decide what will be generated
+const GENERATE_SVG = true;
+const GENERATE_JS_SVG = true;
+const GENERATE_GIF = true;
+
+/// sqrt, ie a stroke 4 times the length is drawn
+/// at twice the speed, in twice the time.
+double strokeLengthToDuration(double length) => sqrt(length) / 8;
+
+/// global time rescale, let's make animation a bit
+/// faster when there are many strokes.
+double timeRescale(interval) => pow(2 * interval, 2.0 / 3).toDouble();
+
+/// clear all extra elements this program may have previously added
+void clearPreviousElements(XmlDocument doc) {
+  for (final XmlNode el
+      in doc
+              .getElement('svg', namespace: namespaces['n'])
+              ?.getElement('style', namespace: namespaces['n'])
+              ?.children ??
+          []) {
+    if (RegExp(r'-Kanimaji$').hasMatch(el.getAttribute('id') ?? '')) {
+      el.parent!.children.remove(el);
+    }
+  }
+  for (final XmlNode g
+      in doc
+              .getElement('svg', namespace: namespaces['n'])
+              ?.getElement('g', namespace: namespaces['n'])
+              ?.children ??
+          []) {
+    if (RegExp(r'-Kanimaji$').hasMatch(g.getAttribute('id') ?? '')) {
+      g.parent!.children.remove(g);
+    }
+  }
+}
+
+String basename(String path) {
+  final int lastSlash = path.lastIndexOf(Platform.pathSeparator);
+  if (lastSlash == -1) {
+    return path;
+  }
+  return path.substring(lastSlash + 1);
+}
+
+/// Note: setting any color to transparent will result in a much bigger
+/// filesize for GIFs.
+void createAnimation({
+  required String inputFile,
+  String? outputFile,
+  TimingFunction timingFunction = TimingFunction.easeInOut,
+  double strokeBorderWidth = 4.5,
+  double strokeUnfilledWidth = 3,
+  double strokeFilledWidth = 3.1,
+  bool showBrush = true,
+  bool showBrushFrontBorder = true,
+  double brushWidth = 5.5,
+  double brushBorderWidth = 7,
+  double waitAfter = 1.5,
+  String strokeBorderColor = '#666',
+  String strokeUnfilledColor = '#EEE',
+  String strokeFillingColor = '#F00',
+  String strokeFilledColor = '#000',
+  String brushColor = '#F00',
+  String brushBorderColor = '#666',
+}) {
+  print('processing $inputFile');
+  final String filenameNoext = inputFile.replaceAll(RegExp(r'\.[^\.]+$'), '');
+  outputFile ??= '${filenameNoext}_anim.svg';
+  final String baseid = basename(filenameNoext);
+
+  // load xml
+  final XmlDocument doc = XmlDocument.parse(File(inputFile).readAsStringSync());
+
+  // for xlink namespace introduction
+  doc.rootElement.setAttribute('xmlns:xlink', namespaces['xlink']);
+  doc.rootElement.setAttribute('xlink:used', '');
+
+  clearPreviousElements(doc);
+
+  /// create groups with a copies (references actually) of the paths
+  XmlDocumentFragment pathCopyGroup({
+    required String id,
+    required String color,
+    required double width,
+  }) {
+    final builder = XmlBuilder();
+    builder.element(
+      'g',
+      attributes: {
+        'id': 'kvg:$baseid-$id-Kanimaji',
+        'style':
+            'fill:none;'
+            'stroke:$color;'
+            'stroke-width:$width;'
+            'stroke-linecap:round;'
+            'stroke-linejoin:round;',
+      },
+      isSelfClosing: false,
+    );
+    return builder.buildFragment();
+  }
+
+  final bgGroup = pathCopyGroup(
+    id: 'bg',
+    color: strokeUnfilledColor,
+    width: strokeUnfilledWidth,
+  );
+  final animGroup = pathCopyGroup(
+    id: 'anim',
+    color: strokeFilledColor,
+    width: strokeFilledWidth,
+  );
+
+  late final XmlDocumentFragment brushGroup;
+  late final XmlDocumentFragment brushBrdGroup;
+  if (showBrush) {
+    brushGroup = pathCopyGroup(
+      id: 'brush',
+      color: brushColor,
+      width: brushWidth,
+    );
+    brushBrdGroup = pathCopyGroup(
+      id: 'brush-brd',
+      color: brushBorderColor,
+      width: brushBorderWidth,
+    );
+  }
+
+  // compute total length and time, at first
+  double totlen = 0;
+  double tottime = 0;
+
+  // for (final g in doc.xpath("/n:svg/n:g", namespaces=namespaces) {
+  for (final XmlNode g
+      in doc
+              .getElement('svg', namespace: namespaces['n'])
+              ?.getElement('g', namespace: namespaces['n'])
+              ?.children ??
+          []) {
+    if (RegExp(r'^kvg:StrokeNumbers_').hasMatch(g.getAttribute('id') ?? '')) {
+      continue;
+    }
+
+    for (final p in g.findAllElements('path', namespace: namespaces['n'])) {
+      final pathlen = _computePathLength(p.getAttribute('d')!);
+      final duration = strokeLengthToDuration(pathlen);
+      totlen += pathlen;
+      tottime += duration;
+    }
+  }
+
+  double animationTime = timeRescale(tottime); // math.pow(3 * tottime, 2.0/3)
+  tottime += waitAfter * tottime / animationTime;
+  final double actualAnimationTime = animationTime;
+  animationTime += waitAfter;
+
+  final Map<int, String> staticCss = {};
+  late String animatedCss;
+
+  /// collect the ids of animating elements
+  final List<JsAnimationElement> jsAnimationElements = [];
+
+  String jsAnimatedCss = '';
+
+  const String cssHeader =
+      '\n/* CSS automatically generated by kanimaji.py, do not edit! */\n';
+  if (GENERATE_SVG) animatedCss = cssHeader;
+  if (GENERATE_JS_SVG) {
+    jsAnimatedCss += '''$cssHeader          .backward {\n
+              animation-direction: reverse !important;\n
+          }
+          ''';
+  }
+  late final int lastFrameIndex;
+  late final double lastFrameDelay;
+  if (GENERATE_GIF) {
+    // final static_css = {};
+    lastFrameIndex = actualAnimationTime ~/ GIF_FRAME_DURATION + 1;
+    for (int i = 0; i < lastFrameIndex + 1; i++) {
+      staticCss[i] = cssHeader;
+    }
+    lastFrameDelay = animationTime - lastFrameIndex * GIF_FRAME_DURATION;
+  }
+  double elapsedlen = 0;
+  double elapsedtime = 0;
+
+  // add css elements for all strokes
+  for (final XmlNode g
+      in doc
+          .getElement('svg', namespace: namespaces['n'])!
+          .findElements('g', namespace: namespaces['n'])) {
+    // for (final g in doc.xpath("/n:svg/n:g", namespaces=namespaces)){
+    final groupid = g.getAttribute('id') ?? '';
+    if (RegExp(r'^kvg:StrokeNumbers_').hasMatch(groupid)) {
+      final String rule =
+          '''
+          #${groupid.replaceAll(':', '\\3a ')} {
+              display: none;
+          }
+          '''
+              .dedented;
+      if (GENERATE_SVG) animatedCss += rule;
+      if (GENERATE_JS_SVG) jsAnimatedCss += rule;
+      if (GENERATE_GIF) {
+        for (final k in staticCss.keys) {
+          staticCss[k] = staticCss[k]! + rule;
+        }
+      }
+      continue;
+    }
+
+    final gidcss = groupid.replaceAll(':', '\\3a ');
+    final rule =
+        '''
+        #$gidcss {
+            stroke-width: ${strokeBorderWidth.toStringAsFixed(1)}px !important;
+            stroke:       $strokeBorderColor !important;
+        }
+        '''
+            .dedented;
+
+    if (GENERATE_SVG) animatedCss += rule;
+    if (GENERATE_JS_SVG) jsAnimatedCss += rule;
+    if (GENERATE_GIF) {
+      for (final k in staticCss.keys) {
+        staticCss[k] = staticCss[k]! + rule;
+      }
+    }
+
+    for (final p in g.findAllElements("path", namespace: namespaces['n'])) {
+      final pathid = p.getAttribute('id') as String;
+      final pathidcss = pathid.replaceAll(':', '\\3a ');
+
+      XmlDocumentFragment addHref(String suffix, XmlDocumentFragment parent) {
+        final builder = XmlBuilder();
+        builder.element(
+          'use',
+          attributes: {'id': '$pathid-$suffix', 'xlink:href': '#$pathid'},
+        );
+        final ref = builder.buildFragment();
+        parent.firstElementChild!.children.add(ref);
+        return ref;
+      }
+
+      final String bgPathidcss = '$pathidcss-bg';
+      final String animPathidcss = '$pathidcss-anim';
+      final String brushPathidcss = '$pathidcss-brush';
+      final String brushBorderPathidcss = '$pathidcss-brush-brd';
+
+      final bgGroupElement = addHref('bg', bgGroup);
+      final animGroupElement = addHref('anim', animGroup);
+      XmlDocumentFragment? brushGroupElement;
+      XmlDocumentFragment? brushBorderGroupElement;
+      if (showBrush) {
+        brushGroupElement = addHref('brush', brushGroup);
+        brushBorderGroupElement = addHref('brush-brd', brushBrdGroup);
+      }
+
+      final pathname = pathid.replaceAll(RegExp(r'^kvg:'), '');
+      final pathlen = _computePathLength(p.getAttribute('d') as String);
+      final duration = strokeLengthToDuration(pathlen);
+      final relativeDuration =
+          duration * tottime / animationTime; // unscaled time
+
+      if (GENERATE_JS_SVG) {
+        jsAnimationElements.add(
+          JsAnimationElement(
+            bg: bgGroupElement,
+            anim: animGroupElement,
+            brush: brushGroupElement,
+            brushBorder: brushBorderGroupElement,
+            time: relativeDuration,
+          ),
+        );
+      }
+
+      final newelapsedlen = elapsedlen + pathlen;
+      final newelapsedtime = elapsedtime + duration;
+      final animStart = elapsedtime / tottime * 100;
+      final animEnd = newelapsedtime / tottime * 100;
+
+      if (GENERATE_SVG) {
+        // animation stroke progression
+        animatedCss +=
+            '''
+            @keyframes strike-$pathname {
+                0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
+                ${animStart.toStringAsFixed(3)}% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
+                ${animEnd.toStringAsFixed(3)}% { stroke-dashoffset: 0; }
+                100% { stroke-dashoffset: 0; }
+            }
+            @keyframes showhide-$pathname {
+                ${animStart.toStringAsFixed(3)}% { visibility: hidden; }
+                ${animEnd.toStringAsFixed(3)}% { stroke: $strokeFillingColor; }
+            }
+            #$animPathidcss {
+                stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${pathlen.toStringAsFixed(3)};
+                stroke-dashoffset: 0;
+                animation: strike-$pathname ${animationTime.toStringAsFixed(3)}s ${timingFunction.name} infinite,
+                    showhide-$pathname ${animationTime.toStringAsFixed(3)}s step-start infinite;
+            }
+            '''
+                .dedented;
+
+        if (showBrush) {
+          // brush element visibility
+          animatedCss +=
+              '''
+              @keyframes showhide-brush-$pathname {
+                  ${animStart.toStringAsFixed(3)}% { visibility: hidden; }
+                  ${animEnd.toStringAsFixed(3)}% { visibility: visible; }
+                  100% { visibility: hidden; }
+              }
+              #$brushPathidcss, #$brushBorderPathidcss {
+                  stroke-dasharray: 0 ${pathlen.toStringAsFixed(3)};
+                  animation: strike-$pathname ${animationTime.toStringAsFixed(3)}s ${timingFunction.name} infinite,
+                      showhide-brush-$pathname ${animationTime.toStringAsFixed(3)}s step-start infinite;
+              }
+              '''
+                  .dedented;
+        }
+      }
+
+      if (GENERATE_JS_SVG) {
+        jsAnimatedCss += '\n/* stroke $pathid */\n';
+
+        // brush and background hidden by default
+        if (showBrush) {
+          jsAnimatedCss +=
+              '''
+              #$brushPathidcss, #$brushBorderPathidcss, #$bgPathidcss {
+                  visibility: hidden;
+              }
+              '''
+                  .dedented;
+        }
+
+        // hide stroke after current element
+        const afterCurrent = '[class *= "current"]';
+        jsAnimatedCss +=
+            '''
+            $afterCurrent ~ #$animPathidcss {
+                visibility: hidden;
+            }
+            $afterCurrent ~ #$bgPathidcss, #$bgPathidcss.animate {
+                visibility: visible;
+            }
+            @keyframes strike-$pathname {
+                0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
+                100% { stroke-dashoffset: 0; }
+            }
+            #$animPathidcss.animate {
+                stroke: $strokeFillingColor;
+                stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${pathlen.toStringAsFixed(3)};
+                visibility: visible;
+                animation: strike-$pathname ${relativeDuration.toStringAsFixed(3)}s ${timingFunction.name} forwards 1;
+            }
+            '''
+                .dedented;
+        if (showBrush) {
+          jsAnimatedCss +=
+              '''
+            @keyframes strike-brush-$pathname {
+                0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
+                100% { stroke-dashoffset: 0.4; }
+            }
+            #$brushPathidcss.animate.brush, #$brushBorderPathidcss.animate.brush {
+                stroke-dasharray: 0 ${pathlen.toStringAsFixed(3)};
+                visibility: visible;
+                animation: strike-brush-$pathname ${relativeDuration.toStringAsFixed(3)}s ${timingFunction.name} forwards 1;
+            }
+            '''
+                  .dedented;
+        }
+      }
+
+      if (GENERATE_GIF) {
+        for (final k in staticCss.keys) {
+          final time = k * GIF_FRAME_DURATION;
+          final reltime = time * tottime / animationTime; // unscaled time
+
+          staticCss[k] = '${staticCss[k]!}\n/* stroke $pathid */\n';
+
+          String rule = '';
+
+          // animation
+          if (reltime < elapsedtime) {
+            // just hide everything
+            rule += "#$animPathidcss";
+
+            if (showBrush) {
+              rule += ", #$brushPathidcss, #$brushBorderPathidcss";
+            }
+
+            staticCss[k] =
+                staticCss[k]! +
+                '''
+                %$rule {
+                    visibility: hidden;
+                }
+                '''
+                    .dedented;
+          } else if (reltime > newelapsedtime) {
+            // just hide the brush, and bg
+            rule += "#$bgPathidcss";
+
+            if (showBrush) {
+              rule += ", #$brushPathidcss, #$brushBorderPathidcss";
+            }
+
+            staticCss[k] =
+                staticCss[k]! +
+                '''
+                $rule {
+                    visibility: hidden;
+                }
+                '''
+                    .dedented;
+          } else {
+            final intervalprop =
+                ((reltime - elapsedtime) / (newelapsedtime - elapsedtime));
+            final progression = timingFunction.func(intervalprop);
+
+            staticCss[k] =
+                staticCss[k]! +
+                '''
+                #$animPathidcss {
+                    stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${(pathlen + 0.002).toStringAsFixed(3)};
+                    stroke-dashoffset: ${(pathlen * (1 - progression) + 0.0015).toStringAsFixed(4)};
+                    stroke: $strokeFillingColor;
+                }
+                '''
+                    .dedented;
+            if (showBrush) {
+              staticCss[k] =
+                  staticCss[k]! +
+                  '''
+                  #$brushPathidcss, #$brushBorderPathidcss {
+                      stroke-dasharray: 0.001 ${(pathlen + 0.002).toStringAsFixed(3)};
+                      stroke-dashoffset: ${(pathlen * (1 - progression) + 0.0015).toStringAsFixed(4)};
+                  }
+                  '''
+                      .dedented;
+            }
+          }
+        }
+      }
+
+      elapsedlen = newelapsedlen;
+      elapsedtime = newelapsedtime;
+    }
+  }
+
+  void addGroup(XmlDocumentFragment g) =>
+      doc.root.firstElementChild?.children.add(g);
+
+  // insert groups
+  if (showBrush && !showBrushFrontBorder) addGroup(brushBrdGroup);
+  addGroup(bgGroup);
+  if (showBrush && showBrushFrontBorder) addGroup(brushBrdGroup);
+  addGroup(animGroup);
+  if (showBrush) addGroup(brushGroup);
+
+  if (GENERATE_SVG) {
+    print(animatedCss);
+    final builder = XmlBuilder();
+    final style =
+        (builder..element(
+              'style',
+              attributes: {'id': "style-Kanimaji", 'type': 'text/css'},
+              nest: animatedCss,
+            ))
+            .buildFragment();
+    doc.root.firstElementChild!.children.insert(0, style);
+    File(outputFile).writeAsStringSync(doc.toXmlString(pretty: true));
+    doc.root.children.removeAt(0);
+    print('written $outputFile');
+  }
+
+  if (GENERATE_GIF) {
+    // svgframefiles = []
+    // pngframefiles = []
+    // svgexport_data = []
+    // for k in static_css:
+    //     svgframefile = filename_noext_ascii + ("_frame%04d.svg"%k)
+    //     pngframefile = filename_noext_ascii + ("_frame%04d.png"%k)
+    //     svgframefiles.append(svgframefile)
+    //     pngframefiles.append(pngframefile)
+    //     svgexport_data.append({"input": [abspath(svgframefile)],
+    //                            "output": [[abspath(pngframefile),
+    //                                          "%d:%d"% (GIF_SIZE, GIF_SIZE)]]})
+
+    //     style = E.style(static_css[k], id="style-Kanimaji")
+    //     doc.getroot().insert(0, style)
+    //     doc.write(svgframefile, pretty_print=True)
+    //     doc.getroot().remove(style)
+    //     print 'written %s' % svgframefile
+
+    // // create json file
+    // svgexport_datafile = filename_noext_ascii+"_export_data.json"
+    // with open(svgexport_datafile,'w') as f:
+    //     f.write(json.dumps(svgexport_data))
+    // print 'created instructions %s' % svgexport_datafile
+
+    // // run svgexport
+    // cmdline = 'svgexport %s' % shescape(svgexport_datafile)
+    // print cmdline
+    // if os.system(cmdline) != 0:
+    //     exit('Error running external command')
+
+    // if DELETE_TEMPORARY_FILES:
+    //     os.remove(svgexport_datafile)
+    //     for f in svgframefiles:
+    //         os.remove(f)
+
+    // // generate GIF
+    // giffile_tmp1 = filename_noext + '_anim_tmp1.gif'
+    // giffile_tmp2 = filename_noext + '_anim_tmp2.gif'
+    // giffile = filename_noext + '_anim.gif'
+    // escpngframefiles = ' '.join(shescape(f) for f in pngframefiles[0:-1])
+
+    // if GIF_BACKGROUND_COLOR == 'transparent':
+    //     bgopts = '-dispose previous'
+    // else:
+    //     bgopts = "-background '%s' -alpha remove" % GIF_BACKGROUND_COLOR
+    // cmdline = ("convert -delay %d %s -delay %d %s "+
+    //             "%s -layers OptimizePlus %s") % (
+    //             int(GIF_FRAME_DURATION*100),
+    //             escpngframefiles,
+    //             int(last_frame_delay*100),
+    //             shescape(pngframefiles[-1]),
+    //             bgopts,
+    //             shescape(giffile_tmp1))
+    // print(cmdline);
+    // if os.system(cmdline) != 0:
+    //     exit('Error running external command')
+
+    // if DELETE_TEMPORARY_FILES:
+    //     for f in pngframefiles:
+    //         os.remove(f)
+    //     print 'cleaned up.'
+
+    // cmdline = ("convert %s \\( -clone 0--1 -background none "+
+    //            "+append -quantize transparent -colors 63 "+
+    //            "-unique-colors -write mpr:cmap +delete \\) "+
+    //            "-map mpr:cmap %s") % (
+    //             shescape(giffile_tmp1),
+    //             shescape(giffile_tmp2))
+    // print cmdline
+    // if os.system(cmdline) != 0:
+    //     exit('Error running external command')
+    // if DELETE_TEMPORARY_FILES:
+    //     os.remove(giffile_tmp1)
+
+    // cmdline = ("gifsicle -O3 %s -o %s") % (
+    //             shescape(giffile_tmp2),
+    //             shescape(giffile))
+    // print cmdline
+    // if os.system(cmdline) != 0:
+    //     exit('Error running external command')
+    // if DELETE_TEMPORARY_FILES:
+    //     os.remove(giffile_tmp2)
+  }
+
+  // if (GENERATE_JS_SVG) {
+  //     final f0insert = [bg_g, anim_g];
+  //     if (SHOW_BRUSH) f0insert += [brush_g, brush_brd_g];
+  //     for g in f0insert:
+  //         el = E.a()
+  //         el.set("data-stroke","0")
+  //         g.insert(0, el)
+
+  //     for i in range(0, len(js_anim_els)):
+  //         els = js_anim_els[i]
+  //         for k in els:
+  //             els[k].set("data-stroke",str(i+1))
+  //         els["anim"].set("data-duration", str(js_anim_time[i]))
+
+  //     doc.getroot().set('data-num-strokes', str(len(js_anim_els)))
+
+  //     style = E.style(js_animated_css, id="style-Kanimaji")
+  //     doc.getroot().insert(0, style)
+  //     svgfile = filename_noext + '_js_anim.svg'
+  //     doc.write(svgfile, pretty_print=True)
+  //     doc.getroot().remove(style)
+  //     print('written $svgfile');
+  // }
+}
+
+void main(List<String> args) {
+  // createAnimation('assets/kanjivg/kanji/0f9b1.svg');
+
+  const kanji = '実例';
+  final fileList = [];
+  for (int k = 0; k < kanji.length; k++) {
+    createAnimation(
+      inputFile:
+          'assets/kanjivg/kanji/${kanji.codeUnits[k].toRadixString(16).padLeft(5, '0')}.svg',
+      outputFile: '${k + 1}.svg',
+    );
+    fileList.add('${k + 1}.svg');
+  }
+
+  File('index.html').writeAsStringSync(
+    '<html>${fileList.map((e) => File(e).readAsStringSync().replaceAll(']>', '')).join('\n')}</html>',
+  );
+  // createAnimation(
+  //   inputFile: 'assets/kanjivg/kanji/060c5.svg',
+  //   outputFile: 'test.svg',
+  // );
+}

lib/kanimaji.dart

@@ -1,2 +1 @@
-export 'package:kanimaji/widget.dart' show Kanimaji, TimingFunction;
-export 'package:kanimaji/kanjivg_parser.dart';
+export 'package:kanimaji/widget.dart' show Kanimaji;

lib/kanjivg_parser.dart

@@ -78,7 +78,8 @@ class KanjiStrokeNumber {
   KanjiStrokeNumber(this.num, this.position);
 
   @override
-  String toString() => 'KanjiStrokeNumber(number: $num, position: $position)';
+  String toString() =>
+      'KanjiStrokeNumber(number: $num, position: $position)';
 }
 
 /// Contents of a `<path>` element in the KanjiVG SVG files

lib/svg_parser.dart

@@ -32,9 +32,7 @@ const _commands = {
 // const _uppercaseCommands = {'M', 'Z', 'L', 'H', 'V', 'C', 'S', 'Q', 'T', 'A'};
 
 final _commandPattern = RegExp("(?=[${_commands.join('')}])");
-final _floatPattern = RegExp(
-  r"^[-+]?(?:[0-9]+\.?[0-9]*|[0-9]*\.?[0-9]+)(?:[eE][-+]?[0-9]+)?",
-);
+final _floatPattern = RegExp(r"^[-+]?(?:[0-9]+\.?[0-9]*|[0-9]*\.?[0-9]+)(?:[eE][-+]?[0-9]+)?");
 
 class ParserResult<T> {
   final T value;
@@ -255,10 +253,8 @@ Path parsePath(String pathdef) {
       segments.add(Move(to: currentPos));
       startPos = currentPos;
     } else if (command == "Z") {
-      if (startPos == null) {
-        throw InvalidPathError("Path closed without a starting position.");
-      }
-      segments.add(Close(start: currentPos, end: startPos));
+      // TODO Throw error if not available:
+      segments.add(Close(start: currentPos, end: startPos!));
       currentPos = startPos;
     } else if (command == "L") {
       Point pos = token.args[0] as Point;

lib/widget.dart

@@ -5,9 +5,8 @@ import 'dart:math' as math;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import 'package:kanimaji/animator.dart';
 import 'package:kanimaji/kanjivg_parser.dart';
-import 'package:kanimaji/primitives/point.dart';
-import 'package:kanimaji/primitives/bezier.dart' as bezier;
 
 Future<KanjiVGItem> _defaultKanjiDataProvider(String kanji) async {
   final hex = kanji.runes.isEmpty
@@ -18,45 +17,6 @@ Future<KanjiVGItem> _defaultKanjiDataProvider(String kanji) async {
   return KanjiVGItem.parseFromXml(svgString);
 }
 
-enum TimingFunction { linear, ease, easeIn, easeInOut, easeOut }
-
-// ease, ease-in, etc:
-// https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#ease
-const pt1 = Point(0, 0);
-const easeCt1 = Point(0.25, 0.1);
-const easeCt2 = Point(0.25, 1.0);
-const easeInCt1 = Point(0.42, 0.0);
-const easeInCt2 = Point(1.0, 1.0);
-const easeInOutCt1 = Point(0.42, 0.0);
-const easeInOutCt2 = Point(0.58, 1.0);
-const easeOutCt1 = Point(0.0, 0.0);
-const easeOutCt2 = Point(0.58, 1.0);
-const pt2 = Point(1, 1);
-
-extension Funcs on TimingFunction {
-  double Function(double) get func => {
-    TimingFunction.linear: (double x) => x,
-    TimingFunction.ease: (double x) =>
-        bezier.value(pt1, easeCt1, easeCt2, pt2, x),
-    TimingFunction.easeIn: (double x) =>
-        bezier.value(pt1, easeInCt1, easeInCt2, pt2, x),
-    TimingFunction.easeInOut: (double x) =>
-        bezier.value(pt1, easeInOutCt1, easeInOutCt2, pt2, x),
-    TimingFunction.easeOut: (double x) =>
-        bezier.value(pt1, easeOutCt1, easeOutCt2, pt2, x),
-  }[this]!;
-
-  String get name => {
-    TimingFunction.linear: 'linear',
-    TimingFunction.ease: 'ease',
-    TimingFunction.easeIn: 'ease-in',
-    TimingFunction.easeInOut: 'ease-in-out',
-    TimingFunction.easeOut: 'ease-out',
-  }[this]!;
-}
-
-// TODO: fall back to just drawing the character as text if it does not exist in the kanjivg dataset
-
 /// A widget that animates the stroke order of a given kanji character using KanjiVG data.
 class Kanimaji extends StatefulWidget {
   final String kanji;
@@ -64,10 +24,9 @@ class Kanimaji extends StatefulWidget {
 
   // Animation parameters
   final bool loop;
-  final Duration delayBetweenStrokes;
-  final Duration delayBetweenLoops;
+  // final Duration delayBetweenStrokes;
+  // final Duration delayBetweenLoops;
   // TODO: add support for specifying animation bezier curve
-  final TimingFunction timingFunction;
   // final Cubic animationCurve;
   // final double speed;
 
@@ -78,7 +37,6 @@ class Kanimaji extends StatefulWidget {
 
   // Stroke parameters
   final Color strokeColor;
-  final Color currentStrokeColor;
   final Color strokeUnfilledColor;
   final double strokeWidth;
   final Color backgroundColor;
@@ -101,28 +59,19 @@ class Kanimaji extends StatefulWidget {
     super.key,
     required this.kanji,
     this.kanjiDataProvider = _defaultKanjiDataProvider,
-
     this.loop = true,
-    this.timingFunction = TimingFunction.ease,
-    this.delayBetweenLoops = const Duration(seconds: 1),
-    this.delayBetweenStrokes = const Duration(milliseconds: 100),
-
     this.strokeColor = Colors.black,
-    this.currentStrokeColor = Colors.red,
     this.strokeUnfilledColor = const Color(0xA0DDDDDD),
     this.strokeWidth = 3.0,
     this.backgroundColor = Colors.transparent,
-
     this.showBrush = true,
     this.brushColor = Colors.red,
     this.brushRadius = 4.0,
-
-    this.showStrokeNumbers = false,
+    this.showStrokeNumbers = true,
     this.strokeNumberColor = Colors.grey,
     this.currentStrokeNumberColor = Colors.red,
     this.strokeNumberFontSize = 4.0,
     this.strokeNumberFontFamily,
-
     this.showCross = true,
     this.crossColor = const Color(0x40AAAAAA),
     this.crossStrokeWidth = 0.8,
@@ -146,12 +95,8 @@ class _KanimajiState extends State<Kanimaji>
           .toList() ??
       [];
 
-  /// sqrt, ie a stroke 4 times the length is drawn
-  /// at twice the speed, in twice the time.
-  static double _strokeLengthToDuration(double length) => math.sqrt(length) / 8;
-
   List<double> get _pathDurations =>
-      _pathLengths.map((len) => _strokeLengthToDuration(len)).toList();
+      _pathLengths.map((len) => strokeLengthToDuration(len)).toList();
 
   static const double _viewBoxWidth = 109.0;
   static const double _viewBoxHeight = 109.0;
@@ -170,11 +115,7 @@ class _KanimajiState extends State<Kanimaji>
     if (oldWidget.kanji != widget.kanji) {
       _loadAndParseSvg().then((_) => _configureController());
     } else if (oldWidget.loop != widget.loop ||
-        oldWidget.timingFunction != widget.timingFunction ||
-        oldWidget.delayBetweenLoops != widget.delayBetweenLoops ||
-        oldWidget.delayBetweenStrokes != widget.delayBetweenStrokes ||
         oldWidget.strokeColor != widget.strokeColor ||
-        oldWidget.currentStrokeColor != widget.currentStrokeColor ||
         oldWidget.strokeUnfilledColor != widget.strokeUnfilledColor ||
         oldWidget.strokeWidth != widget.strokeWidth ||
         oldWidget.backgroundColor != widget.backgroundColor ||
@@ -223,14 +164,10 @@ class _KanimajiState extends State<Kanimaji>
 
   void _configureController() {
     if (_kanjiData == null) return;
-    final int totalSec =
-        (_pathDurations.fold(0.0, (a, b) => a + b) * 1000).round() +
-        widget.delayBetweenStrokes.inMilliseconds *
-            (_pathDurations.length - 1) +
-        widget.delayBetweenLoops.inMilliseconds;
+    final double totalSec = _pathDurations.fold(0.0, (a, b) => a + b);
 
     _controller.stop();
-    _controller.duration = Duration(milliseconds: totalSec);
+    _controller.duration = Duration(milliseconds: (totalSec * 1000.0).round());
     if (widget.loop) {
       _controller.repeat();
     } else {
@@ -254,36 +191,25 @@ class _KanimajiState extends State<Kanimaji>
         height: _viewBoxHeight,
         child: CustomPaint(
           painter: _KanimajiPainter(
-            progress: _controller.value,
-
             paths: _kanjiData!.paths.map((p) => p.svgPath.toUiPath()).toList(),
             pathLengths: _pathLengths,
             pathDurations: _pathDurations,
             strokeNumbers: _kanjiData!.strokeNumbers,
-
-            viewBoxWidth: _viewBoxWidth,
-            viewBoxHeight: _viewBoxHeight,
-
-            timingFunction: widget.timingFunction,
-            delayBetweenStrokes: widget.delayBetweenStrokes,
-            delayBetweenLoops: widget.delayBetweenLoops,
-
+            progress: _controller.value,
             strokeColor: widget.strokeColor,
-            currentStrokeColor: widget.currentStrokeColor,
             strokeUnfilledColor: widget.strokeUnfilledColor,
             strokeWidth: widget.strokeWidth,
             backgroundColor: widget.backgroundColor,
-
+            viewBoxWidth: _viewBoxWidth,
+            viewBoxHeight: _viewBoxHeight,
             showBrush: widget.showBrush,
             brushColor: widget.brushColor,
             brushRadius: widget.brushRadius,
-
             showStrokeNumbers: widget.showStrokeNumbers,
             strokeNumberColor: widget.strokeNumberColor,
             currentStrokeNumberColor: widget.currentStrokeNumberColor,
             strokeNumberFontSize: widget.strokeNumberFontSize,
             strokeNumberFontFamily: widget.strokeNumberFontFamily,
-
             showCross: widget.showCross,
             crossColor: widget.crossColor,
             crossStrokeWidth: widget.crossStrokeWidth,
@@ -303,17 +229,23 @@ class _KanimajiPainter extends CustomPainter {
   final List<double> pathLengths;
   final List<double> pathDurations;
 
+  // TODO: don't recalculate these all the time, compute once and cache
+  List<double> get absolutePathDurations {
+    final List<double> absolute = [];
+    double sum = 0.0;
+    for (final dur in pathDurations) {
+      absolute.add(sum);
+      sum += dur;
+    }
+    return absolute;
+  }
+
   final List<KanjiStrokeNumber> strokeNumbers;
 
   final double viewBoxWidth;
   final double viewBoxHeight;
 
-  final TimingFunction timingFunction;
-  final Duration delayBetweenStrokes;
-  final Duration delayBetweenLoops;
-
   final Color strokeColor;
-  final Color currentStrokeColor;
   final Color strokeUnfilledColor;
   final double strokeWidth;
   final Color backgroundColor;
@@ -334,7 +266,7 @@ class _KanimajiPainter extends CustomPainter {
   final double crossStipleLength;
   final double crossStipleGap;
 
-  const _KanimajiPainter({
+  _KanimajiPainter({
     required this.progress,
 
     required this.paths,
@@ -345,12 +277,7 @@ class _KanimajiPainter extends CustomPainter {
     required this.viewBoxWidth,
     required this.viewBoxHeight,
 
-    required this.timingFunction,
-    required this.delayBetweenStrokes,
-    required this.delayBetweenLoops,
-
     required this.strokeColor,
-    required this.currentStrokeColor,
     required this.strokeUnfilledColor,
     required this.strokeWidth,
     required this.backgroundColor,
@@ -372,79 +299,8 @@ class _KanimajiPainter extends CustomPainter {
     required this.crossStipleGap,
   });
 
-  int get elapsedTimeMilliseconds {
-    // TODO: only calculate the total time once
-    final int totalTimeMilliseconds =
-        (pathDurations.fold(0.0, (a, b) => a + b) * 1000).round() +
-        delayBetweenStrokes.inMilliseconds * (pathDurations.length - 1) +
-        delayBetweenLoops.inMilliseconds;
-
-    final double p = progress.clamp(0.0, 1.0);
-    return (p * totalTimeMilliseconds).round();
-  }
-
-  // TODO: cache the value of the previous paint iteration, to avoid having to recalculate the entire stroke index and progress on every frame
-  //       fall back to recalculating if it does not step forward.
-
-  // The index of the currently drawing stroke if it is being drawn.
-  // Returns null if any of the following is true:
-  //   - We are in the delay after a stroke
-  //   - We are in the delay between loops
-  int? get _currentStrokeIndex {
-    int currentTime = 0;
-    for (int i = 0; i < pathDurations.length; i++) {
-      final int strokeTime = (pathDurations[i] * 1000).round();
-
-      if (elapsedTimeMilliseconds < currentTime + strokeTime) {
-        return i;
-      } else if (elapsedTimeMilliseconds <
-          currentTime + strokeTime + delayBetweenStrokes.inMilliseconds) {
-        return null;
-      }
-
-      currentTime += strokeTime;
-      currentTime += delayBetweenStrokes.inMilliseconds;
-    }
-
-    return null;
-  }
-
-  // TODO: optimize by caching the last stroke index and progress, and only recalculating if the elapsed time has moved past the next expected threshold (either the end of the current stroke or the end of the current delay)
-
-  /// The index of the last fully drawn stroke. Returns -1 if no stroke has been fully drawn yet.
-  int get _lastStrokeIndex {
-    int currentTime = 0;
-    for (int i = 0; i < pathDurations.length; i++) {
-      final int strokeTime = (pathDurations[i] * 1000).round();
-      if (elapsedTimeMilliseconds < currentTime + strokeTime) {
-        return i - 1;
-      }
-      currentTime += strokeTime;
-      currentTime += delayBetweenStrokes.inMilliseconds;
-    }
-
-    return pathDurations.length - 1;
-  }
-
-  /// The progress of the currently drawing stroke (0.0..1.0). Returns null if we are in a delay.
-  double? get _currentStrokeProgress {
-    final int? currentStrokeIndex = _currentStrokeIndex;
-    if (currentStrokeIndex == null) return null;
-
-    int currentTime = 0;
-    for (int i = 0; i < currentStrokeIndex; i++) {
-      final int strokeTime = (pathDurations[i] * 1000).round();
-      currentTime += strokeTime;
-      currentTime += delayBetweenStrokes.inMilliseconds;
-    }
-
-    final int strokeTime = (pathDurations[currentStrokeIndex] * 1000).round();
-    final int elapsedInCurrentStroke = elapsedTimeMilliseconds - currentTime;
-    return (elapsedInCurrentStroke / strokeTime).clamp(0.0, 1.0);
-  }
-
-  /// Draw the static parts of the canvas that do not change with each frame, such as the background, cross, and unfilled paths.
-  void _drawBaseCanvas(Canvas canvas, Size size) {
+  @override
+  void paint(Canvas canvas, Size size) {
     final bgPaint = Paint()..color = backgroundColor;
     canvas.drawRect(Offset.zero & size, bgPaint);
 
@@ -457,11 +313,6 @@ class _KanimajiPainter extends CustomPainter {
     final double dx = (size.width - viewBoxWidth * scale) / 2.0;
     final double dy = (size.height - viewBoxHeight * scale) / 2.0;
 
-    final Paint crossPaint = Paint()
-      ..style = PaintingStyle.stroke
-      ..color = crossColor
-      ..strokeWidth = crossStrokeWidth;
-
     final Paint unfilledPaint = Paint()
       ..style = PaintingStyle.stroke
       ..strokeCap = StrokeCap.round
@@ -469,6 +320,22 @@ class _KanimajiPainter extends CustomPainter {
       ..strokeWidth = strokeWidth / scale
       ..color = strokeUnfilledColor;
 
+    final Paint filledPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round
+      ..strokeJoin = StrokeJoin.round
+      ..strokeWidth = strokeWidth / scale
+      ..color = strokeColor;
+
+    final Paint brushPaint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = brushColor;
+
+    final Paint crossPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = crossColor
+      ..strokeWidth = crossStrokeWidth;
+
     // Draw cross if enabled
     if (showCross) {
       // Draw vertical stipled line
@@ -502,7 +369,61 @@ class _KanimajiPainter extends CustomPainter {
       canvas.drawPath(path, unfilledPaint);
     }
 
-    // Draw stroke numbers if enabled
+    canvas.save();
+    canvas.translate(dx, dy);
+    canvas.scale(scale, scale);
+
+    // total animation time in seconds computed from durations
+    final double totalTime = pathDurations.isEmpty
+        ? 1.0
+        : pathDurations.fold(0.0, (a, b) => a + b);
+    final double p = progress.clamp(0.0, 1.0);
+
+    final int currentlyDrawingIndex = absolutePathDurations.lastIndexWhere(
+      (t) => t <= p * totalTime,
+    );
+
+    if (currentlyDrawingIndex == -1) {
+      for (final path in paths) {
+        canvas.drawPath(path, filledPaint);
+      }
+      canvas.restore();
+      return;
+    }
+
+    // Draw all completed strokes fully filled
+    for (int i = 0; i < currentlyDrawingIndex; i++) {
+      canvas.drawPath(paths[i], filledPaint);
+    }
+
+    // Draw the currently drawing stroke with partial coverage
+    if (currentlyDrawingIndex >= 0 && currentlyDrawingIndex < paths.length) {
+      final ui.Path path = paths[currentlyDrawingIndex];
+      final double len = pathLengths[currentlyDrawingIndex];
+      final double dur = pathDurations[currentlyDrawingIndex];
+
+      final relativeElapsedTime =
+          p * totalTime -
+          (currentlyDrawingIndex > 0
+              ? absolutePathDurations[currentlyDrawingIndex]
+              : 0.0);
+
+      final double strokeProgress = (relativeElapsedTime / dur).clamp(0.0, 1.0);
+      final ui.PathMetrics metrics = path.computeMetrics();
+      final ui.PathMetric metric = metrics.first;
+      final double drawLength = len * strokeProgress;
+      final ui.Path partialPath = metric.extractPath(0, drawLength);
+      canvas.drawPath(partialPath, filledPaint);
+
+      if (showBrush) {
+        final ui.Tangent? tangent = metric.getTangentForOffset(drawLength);
+        if (tangent != null) {
+          canvas.drawCircle(tangent.position, brushRadius / scale, brushPaint);
+        }
+      }
+    }
+
+    // Draw stroke numbers
     if (showStrokeNumbers) {
       final textPainter = TextPainter(
         textAlign: TextAlign.center,
@@ -510,10 +431,13 @@ class _KanimajiPainter extends CustomPainter {
       );
 
       for (final sn in strokeNumbers) {
+        final bool isCurrent =
+            sn.num ==
+            (currentlyDrawingIndex + 1).clamp(1, strokeNumbers.length);
         final textSpan = TextSpan(
           text: sn.num.toString(),
           style: TextStyle(
-            color: strokeNumberColor,
+            color: isCurrent ? currentStrokeNumberColor : strokeNumberColor,
             fontSize: strokeNumberFontSize / scale,
             fontFamily: strokeNumberFontFamily,
           ),
@@ -531,96 +455,7 @@ class _KanimajiPainter extends CustomPainter {
       }
     }
 
-    // canvas.save();
-    canvas.translate(dx, dy);
-    canvas.scale(scale, scale);
-  }
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    // TODO: see if we can optimize by storing the base canvas once and restoring it on each frame instead of redrawing it every time
-    _drawBaseCanvas(canvas, size);
-
-    final double sx = size.width / viewBoxWidth;
-    final double sy = size.height / viewBoxHeight;
-    final double scale = math.min(sx, sy);
-
-    final Paint filledPaint = Paint()
-      ..style = PaintingStyle.stroke
-      ..strokeCap = StrokeCap.round
-      ..strokeJoin = StrokeJoin.round
-      ..strokeWidth = strokeWidth / scale
-      ..color = strokeColor;
-
-    final Paint currentStrokePaint = Paint()
-      ..style = PaintingStyle.stroke
-      ..strokeCap = StrokeCap.round
-      ..strokeJoin = StrokeJoin.round
-      ..strokeWidth = strokeWidth / scale
-      ..color = currentStrokeColor;
-
-    final Paint brushPaint = Paint()
-      ..style = PaintingStyle.fill
-      ..color = brushColor;
-
-    final int currentlyDrawingIndex = _currentStrokeIndex ?? -1;
-    final int lastStrokeIndex = _lastStrokeIndex;
-
-    // Draw all completed strokes fully filled
-    for (int i = 0; i < lastStrokeIndex + 1; i++) {
-      canvas.drawPath(paths[i], filledPaint);
-    }
-
-    // Draw the currently drawing stroke with partial coverage
-    if (currentlyDrawingIndex >= 0) {
-      final ui.Path path = paths[currentlyDrawingIndex];
-      final double len = pathLengths[currentlyDrawingIndex];
-      final double strokeProgress = timingFunction.func(
-        _currentStrokeProgress!,
-      );
-
-      final ui.PathMetrics metrics = path.computeMetrics();
-      final ui.PathMetric metric = metrics.first;
-      final double drawLength = len * strokeProgress;
-      final ui.Path partialPath = metric.extractPath(0, drawLength);
-      canvas.drawPath(partialPath, currentStrokePaint);
-
-      if (showBrush) {
-        final ui.Tangent? tangent = metric.getTangentForOffset(drawLength);
-        if (tangent != null) {
-          canvas.drawCircle(tangent.position, brushRadius / scale, brushPaint);
-        }
-      }
-    }
-
-    // Color over the stroke number of the currently drawing stroke if enabled
-    if (showStrokeNumbers && currentlyDrawingIndex != -1) {
-      final textPainter = TextPainter(
-        textAlign: TextAlign.center,
-        textDirection: TextDirection.ltr,
-      );
-
-      final sn = strokeNumbers[currentlyDrawingIndex];
-      final textSpan = TextSpan(
-        text: sn.num.toString(),
-        style: TextStyle(
-          color: currentStrokeNumberColor,
-          fontSize: strokeNumberFontSize / scale,
-          fontFamily: strokeNumberFontFamily,
-        ),
-      );
-      textPainter.text = textSpan;
-      textPainter.layout();
-      final Offset pos = Offset(
-        sn.position.x.toDouble(),
-        sn.position.y.toDouble(),
-      );
-      final Offset centeredPos =
-          pos - Offset(textPainter.width / 2, textPainter.height / 2);
-      textPainter.paint(canvas, centeredPos);
-    }
-
-    // canvas.restore();
+    canvas.restore();
   }
 
   @override
@@ -628,9 +463,6 @@ class _KanimajiPainter extends CustomPainter {
     return oldDelegate.progress != progress ||
         oldDelegate.paths != paths ||
         oldDelegate.strokeNumbers != strokeNumbers ||
-        oldDelegate.timingFunction != timingFunction ||
-        oldDelegate.delayBetweenStrokes != delayBetweenStrokes ||
-        oldDelegate.delayBetweenLoops != delayBetweenLoops ||
         oldDelegate.strokeColor != strokeColor ||
         oldDelegate.strokeUnfilledColor != strokeUnfilledColor ||
         oldDelegate.strokeWidth != strokeWidth ||

test/svg/parser_test.dart

@@ -394,15 +394,13 @@ void main() {
         ),
   );
 
-  // NOTE: The parser seems to just ignore the arguments to Z, so this doesn't throw an error.
-  //       This is probably not completely spec compliant, but it's good enough for now.
-  // test(
-  //   'Errors',
-  //   () => expect(
-  //     parsePath("M 100 100 L 200 200 Z 100 200"),
-  //     throwsA(const TypeMatcher<InvalidPathError>()),
-  //   ),
-  // );
+  test(
+    'Errors',
+    () => expect(
+      parsePath("M 100 100 L 200 200 Z 100 200"),
+      throwsA(const TypeMatcher<InvalidPathError>()),
+    ),
+  );
 
   test(
     "Nonpath: It's possible in SVG to create paths that has zero length, "