Extend stages API to allow for custom UI

client/editor.js

@@ -35,7 +35,8 @@ const incrementStage = (amount) => {
 const initialize = () => {
   const glyph = Session.get('editor.glyph');
   if (glyph === undefined) {
-    changeGlyph('getNextGlyph');
+    //changeGlyph('getNextGlyph');
+    getGlyph({character: '黽'});
   } else {
     getGlyph({character: glyph.character});
   }
@@ -58,7 +59,6 @@ Template.editor.events({
 });
 
 Template.editor.helpers({
-  stage: () => Session.get('stage.type'),
   paths: () => Session.get('stage.paths'),
   lines: () => Session.get('stage.lines'),
   points: () => Session.get('stage.points'),
@@ -66,7 +66,7 @@ Template.editor.helpers({
 
 Template.status.helpers({
   stage: () => Session.get('stage.type'),
-  instructions: () => Session.get('stage.instructions'),
+  template: () => `${Session.get('stage.type')}_stage`,
   lines: () => Session.get('stage.status'),
 });
 

client/index.html

@@ -43,7 +43,7 @@
 </template>
 
 <template name="editor">
-  <div id="editor" class="{{stage}}">
+  <div id="editor">
     <div class="left-pane">
       {{> metadata}}
       {{> status}}
@@ -94,7 +94,9 @@
     <div class="panel-heading">
       <h3 class="panel-title">Edit {{stage}}</h3>
     </div>
-    <div class="instructions">{{instructions}}</div>
+    <div class="template {{template}}">
+      {{> UI.dynamic template=template}}
+    </div>
     <ul class="log">
       {{#each lines}}
         <li class="line {{cls}}">{{message}}</li>

client/lib/abstract.js

@@ -19,11 +19,10 @@ stages.AbstractStage = class AbstractStage {
     // The class name 'selectable' is special for paths, lines, and points.
     // Including this class in cls for those objects will make them interactive
     // and will trigger the onClick callback when they are clicked.
-    Session.set('stage.type', undefined);
+    Session.set('stage.type', glyph);
     Session.set('stage.paths', undefined);
     Session.set('stage.lines', undefined);
     Session.set('stage.points', undefined);
-    Session.set('stage.instructions', undefined);
     Session.set('stage.status', undefined);
     this.colors = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
                    '#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];

client/lib/bridges.js

@@ -11,12 +11,7 @@ const removeBridge = (bridges, bridge) => {
 
 stages.bridges = class BridgesStage extends stages.AbstractStage {
   constructor(glyph) {
-    super();
-    Session.set('stage.type', 'bridges');
-    Session.set('stage.instructions',
-                'Connect each pair of points on the glyph outline such that ' +
-                'the segment connecting those points is part of some stroke ' +
-                'outline. Click on a bridge to drop it.');
+    super('bridges');
     const bridges = stroke_extractor.getBridges(glyph.stages.path);
     this.bridges = bridges.bridges;
     this.endpoints = [];

client/lib/path.js

@@ -2,13 +2,16 @@
 
 stages.path = class PathStage extends stages.AbstractStage {
   constructor(glyph) {
-    super();
-    Session.set('stage.type', 'path');
-    Session.set('stage.instructions',
-                'Choose a source for glyph path data for this character:');
+    super('path');
   }
   refresh(glyph) {
     const d = glyph.stages.path;
     Session.set('stage.paths', [{d: d, fill: 'gray', stroke: 'gray'}]);
+    Session.set('stage.status',
+                d ? [] : [{cls: 'error', message: 'No path data.'}]);
   }
 }
+
+Template.path_stage.helpers({
+  options: () => [{label: 'gkai'}, {label: 'UKaiCN'}],
+});

client/lib/strokes.js

@@ -22,12 +22,7 @@ const getStrokePaths = (strokes, include, colors) => {
 
 stages.strokes = class StrokesStage extends stages.AbstractStage {
   constructor(glyph) {
-    super();
-    Session.set('stage.type', 'strokes');
-    Session.set('stage.instructions',
-                'Select paths to include in the glyph by clicking on them. ' +
-                'The final number of paths must agree with the stroke count ' +
-                'in the character metadata.');
+    super('strokes');
     const include = this.include = {};
     this.strokes = stroke_extractor.getStrokes(
         glyph.stages.path, glyph.stages.bridges).strokes;

client/style.less

@@ -63,8 +63,8 @@
     }
 
     .status {
-      .instructions {
-        margin: 8px;
+      .template {
+        margin: 8px 8px 4px;
       }
 
       .log {
@@ -107,3 +107,16 @@
     }
   }
 }
+
+#editor .status .template {
+  &.path_stage {
+    .option, .separator {
+      display: inline-block;
+      margin-left: 4px;
+    }
+
+    .separator:last-child {
+      visibility: hidden;
+    }
+  }
+}

client/templates.html

@@ -0,0 +1,18 @@
+<template name="path_stage">
+  Choose a source for glyph path data for this character:
+  {{#each options}}
+    <a class="option">{{label}}</a>
+    <div class="separator">•</div>
+  {{/each}}
+</template>
+
+<template name="bridges_stage">
+  Connect each pair of path points such that the segment between those points
+  is part of some stroke outline. Click on two points to connect them by a
+  bridge, or click on a bridge to drop it.
+</template>
+
+<template name="strokes_stage">
+  Select paths to include in the glyph by clicking on them. The final number of
+  strokes must agree with the stroke count in the character metadata.
+</template>