Merge pull request #1323 from rvilarl/fix/1312

fix #1312: stem extension calculation fixed

src/fonts/bravura_metrics.ts

@@ -223,9 +223,6 @@ export const BravuraMetrics = {
     },
     flag: {
       shiftX: -0.75,
-      tabStem: {
-        shiftX: -1.75,
-      },
       staveTempo: {
         shiftX: -1,
       },

src/fonts/petaluma_metrics.ts

@@ -251,9 +251,6 @@ export const PetalumaMetrics = {
       flag128thDown: {
         shiftX: -1.2,
       },
-      tabStem: {
-        shiftX: -1.75,
-      },
       staveTempo: {
         shiftX: -1,
       },

src/glyph.ts

@@ -19,13 +19,17 @@ export interface GlyphProps {
   line_below: number;
   line_above: number;
   stem_beam_extension: number;
+  stem_up_extension: number;
+  stem_down_extension: number;
   stem: Stem;
   code: string;
   code_flag_upstem: string;
   code_flag_downstem: string;
   flag: boolean;
   width: number;
   text: string;
+  tabnote_stem_down_extension: number;
+  tabnote_stem_up_extension: number;
   beam_count: number;
   shift_y: number;
   getWidth(a?: number): number;

src/gracenote.ts

@@ -59,7 +59,6 @@ export class GraceNote extends StaveNote {
     return 0;
   }
 
-  // FIXME: move this to more basic class.
   getStaveNoteScale(): number {
     return this.render_options.glyph_font_scale / Tables.NOTATION_FONT_SCALE;
   }
@@ -95,8 +94,12 @@ export class GraceNote extends StaveNote {
             ? noteHeadBounds.y_top - noteStemHeight
             : noteHeadBounds.y_bottom - noteStemHeight;
 
+        const defaultStemExtention =
+          stem_direction === Stem.DOWN ? this.glyph.stem_down_extension : this.glyph.stem_up_extension;
+
         let defaultOffsetY = Tables.STEM_HEIGHT;
         defaultOffsetY -= defaultOffsetY / 2.8;
+        defaultOffsetY += defaultStemExtention;
         y += defaultOffsetY * staveNoteScale * stem_direction;
 
         const offsets =

src/stavenote.ts

@@ -373,7 +373,7 @@ export class StaveNote extends StemmableNote {
   setBeam(beam: Beam): this {
     this.beam = beam;
     this.calcNoteDisplacements();
-    // Update stem extension is a beam is assigned.
+    // Update stem extension if a beam is assigned.
     if (this.stem) {
       this.stem.setExtension(this.getStemExtension());
     }
@@ -1037,17 +1037,24 @@ export class StaveNote extends StemmableNote {
       // eslint-disable-next-line
       const noteStemHeight = this.stem!.getHeight();
       const flagX = this.getStemX();
-      // FIXME: What's with the magic +/- 2
+      // What's with the magic +/- 2
       // ANSWER: a corner of the note stem pokes out beyond the tip of the flag.
       // The extra +/- 2 pushes the flag glyph outward so it covers the stem entirely.
       // Alternatively, we could shorten the stem.
-      const extension = this.flag !== undefined ? this.flag.checkMetrics().y_shift : 0;
       const flagY =
         this.getStemDirection() === Stem.DOWN
           ? // Down stems are below the note head and have flags on the right.
-            y_top - noteStemHeight + 2 - extension
+            y_top -
+            noteStemHeight +
+            2 -
+            (this.glyph ? this.glyph.stem_down_extension : 0) * this.getStaveNoteScale() -
+            (this.flag?.getMetrics().y_shift ?? 0) * (1 - this.getStaveNoteScale())
           : // Up stems are above the note head and have flags on the right.
-            y_bottom - noteStemHeight - 2 - extension;
+            y_bottom -
+            noteStemHeight -
+            2 +
+            (this.glyph ? this.glyph.stem_up_extension : 0) * this.getStaveNoteScale() -
+            (this.flag?.getMetrics().y_shift ?? 0) * (1 - this.getStaveNoteScale());
 
       // Draw the Flag
       ctx.openGroup('flag', undefined, { pointerBBox: true });
@@ -1089,6 +1096,11 @@ export class StaveNote extends StemmableNote {
     ctx.closeGroup();
   }
 
+  /** Primarily used as the scaling factor for grace notes, GraceNote will return the required scale. */
+  getStaveNoteScale(): number {
+    return 1.0;
+  }
+
   /**
    * Override stemmablenote stem extension to adjust for distance from middle line.
    */

src/stem.ts

@@ -147,7 +147,7 @@ export class Stem extends Element {
 
   // Get the y coordinates for the very base of the stem to the top of
   // the extension
-  getExtents(): Record<string, number> {
+  getExtents(): { topY: number; baseY: number } {
     const isStemUp = this.stem_direction === Stem.UP;
     const ys = [this.y_top, this.y_bottom];
     const stemHeight = Stem.HEIGHT + this.stem_extension;

src/stemmablenote.ts

@@ -191,9 +191,11 @@ export abstract class StemmableNote extends Note {
       return glyph.stem_beam_extension;
     }
 
-    const flagCode =
-      this.getStemDirection() === Stem.DOWN ? this.glyph.code_flag_downstem : this.glyph.code_flag_upstem;
-    return Math.abs(Tables.currentMusicFont().lookupMetric(`glyphs.flag.${flagCode}.shiftY`, 0));
+    if (glyph) {
+      return this.getStemDirection() === Stem.UP ? glyph.stem_up_extension : glyph.stem_down_extension;
+    }
+
+    return 0;
   }
 
   // Set the stem length to a specific. Will override the default length.
@@ -203,7 +205,7 @@ export abstract class StemmableNote extends Note {
   }
 
   // Get the top and bottom `y` values of the stem.
-  getStemExtents(): Record<string, number> {
+  getStemExtents(): { topY: number; baseY: number } {
     if (!this.stem) throw new RuntimeError('NoStem', 'No stem attached to this note.');
     return this.stem.getExtents();
   }

src/tables.ts

@@ -890,6 +890,10 @@ const durationCodes: Record<string, any> = {
       stem: false,
       stem_offset: 0,
       flag: false,
+      stem_up_extension: -Tables.STEM_HEIGHT,
+      stem_down_extension: -Tables.STEM_HEIGHT,
+      tabnote_stem_up_extension: -Tables.STEM_HEIGHT,
+      tabnote_stem_down_extension: -Tables.STEM_HEIGHT,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -945,6 +949,10 @@ const durationCodes: Record<string, any> = {
       stem: false,
       stem_offset: 0,
       flag: false,
+      stem_up_extension: -Tables.STEM_HEIGHT,
+      stem_down_extension: -Tables.STEM_HEIGHT,
+      tabnote_stem_up_extension: -Tables.STEM_HEIGHT,
+      tabnote_stem_down_extension: -Tables.STEM_HEIGHT,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1000,6 +1008,10 @@ const durationCodes: Record<string, any> = {
       stem: true,
       stem_offset: 0,
       flag: false,
+      stem_up_extension: 0,
+      stem_down_extension: 0,
+      tabnote_stem_up_extension: 0,
+      tabnote_stem_down_extension: 0,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1056,6 +1068,10 @@ const durationCodes: Record<string, any> = {
       stem: true,
       stem_offset: 0,
       flag: false,
+      stem_up_extension: 0,
+      stem_down_extension: 0,
+      tabnote_stem_up_extension: 0,
+      tabnote_stem_down_extension: 0,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1117,6 +1133,10 @@ const durationCodes: Record<string, any> = {
       stem_beam_extension: 0,
       code_flag_upstem: 'flag8thUp',
       code_flag_downstem: 'flag8thDown',
+      stem_up_extension: 0,
+      stem_down_extension: 0,
+      tabnote_stem_up_extension: 0,
+      tabnote_stem_down_extension: 0,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1179,6 +1199,10 @@ const durationCodes: Record<string, any> = {
       flag: true,
       code_flag_upstem: 'flag16thUp',
       code_flag_downstem: 'flag16thDown',
+      stem_up_extension: 0,
+      stem_down_extension: 0,
+      tabnote_stem_up_extension: 0,
+      tabnote_stem_down_extension: 0,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1241,6 +1265,10 @@ const durationCodes: Record<string, any> = {
       flag: true,
       code_flag_upstem: 'flag32ndUp',
       code_flag_downstem: 'flag32ndDown',
+      stem_up_extension: 9,
+      stem_down_extension: 9,
+      tabnote_stem_up_extension: 9,
+      tabnote_stem_down_extension: 9,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1303,6 +1331,10 @@ const durationCodes: Record<string, any> = {
       flag: true,
       code_flag_upstem: 'flag64thUp',
       code_flag_downstem: 'flag64thDown',
+      stem_up_extension: 13,
+      stem_down_extension: 13,
+      tabnote_stem_up_extension: 13,
+      tabnote_stem_down_extension: 13,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,
@@ -1365,6 +1397,10 @@ const durationCodes: Record<string, any> = {
       flag: true,
       code_flag_upstem: 'flag128thUp',
       code_flag_downstem: 'flag128thDown',
+      stem_up_extension: 22,
+      stem_down_extension: 22,
+      tabnote_stem_up_extension: 22,
+      tabnote_stem_down_extension: 22,
       dot_shiftY: 0,
       line_above: 0,
       line_below: 0,

src/tabnote.ts

@@ -208,12 +208,14 @@ export class TabNote extends StemmableNote {
 
   // Get the default stem extension for the note
   getStemExtension(): number {
+    const glyph = this.getGlyph();
+
     if (this.stem_extension_override != null) {
       return this.stem_extension_override;
     }
 
-    if (this.flag) {
-      return this.getStemDirection() === 1 ? -this.flag.checkMetrics().y_shift : this.flag.checkMetrics().y_shift;
+    if (glyph) {
+      return this.getStemDirection() === Stem.UP ? glyph.tabnote_stem_up_extension : glyph.tabnote_stem_down_extension;
     }
 
     return 0;
@@ -339,7 +341,7 @@ export class TabNote extends StemmableNote {
   }
 
   // Get the stem extents for the tabnote
-  getStemExtents(): Record<string, number> {
+  getStemExtents(): { topY: number; baseY: number } {
     return this.checkStem().getExtents();
   }
 
@@ -348,25 +350,26 @@ export class TabNote extends StemmableNote {
     const {
       beam,
       glyph,
-      stem_direction,
-      render_options: { draw_stem, glyph_font_scale },
+      render_options: { draw_stem },
     } = this;
     const context = this.checkContext();
 
     const shouldDrawFlag = beam == undefined && draw_stem;
 
     // Now it's the flag's turn.
     if (glyph.flag && shouldDrawFlag) {
-      const flag_x = this.getStemX() + 1;
-      const flag_y = this.getStemY() - this.checkStem().getHeight();
-
-      const flag_code =
-        stem_direction === Stem.DOWN
-          ? glyph.code_flag_downstem // Down stems have flags on the left.
-          : glyph.code_flag_upstem;
+      const flag_x = this.getStemX();
+      const flag_y =
+        this.getStemDirection() === Stem.DOWN
+          ? // Down stems are below the note head and have flags on the right.
+            this.getStemY() - this.checkStem().getHeight() - (this.glyph ? this.glyph.stem_down_extension : 0)
+          : // Up stems are above the note head and have flags on the right.
+            this.getStemY() - this.checkStem().getHeight() + (this.glyph ? this.glyph.stem_up_extension : 0);
 
       // Draw the Flag
-      Glyph.renderGlyph(context, flag_x, flag_y, glyph_font_scale, flag_code, { category: 'flag.tabStem' });
+      //this.flag?.setOptions({ category: 'flag.tabStem' });
+      this.flag?.render(context, flag_x, flag_y);
+      //Glyph.renderGlyph(context, flag_x, flag_y, glyph_font_scale, flag_code, { category: 'flag.tabStem' });
     }
   }