feat(color): add option to enable or disable coloring

demo/index.js

@@ -143,6 +143,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         openSheetMusicDisplay = new OpenSheetMusicDisplay(canvas, {
             autoResize: true,
             backend: backendSelect.value,
+            coloringEnabled: true,
             disableCursor: false,
             drawingParameters: "default", // try compact (instead of default)
             drawPartNames: true, // try false

src/MusicalScore/Graphical/EngravingRules.ts

@@ -173,6 +173,8 @@ export class EngravingRules {
     private noteDistancesScalingFactors: number[] = [1.0, 2.0, 4.0, 8.0, 16.0, 32.0, 64.0, 128.0];
     private durationDistanceDict: {[_: number]: number; } = {};
     private durationScalingDistanceDict: {[_: number]: number; } = {};
+
+    private coloringEnabled: boolean;
     /** Whether to render a label for the composer of the piece at the top of the sheet. */
     private renderComposer: boolean;
     private renderTitle: boolean;
@@ -376,6 +378,7 @@ export class EngravingRules {
         this.wholeRestXShiftVexflow = -2.5; // VexFlow draws rest notes too far to the right
 
         // Render options (whether to render specific or invisible elements)
+        this.coloringEnabled = true;
         this.renderComposer = true;
         this.renderTitle = true;
         this.renderSubtitle = true;
@@ -1295,6 +1298,12 @@ export class EngravingRules {
     public get DurationScalingDistanceDict(): {[_: number]: number; } {
         return this.durationScalingDistanceDict;
     }
+    public get ColoringEnabled(): boolean {
+        return this.coloringEnabled;
+    }
+    public set ColoringEnabled(value: boolean) {
+        this.coloringEnabled = value;
+    }
     public get RenderComposer(): boolean {
         return this.renderComposer;
     }

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -250,11 +250,13 @@ export class VexFlowConverter {
                 }
             }
 
-            const noteheadColor: string = note.sourceNote.NoteheadColorXml;
-            if (noteheadColor) {
-                noteheadStyles.push({fillStyle: noteheadColor, strokeStyle: noteheadColor});
-            } else {
-                noteheadStyles.push(undefined);
+            if (EngravingRules.Rules.ColoringEnabled) {
+                const noteheadColor: string = note.sourceNote.NoteheadColorXml;
+                if (noteheadColor) {
+                    noteheadStyles.push({fillStyle: noteheadColor, strokeStyle: noteheadColor});
+                } else {
+                    noteheadStyles.push(undefined);
+                }
             }
 
             const pitch: [string, string, ClefInstruction] = (note as VexFlowGraphicalNote).vfpitch;
@@ -284,7 +286,7 @@ export class VexFlowConverter {
             noteheadStyles: noteheadStyles,
             slash: gve.parentVoiceEntry.GraceNoteSlash,
         };
-        if (stemColor) {
+        if (stemColor && EngravingRules.Rules.ColoringEnabled) {
             (<any>vfnoteStruct).stemStyle = stemStyle;
         }
         if (gve.notes[0].sourceNote.IsCueNote) {
@@ -298,15 +300,16 @@ export class VexFlowConverter {
             vfnote = new Vex.Flow.StaveNote(vfnoteStruct);
         }
 
-        if (stemColor) {
-            vfnote.setStemStyle(stemStyle);
-        }
-
-        // TODO temporary fix until Vexflow PR is through (should be set by vfnotestruct.noteheadStyles)
-        for (let i: number = 0; i < noteheadStyles.length; i++) {
-            const style: string = noteheadStyles[i];
-            if (style) {
-                vfnote.note_heads[i].setStyle(style);
+        if (EngravingRules.Rules.ColoringEnabled) {
+            // TODO temporary fix until Vexflow PR is through (should be set by vfnotestruct.stem/noteheadStyles)
+            if (stemColor) {
+                vfnote.setStemStyle(stemStyle);
+            }
+            for (let i: number = 0; i < noteheadStyles.length; i++) {
+                const style: string = noteheadStyles[i];
+                if (style) {
+                    vfnote.note_heads[i].setStyle(style);
+                }
             }
         }
 

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -12,6 +12,8 @@ export interface IOSMDOptions {
     autoStem?: boolean;
     /** Render Backend, will be SVG if given undefined, SVG or svg, otherwise Canvas. */
     backend?: string;
+    /** Whether to enable coloring noteheads and stems by their XML color attribute. */
+    coloringEnabled?: boolean;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
     /** Broad Parameters like compact or preview mode. */

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -237,6 +237,9 @@ export class OpenSheetMusicDisplay {
                 }
             }
         }
+        if (options.coloringEnabled !== undefined) {
+            EngravingRules.Rules.ColoringEnabled = options.coloringEnabled;
+        }
         if (options.disableCursor) {
             this.drawingParameters.drawCursors = false;
             this.enableOrDisableCursor(this.drawingParameters.drawCursors);