Use StaveModifierPosition directly.

Use computed property names in the Stave's sort order options.
Make 2nd param of setEndTimeSignature() optional to conform to tests.
Small fixes to xxx_tests.ts.

src/clef.ts

@@ -3,7 +3,7 @@
 // MIT License
 
 import { RuntimeError, log, defined } from './util';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { Glyph } from './glyph';
 import { Stave } from './stave';
 
@@ -121,7 +121,7 @@ export class Clef extends StaveModifier {
   constructor(type: string, size?: string, annotation?: string) {
     super();
 
-    this.setPosition(StaveModifier.Position.BEGIN);
+    this.setPosition(StaveModifierPosition.BEGIN);
     this.setType(type, size, annotation);
     this.setWidth(this.musicFont.lookupMetric(`clef.${this.size}.width`));
     L('Creating clef:', type);

src/keysignature.ts

@@ -8,7 +8,7 @@
 
 import { defined, RuntimeError } from './util';
 import { Flow } from './flow';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { Glyph } from './glyph';
 import { Stave } from './stave';
 
@@ -93,7 +93,7 @@ export class KeySignature extends StaveModifier {
     super();
 
     this.setKeySig(keySpec, cancelKeySpec, alterKeySpec);
-    this.setPosition(StaveModifier.Position.BEGIN);
+    this.setPosition(StaveModifierPosition.BEGIN);
     this.glyphFontScale = 38; // TODO(0xFE): Should this match StaveNote?
     this.glyphs = [];
     this.xPositions = []; // relative to this.x
@@ -289,7 +289,7 @@ export class KeySignature extends StaveModifier {
 
     if (this.accList.length > 0) {
       const clef =
-        (this.position === StaveModifier.Position.END ? stave.getEndClef() : stave.getClef()) || stave.getClef();
+        (this.position === StaveModifierPosition.END ? stave.getEndClef() : stave.getClef()) || stave.getClef();
       if (cancelAccList) {
         this.convertAccLines(clef, cancelAccList.type, cancelAccList.accList);
       }

src/multimeasurerest.ts

@@ -8,7 +8,7 @@ import { Flow } from './flow';
 import { Element } from './element';
 import { Glyph } from './glyph';
 import { NoteHead } from './notehead';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifierPosition } from './stavemodifier';
 import { TimeSignature } from './timesignature';
 import { Stave } from './stave';
 import { RenderContext } from './types/common';
@@ -222,7 +222,7 @@ export class MultiMeasureRest extends Element {
 
     // FIXME: getNoteStartX() returns x+5(barline width) and
     // getNoteEndX() returns x + width(no barline width) by default. how to fix?
-    const begModifiers = stave.getModifiers(StaveModifier.Position.BEGIN);
+    const begModifiers = stave.getModifiers(StaveModifierPosition.BEGIN);
 
     if (begModifiers.length === 1 && isBarline(begModifiers[0])) {
       left -= begModifiers[0].getWidth();

src/renderer.ts

@@ -127,8 +127,14 @@ export class Renderer {
       const canvasElement = this.element as HTMLCanvasElement;
       if (!canvasElement.getContext) {
         throw new RuntimeError('BadElement', `Can't get canvas context from element: ${canvasId}`);
+      } else {
+        const context = canvasElement.getContext('2d');
+        if (context) {
+          this.ctx = new CanvasContext(context);
+        } else {
+          throw new RuntimeError('BadElement', `Can't get canvas context from element: ${canvasId}`);
+        }
       }
-      this.ctx = new CanvasContext(canvasElement.getContext('2d')!);
     } else if (this.backend === Renderer.Backends.SVG) {
       this.ctx = new SVGContext(this.element);
     } else {
@@ -143,8 +149,7 @@ export class Renderer {
 
       // Scale the canvas size by the device pixel ratio clamping to the maximum
       // supported size.
-      [width, height] = CanvasContext.SanitizeCanvasDims(width * devicePixelRatio,
-                                                         height * devicePixelRatio);
+      [width, height] = CanvasContext.SanitizeCanvasDims(width * devicePixelRatio, height * devicePixelRatio);
 
       // Divide back down by the pixel ratio and convert to integers.
       width = (width / devicePixelRatio) | 0;

src/stave.ts

@@ -8,7 +8,7 @@ import { Element, ElementStyle } from './element';
 import { Flow } from './flow';
 import { KeySignature } from './keysignature';
 import { Barline, BarlineType } from './stavebarline';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { Repetition } from './staverepetition';
 import { StaveSection } from './stavesection';
 import { StaveTempo, StaveTempoOptions } from './stavetempo';
@@ -45,6 +45,23 @@ export interface StaveOptions {
   num_lines: number;
 }
 
+// Used by Stave.format() to sort the modifiers at the beginning and end of a stave.
+// The keys (computed property names) match the CATEGORY property in the
+// Barline, Clef, KeySignature, TimeSignature classes.
+const SORT_ORDER_BEG_MODIFIERS = {
+  [Barline.CATEGORY]: 0,
+  [Clef.CATEGORY]: 1,
+  [KeySignature.CATEGORY]: 2,
+  [TimeSignature.CATEGORY]: 3,
+};
+
+const SORT_ORDER_END_MODIFIERS = {
+  [TimeSignature.CATEGORY]: 0,
+  [KeySignature.CATEGORY]: 1,
+  [Barline.CATEGORY]: 2,
+  [Clef.CATEGORY]: 3,
+};
+
 export class Stave extends Element {
   static get CATEGORY(): string {
     return 'Stave';
@@ -270,12 +287,12 @@ export class Stave extends Element {
 
     if (!this.formatted) this.format();
 
-    if (this.getModifiers(StaveModifier.Position.BEGIN).length === 1) {
+    if (this.getModifiers(StaveModifierPosition.BEGIN).length === 1) {
       return 0;
     }
 
     // for right position modifiers zero shift seems correct, see 'Volta + Modifier Measure Test'
-    if (this.modifiers[index].getPosition() === StaveModifier.Position.RIGHT) {
+    if (this.modifiers[index].getPosition() === StaveModifierPosition.RIGHT) {
       return 0;
     }
 
@@ -411,7 +428,7 @@ export class Stave extends Element {
   }
 
   addEndModifier(modifier: StaveModifier): this {
-    this.addModifier(modifier, StaveModifier.Position.END);
+    this.addModifier(modifier, StaveModifierPosition.END);
     return this;
   }
 
@@ -437,10 +454,10 @@ export class Stave extends Element {
 
   setClef(clefSpec: string, size?: string, annotation?: string, position?: number): this {
     if (position === undefined) {
-      position = StaveModifier.Position.BEGIN;
+      position = StaveModifierPosition.BEGIN;
     }
 
-    if (position === StaveModifier.Position.END) {
+    if (position === StaveModifierPosition.END) {
       this.endClef = clefSpec;
     } else {
       this.clef = clefSpec;
@@ -461,7 +478,7 @@ export class Stave extends Element {
   }
 
   setEndClef(clefSpec: string, size?: string, annotation?: string): this {
-    this.setClef(clefSpec, size, annotation, StaveModifier.Position.END);
+    this.setClef(clefSpec, size, annotation, StaveModifierPosition.END);
     return this;
   }
 
@@ -471,7 +488,7 @@ export class Stave extends Element {
 
   setKeySignature(keySpec: string, cancelKeySpec?: string, position?: number): this {
     if (position === undefined) {
-      position = StaveModifier.Position.BEGIN;
+      position = StaveModifierPosition.BEGIN;
     }
 
     const keySignatures = this.getModifiers(position, KeySignature.CATEGORY) as KeySignature[];
@@ -485,13 +502,13 @@ export class Stave extends Element {
   }
 
   setEndKeySignature(keySpec: string, cancelKeySpec?: string): this {
-    this.setKeySignature(keySpec, cancelKeySpec, StaveModifier.Position.END);
+    this.setKeySignature(keySpec, cancelKeySpec, StaveModifierPosition.END);
     return this;
   }
 
   setTimeSignature(timeSpec: string, customPadding?: number, position?: number): this {
     if (position === undefined) {
-      position = StaveModifier.Position.BEGIN;
+      position = StaveModifierPosition.BEGIN;
     }
 
     const timeSignatures = this.getModifiers(position, TimeSignature.CATEGORY) as TimeSignature[];
@@ -504,8 +521,8 @@ export class Stave extends Element {
     return this;
   }
 
-  setEndTimeSignature(timeSpec: string, customPadding: number): this {
-    this.setTimeSignature(timeSpec, customPadding, StaveModifier.Position.END);
+  setEndTimeSignature(timeSpec: string, customPadding?: number): this {
+    this.setTimeSignature(timeSpec, customPadding, StaveModifierPosition.END);
     return this;
   }
 
@@ -521,7 +538,7 @@ export class Stave extends Element {
    */
   addKeySignature(keySpec: string, cancelKeySpec?: string, position?: number): this {
     if (position === undefined) {
-      position = StaveModifier.Position.BEGIN;
+      position = StaveModifierPosition.BEGIN;
     }
     this.addModifier(new KeySignature(keySpec, cancelKeySpec).setPosition(position), position);
     return this;
@@ -540,9 +557,9 @@ export class Stave extends Element {
    * @returns
    */
   addClef(clef: string, size?: string, annotation?: string, position?: number): this {
-    if (position === undefined || position === StaveModifier.Position.BEGIN) {
+    if (position === undefined || position === StaveModifierPosition.BEGIN) {
       this.clef = clef;
-    } else if (position === StaveModifier.Position.END) {
+    } else if (position === StaveModifierPosition.END) {
       this.endClef = clef;
     }
 
@@ -551,7 +568,7 @@ export class Stave extends Element {
   }
 
   addEndClef(clef: string, size?: string, annotation?: string): this {
-    this.addClef(clef, size, annotation, StaveModifier.Position.END);
+    this.addClef(clef, size, annotation, StaveModifierPosition.END);
     return this;
   }
 
@@ -572,7 +589,7 @@ export class Stave extends Element {
   }
 
   addEndTimeSignature(timeSpec: string, customPadding?: number): this {
-    this.addTimeSignature(timeSpec, customPadding, StaveModifier.Position.END);
+    this.addTimeSignature(timeSpec, customPadding, StaveModifierPosition.END);
     return this;
   }
 
@@ -585,7 +602,7 @@ export class Stave extends Element {
   /**
    * @param position
    * @param category
-   * @returns array of StaveModifiers that match by the provided position and category.
+   * @returns array of StaveModifiers that match the provided position and category.
    */
   getModifiers(position?: number, category?: string): StaveModifier[] {
     const noPosition = position === undefined;
@@ -604,6 +621,10 @@ export class Stave extends Element {
     }
   }
 
+  /**
+   * Use the modifier's `getCategory()` as a key for the `order` array.
+   * The retrieved value is used to sort modifiers from left to right (0 to to 3).
+   */
   sortByCategory(items: StaveModifier[], order: Record<string, number>): void {
     for (let i = items.length - 1; i >= 0; i--) {
       for (let j = 0; j < i; j++) {
@@ -620,22 +641,11 @@ export class Stave extends Element {
     const begBarline = this.modifiers[0] as Barline;
     const endBarline = this.modifiers[1];
 
-    const begModifiers = this.getModifiers(StaveModifier.Position.BEGIN);
-    const endModifiers = this.getModifiers(StaveModifier.Position.END);
-
-    this.sortByCategory(begModifiers, {
-      barlines: 0,
-      clefs: 1,
-      keysignatures: 2,
-      timesignatures: 3,
-    });
-
-    this.sortByCategory(endModifiers, {
-      timesignatures: 0,
-      keysignatures: 1,
-      barlines: 2,
-      clefs: 3,
-    });
+    const begModifiers = this.getModifiers(StaveModifierPosition.BEGIN);
+    const endModifiers = this.getModifiers(StaveModifierPosition.END);
+
+    this.sortByCategory(begModifiers, SORT_ORDER_BEG_MODIFIERS);
+    this.sortByCategory(endModifiers, SORT_ORDER_END_MODIFIERS);
 
     if (begModifiers.length > 1 && begBarline.getType() === BarlineType.REPEAT_BEGIN) {
       begModifiers.push(begModifiers.splice(0, 1)[0]);

src/stavebarline.ts

@@ -3,7 +3,7 @@
 // Author Larry Kuhns 2011
 
 import { Flow } from './flow';
-import { LayoutMetrics, StaveModifier } from './stavemodifier';
+import { LayoutMetrics, StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { Stave } from './stave';
 
 export enum BarlineType {
@@ -110,7 +110,7 @@ export class Barline extends StaveModifier {
       paddingLeft: 5,
       paddingRight: 5,
     };
-    this.setPosition(StaveModifier.Position.BEGIN);
+    this.setPosition(StaveModifierPosition.BEGIN);
     this.setType(type);
   }
 

src/stavemodifier.ts

@@ -46,7 +46,7 @@ export class StaveModifier extends Element {
     super();
 
     this.padding = 10;
-    this.position = StaveModifier.Position.ABOVE;
+    this.position = StaveModifierPosition.ABOVE;
   }
 
   getPosition(): number {

src/stavetempo.ts

@@ -2,7 +2,7 @@
 // Author Radosaw Eichler 2012
 
 import { Flow } from './flow';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { Glyph } from './glyph';
 import { FontInfo } from './types/common';
 import { Stave } from './stave';
@@ -32,7 +32,7 @@ export class StaveTempo extends StaveModifier {
     super();
 
     this.tempo = tempo;
-    this.position = StaveModifier.Position.ABOVE;
+    this.position = StaveModifierPosition.ABOVE;
     this.x = x;
     this.shift_x = 10;
     this.shift_y = shift_y;

src/stavetext.ts

@@ -2,8 +2,8 @@
 // Author Taehoon Moon 2014
 
 import { RuntimeError } from './util';
-import { StaveModifier } from './stavemodifier';
-import { TextNote } from './textnote';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
+import { Justification, TextNote } from './textnote';
 import { FontInfo } from './types/common';
 import { Stave } from './stave';
 
@@ -87,28 +87,26 @@ export class StaveText extends StaveModifier {
 
     let x;
     let y;
-    const Position = StaveModifier.Position;
-    const Justification = TextNote.Justification;
     switch (this.position) {
-      case Position.LEFT:
-      case Position.RIGHT:
+      case StaveModifierPosition.LEFT:
+      case StaveModifierPosition.RIGHT:
         y = (stave.getYForLine(0) + stave.getBottomLineY()) / 2 + this.options.shift_y;
-        if (this.position === Position.LEFT) {
+        if (this.position === StaveModifierPosition.LEFT) {
           x = stave.getX() - text_width - 24 + this.options.shift_x;
         } else {
           x = stave.getX() + stave.getWidth() + 24 + this.options.shift_x;
         }
         break;
-      case Position.ABOVE:
-      case Position.BELOW:
+      case StaveModifierPosition.ABOVE:
+      case StaveModifierPosition.BELOW:
         x = stave.getX() + this.options.shift_x;
         if (this.options.justification === Justification.CENTER) {
           x += stave.getWidth() / 2 - text_width / 2;
         } else if (this.options.justification === Justification.RIGHT) {
           x += stave.getWidth() - text_width;
         }
 
-        if (this.position === Position.ABOVE) {
+        if (this.position === StaveModifierPosition.ABOVE) {
           y = stave.getYForTopText(2) + this.options.shift_y;
         } else {
           y = stave.getYForBottomText(2) + this.options.shift_y;

src/timesignature.ts

@@ -7,7 +7,7 @@
 
 import { RuntimeError, defined } from './util';
 import { Glyph } from './glyph';
-import { StaveModifier } from './stavemodifier';
+import { StaveModifier, StaveModifierPosition } from './stavemodifier';
 import { TimeSignatureGlyph } from './timesigglyph';
 
 export interface TimeSignatureInfo {
@@ -70,7 +70,7 @@ export class TimeSignature extends StaveModifier {
     const fontLineShift = this.musicFont.lookupMetric('digits.shiftLine', 0);
     this.topLine = 2 + fontLineShift;
     this.bottomLine = 4 + fontLineShift;
-    this.setPosition(StaveModifier.Position.BEGIN);
+    this.setPosition(StaveModifierPosition.BEGIN);
     this.info = this.parseTimeSpec(timeSpec);
     this.setWidth(defined(this.info.glyph.getMetrics().width));
     this.setPadding(padding);