Changes for code review

case of files, include metrics gen tool.

src/chordsymbol.js

@@ -12,8 +12,8 @@ import { Vex } from './vex';
 import { Flow } from './tables';
 import { Glyph } from './glyph';
 import { Modifier } from './modifier';
-import { PetalumaScriptMetrics } from './fonts/petalumaScript_metrics';
-import { RobotoSlabMetrics } from './fonts/robotoSlab_metrics';
+import { PetalumaScriptTextMetrics } from './fonts/petalumascript_textmetrics';
+import { RobotoSlabTextMetrics } from './fonts/robotoslab_textmetrics';
 
 // To enable logging for this class. Set `Vex.Flow.ChordSymbol.DEBUG` to `true`.
 function L(...args) { if (ChordSymbol.DEBUG) Vex.L('Vex.Flow.ChordSymbol', args); }
@@ -88,9 +88,9 @@ export class ChordSymbol extends Modifier {
 
   static get textMetricsForEngravingFont() {
     if (Vex.Flow.DEFAULT_FONT_STACK[0].name === 'Petaluma') {
-      return PetalumaScriptMetrics;
+      return PetalumaScriptTextMetrics;
     } else {
-      return RobotoSlabMetrics;
+      return RobotoSlabTextMetrics;
     }
   }
 

src/factory.js

@@ -48,7 +48,7 @@ import { BarNote } from './barnote';
 import { TabNote } from './tabnote';
 import { TabStave } from './tabstave';
 import { TextNote } from './textnote';
-import { TextFont } from './textFont';
+import { TextFont } from './textfont';
 
 // To enable logging for this class. Set `Vex.Flow.Factory.DEBUG` to `true`.
 function L(...args) { if (Factory.DEBUG) Vex.L('Vex.Flow.Factory', args); }

src/fonts/petalumaScript_metrics.js → src/fonts/petalumascript_textmetrics.js

@@ -1,4 +1,4 @@
-export const PetalumaScriptMetrics = {
+export const PetalumaScriptTextMetrics = {
   name: 'PetalumaScript',
   smufl: false,
   spacing:50,

src/fonts/robotoSlab_metrics.js → src/fonts/robotoslab_textmetrics.js

@@ -1,4 +1,4 @@
-export const RobotoSlabMetrics = {
+export const RobotoSlabTextMetrics = {
   name: 'RobotoSlab',
   smufl: false,
   spacing:50,

src/index.js

@@ -75,9 +75,9 @@ import { Registry } from './registry';
 import { StaveText } from './stavetext';
 import { GlyphNote } from './glyphnote';
 import { RepeatNote } from './repeatnote';
-import { TextFont } from './textFont';
-import { PetalumaScriptMetrics } from './fonts/petalumaScript_metrics';
-import { RobotoSlabMetrics } from './fonts/robotoSlab_metrics';
+import { TextFont } from './textfont';
+import { PetalumaScriptTextMetrics } from './fonts/petalumascript_textmetrics';
+import { RobotoSlabTextMetrics } from './fonts/robotoslab_textmetrics';
 
 
 import { Font, Fonts, DefaultFontStack } from './smufl';
@@ -161,7 +161,7 @@ Vex.Flow.Font = Font;
 Vex.Flow.Fonts = Fonts;
 Vex.Flow.TextFont = TextFont;
 Vex.Flow.DefaultFontStack = DefaultFontStack;
-Vex.Flow.PetalumaScriptMetrics = PetalumaScriptMetrics;
-Vex.Flow.RobotoSlabMetrics = RobotoSlabMetrics;
+Vex.Flow.PetalumaScriptTextMetrics = PetalumaScriptTextMetrics;
+Vex.Flow.RobotoSlabTextMetrics = RobotoSlabTextMetrics;
 
 export default Vex;

src/textFont.js

@@ -7,8 +7,8 @@
 //
 
 import { Vex } from './vex';
-import { PetalumaScriptMetrics } from './fonts/petalumaScript_metrics';
-import { RobotoSlabMetrics } from './fonts/robotoSlab_metrics';
+import { PetalumaScriptTextMetrics } from './fonts/petalumascript_textmetrics';
+import { RobotoSlabTextMetrics } from './fonts/robotoslab_textmetrics';
 
 // To enable logging for this class. Set `Vex.Flow.TextFont.DEBUG` to `true`.
 function L(...args) { if (TextFont.DEBUG) Vex.L('Vex.Flow.TextFont', args); }
@@ -32,9 +32,9 @@ export class TextFont  {
       TextFont.registryInstance = [];
       TextFont.registryInstance.push({
         name: 'RobotoSlab',
-        resolution: RobotoSlabMetrics.resolution,
-        glyphs: RobotoSlabMetrics.glyphs,
-        family: RobotoSlabMetrics.fontFamily,
+        resolution: RobotoSlabTextMetrics.resolution,
+        glyphs: RobotoSlabTextMetrics.glyphs,
+        family: RobotoSlabTextMetrics.fontFamily,
         serifs: true,
         monospaced: false,
         italic: false,
@@ -46,9 +46,9 @@ export class TextFont  {
       });
       TextFont.registryInstance.push({
         name: 'PetalumaScript',
-        resolution: PetalumaScriptMetrics.resolution,
-        glyphs: PetalumaScriptMetrics.glyphs,
-        family: PetalumaScriptMetrics.fontFamily,
+        resolution: PetalumaScriptTextMetrics.resolution,
+        glyphs: PetalumaScriptTextMetrics.glyphs,
+        family: PetalumaScriptTextMetrics.fontFamily,
         serifs: false,
         monospaced: false,
         italic: false,

tests/stavenote_tests.js

@@ -193,7 +193,7 @@ VF.Test.StaveNote = (function() {
           );
           // set to weird Stave
           var stave = new VF.Stave(10, 10, 300, { spacing_between_lines_px: 20 });
-          note.setStave(stave)
+          note.setStave(stave);
           equal(
             note.getStemExtension(),
             expectedStemExtension * 2,
@@ -706,7 +706,7 @@ VF.Test.StaveNote = (function() {
 
       var whole_keys = [
         'e/3', 'a/3', 'f/5', 'a/5', 'd/6', 'a/6'
-      ]
+      ];
       for (i = 0; i < whole_keys.length; i++) {
         note = new VF.StaveNote({ keys: [whole_keys[i]], duration: 'w' })
           .setStave(stave);

tools/smufl/README.md

@@ -26,4 +26,12 @@ To add a custom glyph, add it's outline to `fonts/custom_glyphs.js` and a custom
 
 ```sh
 $ node gonville_fontgen.js ../../src/fonts/
-```
+```
+
+### Generate Text Metrics for a Text Font
+
+To create text metrics for your own font, first obtain an open-type font (.otf) version of the font file.  Then run:
+```sh
+$ node textmetrics_fontgen.js myFont.otf myFont_textmetrics.json
+```
+You can register your metrics using `TextFont.registerFont()` and the metrics will be available for your module.  See the `chordsymbol.js` module for examples.

tools/smufl/textmetrics_fontgen.js

@@ -0,0 +1,75 @@
+/*
+Convert text font to Vexflow text font metrics.
+
+Usage: node fontgen.js myFont.otf ../../src/fonts/myFont_metrics.js
+*/
+
+const fs = require('fs');
+const process = require('process');
+// eslint-disable-next-line
+const opentype = require('opentype.js');
+
+function LogError(...args) {
+  // eslint-disable-next-line
+  console.error(...args)
+}
+
+// Converte OTF glyph path to Vexflow glyph path
+function toVFPath(glyph) {
+  const pointSize = 72;
+  const scale = 72 * 20;
+  const bb = glyph.getBoundingBox();
+  const path = glyph.getPath(0, 0, pointSize);
+  function fix(f, invert = false) {
+    return Math.round((f / pointSize) * scale) * (invert ? -1 : 1);
+  }
+
+  return {
+    'x_min': bb.x1,
+    'x_max': bb.x2,
+    'y_min': bb.y1,
+    'y_max': bb.y2,
+    'ha': bb.y2 - bb.y1,
+    'leftSideBearing': glyph.leftSideBearing,
+    'advanceWidth': glyph.advanceWidth
+  };
+}
+
+const args = process.argv.slice(2);
+if (args.length < 2) {
+  LogError('Usage: node fontgen.js [fontfile.otf] [outfile.json]');
+  LogError('E.g: node fontgen.js bravura-v1.otf bravura.smufl.js');
+  process.exit(255);
+}
+
+const fontFile = args[0];
+const outFile = args[1];
+
+const font = opentype.loadSync(fontFile);
+
+const fontData = {};
+let code = 32;
+
+// Convert metrics for visible ASCII characters in the
+// font.  This could be adapted to include non-printable characters
+// by using a table.
+for (; code < 127; ++code) {
+  const ch = String.fromCharCode(code);
+  const glyph = font.charToGlyph(ch);
+  fontData[ch] = toVFPath(glyph);
+}
+
+// File format for fonts/font_glyphs.js
+const fileData = {
+  glyphs: fontData,
+  fontFamily: font.names.fontFamily.en,
+  resolution: font.unitsPerEm,
+  generatedOn: new Date().toISOString(),
+};
+
+// Set the variable name to the font family name
+const varName = fileData.fontFamily.replace(/\s+/, '_');
+
+LogError('Writing to file:', outFile);
+fs.writeFileSync(outFile,
+  `export const ${varName}Font = ${JSON.stringify(fileData, null, 2)};\n`);