Merge pull request #1302 from AaronDavidNewman/issue-1301

Issue 1301: Fix vertical placement of Bend and Vibrato in tab staves
0xfe · Jan 23, 2022 · f47e9f8 · f47e9f8
2 parents 8fbe60f + ab0c629
commit f47e9f8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/src/bend.ts b/src/bend.ts
@@ -5,8 +5,7 @@ import { Element } from './element';
 import { FontInfo } from './font';
 import { Modifier } from './modifier';
 import { ModifierContextState } from './modifiercontext';
-import { Stave } from './stave';
-import { Tables } from './tables';
+import { TextFormatter } from './textformatter';
 import { TabNote } from './tabnote';
 import { RuntimeError } from './util';
 
@@ -61,6 +60,7 @@ export class Bend extends Modifier {
   }
 
   protected text: string;
+  protected tap: string;
   protected release: boolean;
   protected phrase: BendPhrase[];
 
@@ -110,6 +110,7 @@ export class Bend extends Modifier {
     this.text = text;
     this.x_shift = 0;
     this.release = release;
+    this.tap = '';
     this.resetFont();
     this.render_options = {
       line_width: 1.5,
@@ -136,22 +137,25 @@ export class Bend extends Modifier {
     return this;
   }
 
+  setTap(value: string): this {
+    this.tap = value;
+    return this;
+  }
+
   /** Get text provided in the constructor. */
   getText(): string {
     return this.text;
   }
+  getTextHeight(): number {
+    const textFormatter = TextFormatter.create(this.textFont);
+    return textFormatter.maxHeight;
+  }
 
   /** Recalculate width. */
   protected updateWidth(): this {
+    const textFormatter = TextFormatter.create(this.textFont);
     const measureText = (text: string) => {
-      let textWidth: number;
-      const ctx = this.getContext();
-      if (ctx) {
-        textWidth = ctx.measureText(text).width;
-      } else {
-        textWidth = Tables.textWidth(text);
-      }
-      return textWidth;
+      return textFormatter.getWidthForTextInPx(text);
     };
 
     let totalWidth = 0;
@@ -241,6 +245,11 @@ export class Bend extends Modifier {
     let last_bend = undefined;
     let last_bend_draw_width = 0;
     let last_drawn_width = 0;
+    if (this.tap?.length) {
+      const tapStart = note.getModifierStartXY(Modifier.Position.CENTER, this.index);
+      renderText(tapStart.x, this.tap);
+    }
+
     for (let i = 0; i < this.phrase.length; ++i) {
       const bend = this.phrase[i];
       if (!bend.draw_width) bend.draw_width = 0;

diff --git a/src/vibrato.ts b/src/vibrato.ts
@@ -5,6 +5,7 @@ import { Bend } from './bend';
 import { Modifier } from './modifier';
 import { ModifierContext, ModifierContextState } from './modifiercontext';
 import { RenderContext } from './rendercontext';
+import { Tables } from './tables';
 
 export interface VibratoRenderOptions {
   wave_height: number;
@@ -34,7 +35,10 @@ export class Vibrato extends Modifier {
     // If there's a bend, drop the text line
     const bends = context.getMembers(Bend.CATEGORY) as Bend[];
     if (bends && bends.length > 0) {
-      text_line--;
+      const bendHeight = bends.map((bb) => bb.getTextHeight()).reduce((a, b) => a > b ? a : b) / Tables.STAVE_LINE_DISTANCE;
+      text_line = text_line - (bendHeight + 1);
+    } else {
+      state.top_text_line += 1;
     }
 
     // Format Vibratos
@@ -47,7 +51,6 @@ export class Vibrato extends Modifier {
     }
 
     state.right_shift += width;
-    state.top_text_line += 1;
     return true;
   }
 

diff --git a/tests/annotation_tests.ts b/tests/annotation_tests.ts
@@ -120,9 +120,7 @@ function simple(options: TestOptions, contextBuilder: ContextBuilder): void {
     tabNote({
       positions: [{ str: 2, fret: 10 }],
       duration: 'h',
-    })
-      .addModifier(0, new Annotation('T').setVerticalJustification(AnnotationVerticalJustify.TOP))
-      .addModifier(0, new Bend('Full'))
+    }).addModifier(0, new Bend('Full').setTap('T'))
   ];
 
   Formatter.FormatAndDraw(ctx, stave, notes);