Merge remote-tracking branch 'upstream/master'

.vscode/settings.json

@@ -1,6 +1,14 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "eslint.enable": true,
+  "files.exclude": {
+    "**/build": true,
+    "**/releases": true,
+    "**/reference": true,
+    "**/node_modules": true,
+    "**/.git**": true,
+    "**/.vscode": true
+  },
   "files.associations": {
     "src/*.js": "javascript"
   },

Gruntfile.js

@@ -13,7 +13,7 @@ module.exports = (grunt) => {
   const RELEASE_DIR = path.join(BASE_DIR, 'releases');
   const REFERENCE_DIR = path.join(BASE_DIR, 'reference');
   const MODULE_ENTRY_SRC = path.join(BASE_DIR, 'src/index.ts');
-  const MODULE_ENTRY_TESTS = path.join(BASE_DIR, 'tests/run.js');
+  const MODULE_ENTRY_TESTS = path.join(BASE_DIR, 'tests/run.ts');
 
   // Get current build information from git and package.json.
   const GIT_COMMIT_HASH = child_process.execSync('git rev-parse HEAD').toString().trim();
@@ -62,16 +62,9 @@ module.exports = (grunt) => {
         ],
       },
       plugins: [
-        // Add VERSION and BUILD properties to both Vex.Flow and Vex.Flow.Test.
+        // Add VERSION and BUILD properties to Vex.Flow.
         new InjectPlugin(function () {
-          const isVexSRC = moduleEntry === MODULE_ENTRY_SRC;
-          const importVex = isVexSRC
-            ? `import { Vex } from './src/vex';`
-            : `import { VexFlowTests } from './tests/vexflow_test_helpers';`;
-          const vf = isVexSRC ? 'Vex.Flow' : 'Vex.Flow.Test';
-          return `${importVex}
-            ${vf}.VERSION = "${packageJSON.version}";
-            ${vf}.BUILD = "${GIT_COMMIT_HASH}";`;
+          return `import{Flow}from'flow';Flow.VERSION="${packageJSON.version}";Flow.BUILD="${GIT_COMMIT_HASH}";`;
         }),
         // Add a banner at the top of the file.
         new webpack.BannerPlugin(BANNER),
@@ -117,7 +110,7 @@ module.exports = (grunt) => {
     'tsconfig.json',
     MODULE_ENTRY_TESTS,
     'development',
-    'VFTests'
+    'Vex' /* Previously VFTests. TODO: Remove this! */
   );
 
   grunt.initConfig({

src/accidental.ts

@@ -1,7 +1,7 @@
 // [VexFlow](http://vexflow.com) - Copyright (c) Mohit Muthanna 2010.
+// MIT License
 // @author Mohit Cheppudira
 // @author Greg Ristow (modifications)
-// MIT License
 
 import { RuntimeError, log, check } from './util';
 import { Fraction } from './fraction';

src/barnote.ts

@@ -5,9 +5,8 @@ import { log } from './util';
 import { Note } from './note';
 import { Barline, BarlineType } from './stavebarline';
 
-function L(
-  // eslint-disable-next-line
-  ...args: any[]) {
+// eslint-disable-next-line
+function L(...args: any[]) {
   if (BarNote.DEBUG) log('Vex.Flow.BarNote', args);
 }
 
@@ -22,6 +21,7 @@ export class BarNote extends Note {
   protected metrics: { widths: Record<string, number> };
   /** To enable logging for this class. Set `Vex.Flow.BarNote.DEBUG` to `true`. */
   static DEBUG: boolean;
+  // Initialized by the constructor via this.setType(type)
   protected type!: BarlineType;
 
   constructor(type = BarlineType.SINGLE) {

src/beam.ts

@@ -176,10 +176,8 @@ export class Beam extends Element {
       beam_rests?: boolean;
       groups?: Fraction[];
       stem_direction?: number;
-    }
+    } = {}
   ): Beam[] {
-    if (!config) config = {};
-
     if (!config.groups || !config.groups.length) {
       config.groups = [new Fraction(2, 8)];
     }

src/bend.ts

@@ -95,13 +95,13 @@ export class Bend extends Modifier {
    * @param release if true, render a release. (DEPRECATED)
    * @param phrase if set, ignore "text" and "release", and use the more sophisticated phrase specified
    */
-  constructor(text: string, release: boolean, phrase: BendPhrase[]) {
+  constructor(text: string, release: boolean = false, phrase?: BendPhrase[]) {
     super();
     this.setAttribute('type', 'Bend');
 
     this.text = text;
     this.x_shift = 0;
-    this.release = release || false;
+    this.release = release;
     this.font = '10pt Arial';
     this.render_options = {
       line_width: 1.5,

src/canvascontext.ts

@@ -239,18 +239,27 @@ export class CanvasContext implements RenderContext {
     return this;
   }
 
-  /** Maintain compatibility with the CanvasRenderingContext2D API. */
   set font(value: string) {
     this.vexFlowCanvasContext.font = value;
   }
 
-  /** Maintain compatibility with the CanvasRenderingContext2D API. */
-  set fillStyle(style: string) {
+  get font(): string {
+    return this.vexFlowCanvasContext.font;
+  }
+
+  set fillStyle(style: string | CanvasGradient | CanvasPattern) {
     this.vexFlowCanvasContext.fillStyle = style;
   }
 
-  /** Maintain compatibility with the CanvasRenderingContext2D API. */
-  set strokeStyle(style: string) {
+  get fillStyle(): string | CanvasGradient | CanvasPattern {
+    return this.vexFlowCanvasContext.fillStyle;
+  }
+
+  set strokeStyle(style: string | CanvasGradient | CanvasPattern) {
     this.vexFlowCanvasContext.strokeStyle = style;
   }
+
+  get strokeStyle(): string | CanvasGradient | CanvasPattern {
+    return this.vexFlowCanvasContext.strokeStyle;
+  }
 }

src/curve.ts

@@ -11,8 +11,8 @@ export interface CurveOptions {
   thickness: number;
   x_shift: number;
   y_shift: number;
-  position: number;
-  position_end: number;
+  position: string | number;
+  position_end: string | number;
   invert: boolean;
   cps: { x: number; y: number }[];
 }

src/easyscore.ts

@@ -15,6 +15,7 @@ import { RenderContext } from './types/common';
 import { Accidental } from './accidental';
 import { Modifier } from './modifier';
 import { Voice } from './voice';
+import { Note } from 'note';
 
 // To enable logging for this class. Set `Vex.Flow.EasyScore.DEBUG` to `true`.
 // eslint-disable-next-line
@@ -230,7 +231,7 @@ interface BuilderElements {
   accidentals: (Accidental | undefined)[][];
 }
 
-interface BuilderOptions {
+export interface BuilderOptions {
   stem?: string;
   clef?: string;
   // eslint-disable-next-line
@@ -433,7 +434,7 @@ export class EasyScore {
     };
   }
 
-  set(defaults: EasyScoreDefaults): this {
+  set(defaults: Partial<EasyScoreDefaults>): this {
     Object.assign(this.defaults, defaults);
     return this;
   }
@@ -492,7 +493,7 @@ export class EasyScore {
 
   // TODO: Add stricter typing after migrating Factory
   // eslint-disable-next-line
-  voice(notes: StaveNote[], options?: any): Voice {
+  voice(notes: Note[], options?: any): Voice {
     options = { time: this.defaults.time, ...options };
     return this.factory.Voice(options).addTickables(notes);
   }

src/element.ts

@@ -40,10 +40,12 @@ export abstract class Element {
   protected style?: ElementStyle;
   private attrs: ElementAttributes;
   protected boundingBox?: BoundingBox;
-  protected fontStack: Font[];
-  protected musicFont: Font;
   protected registry?: Registry;
 
+  // fontStack and musicFont are both initialized by the constructor via this.setFontStack(...).
+  protected fontStack!: Font[];
+  protected musicFont!: Font;
+
   protected static newID(): string {
     return `auto${Element.ID++}`;
   }
@@ -58,9 +60,7 @@ export abstract class Element {
     };
 
     this.rendered = false;
-
-    this.fontStack = Flow.DEFAULT_FONT_STACK;
-    this.musicFont = Flow.DEFAULT_FONT_STACK[0];
+    this.setFontStack(Flow.DEFAULT_FONT_STACK);
 
     // If a default registry exist, then register with it right away.
     Registry.getDefaultRegistry()?.register(this);

src/factory.ts

@@ -543,8 +543,8 @@ export class Factory {
   StaveTie(params: {
     from: Note;
     to: Note;
-    first_indices: [0];
-    last_indices: [0];
+    first_indices?: number[];
+    last_indices?: number[];
     text?: string;
     options?: { direction?: number };
   }): StaveTie {

src/flow.ts

@@ -157,4 +157,8 @@ export const Flow = {
   VibratoBracket,
   Voice,
   Volta,
+
+  // BUILD and VERSION are set by webpack. See: Gruntfile.js.
+  BUILD: '',
+  VERSION: '',
 };

src/formatter.ts

@@ -105,24 +105,36 @@ function L(...args: any[]) {
   if (Formatter.DEBUG) log('Vex.Flow.Formatter', args);
 }
 
-/** Helper function to locate the next non-rest note(s). */
-function lookAhead(notes: Note[], restLine: number, i: number, compare: boolean) {
+/**
+ * Get the rest line number of the next non-rest note(s).
+ * @param notes array of Notes
+ * @param currRestLine
+ * @param currNoteIndex current note index
+ * @param compare if true, return the midpoint between the current rest line and the next rest line
+ * @returns a line number, which determines the vertical position of a rest.
+ */
+function getRestLineForNextNoteGroup(
+  notes: Note[],
+  currRestLine: number,
+  currNoteIndex: number,
+  compare: boolean
+): number {
   // If no valid next note group, nextRestLine is same as current.
-  let nextRestLine = restLine;
+  let nextRestLine = currRestLine;
 
-  // Get the rest line for next valid non-rest note group.
-  for (i += 1; i < notes.length; i += 1) {
-    const note = notes[i];
+  // Start with the next note and keep going until we find a valid non-rest note group.
+  for (let noteIndex = currNoteIndex + 1; noteIndex < notes.length; noteIndex++) {
+    const note = notes[noteIndex];
     if (!note.isRest() && !note.shouldIgnoreTicks()) {
       nextRestLine = note.getLineForRest();
       break;
     }
   }
 
   // Locate the mid point between two lines.
-  if (compare && restLine !== nextRestLine) {
-    const top = Math.max(restLine, nextRestLine);
-    const bot = Math.min(restLine, nextRestLine);
+  if (compare && currRestLine !== nextRestLine) {
+    const top = Math.max(currRestLine, nextRestLine);
+    const bot = Math.min(currRestLine, nextRestLine);
     nextRestLine = midLine(top, bot);
   }
   return nextRestLine;
@@ -332,10 +344,10 @@ export class Formatter {
   }
 
   /**
-   * Auto position rests based on previous/next note positions.
-   * @param notes an array of notes.
-   * @param alignAllNotes if set to false, only aligns non-beamed notes.
-   * @param alignTuplets if set to false, ignores tuplets.
+   * Automatically set the vertical position of rests based on previous/next note positions.
+   * @param notes an array of Notes.
+   * @param alignAllNotes If `false`, only align rests that are within a group of beamed notes.
+   * @param alignTuplets If `false`, ignores tuplets.
    */
   static AlignRestsToNotes(notes: Note[], alignAllNotes: boolean, alignTuplets?: boolean): void {
     notes.forEach((note, index) => {
@@ -350,22 +362,19 @@ export class Formatter {
           // Align rests with previous/next notes.
           const props = note.getKeyProps()[0];
           if (index === 0) {
-            props.line = lookAhead(notes, props.line, index, false);
-            note.setKeyLine(0, props.line);
+            props.line = getRestLineForNextNoteGroup(notes, props.line, index, false);
           } else if (index > 0 && index < notes.length) {
             // If previous note is a rest, use its line number.
-            let restLine;
             const prevNote = notes[index - 1];
             if (prevNote && prevNote.isRest()) {
-              restLine = prevNote.keyProps[0].line;
-              props.line = restLine;
+              props.line = prevNote.keyProps[0].line;
             } else {
-              restLine = prevNote.getLineForRest();
+              const restLine = prevNote.getLineForRest();
               // Get the rest line for next valid non-rest note group.
-              props.line = lookAhead(notes, restLine, index, true);
+              props.line = getRestLineForNextNoteGroup(notes, restLine, index, true);
             }
-            note.setKeyLine(0, props.line);
           }
+          note.setKeyLine(0, props.line);
         }
       }
     });
@@ -404,9 +413,10 @@ export class Formatter {
   }
 
   /**
-   * Find all the rests in each of the `voices` and align them
-   * to neighboring notes. If `alignAllNotes` is `false`, then only
-   * align non-beamed notes.
+   * Find all the rests in each of the `voices` and align them to neighboring notes.
+   *
+   * @param voices
+   * @param alignAllNotes If `false`, only align rests within beamed groups of notes. If `true`, align all rests.
    */
   alignRests(voices: Voice[], alignAllNotes: boolean): void {
     if (!voices || !voices.length) {

src/keysignature.ts

@@ -90,7 +90,7 @@ export class KeySignature extends StaveModifier {
   };
 
   // Create a new Key Signature based on a `key_spec`
-  constructor(keySpec: string, cancelKeySpec: string, alterKeySpec?: string) {
+  constructor(keySpec: string, cancelKeySpec?: string, alterKeySpec?: string) {
     super();
     this.setAttribute('type', 'KeySignature');
 
@@ -248,7 +248,7 @@ export class KeySignature extends StaveModifier {
     return this.width;
   }
 
-  setKeySig(keySpec: string, cancelKeySpec: string, alterKeySpec?: string): this {
+  setKeySig(keySpec: string, cancelKeySpec?: string, alterKeySpec?: string): this {
     this.formatted = false;
     this.keySpec = keySpec;
     this.cancelKeySpec = cancelKeySpec;

src/keysignote.ts

@@ -6,6 +6,7 @@ import { KeySignature } from './keysignature';
 
 export class KeySigNote extends Note {
   protected keySignature: KeySignature;
+
   constructor(keySpec: string, cancelKeySpec: string, alterKeySpec: string) {
     super({ duration: 'b' });
     this.setAttribute('type', 'KeySigNote');