Merge pull request #1261 from rvilarl/fix/1258

OSMD VexflowPatch: support for big tremolo
0xfe · Jan 10, 2022 · 7374ff8 · 7374ff8
2 parents 2d0f77f + c59b1c1
commit 7374ff8
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 9 deletions.
diff --git a/src/fonts/gonville_metrics.ts b/src/fonts/gonville_metrics.ts
@@ -117,16 +117,16 @@ 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,
     },
@@ -409,6 +409,14 @@ export const GonvilleMetrics = {
         reportedWidth: 5,
       },
     },
+    tremolo: {
+      default: {
+        shiftY: -10,
+      },
+      grace: {
+        shiftY: -5,
+      },
+    },
     tuplet: {
       noteHeadOffset: 20,
       stemOffset: 10,

diff --git a/src/glyph.ts b/src/glyph.ts
@@ -255,17 +255,24 @@ export class Glyph extends Element {
     y_pos: number,
     point: number,
     code: string,
-    options?: { category: string }
+    options?: { category?: string; scale?: number }
   ): GlyphMetrics {
     const data = Glyph.cache.lookup(code, options?.category);
     const metrics = data.metrics;
     if (data.point != -1) {
       point = data.point;
     }
 
-    const scale = (point * 72.0) / (metrics.font.getResolution() * 100.0);
+    const customScale = options?.scale ?? 1;
+    const scale = ((point * 72.0) / (metrics.font.getResolution() * 100.0)) * metrics.scale * customScale;
 
-    Glyph.renderOutline(ctx, metrics.outline, scale * metrics.scale, x_pos + metrics.x_shift, y_pos + metrics.y_shift);
+    Glyph.renderOutline(
+      ctx,
+      metrics.outline,
+      scale,
+      x_pos + metrics.x_shift * customScale,
+      y_pos + metrics.y_shift * customScale
+    );
     return metrics;
   }
 

diff --git a/src/tremolo.ts b/src/tremolo.ts
@@ -16,6 +16,10 @@ export class Tremolo extends Modifier {
 
   protected readonly code: string;
   protected readonly num: number;
+  /** Extra spacing required for big strokes. */
+  public y_spacing_scale: number;
+  /** Font scaling for big strokes. */
+  public extra_stroke_scale: number;
 
   /**
    * @param num number of bars
@@ -26,6 +30,9 @@ export class Tremolo extends Modifier {
     this.num = num;
     this.position = Modifier.Position.CENTER;
     this.code = 'tremolo1';
+    // big strokes scales initialised to 1 (no scale)
+    this.y_spacing_scale = 1;
+    this.extra_stroke_scale = 1;
   }
 
   /** Draw the tremolo on the rendering context. */
@@ -44,7 +51,9 @@ export class Tremolo extends Modifier {
     const category = `tremolo.${gn ? 'grace' : 'default'}`;
 
     const musicFont = Tables.currentMusicFont();
-    const y_spacing = musicFont.lookupMetric(`${category}.spacing`) * stemDirection;
+    let y_spacing = musicFont.lookupMetric(`${category}.spacing`) * stemDirection;
+    // add y_spacing_scale for big strokes (#1258)
+    y_spacing *= this.y_spacing_scale;
     const height = this.num * y_spacing;
     let y = note.getStemExtents().baseY - height;
 
@@ -58,7 +67,7 @@ export class Tremolo extends Modifier {
 
     x += musicFont.lookupMetric(`${category}.offsetXStem${stemDirection === Stem.UP ? 'Up' : 'Down'}`);
     for (let i = 0; i < this.num; ++i) {
-      Glyph.renderGlyph(ctx, x, y, fontScale, this.code, { category });
+      Glyph.renderGlyph(ctx, x, y, fontScale, this.code, { category, scale: this.extra_stroke_scale });
       y += y_spacing;
     }
   }

diff --git a/tests/tremolo_tests.ts b/tests/tremolo_tests.ts
@@ -13,6 +13,7 @@ const TremoloTests = {
     QUnit.module('Tremolo');
     const run = VexFlowTests.runTests;
     run('Tremolo - Basic', tremoloBasic);
+    run('Tremolo - Big', tremoloBig);
   },
 };
 
@@ -53,5 +54,60 @@ function tremoloBasic(options: TestOptions): void {
   ok(true, 'Tremolo - Basic');
 }
 
+function tremoloBig(options: TestOptions): void {
+  const f = VexFlowTests.makeFactory(options, 600, 200);
+  const score = f.EasyScore();
+
+  // bar 1
+  const stave1 = f.Stave({ width: 250 }).setEndBarType(Barline.type.DOUBLE);
+
+  const notes1 = score.notes('e4/4, e4, e4, e4', { stem: 'up' });
+
+  const tremolo1 = new Tremolo(3);
+  tremolo1.extra_stroke_scale = 1.7;
+  tremolo1.y_spacing_scale = 1.5;
+  const tremolo2 = new Tremolo(2);
+  tremolo2.extra_stroke_scale = 1.7;
+  tremolo2.y_spacing_scale = 1.5;
+  const tremolo3 = new Tremolo(1);
+  tremolo3.extra_stroke_scale = 1.7;
+  tremolo3.y_spacing_scale = 1.5;
+  notes1[0].addModifier(0, tremolo1);
+  notes1[1].addModifier(0, tremolo2);
+  notes1[2].addModifier(0, tremolo3);
+
+  const voice1 = score.voice(notes1);
+
+  f.Formatter().joinVoices([voice1]).formatToStave([voice1], stave1);
+
+  // bar 2
+  const stave2 = f
+    .Stave({ x: stave1.getWidth() + stave1.getX(), y: stave1.getY(), width: 300 })
+    .setEndBarType(Barline.type.DOUBLE);
+
+  const notes2 = score.notes('e5/4, e5, e5, e5', { stem: 'down' });
+
+  const tremolo4 = new Tremolo(1);
+  tremolo4.extra_stroke_scale = 1.7;
+  tremolo4.y_spacing_scale = 1.5;
+  const tremolo5 = new Tremolo(2);
+  tremolo5.extra_stroke_scale = 1.7;
+  tremolo5.y_spacing_scale = 1.5;
+  const tremolo6 = new Tremolo(3);
+  tremolo6.extra_stroke_scale = 1.7;
+  tremolo6.y_spacing_scale = 1.5;
+  notes2[1].addModifier(0, tremolo4);
+  notes2[2].addModifier(0, tremolo5);
+  notes2[3].addModifier(0, tremolo6);
+
+  const voice2 = score.voice(notes2);
+
+  f.Formatter().joinVoices([voice2]).formatToStave([voice2], stave2);
+
+  f.draw();
+
+  ok(true, 'Tremolo - Big');
+}
+
 VexFlowTests.register(TremoloTests);
 export { TremoloTests };