Integrate stroke_caps with strokes stage

client/lib/analysis.js

@@ -158,7 +158,7 @@ const guessPhoneticAndSemanticComponents = (glyph, components) => {
 class AnalysisStage extends AbstractStage {
   constructor(glyph) {
     super('analysis');
-    this.strokes = glyph.stages.strokes;
+    this.strokes = glyph.stages.strokes.corrected;
     const analysis = glyph.stages.analysis || {};
     this.tree = initializeDecompositionTree(analysis, glyph.character);
     const components = collectComponents(this.tree);

client/lib/order.js

@@ -167,8 +167,8 @@ class OrderStage extends AbstractStage {
   constructor(glyph) {
     super('order');
     this.adjusted = glyph.stages.order;
-    this.medians = glyph.stages.strokes.map(median_util.findStrokeMedian);
-    this.strokes = glyph.stages.strokes;
+    this.medians = glyph.stages.strokes.raw.map(median_util.findStrokeMedian);
+    this.strokes = glyph.stages.strokes.corrected;
 
     const tree = decomposition_util.convertDecompositionToTree(
         glyph.stages.analysis.decomposition);
@@ -285,7 +285,7 @@ Template.order_stage.helpers({
       const color = colors[index % colors.length];
       result.paths.push({
         cls: 'selectable',
-        d: character.stages.strokes[element.stroke],
+        d: character.stages.strokes.corrected[element.stroke],
         fill: index < 0 ? 'lightgray' : color,
         stroke: index < 0 ? 'lightgray' : 'black',
         stroke_index: element.stroke,
@@ -307,7 +307,7 @@ Template.order_stage.helpers({
         continue;
       }
       const component = [];
-      for (let stroke of glyph.stages.strokes) {
+      for (let stroke of glyph.stages.strokes.corrected) {
         component.push({d: stroke, fill: color, stroke: 'black'});
       }
       result.push({glyph: {paths: component}, top: `${138*index + 8}px`});

client/lib/strokes.js

@@ -1,6 +1,7 @@
 import {AbstractStage} from '/client/lib/abstract';
 import {assert} from '/lib/base';
 import {cjklib} from '/lib/cjklib';
+import {fixStrokes} from '/lib/stroke_caps/fixStrokes';
 import {stroke_extractor} from '/lib/stroke_extractor';
 
 const getStatusLine = (actual, expected) => {
@@ -26,27 +27,33 @@ const getStrokePaths = (strokes, include, colors) => {
 class StrokesStage extends AbstractStage {
   constructor(glyph) {
     super('strokes');
-    const include = this.include = {};
-    this.original = stroke_extractor.getStrokes(
+    const raw = stroke_extractor.getStrokes(
         glyph.stages.path, glyph.stages.bridges).strokes;
-    this.original.map((x) => this.include[x] = true);
-    if (glyph.stages.strokes &&
-        glyph.stages.strokes.filter((x) => !include[x]).length === 0) {
-      this.original.map((x) => this.include[x] = false);
-      glyph.stages.strokes.map((x) => include[x] = true);
+    this.include = {};
+    this.original = {corrected: fixStrokes(raw), raw};
+    this.original.corrected.map((x) => this.include[x] = true);
+    if (glyph.stages.strokes) {
+      this.original.corrected.map((x) => this.include[x] = false);
+      glyph.stages.strokes.corrected.map((x) => this.include[x] = true);
     }
-    this.adjusted = this.original.filter((x) => this.include[x]);
+  }
+  getStageOutput() {
+    const fn = (_, i) => this.include[this.original.corrected[i]];
+    return {
+      raw: this.original.raw.filter(fn),
+      corrected: this.original.corrected.filter(fn),
+    };
   }
   handleEvent(event, template) {
     assert(this.include.hasOwnProperty(template.d));
     this.include[template.d] = !this.include[template.d];
-    this.adjusted = this.original.filter((x) => this.include[x]);
   }
   refreshUI(character, metadata) {
+    const strokes = this.original.corrected;
     Session.set('stage.paths',
-                getStrokePaths(this.original, this.include, this.colors));
+                getStrokePaths(strokes, this.include, this.colors));
     const data = cjklib.getCharacterData(character);
-    const actual = this.adjusted.length;
+    const actual = this.getStageOutput().corrected.length;
     const expected = metadata.strokes || data.strokes;
     Session.set('stage.status', [getStatusLine(actual, expected)]);
   }

client/lib/verified.js

@@ -5,7 +5,7 @@ class VerifiedStage extends AbstractStage {
   constructor(glyph) {
     super('verified');
     const strokes = glyph.stages.order.map(
-        (x) => glyph.stages.strokes[x.stroke]);
+        (x) => glyph.stages.strokes.corrected[x.stroke]);
     const medians = glyph.stages.order.map((x) => x.median);
     this.data = getAnimationData(strokes, medians);
   }

server/migration.js

@@ -2,6 +2,7 @@ import {getAnimationData} from '/lib/animation';
 import {assert, getPWD, Point} from '/lib/base';
 import {cjklib} from '/lib/cjklib';
 import {Glyphs} from '/lib/glyphs';
+import {fixStrokes} from '/lib/stroke_caps/fixStrokes';
 import {stroke_extractor} from '/lib/stroke_extractor';
 import {svg} from '/lib/svg';
 
@@ -18,6 +19,13 @@ const addSimplifiedAndTraditionalFields = (glyph) => {
   Glyphs.save(glyph);
 }
 
+const addStrokeCaps = (glyph) => {
+  const raw = glyph.stages.strokes;
+  if (raw.raw || raw.corrected) return;
+  glyph.stages.strokes = {corrected: fixStrokes(raw), raw};
+  Glyphs.save(glyph);
+}
+
 const checkStrokeExtractorStability = (glyph) => {
   const strokes = stroke_extractor.getStrokes(
       glyph.stages.path, glyph.stages.bridges);
@@ -52,7 +60,7 @@ const dumpGlyph = (dictionary, graphics) => (glyph) => {
   const data = cjklib.getCharacterData(glyph.character);
   const pinyin = (glyph.metadata.pinyin || data.pinyin || '')
                      .split(',').map((x) => x.trim()).filter((x) => x);
-  const strokes = order.map((x) => glyph.stages.strokes[x.stroke]);
+  const strokes = order.map((x) => glyph.stages.strokes.corrected[x.stroke]);
   const medians = order.map((x) => x.median);
   strokes.map((x) => assert(x));
   medians.map((x) => assert(x));