Usage of FontFace rather than paths

entry/vexflow-font-gootville.ts

@@ -0,0 +1,11 @@
+// [VexFlow](https://vexflow.com) - Copyright (c) Mohit Muthanna 2010.
+// MIT License
+
+import { GootvilleFont } from '../src/fonts/gootville_glyphs';
+import { GootvilleMetrics } from '../src/fonts/gootville_metrics';
+
+export const Font = {
+  data: GootvilleFont,
+  metrics: GootvilleMetrics,
+};
+export default Font;

entry/vexflow-gootville.ts

@@ -0,0 +1,20 @@
+// [VexFlow](https://vexflow.com) - Copyright (c) Mohit Muthanna 2010.
+// MIT License
+//
+// vexflow-gootville.ts is the entry point for vexflow-gootville.js.
+// This version bundles the Gootville music engraving font.
+
+import { Flow } from '../src/flow';
+import { loadCustom } from '../src/fonts/load_custom';
+import { loadGootville } from '../src/fonts/load_gootville';
+import { loadTextFonts } from '../src/fonts/textfonts';
+
+loadGootville();
+loadCustom();
+Flow.setMusicFont('Gootville', 'Custom');
+loadTextFonts();
+
+// Re-export all exports from index.ts.
+export * from '../src/index';
+// Also collect all exports into a default export for CJS projects.
+export * as default from '../src/index';

package.json

@@ -18,6 +18,11 @@
       "require": "./build/cjs/vexflow-gonville.js",
       "import": "./build/esm/entry/vexflow-gonville.js"
     },
+    "./gootville": {
+      "types": "./build/types/entry/vexflow-gootville.d.ts",
+      "require": "./build/cjs/vexflow-gootville.js",
+      "import": "./build/esm/entry/vexflow-gootville.js"
+    },
     "./leland": {
       "types": "./build/types/entry/vexflow-leland.d.ts",
       "require": "./build/cjs/vexflow-leland.js",
@@ -43,6 +48,11 @@
       "require": "./build/cjs/vexflow-font-gonville.js",
       "import": "./build/esm/entry/vexflow-font-gonville.js"
     },
