testing and code review changes for annotation text metrics

1. Change spelling of font family in metrics to match the css name
2. hash strings based on width/font data so they don't have to be recalculated
3. Add different font sizes to test cases
4. Add lines if the font height exceeds a single line

src/annotation.js

@@ -22,6 +22,11 @@ export class Annotation extends Modifier {
     return 'annotations';
   }
 
+  // Is there a better source for this?
+  static get distanceBetweenLines() {
+    return 10;
+  }
+
   // Text annotations can be positioned and justified relative to the note.
   static get Justify() {
     return {
@@ -69,21 +74,24 @@ export class Annotation extends Modifier {
     for (let i = 0; i < annotations.length; ++i) {
       let testWidth = 0;
       const annotation = annotations[i];
-      const textFont = TextFont.getTextFontFromVexFontData({ family: annotation.font.family,
-        size: annotation.font.size, weight: 'normal' });
-      for (let j = 0; j < annotation.text.length; ++j) {
-        testWidth += textFont.getWidthForCharacter(annotation.text[j]);
-      }
+      const textFont = TextFont.getTextFontFromVexFontData({
+        family: annotation.font.family,
+        size: annotation.font.size,
+        weight: 'normal',
+      });
+      // Calculate if the vertical extent will exceed a single line and adjust accordingly.
+      const numLines = Math.floor(textFont.maxHeight / Annotation.distanceBetweenLines) + 1;
+      // Get the string width from the font metrics
+      testWidth = textFont.getWidthForString(annotation.text);
       width = Math.max(width, testWidth);
       if (annotation.getPosition() === Modifier.Position.ABOVE) {
         annotation.setTextLine(state.top_text_line);
-        state.top_text_line++;
+        state.top_text_line += numLines;
       } else {
         annotation.setTextLine(state.text_line);
-        state.text_line++;
+        state.text_line += numLines;
       }
     }
-
     state.left_shift += width / 2;
     state.right_shift += width / 2;
     return true;
@@ -113,7 +121,9 @@ export class Annotation extends Modifier {
     this.setWidth(Flow.textWidth(text));
   }
 
-  getCategory() { return Annotation.CATEGORY; }
+  getCategory() {
+    return Annotation.CATEGORY;
+  }
 
   // Set font family, size, and weight. E.g., `Arial`, `10pt`, `Bold`.
   setFont(family, size, weight) {
@@ -124,19 +134,17 @@ export class Annotation extends Modifier {
   // Set vertical position of text (above or below stave). `just` must be
   // a value in `Annotation.VerticalJustify`.
   setVerticalJustification(just) {
-    this.vert_justification = typeof (just) === 'string'
-      ? Annotation.VerticalJustifyString[just]
-      : just;
+    this.vert_justification = typeof just === 'string' ? Annotation.VerticalJustifyString[just] : just;
     return this;
   }
 
   // Get and set horizontal justification. `justification` is a value in
   // `Annotation.Justify`.
-  getJustification() { return this.justification; }
+  getJustification() {
+    return this.justification;
+  }
   setJustification(just) {
-    this.justification = typeof (just) === 'string'
-      ? Annotation.JustifyString[just]
-      : just;
+    this.justification = typeof just === 'string' ? Annotation.JustifyString[just] : just;
     return this;
   }
 
@@ -145,9 +153,7 @@ export class Annotation extends Modifier {
     this.checkContext();
 
     if (!this.note) {
-      throw new Vex.RERR(
-        'NoNoteForAnnotation', "Can't draw text annotation without an attached note."
-      );
+      throw new Vex.RERR('NoNoteForAnnotation', "Can't draw text annotation without an attached note.");
     }
 
     this.setRendered();

src/fonts/petalumascript_textmetrics.js

@@ -1,5 +1,5 @@
 export const PetalumaScriptTextMetrics = {
-  name: 'PetalumaScript',
+  name: 'petalumaScript',
   smufl: false,
   spacing:50,
   "glyphs": {

src/fonts/robotoslab_textmetrics.js

@@ -1,5 +1,5 @@
 export const RobotoSlabTextMetrics = {
-  name: 'RobotoSlab',
+  name: 'Roboto Slab',
   smufl: false,
   spacing:50,
   "glyphs": {

src/textfont.js

@@ -35,7 +35,7 @@ export class TextFont {
     if (!TextFont.registryInstance) {
       TextFont.registryInstance = [];
       TextFont.registryInstance.push({
-        name: 'RobotoSlab',
+        name: 'Roboto Slab',
         resolution: RobotoSlabTextMetrics.resolution,
         glyphs: RobotoSlabTextMetrics.glyphs,
         family: RobotoSlabTextMetrics.fontFamily,
@@ -49,7 +49,7 @@ export class TextFont {
         description: 'Default serif text font to pair with Bravura/Gonville engraving font',
       });
       TextFont.registryInstance.push({
-        name: 'PetalumaScript',
+        name: 'petalumaScript',
         resolution: PetalumaScriptTextMetrics.resolution,
         glyphs: PetalumaScriptTextMetrics.glyphs,
         family: PetalumaScriptTextMetrics.fontFamily,
@@ -118,6 +118,13 @@ export class TextFont {
     return fs && typeof fs === 'string' && fs.toLowerCase() === 'italic';
   }
 
+  static get fontTextHash() {
+    if (typeof TextFont.fontTextHashInstance === 'undefined') {
+      TextFont.fontTextHashInstance = {};
+    }
+    return TextFont.fontTextHashInstance;
+  }
+
   // ### getTextFontFromVexFontData
   // Find the font that most closely matches the parameters from the given font data.
   // Primarily we look for font family, also bold and italic attributes.  This
@@ -154,7 +161,7 @@ export class TextFont {
         }
       }
     }
-    if (typeof(fd.size) === 'number' && fd.size > 0) {
+    if (typeof fd.size === 'number' && fd.size > 0) {
       rv.setFontSize(fd.size);
     }
     return rv;
@@ -210,6 +217,13 @@ export class TextFont {
     if (!this.maxSizeGlyph) {
       this.maxSizeGlyph = 'H';
     }
+    this.weight = typeof this.weight === 'undefined' ? '' : this.weight;
+    this.style = typeof this.style === 'undefined' ? '' : this.style;
+    this.setHashBase();
+  }
+
+  setHashBase() {
+    this.textHashBase = this.family + '-' + this.size + '-' + this.weight + '-' + this.style;
   }
 
   getMetricForCharacter(c) {
@@ -232,6 +246,18 @@ export class TextFont {
     return (metric.advanceWidth / this.resolution) * this.pointsToPixels;
   }
 
+  getWidthForString(s) {
+    const key = this.textHashBase + '-' + s;
+    let width = 0;
+    if (!TextFont.fontTextHash[key]) {
+      for (let j = 0; j < s.length; ++j) {
+        width += this.getWidthForCharacter(s[j]);
+      }
+      TextFont.fontTextHash[key] = width;
+    }
+    return TextFont.fontTextHash[key];
+  }
+
   // ### pointsToPixels
   // The font size is specified in points, convert to 'pixels' in the svg space
   get pointsToPixels() {
@@ -240,6 +266,7 @@ export class TextFont {
 
   setFontSize(size) {
     this.size = size;
+    this.setHashBase();
     return this;
   }
 }