fix(color): notes are re-colored during render()

resolves #440
GraphicalVoiceEntry: add reColor()

Pitch: add key to ToString() so that a pitch/note is easier to identify

Cursor.iterator protected for easier access
part of #448

src/Common/DataObjects/Pitch.ts

@@ -298,8 +298,8 @@ export class Pitch {
     }
 
     public ToString(): string {
-        return "Note: " + this.fundamentalNote + ", octave: " + this.octave.toString() + ", alter: " +
-            this.accidental;
+        return "Key: " + Pitch.getNoteEnumString(this.fundamentalNote) + ", Note: " + this.fundamentalNote +
+        ", octave: " + this.octave.toString() + ", alter: " + this.accidental;
     }
 
     public OperatorEquals(p2: Pitch): boolean {

src/MusicalScore/Graphical/GraphicalNote.ts

@@ -7,7 +7,7 @@ import {Pitch} from "../../Common/DataObjects/Pitch";
 import {GraphicalObject} from "./GraphicalObject";
 import {MusicSheetCalculator} from "./MusicSheetCalculator";
 import {BoundingBox} from "./BoundingBox";
-import { GraphicalVoiceEntry } from "./GraphicalVoiceEntry";
+import {GraphicalVoiceEntry} from "./GraphicalVoiceEntry";
 
 /**
  * The graphical counterpart of a [[Note]]

src/MusicalScore/Graphical/GraphicalVoiceEntry.ts

@@ -1,9 +1,10 @@
-import {GraphicalObject} from "./GraphicalObject";
+import { GraphicalObject } from "./GraphicalObject";
 import { VoiceEntry } from "../VoiceData/VoiceEntry";
 import { BoundingBox } from "./BoundingBox";
 import { GraphicalNote } from "./GraphicalNote";
 import { GraphicalStaffEntry } from "./GraphicalStaffEntry";
 import { OctaveEnum } from "../VoiceData/Expressions/ContinuousExpressions/OctaveShift";
+import { VexFlowVoiceEntry } from "./VexFlow/VexFlowVoiceEntry";
 
 /**
  * The graphical counterpart of a [[VoiceEntry]].
@@ -32,4 +33,24 @@ export class GraphicalVoiceEntry extends GraphicalObject {
             return b.sourceNote.Pitch.getHalfTone() - a.sourceNote.Pitch.getHalfTone();
         });
     }
+
+    /** Re-color notes 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 {
+        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;
+                }
+                if (vfStaveNote.note_heads) { // see VexFlowConverter, needs Vexflow PR
+                    const noteheadColor: string = note.sourceNote.NoteheadColor;
+                    vfStaveNote.note_heads[i].setStyle({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
+                }
+            }
+        }
+    }
 }

src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -173,7 +173,7 @@ export abstract class MusicSheetCalculator {
     public calculate(): void {
         this.clearSystemsAndMeasures();
 
-        // delete graphicalObjects that will be recalculated and create the GraphicalObjects that strech over a single StaffEntry new.
+        // delete graphicalObjects (currently: ties) that will be recalculated, newly create GraphicalObjects streching over a single StaffEntry
         this.clearRecreatedObjects();
 
         this.createGraphicalTies();
@@ -676,8 +676,18 @@ export abstract class MusicSheetCalculator {
             const visiblegraphicalMeasures: GraphicalMeasure[] = [];
             for (let idx2: number = 0, len2: number = graphicalMeasures.length; idx2 < len2; ++idx2) {
                 const graphicalMeasure: GraphicalMeasure = allMeasures[idx][idx2];
+
                 if (graphicalMeasure.isVisible()) {
                     visiblegraphicalMeasures.push(graphicalMeasure);
+
+                    if (EngravingRules.Rules.ColoringEnabled) {
+                        // re-color notes (TODO: could be improved by Vexflow PR, see VexFlowConverter)
+                        for (const staffEntry of graphicalMeasure.staffEntries) {
+                            for (const gve of staffEntry.graphicalVoiceEntries) {
+                                gve.reColor();
+                            }
+                        }
+                    }
                 }
             }
             visibleMeasureList.push(visiblegraphicalMeasures);
@@ -689,6 +699,7 @@ export abstract class MusicSheetCalculator {
         for (let idx: number = 0, len: number = visibleMeasureList.length; idx < len; ++idx) {
             const gmlist: GraphicalMeasure[] = visibleMeasureList[idx];
             numberOfStaffLines = Math.max(gmlist.length, numberOfStaffLines);
+
             break;
         }
         if (numberOfStaffLines === 0) {

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -292,7 +292,7 @@ export class VexFlowConverter {
             clef: vfClefType,
             duration: duration,
             keys: keys,
-            noteheadStyles: noteheadStyles,
+            noteheadStyles: noteheadStyles, // this coloring direction requires a Vexflow PR
             slash: gve.parentVoiceEntry.GraceNoteSlash,
         };
 
@@ -307,7 +307,7 @@ export class VexFlowConverter {
             vfnote = new Vex.Flow.StaveNote(vfnoteStruct);
         }
 
-        if (EngravingRules.Rules.ColoringEnabled) { // this method requires a Vexflow PR
+        if (EngravingRules.Rules.ColoringEnabled) {
             const defaultColorStem: string = EngravingRules.Rules.DefaultColorStem;
             let stemColor: string = gve.parentVoiceEntry.StemColorXml;
             if (!stemColor && defaultColorStem) {

src/OpenSheetMusicDisplay/Cursor.ts

@@ -23,7 +23,7 @@ export class Cursor {
   private container: HTMLElement;
   private openSheetMusicDisplay: OpenSheetMusicDisplay;
   private manager: MusicPartManager;
-  private iterator: MusicPartManagerIterator;
+  protected iterator: MusicPartManagerIterator;
   private graphic: GraphicalMusicSheet;
   private hidden: boolean = true;
   private cursorElement: HTMLImageElement;