Merge pull request #1184 from rvilarl/fix/1070

Address issue #1070

src/accidental.ts

@@ -46,7 +46,7 @@ export class Accidental extends Modifier {
     code: string;
     parenRightPaddingAdjustment: number;
   };
-  protected render_options: {
+  public render_options: {
     parenLeftPadding: number;
     stroke_px: number;
     font_scale: number;

src/articulation.ts

@@ -176,7 +176,7 @@ export class Articulation extends Modifier {
   /** Articulation code provided to the constructor. */
   readonly type: string;
 
-  protected render_options: { font_scale: number };
+  public render_options: { font_scale: number };
   // articulation defined calling reset in constructor
   protected articulation!: ArticulationStruct;
   // glyph defined calling reset in constructor

src/beam.ts

@@ -47,7 +47,7 @@ export class Beam extends Element {
     return 'Beam';
   }
 
-  render_options: {
+  public render_options: {
     flat_beam_offset?: number;
     flat_beams: boolean;
     secondary_break_ticks?: number;

src/bend.ts

@@ -14,13 +14,6 @@ export interface BendPhrase {
   draw_width?: number;
 }
 
-export interface BendRenderOptions {
-  line_width: number;
-  release_width: number;
-  bend_width: number;
-  line_style: string;
-}
-
 /** Bend implements tablature bends. */
 export class Bend extends Modifier {
   static get CATEGORY(): string {
@@ -60,7 +53,12 @@ export class Bend extends Modifier {
   protected release: boolean;
   protected phrase: BendPhrase[];
   protected font: string;
-  protected render_options: BendRenderOptions;
+  public render_options: {
+    line_width: number;
+    release_width: number;
+    bend_width: number;
+    line_style: string;
+  };
 
   /**
    * Example of a phrase:

src/curve.ts

@@ -28,7 +28,7 @@ export class Curve extends Element {
     return 'Curve';
   }
 
-  protected readonly render_options: Required<CurveOptions>;
+  public render_options: Required<CurveOptions>;
   protected from: Note;
   protected to: Note;
 

src/gracenotegroup.ts

@@ -39,7 +39,7 @@ export class GraceNoteGroup extends Modifier {
 
   protected preFormatted: boolean = false;
   protected formatter: Formatter;
-  protected render_options: { slur_y_shift: number };
+  public render_options: { slur_y_shift: number };
   protected slur?: StaveTie | TabTie;
   protected beams: Beam[];
 

src/multimeasurerest.ts

@@ -74,7 +74,7 @@ export class MultiMeasureRest extends Element {
     return 'MultiMeasureRest';
   }
 
-  protected render_options: Required<MultimeasureRestRenderOptions>;
+  public render_options: Required<MultimeasureRestRenderOptions>;
   protected xs = { left: NaN, right: NaN };
   protected number_of_measures: number;
 

src/note.ts

@@ -38,21 +38,6 @@ export interface NoteDuration {
   type: string;
 }
 
-export interface NoteRenderOptions {
-  draw_stem_through_stave?: boolean;
-  draw_dots?: boolean;
-  draw_stem?: boolean;
-  y_shift: number;
-  extend_left?: number;
-  extend_right?: number;
-  glyph_font_scale: number;
-  annotation_spacing: number;
-  glyph_font_size?: number;
-  scale: number;
-  font: string;
-  stroke_px: number;
-}
-
 export interface ParsedNote {
   duration: string;
   type: string;
@@ -93,7 +78,20 @@ export abstract class Note extends Tickable {
   keyProps: KeyProps[];
 
   protected stave?: Stave;
-  render_options: NoteRenderOptions;
+  public render_options: {
+    draw_stem_through_stave?: boolean;
+    draw_dots?: boolean;
+    draw_stem?: boolean;
+    y_shift: number;
+    extend_left?: number;
+    extend_right?: number;
+    glyph_font_scale: number;
+    annotation_spacing: number;
+    glyph_font_size?: number;
+    scale: number;
+    font: string;
+    stroke_px: number;
+  };
   protected duration: string;
   protected dots: number;
   protected leftDisplacedHeadPx: number;

src/ornament.ts

@@ -43,7 +43,7 @@ export class Ornament extends Modifier {
   protected delayed: boolean;
   protected reportedWidth: number;
   protected adjustForStemDirection: boolean;
-  protected render_options: {
+  public render_options: {
     accidentalUpperPadding: number;
     accidentalLowerPadding: number;
     font_scale: number;

src/pedalmarking.ts

@@ -43,7 +43,7 @@ export class PedalMarking extends Element {
   protected type: number;
   protected custom_depress_text: string;
   protected custom_release_text: string;
-  protected render_options: {
+  public render_options: {
     color: string;
     bracket_height: number;
     text_margin_right: number;

src/stavehairpin.ts

@@ -29,7 +29,7 @@ export class StaveHairpin extends Element {
   protected hairpin: number;
 
   protected position: number;
-  protected render_options: StaveHairpinRenderOptions;
+  public render_options: StaveHairpinRenderOptions;
 
   // notes is initialized by the constructor via this.setNotes(notes).
   protected notes!: Record<string, Note>;

src/staveline.ts

@@ -46,108 +46,6 @@ function drawArrowHead(
   ctx.fill();
 }
 
-// Helper function to draw a line with arrow heads
-function drawArrowLine(
-  ctx: RenderContext,
-  pt1: { x: number; y: number },
-  pt2: { x: number; y: number },
-  config: RenderOptions
-): void {
-  const both_arrows = config.draw_start_arrow && config.draw_end_arrow;
-
-  const x1 = pt1.x;
-  const y1 = pt1.y;
-  const x2 = pt2.x;
-  const y2 = pt2.y;
-
-  // For ends with arrow we actually want to stop before we get to the arrow
-  // so that wide lines won't put a flat end on the arrow.
-  const distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
-  const ratio = (distance - config.arrowhead_length / 3) / distance;
-  let end_x;
-  let end_y;
-  let start_x;
-  let start_y;
-  if (config.draw_end_arrow || both_arrows) {
-    end_x = Math.round(x1 + (x2 - x1) * ratio);
-    end_y = Math.round(y1 + (y2 - y1) * ratio);
-  } else {
-    end_x = x2;
-    end_y = y2;
-  }
-
-  if (config.draw_start_arrow || both_arrows) {
-    start_x = x1 + (x2 - x1) * (1 - ratio);
-    start_y = y1 + (y2 - y1) * (1 - ratio);
-  } else {
-    start_x = x1;
-    start_y = y1;
-  }
-
-  if (config.color) {
-    ctx.setStrokeStyle(config.color);
-    ctx.setFillStyle(config.color);
-  }
-
-  // Draw the shaft of the arrow
-  ctx.beginPath();
-  ctx.moveTo(start_x, start_y);
-  ctx.lineTo(end_x, end_y);
-  ctx.stroke();
-  ctx.closePath();
-
-  // calculate the angle of the line
-  const line_angle = Math.atan2(y2 - y1, x2 - x1);
-  // h is the line length of a side of the arrow head
-  const h = Math.abs(config.arrowhead_length / Math.cos(config.arrowhead_angle));
-
-  let angle1;
-  let angle2;
-  let top_x;
-  let top_y;
-  let bottom_x;
-  let bottom_y;
-
-  if (config.draw_end_arrow || both_arrows) {
-    angle1 = line_angle + Math.PI + config.arrowhead_angle;
-    top_x = x2 + Math.cos(angle1) * h;
-    top_y = y2 + Math.sin(angle1) * h;
-
-    angle2 = line_angle + Math.PI - config.arrowhead_angle;
-    bottom_x = x2 + Math.cos(angle2) * h;
-    bottom_y = y2 + Math.sin(angle2) * h;
-
-    drawArrowHead(ctx, top_x, top_y, x2, y2, bottom_x, bottom_y);
-  }
-
-  if (config.draw_start_arrow || both_arrows) {
-    angle1 = line_angle + config.arrowhead_angle;
-    top_x = x1 + Math.cos(angle1) * h;
-    top_y = y1 + Math.sin(angle1) * h;
-
-    angle2 = line_angle - config.arrowhead_angle;
-    bottom_x = x1 + Math.cos(angle2) * h;
-    bottom_y = y1 + Math.sin(angle2) * h;
-
-    drawArrowHead(ctx, top_x, top_y, x1, y1, bottom_x, bottom_y);
-  }
-}
-
-interface RenderOptions {
-  padding_left: number;
-  padding_right: number;
-  line_width: number;
-  line_dash?: number[];
-  rounded_end: boolean;
-  color?: string;
-  draw_start_arrow: boolean;
-  draw_end_arrow: boolean;
-  arrowhead_length: number;
-  arrowhead_angle: number;
-  text_position_vertical: number;
-  text_justification: number;
-}
-
 export class StaveLine extends Element {
   static get CATEGORY(): string {
     return 'StaveLine';
@@ -165,7 +63,20 @@ export class StaveLine extends Element {
     RIGHT: 3,
   };
 
-  readonly render_options: RenderOptions;
+  public render_options: {
+    padding_left: number;
+    padding_right: number;
+    line_width: number;
+    line_dash?: number[];
+    rounded_end: boolean;
+    color?: string;
+    draw_start_arrow: boolean;
+    draw_end_arrow: boolean;
+    arrowhead_length: number;
+    arrowhead_angle: number;
+    text_position_vertical: number;
+    text_justification: number;
+  };
 
   protected text: string;
   protected font: FontInfo;
@@ -300,6 +211,88 @@ export class StaveLine extends Element {
     }
   }
 
+  // Helper function to draw a line with arrow heads
+  protected drawArrowLine(ctx: RenderContext, pt1: { x: number; y: number }, pt2: { x: number; y: number }): void {
+    const both_arrows = this.render_options.draw_start_arrow && this.render_options.draw_end_arrow;
+
+    const x1 = pt1.x;
+    const y1 = pt1.y;
+    const x2 = pt2.x;
+    const y2 = pt2.y;
+
+    // For ends with arrow we actually want to stop before we get to the arrow
+    // so that wide lines won't put a flat end on the arrow.
+    const distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    const ratio = (distance - this.render_options.arrowhead_length / 3) / distance;
+    let end_x;
+    let end_y;
+    let start_x;
+    let start_y;
+    if (this.render_options.draw_end_arrow || both_arrows) {
+      end_x = Math.round(x1 + (x2 - x1) * ratio);
+      end_y = Math.round(y1 + (y2 - y1) * ratio);
+    } else {
+      end_x = x2;
+      end_y = y2;
+    }
+
+    if (this.render_options.draw_start_arrow || both_arrows) {
+      start_x = x1 + (x2 - x1) * (1 - ratio);
+      start_y = y1 + (y2 - y1) * (1 - ratio);
+    } else {
+      start_x = x1;
+      start_y = y1;
+    }
+
+    if (this.render_options.color) {
+      ctx.setStrokeStyle(this.render_options.color);
+      ctx.setFillStyle(this.render_options.color);
+    }
+
+    // Draw the shaft of the arrow
+    ctx.beginPath();
+    ctx.moveTo(start_x, start_y);
+    ctx.lineTo(end_x, end_y);
+    ctx.stroke();
+    ctx.closePath();
+
+    // calculate the angle of the line
+    const line_angle = Math.atan2(y2 - y1, x2 - x1);
+    // h is the line length of a side of the arrow head
+    const h = Math.abs(this.render_options.arrowhead_length / Math.cos(this.render_options.arrowhead_angle));
+
+    let angle1;
+    let angle2;
+    let top_x;
+    let top_y;
+    let bottom_x;
+    let bottom_y;
+
+    if (this.render_options.draw_end_arrow || both_arrows) {
+      angle1 = line_angle + Math.PI + this.render_options.arrowhead_angle;
+      top_x = x2 + Math.cos(angle1) * h;
+      top_y = y2 + Math.sin(angle1) * h;
+
+      angle2 = line_angle + Math.PI - this.render_options.arrowhead_angle;
+      bottom_x = x2 + Math.cos(angle2) * h;
+      bottom_y = y2 + Math.sin(angle2) * h;
+
+      drawArrowHead(ctx, top_x, top_y, x2, y2, bottom_x, bottom_y);
+    }
+
+    if (this.render_options.draw_start_arrow || both_arrows) {
+      angle1 = line_angle + this.render_options.arrowhead_angle;
+      top_x = x1 + Math.cos(angle1) * h;
+      top_y = y1 + Math.sin(angle1) * h;
+
+      angle2 = line_angle - this.render_options.arrowhead_angle;
+      bottom_x = x1 + Math.cos(angle2) * h;
+      bottom_y = y1 + Math.sin(angle2) * h;
+
+      drawArrowHead(ctx, top_x, top_y, x1, y1, bottom_x, bottom_y);
+    }
+  }
+
   // Renders the `StaveLine` on the context
   draw(): this {
     const ctx = this.checkContext();
@@ -344,7 +337,7 @@ export class StaveLine extends Element {
       start_position.y += upwards_slope ? -3 : 1;
       end_position.y += upwards_slope ? 2 : 0;
 
-      drawArrowLine(ctx, start_position, end_position, this.render_options);
+      this.drawArrowLine(ctx, start_position, end_position);
     });
 
     ctx.restore();

src/stavetempo.ts

@@ -21,7 +21,7 @@ export class StaveTempo extends StaveModifier {
 
   protected font: FontInfo;
   /** Font size for note. */
-  protected render_options = { glyph_font_scale: 30 };
+  public render_options = { glyph_font_scale: 30 };
   protected tempo: StaveTempoOptions;
   protected shift_x: number;
   protected shift_y: number;

src/stavetie.ts

@@ -13,7 +13,7 @@ export class StaveTie extends Element {
     return 'StaveTie';
   }
 
-  render_options: {
+  public render_options: {
     cp2: number;
     last_x_shift: number;
     tie_spacing: number;