Improve glyph inspector.

- Support all fonts. - Support both OTF and extracted outlines. Add more documentation. Other small fixes.
0xfe · Nov 4, 2021 · 2e05120 · 2e05120
1 parent 628aa69
commit 2e05120
Show file tree

Hide file tree

Showing 27 changed files with 136 additions and 295 deletions.
diff --git a/demos/fonts/README.md b/demos/fonts/README.md
@@ -0,0 +1,26 @@
+# Fonts
+
+## all.html
+
+The full `vexflow.js` includes the following music engraving fonts: Bravura, Petaluma, Gonville, and Custom. In this case, `Vex.Flow.setMusicFont('Bravura', ...);` is a synchronous function that changes the current font stack.
+
+## bravura.html, gonville.html, petaluma.html
+
+Each of these files depends on `vexflow-core.js` and the individual font JS files:
+
+```
+vexflow-font-bravura.js
+vexflow-font-gonville.js
+vexflow-font-petaluma.js
+vexflow-font-custom.js
+```
+
+They use the await keyword to call an async function that returns once the requested font is successfully loaded:
+
+```
+await Vex.Flow.setMusicFont('Petaluma');`
+```
+
+## promise.html
+
+The async `Vex.Flow.setMusicFont(...)` returns a Promise. This demo shows how to use a `.then(callback)` to request a font stack, and initialize VexFlow once the fonts are ready.
diff --git a/demos/fonts/gonville.html b/demos/fonts/gonville.html
@@ -12,7 +12,6 @@
       const factory = new Vex.Flow.Factory({ renderer: { elementId: 'output', width: 500, height: 200 } });
       const score = factory.EasyScore();
       const system = factory.System();
-
       system
         .addStave({
           voices: [
@@ -22,7 +21,6 @@
         })
         .addClef('treble')
         .addTimeSignature('4/4');
-
       factory.draw();
     </script>
   </body>

diff --git a/demos/fonts/petaluma.html b/demos/fonts/petaluma.html
@@ -12,7 +12,6 @@
       const factory = new Vex.Flow.Factory({ renderer: { elementId: 'output', width: 500, height: 200 } });
       const score = factory.EasyScore();
       const system = factory.System();
-
       system
         .addStave({
           voices: [
@@ -22,7 +21,6 @@
         })
         .addClef('treble')
         .addTimeSignature('4/4');
-
       factory.draw();
     </script>
   </body>

diff --git a/demos/fonts/promise.html b/demos/fonts/promise.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="output"></div>
+    <!-- The vexflow core build includes no music fonts. -->
+    <script src="../../build/vexflow-core.js"></script>
+    <script>
+      // Vex.Flow.setMusicFont(...fontNames) is an async function that triggers
+      // the loading of the fonts (stored in vexflow-font-xxxx.js).
+      // It returns a Promise that resolves to the loaded music font(s).
+      Vex.Flow.setMusicFont('Petaluma', 'Bravura', 'Gonville', 'Custom').then(onFontsLoaded);
+
+      function onFontsLoaded(musicFonts) {
+        console.log('Successfully loaded this music font stack:');
+        const [bravura, gonville, petaluma, custom] = musicFonts;
+        console.log(bravura, gonville, petaluma, custom);
+
+        const factory = new Vex.Flow.Factory({ renderer: { elementId: 'output', width: 500, height: 200 } });
+        const score = factory.EasyScore();
+        const system = factory.System();
+        system
+          .addStave({
+            voices: [
+              score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
+              score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
+            ],
+          })
+          .addClef('treble')
+          .addTimeSignature('4/4');
+        factory.draw();
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/accidental.ts b/src/accidental.ts
@@ -3,7 +3,6 @@
 // @author Mohit Cheppudira
 // @author Greg Ristow (modifications)
 
-import { Flow } from './flow';
 import { Fraction } from './fraction';
 import { Glyph } from './glyph';
 import { Modifier } from './modifier';

diff --git a/src/annotation.ts b/src/annotation.ts
@@ -2,7 +2,7 @@
 // MIT License
 
 import { Element } from './element';
-import { Font, FontInfo } from './font';
+import { FontInfo } from './font';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
 import { StemmableNote } from './stemmablenote';

diff --git a/src/articulation.ts b/src/articulation.ts
@@ -3,7 +3,6 @@
 // MIT License
 
 import { Builder } from './easyscore';
-import { Flow } from './flow';
 import { Glyph } from './glyph';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';

diff --git a/src/chordsymbol.ts b/src/chordsymbol.ts
@@ -10,7 +10,6 @@
 // See `tests/chordsymbol_tests.ts` for usage examples.
 
 import { Font, FontInfo, FontStyle, FontWeight } from './font';
-import { Flow } from './flow';
 import { Glyph } from './glyph';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
@@ -376,7 +375,13 @@ export class ChordSymbol extends Modifier {
   getDefaultFont(): Required<FontInfo> {
     let family = 'Roboto Slab, Times, serif';
     if (Tables.currentMusicFont().getName() === 'Petaluma') {
-      family = 'PetalumaScript, Arial, sans-serif';
+      // Fixes Issue #1180
+      // https://github.com/0xfe/vexflow/issues/1180
+      // family = 'PetalumaScript, Arial, sans-serif';
+
+      // RONYEH-FONT: A mismatched font family results in loading Roboto Slab's metrics instead.
+      // DELETE THE FOLLOWING LINE AND RESTORE THE ONE ABOVE.
+      family = 'petalumaScript,Arial';
     }
     return {
       family,

diff --git a/src/flow.ts b/src/flow.ts
@@ -163,6 +163,43 @@ export const Flow = {
   BUILD: '',
   VERSION: '',
 
+  /**
+   * `Flow.setMusicFont(...fontNames)` behaves differently depending on how you use VexFlow.
+   *
+   * **CASE 1**: You are using `vexflow.js`, which includes all music fonts (Bravura, Gonville, Petaluma, Custom).
+   * In this case, calling this method is optional, since VexFlow already defaults to a music font stack of:
+   * 'Bravura', 'Gonville', 'Custom'. This method is synchronous.
+   *
+   * Examples:
+   * ```
+   * Vex.Flow.setMusicFont('Petaluma');
+   * Vex.Flow.setMusicFont('Bravura', 'Gonville');
+   * ```
+   *
+   * **CASE 2**: You are using the lighter weight `vexflow-core.js` to take advantage of lazy loading for fonts.
+   * In this case, you MUST call this method at the beginning, since the default music font stack is empty.
+   * This method is replaced by an async function, so you must use `await` or a Promise to wait for the fonts
+   * to load before proceeding. See `demos/fonts/` for examples. See `src/fonts/async.ts` for implementation details.
+   *
+   * Example:
+   * ```
+   * await Vex.Flow.setMusicFont('Petaluma');
+   * ... (do VexFlow stuff) ...
+   * ```
+   * @returns CASE 1: a `Font` or an array of `Font` objects corresponding to the provided `fontNames`.
+   * @returns CASE 2: Promise<Font[]> that resolves to the same array of `Font` objects as above.
+   */
+  setMusicFont: (...fontNames: string[]): Font | Font[] => {
+    // Convert the array of font names into an array of Font objects.
+    const fonts = fontNames.map((fontName) => Font.load(fontName));
+    Flow.setMusicFontStack(fonts);
+    if (fonts.length === 1) {
+      return fonts[0];
+    } else {
+      return fonts;
+    }
+  },
+
   /**
    * Use Flow.setMusicFont(...fontNames).
    *

diff --git a/src/font.ts b/src/font.ts
@@ -82,7 +82,10 @@ export class Font {
     return 'Font';
   }
 
-  /** Customize this field to specify a different CDN for delivering web fonts. */
+  /**
+   * Customize this field to specify a different CDN for delivering web fonts.
+   * https://cdn.jsdelivr.net/npm/vexflow-fonts@1.0.3/
+   */
   static FONT_HOST = 'https://unpkg.com/vexflow-fonts@1.0.3/';
 
   /** Default sans-serif font family. */
@@ -355,7 +358,7 @@ export class Font {
    */
   // eslint-disable-next-line
   lookupMetric(key: string, defaultValue?: Record<string, any> | number): any {
-    // console.log('lookupMetric:', key);
+    // console.log('lookupMetric: ', key);
 
     const keyParts = key.split('.');
 
@@ -373,7 +376,7 @@ export class Font {
     }
 
     // After checking every part of the key (i.e., the loop completed), return the most recently retrieved value.
-    // console.log('found:', key, currObj);
+    // console.log('found: ', key, currObj);
     return currObj;
   }
 

diff --git a/src/fonts/custom_glyphs.ts b/src/fonts/custom_glyphs.ts
@@ -1,10 +1,6 @@
 export const CustomFont = {
   resolution: 1000,
-<<<<<<< HEAD
-  familyName: 'VexFlowCustom',
-=======
   fontFamily: 'VexflowCustom',
->>>>>>> Improve API for Flow and Tables.
   glyphs: {
     noteheadSquareWhite: {
       x_min: 0,

diff --git a/src/fonts/loadDynamic.ts b/src/fonts/loadDynamic.ts
@@ -5,17 +5,20 @@
 
 import { Flow } from '../flow';
 import { Font } from '../font';
+import { RuntimeError } from '../util';
 
-export function setupMusicFonts(): void {
-  Flow.setMusicFont = async (...fontNames: string[]) => {
-    // Make sure each individual font is loaded before we proceed to call Flow.setMusicFontStack(...).
+export function loadMusicFonts(): void {
+  // Keep the synchronous function around so we can call it later.
+  const setMusicFontSync = Flow.setMusicFont;
+
+  // Replace Flow.setMusicFont(...fontNames) with this async function.
+  // @ts-ignore override with a function that has a different return type.
+  Flow.setMusicFont = async (...fontNames: string[]): Promise<Font | Font[]> => {
+    // Make sure each individual font is loaded before we proceed.
     for (const fontName of fontNames) {
       const font = Font.load(fontName);
+      // Check if the font data has already been loaded.
       if (font.hasData()) {
-        // This font has been loaded before.
-        console.log('We have already loaded: ' + fontName);
-        console.log(font.getData());
-        // TODO/RONYEH REMOVE!
         continue;
       }
 
@@ -41,12 +44,12 @@ export function setupMusicFonts(): void {
           break;
         }
         default: {
-          console.log('Unknown music font: ' + fontName);
+          throw new RuntimeError('UnknownMusicFont', `Music font ${fontName} does not exist.`);
         }
       }
     }
 
-    // Convert an array of font names into an array of Font objects.
-    Flow.setMusicFontStack(fontNames.map((fontName) => Font.load(fontName)));
+    // The fonts are ready! Now it's time to call the synchronous function.
+    return setMusicFontSync(...fontNames);
   };
 }
diff --git a/src/fonts/loadStatic.ts b/src/fonts/loadStatic.ts
@@ -13,8 +13,8 @@ export function loadMusicFonts(): void {
   // Populate our font "database" with all our music engraving fonts.
   const bravuraFont = Font.load('Bravura', Bravura.data, Bravura.metrics);
   const gonvilleFont = Font.load('Gonville', Gonville.data, Gonville.metrics);
-  Font.load('Petaluma', Petaluma.data, Petaluma.metrics);
   const customFont = Font.load('Custom', Custom.data, Custom.metrics);
+  Font.load('Petaluma', Petaluma.data, Petaluma.metrics);
 
   // vexflow.js uses the following default font stack:
   Flow.setMusicFontStack([bravuraFont, gonvilleFont, customFont]);

diff --git a/src/fonts/loadTextFonts.ts b/src/fonts/loadTextFonts.ts
@@ -11,8 +11,8 @@ export function loadTextFonts() {
     Font.load(fontFamily, fontData);
     // H isn't actually the tallest or the widest.
     // Interestingly, the lowercase b is the tallest.
-    const maxSizeGlyph = 'H';
-    // const maxSizeGlyph = 'b'; // TODO/RONYEH: introduces a visual diff.
+    const maxSizeGlyph = 'H'; // Two lines of lyrics touch each other because we don't allow enough vertical space.
+    // const maxSizeGlyph = 'b'; // RONYEH: introduces a visual diff, but the spacing is better.
     TextFormatter.registerInfo({
       family: fontFamily,
       resolution,

diff --git a/src/formatter.ts b/src/formatter.ts
@@ -3,7 +3,6 @@
 
 import { Beam } from './beam';
 import { BoundingBox } from './boundingbox';
-import { Flow } from './flow';
 import { Font } from './font';
 import { Fraction } from './fraction';
 import { ModifierContext } from './modifiercontext';

diff --git a/src/multimeasurerest.ts b/src/multimeasurerest.ts
@@ -4,7 +4,6 @@
 // This class implements multiple measure rests.
 
 import { Element } from './element';
-import { Flow } from './flow';
 import { Glyph } from './glyph';
 import { NoteHead } from './notehead';
 import { RenderContext } from './rendercontext';

diff --git a/src/notehead.ts b/src/notehead.ts
@@ -3,7 +3,6 @@
 
 import { BoundingBox } from './boundingbox';
 import { ElementStyle } from './element';
-import { Flow } from './flow';
 import { Glyph, GlyphProps } from './glyph';
 import { Note, NoteStruct } from './note';
 import { RenderContext } from './rendercontext';

diff --git a/src/ornament.ts b/src/ornament.ts
@@ -2,7 +2,6 @@
 // Author: Cyril Silverman
 // MIT License
 
-import { Flow } from './flow';
 import { Glyph } from './glyph';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';

diff --git a/src/stave.ts b/src/stave.ts
@@ -17,7 +17,6 @@ import { Tables } from './tables';
 import { TimeSignature } from './timesignature';
 import { isBarline } from './typeguard';
 import { RuntimeError } from './util';
-import { Flow } from './flow';
 
 export interface StaveLineConfig {
   visible?: boolean;

diff --git a/src/stavenote.ts b/src/stavenote.ts
@@ -14,7 +14,6 @@ import { Beam } from './beam';
 import { BoundingBox } from './boundingbox';
 import { Dot } from './dot';
 import { ElementStyle } from './element';
-import { Flow } from './flow';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
 import { Note, NoteStruct } from './note';

diff --git a/src/stem.ts b/src/stem.ts
@@ -6,7 +6,6 @@
 
 import { BoundingBox } from './boundingbox';
 import { Element } from './element';
-import { Flow } from './flow';
 import { Tables } from './tables';
 import { log, RuntimeError } from './util';
 

diff --git a/src/stemmablenote.ts b/src/stemmablenote.ts
@@ -4,7 +4,6 @@
 // `StemmableNote` is an abstract interface for notes with optional stems.
 // Examples of stemmable notes are `StaveNote` and `TabNote`
 
-import { Flow } from './flow';
 import { Glyph } from './glyph';
 import { GlyphProps } from './glyph';
 import { Note, NoteStruct } from './note';

diff --git a/tests/textformatter_tests.ts b/tests/textformatter_tests.ts
@@ -4,7 +4,6 @@
 // TextFormatter Tests
 
 import { TextFormatter } from 'textformatter';
-import { TestOptions, VexFlowTests } from './vexflow_test_helpers';
 
 const TextFormatterTests = {
   Start(): void {

diff --git a/tools/fonts/inspector/glyphs.html b/tools/fonts/inspector/glyphs.html
@@ -63,14 +63,13 @@ <h1 id="title">Glyph Inspector</h1>
       function chooseFont(fontName) {
         document.getElementById('title').innerText = 'Glyph Inspector – ' + fontName;
 
-        /* RONYEH 3.0.9 BEGIN */
-        const font = Vex.Flow.Fonts[fontName]();
-        Vex.Flow.DEFAULT_FONT_STACK = [font];
-        /* RONYEH 3.0.9 END */
-
-        /*
-        const font = Vex.Flow.setMusicFont(fontName); // RONYEH 4.0.0
-        */
+        /* Version 4.0.0 */
+        const font = Vex.Flow.setMusicFont(fontName);
+
+        /* Version 3.0.9 */
+        // const font = Vex.Flow.Fonts[fontName]();
+        // Vex.Flow.DEFAULT_FONT_STACK = [font];
+
         const glyphs = font.getGlyphs();
 
         // Calculate the canvas height programmatically based on the number of glyphs.