Merge https://github.com/0xfe/vexflow into pr-1265

CHANGELOG.md

@@ -2,21 +2,19 @@
 
 Please help test this beta release and [report issues on GitHub](https://github.com/0xfe/vexflow/issues). Thanks!
 
+Detailed changes are listed on the wiki: https://github.com/0xfe/vexflow/wiki/Changelog-ver-4.0
+
 ## Features
 
 - Migrate VexFlow to **TypeScript** with a ES6 target.
+- Support ES module in addition to CommonJS.
 - Improve handling of music fonts and text fonts.
 - Optional lazy loading of music fonts.
-- `setFont(...)` method can be called in these ways:
-  - `setFont(family, size, weight, style)`
-  - `setFont(cssShorthand)`
-    - e.g., `setFont('bold 10pt Arial')`
-  - `setFont(fontInfoObject)`
-    - e.g., `setFont({ family: 'Times', size: 12 })`
+- Improve `setFont(...)` method in Element class.
 
 ## Breaking
 
-- The tsconfig.json `compilerOptions.target` has been updated to ES6 / ES2015. If you are targeting an older environment, you will need to build directly from source code (and change the target back to ES5).
+- The tsconfig.json `compilerOptions.target` has been updated to ES6 / ES2015.
 - `Stave.setNumLines(n: number)` requires a number. Previously, a string would also work. See: [stave.ts](https://github.com/0xfe/vexflow/blob/master/src/stave.ts) and [#1083](https://github.com/0xfe/vexflow/issues/1083).
 - `Note.addModifier(modifier: Modifier, index?: number): this` now throws a RuntimeError if the parameters are reversed.
 - `TickContext.getTickableForVoice(voiceIndex: number): Tickable` was previously named `getTickablesForVoice(voiceIndex: number): Note`. We removed the `s` because the method returns a single Tickable. You will need to update calls to this function if you are upgrading from a build from between April 2020 to August 2021.
@@ -29,7 +27,6 @@ Please help test this beta release and [report issues on GitHub](https://github.
   - `ChordSymbol.metrics` was previously named `ChordSymbol.chordSymbolMetrics`.
 - `StaveNote.LEDGER_LINE_OFFSET` was previously named `StaveNote.DEFAULT_LEDGER_LINE_OFFSET`.
 - **Fonts**
-
   - `TextFontMetrics` has been merged into `FontGlyph` due to substantial overlap.
   - `Flow.NOTATION_FONT_SCALE` was previously named `Flow.DEFAULT_NOTATION_FONT_SCALE`.
   - `setFont(...)` in `CanvasContext` and `SVGContext` previously took arguments: `family`, `size`, `weight`. The `weight` argument allowed strings like `'italic bold'`. This no longer works, and `'italic'` must now be passed into the `style` argument.

src/accidental.ts

@@ -411,7 +411,7 @@ export class Accidental extends Modifier {
       const modifiedPitches: string[] = [];
 
       const processNote = (t: Tickable) => {
-        // Only StaveNote implements .addAccidental(), which is used below.
+        // Only StaveNote implements .addModifier(), which is used below.
         if (!isStaveNote(t) || t.isRest() || t.shouldIgnoreTicks()) {
           return;
         }
@@ -456,7 +456,7 @@ export class Accidental extends Modifier {
             const accidental = new Accidental(accidentalString);
 
             // Attach the accidental to the StaveNote
-            staveNote.addAccidental(keyIndex, accidental);
+            staveNote.addModifier(keyIndex, accidental);
 
             // Add the pitch to list of pitches that modified accidentals
             modifiedPitches.push(keyString);

src/articulation.ts

@@ -9,7 +9,7 @@ import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
 import { Note } from './note';
 import { Stave } from './stave';
-import { isStaveNote, StaveNote } from './stavenote';
+import { isStaveNote } from './stavenote';
 import { Stem } from './stem';
 import { StemmableNote } from './stemmablenote';
 import { Tables } from './tables';
@@ -285,7 +285,7 @@ export class Articulation extends Modifier {
         if (position) artic.position = Modifier.PositionString[position];
         return builder.getFactory().Articulation(artic);
       })
-      .map((artic) => note.addModifier(artic, 0));
+      .map((artic) => note.addModifier(0, artic));
   }
 
   /**

src/canvascontext.ts

@@ -258,9 +258,22 @@ export class CanvasContext extends RenderContext {
 
   measureText(text: string): TextMeasure {
     const metrics = this.context2D.measureText(text);
+
+    let y = 0;
+    let height = 0;
+    if (metrics.fontBoundingBoxAscent) {
+      y = -metrics.fontBoundingBoxAscent;
+      height = metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent;
+    } else {
+      y = -metrics.actualBoundingBoxAscent;
+      height = metrics.actualBoundingBoxDescent + metrics.actualBoundingBoxAscent;
+    }
+    // Return x, y, width & height in the same manner as svg getBBox
     return {
+      x: 0,
+      y: y,
       width: metrics.width,
-      height: this.textHeight,
+      height: height,
     };
   }
 

src/dot.ts

@@ -21,6 +21,32 @@ export class Dot extends Modifier {
   protected radius: number;
   protected dot_shiftY: number;
 
+  /** Returns the dots associated to a Note. */
+  static getDots(note: Note): Dot[] {
+    return note.getModifiersByType(Dot.CATEGORY) as Dot[];
+  }
+
+  /** Add a dot on the specified keys to the notes. */
+  static buildAndAttach(notes: Note[], options?: { index?: number; all?: boolean }): void {
+    for (const note of notes) {
+      if (options?.all) {
+        for (let i = 0; i < note.keys.length; i++) {
+          const dot = new Dot();
+          dot.setDotShiftY(note.glyph.dot_shiftY);
+          note.addModifier(i, dot);
+        }
+      } else if (options?.index != undefined) {
+        const dot = new Dot();
+        dot.setDotShiftY(note.glyph.dot_shiftY);
+        note.addModifier(options?.index, dot);
+      } else {
+        const dot = new Dot();
+        dot.setDotShiftY(note.glyph.dot_shiftY);
+        note.addModifier(0, dot);
+      }
+    }
+  }
+
   // Arrange dots inside a ModifierContext.
   static format(dots: Dot[], state: ModifierContextState): boolean {
     const right_shift = state.right_shift;
@@ -40,10 +66,12 @@ export class Dot extends Modifier {
       if (isStaveNote(note)) {
         const index = dot.checkIndex();
         props = note.getKeyProps()[index];
-        shift = note.getRightDisplacedHeadPx();
+        // consider right displaced head with no previous modifier
+        if (right_shift === 0) shift = note.getRightDisplacedHeadPx();
+        else shift = right_shift;
       } else if (note.getCategory() === 'TabNote') {
         props = { line: 0.5 }; // Shim key props for dot placement
-        shift = 0;
+        shift = right_shift;
       } else {
         // note object is not StaveNote or TabNote.
         throw new RuntimeError('Internal', 'Unexpected instance.');

src/easyscore.ts

@@ -3,6 +3,7 @@
 
 import { Accidental } from './accidental';
 import { Articulation } from './articulation';
+import { Dot } from './dot';
 import { Factory } from './factory';
 import { FretHandFinger } from './frethandfinger';
 import { Music } from './music';
@@ -371,15 +372,15 @@ export class Builder {
       const accid = notePiece.accid;
       if (typeof accid === 'string') {
         const accidental = factory.Accidental({ type: accid });
-        note.addAccidental(index, accidental);
+        note.addModifier(index, accidental);
         accidentals.push(accidental);
       } else {
         accidentals.push(undefined);
       }
     });
 
     // Attach dots.
-    for (let i = 0; i < dots; i++) note.addDotToAll();
+    for (let i = 0; i < dots; i++) Dot.buildAndAttach([note], { all: true });
 
     this.commitHooks.forEach((commitHook) => commitHook(options, note, this));
 

src/flow.ts

@@ -37,6 +37,7 @@ import { Note } from './note';
 import { NoteHead } from './notehead';
 import { NoteSubGroup } from './notesubgroup';
 import { Ornament } from './ornament';
+import { Parenthesis } from './parenthesis';
 import { Parser } from './parser';
 import { PedalMarking } from './pedalmarking';
 import { Registry } from './registry';
@@ -139,6 +140,7 @@ export class Flow {
   static NoteHead = NoteHead;
   static NoteSubGroup = NoteSubGroup;
   static Ornament = Ornament;
+  static Parenthesis = Parenthesis;
   static Parser = Parser;
   static PedalMarking = PedalMarking;
   static Registry = Registry;

src/fonts/bravura_glyphs.ts

@@ -368,6 +368,30 @@ export const BravuraFont = {
       ha: 250,
       o: 'm 451 -180 l 451 180 l 0 180 l 0 -180 z',
     },
+    noteheadParenthesis: {
+      x_min: -73,
+      x_max: 368,
+      y_min: -180,
+      y_max: 182,
+      ha: 362,
+      o: 'm 52 -249 b -30 -144 3 -212 -14 -190 b -52 4 -45 -102 -52 -56 b 52 252 -52 118 -36 179 l 46 262 b -105 3 -49 197 -105 124 b 45 -259 -105 -109 -48 -200 z m 382 -259 b 530 3 474 -202 530 -108 b 379 262 530 122 474 200 l 373 252 b 478 4 462 180 478 118 b 456 -144 478 -56 471 -102 b 373 -249 439 -190 422 -212 z',
+    },
+    noteheadParenthesisRight: {
+      x_min: -36,
+      x_max: 73,
+      y_min: -181,
+      y_max: 181,
+      ha: 362,
+      o: 'm -43 -261 b 105 1 49 -203 105 -109 b -46 261 105 121 49 199 l -52 251 b 53 3 37 179 53 117 b 32 -145 53 -58 46 -104 b -52 -251 14 -192 -3 -213 z',
+    },
+    noteheadParenthesisLeft: {
+      x_min: 0,
+      x_max: 109,
+      y_min: -181,
+      y_max: 181,
+      ha: 362,
+      o: 'm 157 -251 b 75 -145 108 -213 91 -192 b 53 3 60 -104 53 -58 b 157 251 53 117 69 177 l 151 261 b 0 1 56 196 0 122 b 150 -261 0 -111 58 -202 z',
+    },
     augmentationDot: {
       x_min: 0,
       x_max: 100,

src/fonts/bravura_metrics.ts

@@ -83,6 +83,17 @@ export const BravuraMetrics = {
     },
   },
 
+  parenthesis: {
+    default: {
+      point: 39,
+      width: 7,
+    },
+    gracenote: {
+      point: (39 * 3) / 5,
+      width: 3,
+    },
+  },
+
   pedalMarking: {
     up: {
       point: 40,
@@ -131,6 +142,14 @@ export const BravuraMetrics = {
     },
   },
 
+  staveRepetition: {
+    default: {
+      offsetY: 25,
+      offsetSymbol: 12,
+      spacing: 5,
+    },
+  },
+
   // noteHead: {
   // },
 
@@ -504,5 +523,11 @@ export const BravuraMetrics = {
         reportedWidth: 5,
       },
     },
+    tuplet: {
+      noteHeadOffset: 20,
+      stemOffset: 10,
+      bottomLine: 4,
+      topModifierOffset: 15,
+    },
   },
 };

src/fonts/gonville_metrics.ts

@@ -84,6 +84,17 @@ export const GonvilleMetrics = {
     },
   },
 
+  parenthesis: {
+    default: {
+      point: 39,
+      width: 7,
+    },
+    gracenote: {
+      point: (39 * 3) / 5,
+      width: 3,
+    },
+  },
+
   pedalMarking: {
     up: {
       point: 40,
@@ -106,21 +117,29 @@ export const GonvilleMetrics = {
     default: {
       point: 25,
       spacing: 4,
-      offsetYStemUp: -17,
-      offsetYStemDown: -2,
+      offsetYStemUp: -7,
+      offsetYStemDown: 7,
       offsetXStemUp: 9,
       offsetXStemDown: -0.5,
     },
     grace: {
       point: 15,
       spacing: 4,
-      offsetYStemUp: -17,
-      offsetYStemDown: -2,
+      offsetYStemUp: -7,
+      offsetYStemDown: 7,
       offsetXStemUp: 6.5,
       offsetXStemDown: -0.5,
     },
   },
 
+  staveRepetition: {
+    default: {
+      offsetY: 25,
+      offsetSymbol: 12,
+      spacing: 5,
+    },
+  },
+
   // noteHead: {
   // },
 
@@ -398,5 +417,19 @@ export const GonvilleMetrics = {
         reportedWidth: 5,
       },
     },
+    tremolo: {
+      default: {
+        shiftY: -10,
+      },
+      grace: {
+        shiftY: -5,
+      },
+    },
+    tuplet: {
+      noteHeadOffset: 20,
+      stemOffset: 10,
+      bottomLine: 4,
+      topModifierOffset: 15,
+    },
   },
 };

src/fonts/petaluma_glyphs.ts

@@ -368,6 +368,30 @@ export const PetalumaFont = {
       ha: 262.4340638216071,
       o: 'm 217 190 b 439 186 304 190 372 190 b 467 180 448 184 458 183 b 492 145 484 176 492 167 b 490 -124 490 56 490 -33 b 488 -141 490 -130 488 -135 b 456 -170 488 -163 478 -168 b 118 -183 344 -176 230 -181 b 29 -184 89 -183 60 -192 b 0 -148 4 -180 0 -168 b 1 29 1 -89 1 -30 l 1 156 b 36 190 3 187 4 190 b 217 190 102 192 168 190 z',
     },
+    noteheadParenthesis: {
+      x_min: -70.190112022022,
+      x_max: 329,
+      y_min: -196,
+      y_max: 201,
+      ha: 397,
+      o: 'm 344 -279 b 382 -262 361 -288 370 -272 b 405 -233 390 -255 399 -245 b 474 9 455 -158 468 -73 b 416 228 474 78 448 174 b 364 282 403 249 387 271 b 344 289 359 285 350 288 b 331 279 338 289 333 287 b 325 248 328 269 325 258 b 338 225 325 238 328 229 b 412 138 379 207 396 174 b 445 1 433 92 445 45 b 346 -217 445 -81 410 -154 b 336 -252 340 -223 336 -238 b 344 -279 336 -265 338 -276 z m 19 -274 b 35 -282 24 -279 30 -281 b 49 -265 42 -282 46 -275 b 52 -243 50 -256 52 -249 b 36 -210 52 -230 49 -220 b -60 -59 -16 -173 -35 -114 b -73 9 -69 -39 -73 -16 b 33 223 -73 92 -24 189 b 50 265 43 229 50 249 b 33 288 50 278 46 289 b 4 272 23 288 14 275 b -9 261 0 269 -4 265 b -101 23 -58 193 -105 124 b -37 -206 -104 -52 -75 -130 b 19 -274 -23 -232 -6 -255 z',
+    },
+    noteheadParenthesisRight: {
+      x_min: -30,
+      x_max: 82,
+      y_min: -199.08429092881173,
+      y_max: 206,
+      ha: 405.0842909288117,
+      o: 'm -17 -282 b 24 -264 -6 -297 12 -272 b 60 -219 40 -253 52 -236 b 117 1 96 -150 112 -75 b 118 16 118 6 118 12 b 109 73 118 36 112 55 b 4 279 99 154 68 226 b -23 297 -4 287 -13 297 b -37 289 -27 297 -32 294 b -43 266 -42 285 -43 276 b -32 225 -43 251 -37 229 b 84 -7 48 170 84 82 b 32 -184 84 -69 65 -132 b -10 -222 22 -200 4 -209 b -24 -258 -20 -232 -24 -245 b -17 -282 -24 -266 -22 -276 z',
+    },
+    noteheadParenthesisLeft: {
+      x_min: 0,
+      x_max: 106,
+      y_min: -197,
+      y_max: 197,
+      ha: 394,
+      o: 'm 134 -284 b 138 -281 135 -284 137 -284 b 145 -268 144 -278 145 -274 l 144 -253 b 107 -180 138 -225 121 -204 b 42 13 71 -120 42 -56 b 49 73 42 32 43 52 b 137 210 62 128 95 171 b 153 255 147 219 153 239 b 145 278 153 265 151 274 b 130 284 140 281 135 284 b 98 259 117 284 108 268 b 0 37 35 203 1 131 b 118 -268 9 -69 53 -173 b 134 -284 121 -274 127 -284 z',
+    },
     augmentationDot: {
       x_min: 0,
       x_max: 96,