+    "./font/gootville": {
+      "types": "./build/types/entry/vexflow-font-gootville.d.ts",
+      "require": "./build/cjs/vexflow-font-gootville.js",
+      "import": "./build/esm/entry/vexflow-font-gootville.js"
+    },
     "./font/petaluma": {
       "types": "./build/types/entry/vexflow-font-petaluma.d.ts",
       "require": "./build/cjs/vexflow-font-petaluma.js",
@@ -87,7 +97,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.8.1",
     "@typescript-eslint/parser": "^5.8.1",
-    "canvas": "^2.8.0",
+    "canvas": "^2.10.2",
     "circular-dependency-plugin": "^5.2.2",
     "concurrently": "^7.0.0",
     "eslint": "^8.5.0",

src/annotation.ts

@@ -1,14 +1,13 @@
 // [VexFlow](https://vexflow.com) - Copyright (c) Mohit Muthanna 2010.
 // MIT License
 import { Element } from './element';
-import { FontInfo } from './font';
+import { Font, FontInfo } from './font';
 import { Modifier, ModifierPosition } from './modifier';
 import { ModifierContextState } from './modifiercontext';
 import { Stave } from './stave';
 import { Stem } from './stem';
 import { StemmableNote } from './stemmablenote';
 import { Tables } from './tables';
-import { TextFormatter } from './textformatter';
 import { Category, isStemmableNote, isTabNote } from './typeguard';
 import { log } from './util';
 
@@ -84,15 +83,15 @@ export class Annotation extends Modifier {
     let maxRightGlyphWidth = 0;
     for (let i = 0; i < annotations.length; ++i) {
       const annotation = annotations[i];
-      const textFormatter = TextFormatter.create(annotation.textFont);
+      const measure = Font.measureText(annotation.text, annotation.textFont!);
       // Text height is expressed in fractional stave spaces.
-      const textLines = (2 + textFormatter.getYForStringInPx(annotation.text).height) / Tables.STAVE_LINE_DISTANCE;
+      const textLines = (2 + measure.height) / Tables.STAVE_LINE_DISTANCE;
       let verticalSpaceNeeded = textLines;
 
       const note = annotation.checkAttachedNote();
       const glyphWidth = note.getGlyphProps().getWidth();
       // Get the text width from the font metrics.
-      const textWidth = textFormatter.getWidthForTextInPx(annotation.text);
+      const textWidth = measure.width;
       if (annotation.horizontalJustification === AnnotationHorizontalJustify.LEFT) {
         maxLeftGlyphWidth = Math.max(glyphWidth, maxLeftGlyphWidth);
         leftWidth = Math.max(leftWidth, textWidth) + Annotation.minAnnotationPadding;
@@ -230,7 +229,7 @@ export class Annotation extends Modifier {
     const ctx = this.checkContext();
     const note = this.checkAttachedNote();
     const stemDirection = note.hasStem() ? note.getStemDirection() : Stem.UP;
-    const textFormatter = TextFormatter.create(this.textFont);
+    const measure = Font.measureText(this.text, this.textFont!);
     const start = note.getModifierStartXY(ModifierPosition.ABOVE, this.index);
 
     this.setRendered();
@@ -244,8 +243,8 @@ export class Annotation extends Modifier {
     ctx.openGroup('annotation', this.getAttribute('id'));
     ctx.setFont(this.textFont);
 
-    const text_width = textFormatter.getWidthForTextInPx(this.text);
-    const text_height = textFormatter.getYForStringInPx(this.text).height;
+    const text_width = measure.width;
+    const text_height = measure.height;
     let x;
     let y;
 

src/bend.ts

@@ -2,10 +2,9 @@
 // MIT License
 
 import { Element } from './element';
-import { FontInfo } from './font';
+import { Font, FontInfo } from './font';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
-import { TextFormatter } from './textformatter';
 import { Category, isTabNote } from './typeguard';
 import { RuntimeError } from './util';
 
@@ -148,15 +147,13 @@ export class Bend extends Modifier {
     return this.text;
   }
   getTextHeight(): number {
-    const textFormatter = TextFormatter.create(this.textFont);
-    return textFormatter.maxHeight;
+    return Font.measureText(this.text, this.textFont!).width;
   }
 
   /** Recalculate width. */
   protected updateWidth(): this {
-    const textFormatter = TextFormatter.create(this.textFont);
     const measureText = (text: string) => {
-      return textFormatter.getWidthForTextInPx(text);
+      return Font.measureText(text, this.textFont!).width;
     };
 
     let totalWidth = 0;

src/canvascontext.ts

@@ -261,12 +261,12 @@ export class CanvasContext extends RenderContext {
 
     let y = 0;
     let height = 0;
-    if (metrics.fontBoundingBoxAscent) {
-      y = -metrics.fontBoundingBoxAscent;
-      height = metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent;
-    } else {
+    if (metrics.actualBoundingBoxAscent) {
       y = -metrics.actualBoundingBoxAscent;
       height = metrics.actualBoundingBoxDescent + metrics.actualBoundingBoxAscent;
+    } else {
+      y = -metrics.fontBoundingBoxAscent;
+      height = metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent;
     }
     // Return x, y, width & height in the same manner as svg getBBox
     return {

src/chordsymbol.ts

@@ -16,7 +16,6 @@ import { ModifierContextState } from './modifiercontext';
 import { Note } from './note';
 import { StemmableNote } from './stemmablenote';
 import { Tables } from './tables';
-import { TextFormatter } from './textformatter';
 import { Category, isStemmableNote } from './typeguard';
 import { log } from './util';
 
@@ -290,7 +289,7 @@ export class ChordSymbol extends Modifier {
 
         // If there is a symbol-specific offset, add it but consider font
         // size since font and glyphs will be interspersed.
-        const fontSize = symbol.textFormatter.fontSizeInPixels;
+        const fontSize = Font.convertSizeToPixelValue(symbol.textFont?.size);
         const superSubFontSize = fontSize * superSubScale;
         if (block.symbolType === SymbolTypes.GLYPH && block.glyph !== undefined) {
           block.width = ChordSymbol.getWidthForGlyph(block.glyph) * superSubFontSize;
@@ -384,9 +383,6 @@ export class ChordSymbol extends Modifier {
   protected useKerning: boolean = true;
   protected reportWidth: boolean = true;
 
-  // Initialized by the constructor via this.setFont().
-  protected textFormatter!: TextFormatter;
-
   constructor() {
     super();
     this.resetFont();
@@ -415,11 +411,11 @@ export class ChordSymbol extends Modifier {
    * The offset is specified in `em`. Scale this value by the font size in pixels.
    */
   get superscriptOffset(): number {
-    return ChordSymbol.superscriptOffset * this.textFormatter.fontSizeInPixels;
+    return ChordSymbol.superscriptOffset * Font.convertSizeToPixelValue(this.textFont?.size);
   }
 
   get subscriptOffset(): number {
-    return ChordSymbol.subscriptOffset * this.textFormatter.fontSizeInPixels;
+    return ChordSymbol.subscriptOffset * Font.convertSizeToPixelValue(this.textFont?.size);
   }
 
   setReportWidth(value: boolean): this {
@@ -442,7 +438,7 @@ export class ChordSymbol extends Modifier {
     }
     const bar = this.symbolBlocks[barIndex];
     const xoff = bar.width / 4;
-    const yoff = 0.25 * this.textFormatter.fontSizeInPixels;
+    const yoff = 0.25 * Font.convertSizeToPixelValue(this.textFont?.size);
     let symIndex = 0;
     for (symIndex === 0; symIndex < barIndex; ++symIndex) {
       const symbol = this.symbolBlocks[symIndex];
@@ -501,7 +497,7 @@ export class ChordSymbol extends Modifier {
       preKernLower = ChordSymbol.lowerKerningText.some((xx) => xx === prevSymbol.text[prevSymbol.text.length - 1]);
     }
 
-    const kerningOffsetPixels = ChordSymbol.kerningOffset * this.textFormatter.fontSizeInPixels;
+    const kerningOffsetPixels = ChordSymbol.kerningOffset * Font.convertSizeToPixelValue(this.textFont?.size);
     // TODO: adjust kern for font size.
     // Where should this constant live?
     if (preKernUpper && currSymbol.symbolModifier === SymbolModifiers.SUPERSCRIPT) {
@@ -547,7 +543,7 @@ export class ChordSymbol extends Modifier {
       // rv.width = rv.glyph.getMetrics().width;
       // don't set yShift here, b/c we need to do it at formatting time after the font is set.
     } else if (symbolType === SymbolTypes.TEXT) {
-      symbolBlock.width = this.textFormatter.getWidthForTextInEm(symbolBlock.text);
+      symbolBlock.width = Font.measureText(symbolBlock.text, this.textFont!).width / Font.scaleToPxFrom['em'];
     } else if (symbolType === SymbolTypes.LINE) {
       symbolBlock.width = params.width;
     }
@@ -646,7 +642,6 @@ export class ChordSymbol extends Modifier {
    */
   setFont(f?: string | FontInfo, size?: string | number, weight?: string | number, style?: string): this {
     super.setFont(f, size, weight, style);
-    this.textFormatter = TextFormatter.create(this.textFont);
     return this;
   }
 
@@ -687,15 +682,11 @@ export class ChordSymbol extends Modifier {
     let acc = 0;
     let i = 0;
     for (i = 0; i < text.length; ++i) {
-      const metrics = this.textFormatter.getGlyphMetrics(text[i]);
-      if (metrics) {
-        const yMax = metrics.y_max ?? 0;
-        acc = yMax < acc ? yMax : acc;
-      }
+      const yMax = Font.textMetrics(text[i], this.fontInfo).fontBoundingBoxDescent;
+      acc = yMax < acc ? yMax : acc;
     }
 
-    const resolution = this.textFormatter.getResolution();
-    return i > 0 ? -1 * (acc / resolution) : 0;
+    return -acc;
   }
 
   /** Render text and glyphs above/below the note. */
@@ -750,7 +741,7 @@ export class ChordSymbol extends Modifier {
       // HorizontalJustify.CENTER_STEM
       x = note.getStemX() - this.getWidth() / 2;
     }
-    L('Rendering ChordSymbol: ', this.textFormatter, x, y);
+    L('Rendering ChordSymbol: ', x, y);
 
     this.symbolBlocks.forEach((symbol) => {
       const isSuper = ChordSymbol.isSuperscript(symbol);

src/clef.ts

@@ -78,7 +78,7 @@ export class Clef extends StaveModifier {
         point: 0,
       },
       percussion: {
-        code: 'restMaxima',
+        code: 'unpitchedPercussionClef1',
         line: 2,
         point: 0,
       },

src/flow.ts

@@ -74,7 +74,6 @@ import { TabStave } from './tabstave';
 import { TabTie } from './tabtie';
 import { TextBracket, TextBracketPosition } from './textbracket';
 import { TextDynamics } from './textdynamics';
-import { TextFormatter } from './textformatter';
 import { TextJustification, TextNote } from './textnote';
 import { TickContext } from './tickcontext';
 import { TimeSignature } from './timesignature';
@@ -167,7 +166,6 @@ export class Flow {
   static TabTie = TabTie;
   static TextBracket = TextBracket;
   static TextDynamics = TextDynamics;
-  static TextFormatter = TextFormatter;
   static TextNote = TextNote;
   static TickContext = TickContext;
   static TimeSignature = TimeSignature;