feat(render): add option renderSingleHorizontalStaffline (#681)

close #681

merge branch feat/noLineBreaksSingleSystem,
integrated by:
merge branch fix/mergeSingleHorizontalStafflineOption

visual regression tests of 41 samples passed.

demo/index.js

@@ -124,6 +124,9 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         var paramPageWidth = findGetParameter('pageWidth');
         var paramPageHeight = findGetParameter('pageHeight');
 
+        var paramHorizontalScrolling = findGetParameter('horizontalScrolling');
+        var paramSingleHorizontalStaffline = findGetParameter('singleHorizontalStaffline');
+
         showHeader = (paramShowHeader !== '0');
         showControls = false;
         if (paramEmbedded !== undefined) {
@@ -158,6 +161,9 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         var pageBackgroundColor = paramPageBackgroundColor ? "#" + paramPageBackgroundColor : undefined; // vexflow format, see OSMDOptions. can't use # in parameters.
         //console.log("demo: osmd pagebgcolor: " + pageBackgroundColor);
         var backendType = (paramBackendType && paramBackendType.toLowerCase) ? paramBackendType : "svg";
+
+        var horizontalScrolling = paramHorizontalScrolling === '1';
+        var singleHorizontalStaffline = paramSingleHorizontalStaffline === '1';
         
         // set the backendSelect debug controls dropdown menu selected item
         //console.log("true: " + backendSelect && backendType.toLowerCase && backendType.toLowerCase() === "canvas");
@@ -192,6 +198,9 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         zoomOuts.push(document.getElementById("zoom-out-btn"));
         zoomOuts.push(document.getElementById("zoom-out-btn-optional"));
         canvas = document.createElement("div");
+        if (horizontalScrolling) {
+            canvas.style.overflowX = 'auto'; // enable horizontal scrolling
+        }
         //canvas.id = 'osmdCanvasDiv';
         //canvas.style.overflowX = 'auto'; // enable horizontal scrolling
         nextCursorBtn = document.getElementById("next-cursor-btn");
@@ -425,6 +434,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
 
             pageFormat: pageFormat,
             pageBackgroundColor: pageBackgroundColor,
+            renderSingleHorizontalStaffline: singleHorizontalStaffline
 
             // tupletsBracketed: true, // creates brackets for all tuplets except triplets, even when not set by xml
             // tripletsBracketed: true,

src/MusicalScore/Graphical/EngravingRules.ts

@@ -215,6 +215,7 @@ export class EngravingRules {
     private fingeringInsideStafflines: boolean;
     private pageFormat: PageFormat;
     private pageBackgroundColor: string; // vexflow-color-string (#FFFFFF). Default undefined/transparent.
+    private renderSingleHorizontalStaffline: boolean;
 
     private fixStafflineBoundingBox: boolean; // TODO temporary workaround
 
@@ -444,6 +445,7 @@ export class EngravingRules {
 
         this.pageFormat = PageFormat.UndefinedPageFormat; // default: undefined / 'infinite' height page, using the canvas'/container's width and height
         this.pageBackgroundColor = undefined; // default: transparent. half-transparent white: #FFFFFF88"
+        this.renderSingleHorizontalStaffline = false;
 
         this.populateDictionaries();
         try {
@@ -1567,6 +1569,12 @@ export class EngravingRules {
     public set PageBackgroundColor(value: string) {
         this.pageBackgroundColor = value;
     }
+    public get RenderSingleHorizontalStaffline(): boolean {
+        return this.renderSingleHorizontalStaffline;
+    }
+    public set RenderSingleHorizontalStaffline(value: boolean) {
+        this.renderSingleHorizontalStaffline = value;
+    }
 
     /**
      * This method maps NoteDurations to Distances and DistancesScalingFactors.

src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -1699,7 +1699,11 @@ export abstract class MusicSheetCalculator {
     }
 
     protected calculatePageLabels(page: GraphicalMusicPage): void {
-
+        if (EngravingRules.Rules.RenderSingleHorizontalStaffline) {
+            page.PositionAndShape.BorderRight = page.PositionAndShape.Size.width;
+            page.PositionAndShape.calculateBoundingBox();
+            this.graphicalMusicSheet.ParentMusicSheet.pageWidth = page.PositionAndShape.Size.width;
+        }
         // The PositionAndShape child elements of page need to be manually connected to the lyricist, composer, subtitle, etc.
         // because the page is only available now
         let firstSystemAbsoluteTopMargin: number = 10;

src/MusicalScore/Graphical/MusicSystemBuilder.ts

@@ -113,6 +113,7 @@ export class MusicSystemBuilder {
             }
             const totalMeasureWidth: number = currentMeasureBeginInstructionsWidth + currentMeasureEndInstructionsWidth + currentMeasureVarWidth;
             const measureFitsInSystem: boolean = this.currentSystemParams.currentWidth + totalMeasureWidth + nextMeasureBeginInstructionWidth < systemMaxWidth;
+            //if (true) // prevent line break at all costs, squeezes measures and breaks lyrics spacing
             if (isSystemStartMeasure || measureFitsInSystem) {
                 this.addMeasureToSystem(
                     graphicalMeasures, measureStartLine, measureEndLine, totalMeasureWidth,

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -121,6 +121,8 @@ export interface IOSMDOptions {
      *  Note: Using a background color will prevent the cursor from being visible.
      */
     pageBackgroundColor?: string;
+    /** This makes OSMD render on one single horizontal (staff-)line. */
+    renderSingleHorizontalStaffline?: boolean;
 }
 
 export enum AlignRestOption {

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -187,8 +187,15 @@ export class OpenSheetMusicDisplay {
         // musicSheetCalculator.clearRecreatedObjects();
 
         // Set page width
-        const width: number = this.container.offsetWidth;
-        // log.debug("[OSMD] container width: " + width);
+        let width: number = this.container.offsetWidth;
+        if (EngravingRules.Rules.RenderSingleHorizontalStaffline) {
+            width = 32767; // set safe maximum (browser limit), will be reduced later
+            // reduced later in MusicSheetCalculator.calculatePageLabels (sets sheet.pageWidth to page.PositionAndShape.Size.width before labels)
+            // rough calculation:
+            // width = 600 * this.sheet.SourceMeasures.length;
+        }
+        // log.debug("[OSMD] render width: " + width);
+
         this.sheet.pageWidth = width / this.zoom / 10.0;
         if (EngravingRules.Rules.PageFormat && !EngravingRules.Rules.PageFormat.IsUndefined) {
             EngravingRules.Rules.PageHeight = this.sheet.pageWidth / EngravingRules.Rules.PageFormat.aspectRatio;
@@ -255,6 +262,11 @@ export class OpenSheetMusicDisplay {
 
         // Set page width
         let width: number = this.container.offsetWidth;
+        if (EngravingRules.Rules.RenderSingleHorizontalStaffline) {
+            width = this.graphic.MusicPages[0].PositionAndShape.Size.width * 10 * this.zoom;
+            // this.container.style.width = width + "px";
+            // console.log("width: " + width)
+        }
         // TODO width may need to be coordinated with render() where width is also used
         let height: number;
         const canvasDimensionsLimit: number = 32767; // browser limitation. Chrome/Firefox (16 bit, 32768 causes an error).
@@ -466,6 +478,9 @@ export class OpenSheetMusicDisplay {
         if (options.pageBackgroundColor !== undefined) {
             EngravingRules.Rules.PageBackgroundColor = options.pageBackgroundColor;
         }
+        if (options.renderSingleHorizontalStaffline !== undefined) {
+            EngravingRules.Rules.RenderSingleHorizontalStaffline = options.renderSingleHorizontalStaffline;
+        }
     }
 
     public setColoringMode(options: IOSMDOptions): void {
@@ -659,7 +674,7 @@ export class OpenSheetMusicDisplay {
     }
 
     /** Standard page format options like A4 or Letter, in portrait and landscape. E.g. PageFormatStandards["A4_P"] or PageFormatStandards["Letter_L"]. */
-    public static PageFormatStandards: {[type: string]: PageFormat} = {
+    public static PageFormatStandards: { [type: string]: PageFormat } = {
         "A3_L": new PageFormat(420, 297, "A3_L"), // id strings should use underscores instead of white spaces to facilitate use as URL parameters.
         "A3_P": new PageFormat(297, 420, "A3_P"),
         "A4_L": new PageFormat(297, 210, "A4_L"),
@@ -727,7 +742,7 @@ export class OpenSheetMusicDisplay {
             pdfName = this.sheet.FullNameString + ".pdf";
         }
 
-        const backends: VexFlowBackend[] =  this.drawer.Backends;
+        const backends: VexFlowBackend[] = this.drawer.Backends;
         let svgElement: SVGElement = (<SvgVexFlowBackend>backends[0]).getSvgElement();
 
         let pageWidth: number = 210;