feat(color): enable defaultColor options for notehead and stem

improve color settings. VoiceEntry now stores stemColor chosen (can be different from XML)
close #438

demo/index.js

@@ -144,7 +144,6 @@ 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
@@ -155,6 +154,11 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
             // fingeringInsideStafflines: "true", // default: false. true draws fingerings directly above/below notes
             setWantedStemDirectionByXml: true, // try false, which was previously the default behavior
 
+            // coloring options
+            coloringEnabled: true,
+            // defaultColorNoteHead: "#CC0055", // try setting a default color. default is black (undefined)
+            // defaultColorStem: "#BB0099",
+
             autoBeam: false, // try true, OSMD Function Test AutoBeam sample
             autoBeamOptions: {
                 beam_rests: false,

src/MusicalScore/Graphical/DrawingParameters.ts

@@ -31,8 +31,6 @@ export class DrawingParameters {
     public fingeringPosition: PlacementEnum = PlacementEnum.Left;
     /** Draw notes set to be invisible (print-object="no" in XML). */
     public drawHiddenNotes: boolean = false;
-    public defaultColorNoteHead: string; // TODO not yet supported
-    public defaultColorStem: string; // TODO not yet supported
 
     constructor(drawingParameters: DrawingParametersEnum = DrawingParametersEnum.default) {
         this.DrawingParametersEnum = drawingParameters;

src/MusicalScore/Graphical/EngravingRules.ts

@@ -177,6 +177,8 @@ export class EngravingRules {
     private coloringEnabled: boolean;
     private colorFlags: boolean;
     private colorBeams: boolean;
+    private defaultColorNotehead: string;
+    private defaultColorStem: string;
     /** Whether to render a label for the composer of the piece at the top of the sheet. */
     private renderComposer: boolean;
     private renderTitle: boolean;
@@ -383,6 +385,8 @@ export class EngravingRules {
         this.coloringEnabled = true;
         this.colorBeams = true;
         this.colorFlags = true;
+        this.defaultColorNotehead = undefined;
+        this.defaultColorStem = undefined;
         this.renderComposer = true;
         this.renderTitle = true;
         this.renderSubtitle = true;
@@ -1320,6 +1324,18 @@ export class EngravingRules {
     public set ColorBeams(value: boolean) {
         this.colorBeams = value;
     }
+    public get DefaultColorNotehead(): string {
+        return this.defaultColorNotehead;
+    }
+    public set DefaultColorNotehead(value: string) {
+        this.defaultColorNotehead = value;
+    }
+    public get DefaultColorStem(): string {
+        return this.defaultColorStem;
+    }
+    public set DefaultColorStem(value: string) {
+        this.defaultColorStem = value;
+    }
     public get RenderComposer(): boolean {
         return this.renderComposer;
     }

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -217,17 +217,20 @@ export class VexFlowConverter {
         let xShift: number = 0;
         let slashNoteHead: boolean = false;
         const noteheadStyles: any = [];
-        const stemColor: string = gve.parentVoiceEntry.StemColorXml;
-        const stemStyle: Object = { fillStyle: stemColor, strokeStyle: stemColor };
         for (const note of notes) {
             if (numDots < note.numberOfDots) {
                 numDots = note.numberOfDots;
             }
 
             if (EngravingRules.Rules.ColoringEnabled) {
-                const noteheadColor: string = note.sourceNote.NoteheadColorXml;
+                let noteheadColor: string = note.sourceNote.NoteheadColorXml;
+                const defaultColorNotehead: string = EngravingRules.Rules.DefaultColorNotehead;
+                if (!noteheadColor && defaultColorNotehead) {
+                    noteheadColor = defaultColorNotehead;
+                }
                 if (noteheadColor) {
-                    noteheadStyles.push({fillStyle: noteheadColor, strokeStyle: noteheadColor});
+                    noteheadStyles.push({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
+                    note.sourceNote.NoteheadColor = noteheadColor;
                 } else {
                     noteheadStyles.push(undefined);
                 }
@@ -287,9 +290,7 @@ export class VexFlowConverter {
             noteheadStyles: noteheadStyles,
             slash: gve.parentVoiceEntry.GraceNoteSlash,
         };
-        if (stemColor && EngravingRules.Rules.ColoringEnabled) {
-            (<any>vfnoteStruct).stemStyle = stemStyle;
-        }
+
         if (gve.notes[0].sourceNote.IsCueNote) {
             (<any>vfnoteStruct).glyph_font_scale = Vex.Flow.DEFAULT_NOTATION_FONT_SCALE * Vex.Flow.GraceNote.SCALE;
             (<any>vfnoteStruct).stroke_px = Vex.Flow.GraceNote.LEDGER_LINE_OFFSET;
@@ -301,17 +302,27 @@ export class VexFlowConverter {
             vfnote = new Vex.Flow.StaveNote(vfnoteStruct);
         }
 
-        if (EngravingRules.Rules.ColoringEnabled) {
-            // TODO temporary fix until Vexflow PR is through (should be set by vfnotestruct.stem/noteheadStyles)
+        if (EngravingRules.Rules.ColoringEnabled) { // this method requires a Vexflow PR
+            const defaultColorStem: string = EngravingRules.Rules.DefaultColorStem;
+            let stemColor: string = gve.parentVoiceEntry.StemColorXml;
+            if (!stemColor && defaultColorStem) {
+                stemColor = defaultColorStem;
+            }
+            const stemStyle: Object = { fillStyle: stemColor, strokeStyle: stemColor };
+
             if (stemColor) {
+                gve.parentVoiceEntry.StemColor = stemColor;
                 vfnote.setStemStyle(stemStyle);
+                if (vfnote.flag && EngravingRules.Rules.ColorFlags) {
+                    vfnote.setFlagStyle(stemStyle);
+                }
             }
-            if (vfnote.flag && EngravingRules.Rules.ColorFlags) {
-                vfnote.setFlagStyle(stemStyle);
-            }
+
+            // color noteheads (again)
+            // 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) {
+                if (style !== undefined) {
                     vfnote.note_heads[i].setStyle(style);
                 }
             }

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -574,7 +574,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
 
                     let isGraceBeam: boolean = false;
                     let beamColor: string;
-                    const stemColorsXml: string[] = [];
+                    const stemColors: string[] = [];
                     for (const entry of voiceEntries) {
                         const note: Vex.Flow.StaveNote = ((<VexFlowVoiceEntry>entry).vfStaveNote as StaveNote);
                         if (note !== undefined) {
@@ -584,8 +584,8 @@ export class VexFlowMeasure extends GraphicalMeasure {
                         if (entry.parentVoiceEntry.IsGrace) {
                             isGraceBeam = true;
                         }
-                        if (entry.parentVoiceEntry.StemColorXml && EngravingRules.Rules.ColoringEnabled) {
-                            stemColorsXml.push(entry.parentVoiceEntry.StemColorXml);
+                        if (entry.parentVoiceEntry.StemColor && EngravingRules.Rules.ColoringEnabled) {
+                            stemColors.push(entry.parentVoiceEntry.StemColor);
                         }
                     }
                     if (notes.length > 1) {
@@ -595,9 +595,9 @@ export class VexFlowMeasure extends GraphicalMeasure {
                             (<any>vfBeam).render_options.beam_width = 3;
                             (<any>vfBeam).render_options.partial_beam_length = 4;
                         }
-                        if (stemColorsXml.length >= 2 && EngravingRules.Rules.ColorBeams) {
-                            beamColor = stemColorsXml[0];
-                            for (const stemColor of stemColorsXml) {
+                        if (stemColors.length >= 2 && EngravingRules.Rules.ColorBeams) {
+                            beamColor = stemColors[0];
+                            for (const stemColor of stemColors) {
                                 if (stemColor !== beamColor) {
                                     beamColor = undefined;
                                     break;

src/MusicalScore/VoiceData/Note.ts

@@ -56,8 +56,10 @@ export class Note {
     private stemDirectionXml: StemDirectionType;
     /** Color of the stem given in the XML Stem tag. RGB Hexadecimal, like #00FF00. */
     private stemColorXml: string;
-    /** Color of the note given in the XML Notehead tag. RGB Hexadecimal, like #00FF00. */
+    /** Color of the notehead given in the XML Notehead tag. RGB Hexadecimal, like #00FF00. */
     private noteheadColorXml: string;
+    /** Color of the notehead currently set. RGB Hexadecimal, like #00FF00. */
+    private noteheadColor: string;
 
     public get ParentVoiceEntry(): VoiceEntry {
         return this.voiceEntry;
@@ -152,6 +154,12 @@ export class Note {
     public set NoteheadColorXml(value: string) {
         this.noteheadColorXml = value;
     }
+    public get NoteheadColor(): string {
+        return this.noteheadColor;
+    }
+    public set NoteheadColor(value: string) {
+        this.noteheadColor = value;
+    }
 
     public isRest(): boolean {
         return this.Pitch === undefined;

src/MusicalScore/VoiceData/VoiceEntry.ts

@@ -54,7 +54,10 @@ export class VoiceEntry {
     /** Stem direction specified in the xml stem element. */
     private stemDirectionXml: StemDirectionType = StemDirectionType.Undefined;
     private stemDirection: StemDirectionType = StemDirectionType.Undefined;
+    /** Color of the stem given in XML. RGB Hexadecimal, like #00FF00. */
     private stemColorXml: string;
+    /** Color of the stem currently set. RGB Hexadecimal, like #00FF00. */
+    private stemColor: string;
 
     public get ParentSourceStaffEntry(): SourceStaffEntry {
         return this.parentSourceStaffEntry;
@@ -144,6 +147,12 @@ export class VoiceEntry {
     public set StemColorXml(value: string) {
         this.stemColorXml = value;
     }
+    public get StemColor(): string {
+        return this.stemColor;
+    }
+    public set StemColor(value: string) {
+        this.stemColor = value;
+    }
 
     public static isSupportedArticulation(articulation: ArticulationEnum): boolean {
         switch (articulation) {

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -14,6 +14,10 @@ export interface IOSMDOptions {
     backend?: string;
     /** Whether to enable coloring noteheads and stems by their XML color attribute. */
     coloringEnabled?: boolean;
+    /** Default color for a note head (without stem). Default black (undefined). */
+    defaultColorNoteHead?: string;
+    /** Default color for a note stem. Default black (undefined). */
+    defaultColorStem?: string;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
     /** Broad Parameters like compact or preview mode. */
@@ -51,10 +55,6 @@ export interface IOSMDOptions {
     tripletsBracketed?: boolean;
     /** Whether to draw hidden/invisible notes (print-object="no" in XML). Default false. Not yet supported. */ // TODO
     drawHiddenNotes?: boolean;
-    /** Default color for a note head (without stem). Default black. Not yet supported. */ // TODO
-    defaultColorNoteHead?: string;
-    /** Default color for a note stem. Default black. Not yet supported. */ // TODO
-    defaultColorStem?: string;
 }
 
 /** Handles [[IOSMDOptions]], e.g. returning default options with OSMDOptionsStandard() */

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -280,10 +280,10 @@ export class OpenSheetMusicDisplay {
             EngravingRules.Rules.SetWantedStemDirectionByXml = options.setWantedStemDirectionByXml;
         }
         if (options.defaultColorNoteHead) {
-            this.drawingParameters.defaultColorNoteHead = options.defaultColorNoteHead;
+            EngravingRules.Rules.DefaultColorNotehead = options.defaultColorNoteHead;
         }
         if (options.defaultColorStem) {
-            this.drawingParameters.defaultColorStem = options.defaultColorStem;
+            EngravingRules.Rules.DefaultColorStem = options.defaultColorStem;
         }
         if (options.tupletsRatioed) {
             EngravingRules.Rules.TupletsRatioed = true;