fix(color): set default colors during render().

resolves #440
refactor(color): set color only during render() which calls gve.color(), remove that code from VexFlowConverter

src/MusicalScore/Graphical/GraphicalVoiceEntry.ts

@@ -5,6 +5,7 @@ import { GraphicalNote } from "./GraphicalNote";
 import { GraphicalStaffEntry } from "./GraphicalStaffEntry";
 import { OctaveEnum } from "../VoiceData/Expressions/ContinuousExpressions/OctaveShift";
 import { VexFlowVoiceEntry } from "./VexFlow/VexFlowVoiceEntry";
+import { EngravingRules } from "./EngravingRules";
 
 /**
  * The graphical counterpart of a [[VoiceEntry]].
@@ -34,23 +35,66 @@ export class GraphicalVoiceEntry extends GraphicalObject {
         });
     }
 
-    /** Re-color notes by setting their Vexflow styles.
+    /** (Re-)color notes and stems by setting their Vexflow styles.
      * Could be made redundant by a Vexflow PR, but Vexflow needs more solid and permanent color methods/variables for that
      * See VexFlowConverter.StaveNote()
      */
-    public reColor(): void {
+    public color(): void {
+        const defaultColorNotehead: string = EngravingRules.Rules.DefaultColorNotehead;
+        const defaultColorRest: string = EngravingRules.Rules.DefaultColorRest;
+        const defaultColorStem: string = EngravingRules.Rules.DefaultColorStem;
+
+        const vfStaveNote: any = (<VexFlowVoiceEntry>(this as any)).vfStaveNote;
         for (let i: number = 0; i < this.notes.length; i++) {
             const note: GraphicalNote = this.notes[i];
-            if (note.sourceNote.NoteheadColor) {
-                const vfStaveNote: any = (<VexFlowVoiceEntry>(this as any)).vfStaveNote;
-                if (!vfStaveNote) {
-                    return;
+
+            let noteheadColor: string = note.sourceNote.NoteheadColorXml;
+
+            // DEBUG runtime coloring test
+            /*const testColor: string = "#FF0000";
+            if (i === 2 && Math.random() < 0.1 && note.sourceNote.NoteheadColor !== testColor) {
+                const measureNumber: number = note.parentVoiceEntry.parentStaffEntry.parentMeasure.MeasureNumber;
+                noteheadColor = testColor;
+                console.log("color changed to " + noteheadColor + " of this note:\n" + note.sourceNote.Pitch.ToString() +
+                    ", in measure #" + measureNumber);
+            }*/
+
+            if (!noteheadColor) {
+                if (!note.sourceNote.isRest() && defaultColorNotehead) {
+                    noteheadColor = defaultColorNotehead;
+                } else if (note.sourceNote.isRest() && defaultColorRest) {
+                    noteheadColor = defaultColorRest;
                 }
+            }
+            if (noteheadColor) {
+                note.sourceNote.NoteheadColor = noteheadColor;
+            } else {
+                continue;
+            }
+
+            if (vfStaveNote) {
                 if (vfStaveNote.note_heads) { // see VexFlowConverter, needs Vexflow PR
-                    const noteheadColor: string = note.sourceNote.NoteheadColor;
-                    vfStaveNote.note_heads[i].setStyle({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
+                    const notehead: any = vfStaveNote.note_heads[i];
+                    if (notehead) {
+                        vfStaveNote.note_heads[i].setStyle({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
+                    }
                 }
             }
         }
+
+        // color stems
+        let stemColor: string = this.parentVoiceEntry.StemColorXml;
+        if (!stemColor && defaultColorStem) {
+            stemColor = defaultColorStem;
+        }
+        const stemStyle: Object = { fillStyle: stemColor, strokeStyle: stemColor };
+
+        if (stemColor && vfStaveNote.setStemStyle) {
+            this.parentVoiceEntry.StemColor = stemColor;
+            vfStaveNote.setStemStyle(stemStyle);
+            if (vfStaveNote.flag && vfStaveNote.setFlagStyle && EngravingRules.Rules.ColorFlags) {
+                vfStaveNote.setFlagStyle(stemStyle);
+            }
+        }
     }
 }

src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -681,10 +681,10 @@ export abstract class MusicSheetCalculator {
                     visiblegraphicalMeasures.push(graphicalMeasure);
 
                     if (EngravingRules.Rules.ColoringEnabled) {
-                        // re-color notes (TODO: could be improved by Vexflow PR, see VexFlowConverter)
+                        // (re-)color notes
                         for (const staffEntry of graphicalMeasure.staffEntries) {
                             for (const gve of staffEntry.graphicalVoiceEntries) {
-                                gve.reColor();
+                                gve.color();
                             }
                         }
                     }

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -216,31 +216,11 @@ export class VexFlowConverter {
         let alignCenter: boolean = false;
         let xShift: number = 0;
         let slashNoteHead: boolean = false;
-        const noteheadStyles: any = [];
         for (const note of notes) {
             if (numDots < note.numberOfDots) {
                 numDots = note.numberOfDots;
             }
 
-            if (EngravingRules.Rules.ColoringEnabled) {
-                let noteheadColor: string = note.sourceNote.NoteheadColorXml;
-                const defaultColorNotehead: string = EngravingRules.Rules.DefaultColorNotehead;
-                const defaultColorRest: string = EngravingRules.Rules.DefaultColorRest;
-                if (!noteheadColor) {
-                    if (!note.sourceNote.isRest() && defaultColorNotehead) {
-                        noteheadColor = defaultColorNotehead;
-                    } else if (note.sourceNote.isRest() && defaultColorRest) {
-                        noteheadColor = defaultColorRest;
-                    }
-                }
-                if (noteheadColor) {
-                    noteheadStyles.push({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
-                    note.sourceNote.NoteheadColor = noteheadColor;
-                } else {
-                    noteheadStyles.push(undefined);
-                }
-            }
-
             // if it is a rest:
             if (note.sourceNote.isRest()) {
                 keys = ["b/4"];
@@ -292,7 +272,6 @@ export class VexFlowConverter {
             clef: vfClefType,
             duration: duration,
             keys: keys,
-            noteheadStyles: noteheadStyles, // this coloring direction requires a Vexflow PR
             slash: gve.parentVoiceEntry.GraceNoteSlash,
         };
 
@@ -322,15 +301,6 @@ export class VexFlowConverter {
                     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 !== undefined) {
-                    vfnote.note_heads[i].setStyle(style);
-                }
-            }
         }
 
         vfnote.x_shift = xShift;

test/data/OSMD_function_test_color.musicxml

@@ -537,7 +537,7 @@
         <notehead color="#AA5500">normal</notehead>
         <staff>1</staff>
         </note>
-      <note>
+      <note color="#AAAAAA">
         <rest/>
         <duration>2</duration>
         <voice>1</voice>
@@ -602,7 +602,7 @@
           </direction-type>
         <staff>2</staff>
         </direction>
-      <note>
+      <note color="#CCCCCC">
         <rest/>
         <duration>2</duration>
         <voice>5</voice>
@@ -611,7 +611,7 @@
         </note>
       </measure>
     <measure number="3" width="349.44">
-      <note>
+      <note color="#FF00FF">
         <rest/>
         <duration>2</duration>
         <voice>1</voice>
@@ -666,7 +666,7 @@
         <stem>up</stem>
         <staff>1</staff>
         </note>
-      <note>
+      <note color="#FF00FF">
         <rest/>
         <duration>1</duration>
         <voice>1</voice>