feat(embedding): add parameters for compact mode, measure range, page format. Revise PageFormat argument handling. (#661)

part of #661

demo/index.js

@@ -111,23 +111,37 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         var paramOpenUrl = findGetParameter('openUrl');
         var paramDebugControls = findGetParameter('debugControls');
 
+        var paramCompactMode = findGetParameter('compactMode');
+        var paramMeasureRangeStart = findGetParameter('measureRangeStart');
+        var paramMeasureRangeEnd = findGetParameter('measureRangeEnd');
+        var paramPageFormat = findGetParameter('pageFormat');
+
         showHeader = (paramShowHeader !== '0');
         if (paramEmbedded !== undefined) {
             showControls = (paramShowControls !== '0');
             showZoomControl = (paramShowZoomControl !== '0');
         }
+
         if (paramZoom !== undefined) {
             if (paramZoom > 0.1 && paramZoom < 5.0) {
                 zoom = paramZoom;
                 console.log('Set zoom to ' + zoom);
             }
         }
-
         if (paramOverflow !== undefined && typeof paramOverflow === 'string') {
             if (paramOverflow === 'hidden' || paramOverflow === 'auto' || paramOverflow === 'scroll' || paramOverflow === 'visible') {
                 document.body.style.overflow = paramOverflow;
             }
         }
+        
+        var compactMode = paramCompactMode && paramCompactMode !== '0';
+        var measureRangeStart = paramMeasureRangeStart ? Number.parseInt(paramMeasureRangeStart) : 0;
+        var measureRangeEnd = paramMeasureRangeEnd ? Number.parseInt(paramMeasureRangeEnd) : Number.MAX_SAFE_INTEGER;
+        if (measureRangeStart && measureRangeEnd && measureRangeEnd < measureRangeStart) {
+            console.log("[OSMD] warning: measure range end parameter should not be smaller than measure range start. We've set start measure = end measure now.")
+            measureRangeStart = measureRangeEnd;
+        }
+        var pageFormat = paramPageFormat ? paramPageFormat : "Endless";
 
         divControls = document.getElementById('divControls');
         zoomControls = document.getElementById('zoomControls');
@@ -289,17 +303,17 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
             backend: backendSelect.value,
             //backend: "canvas",
             disableCursor: false,
-            drawingParameters: "default", // try compact (instead of default)
+            drawingParameters: compactMode ? "compact" : "default", // try compact (instead of default)
             drawPartNames: true, // try false
             // drawTitle: false,
             // drawSubtitle: false,
-            //drawFromMeasureNumber: 4,
-            //drawUpToMeasureNumber: 8,
             drawFingerings: true,
             fingeringPosition: "left", // left is default. try right. experimental: auto, above, below.
             // fingeringInsideStafflines: "true", // default: false. true draws fingerings directly above/below notes
             setWantedStemDirectionByXml: true, // try false, which was previously the default behavior
             // drawUpToMeasureNumber: 3, // draws only up to measure 3, meaning it draws measure 1 to 3 of the piece.
+            drawFromMeasureNumber : measureRangeStart,
+            drawUpToMeasureNumber : measureRangeEnd,
 
             //drawMeasureNumbers: false, // disable drawing measure numbers
             //measureNumberInterval: 4, // draw measure numbers only every 4 bars (and at the beginning of a new system)
@@ -317,6 +331,8 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
                 maintain_stem_directions: false
             },
 
+            pageFormat: pageFormat
+
             // tupletsBracketed: true, // creates brackets for all tuplets except triplets, even when not set by xml
             // tripletsBracketed: true,
             // tupletsRatioed: true, // unconventional; renders ratios for tuplets (3:2 instead of 3 for triplets)

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -1,5 +1,4 @@
 import { DrawingParametersEnum, ColoringModes } from "../MusicalScore/Graphical/DrawingParameters";
-import { PageFormat } from "../MusicalScore/Graphical/EngravingRules";
 
 /** Possible options for the OpenSheetMusicDisplay constructor and osmd.setOptions(). None are mandatory.
  *  Note that after using setOptions(), you have to call osmd.render() again to make changes visible.
@@ -111,8 +110,10 @@ export interface IOSMDOptions {
      * (Bracketing all triplets can be cluttering)
      */
     tripletsBracketed?: boolean;
-    /**  See OpenSheetMusicDisplay.PageFormatStandards for standard options like OpenSheetMusicDisplay.PageFormatStandards["A4 P"]. */
-    pageFormat?: PageFormat;
+    /**  See OpenSheetMusicDisplay.PageFormatStandards for standard options like "A4 P" or "Endless". Default Endless.
+     *   Uses OpenSheetMusicDisplay.StringToPageFormat(). Unfortunately it would be error-prone to set a PageFormat type directly.
+     */
+    pageFormat?: string;
 }
 
 export enum AlignRestOption {

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -421,7 +421,7 @@ export class OpenSheetMusicDisplay {
             // we could remove the window EventListener here, but not necessary.
         }
         if (options.pageFormat !== undefined) { // only change this option if it was given, see above
-            EngravingRules.Rules.PageFormat = options.pageFormat;
+            EngravingRules.Rules.PageFormat = OpenSheetMusicDisplay.StringToPageFormat(options.pageFormat);
         }
     }
 
@@ -614,38 +614,38 @@ export class OpenSheetMusicDisplay {
         return backend;
     }
 
-    /** Standard page format options like A4 or Letter, in portrait and landscape. E.g. PageFormatStandards["A4 P"] or PageFormatStandards["Letter L"]. */
+    /** 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} = {
-        "A3 L": new PageFormat(420, 297),
-        "A3 P": new PageFormat(297, 420),
-        "A4 L": new PageFormat(297, 210),
-        "A4 P": new PageFormat(210, 297),
-        "A5 L": new PageFormat(210, 148),
-        "A5 P": new PageFormat(148, 210),
-        "A6 L": new PageFormat(148, 105),
-        "A6 P": new PageFormat(105, 148),
-        "Letter L": new PageFormat(279.4, 215.9),
-        "Letter P": new PageFormat(215.9, 279.4)
+        "A3_L": new PageFormat(420, 297), // id strings should use underscores instead of white spaces to facilitate use as URL parameters.
+        "A3_P": new PageFormat(297, 420),
+        "A4_L": new PageFormat(297, 210),
+        "A4_P": new PageFormat(210, 297),
+        "A5_L": new PageFormat(210, 148),
+        "A5_P": new PageFormat(148, 210),
+        "A6_L": new PageFormat(148, 105),
+        "A6_P": new PageFormat(105, 148),
+        "Endless": PageFormat.UndefinedPageFormat,
+        "Letter_L": new PageFormat(279.4, 215.9),
+        "Letter_P": new PageFormat(215.9, 279.4)
     };
 
-    public setPageFormat(formatId: string): void {
+    public static StringToPageFormat(formatId: string): PageFormat {
         let f: PageFormat = PageFormat.UndefinedPageFormat; // default: 'endless' page height, take canvas/container width
         if (OpenSheetMusicDisplay.PageFormatStandards.hasOwnProperty(formatId)) {
             f = OpenSheetMusicDisplay.PageFormatStandards[formatId];
         }
-        const options: IOSMDOptions = {
-            pageFormat: f,
-        };
-        this.setOptions(options);
+        return f;
+    }
+
+    /** Sets page format by string. Alternative to setOptions({pageFormat: PageFormatStandards.Endless}) for example. */
+    public setPageFormat(formatId: string): void {
+        EngravingRules.Rules.PageFormat = OpenSheetMusicDisplay.StringToPageFormat(formatId);
     }
 
     public setCustomPageFormat(width: number, height: number): void {
         if (width > 0 && height > 0) {
             const f: PageFormat = new PageFormat(width, height);
-            const options: IOSMDOptions = {
-                pageFormat: f,
-            };
-            this.setOptions(options);
+            EngravingRules.Rules.PageFormat = f;
         }
     }