fix(color): use color instead of colorXml for coloring notehead, stem.

color is set to color from Xml initially, but can be changed manually. The Xml information shouldn't be overwritten.
see #462 for more reasoning and an example.

rename Note.NoteHead to Notehead (that's the english spelling, one word)

src/MusicalScore/Graphical/GraphicalVoiceEntry.ts

@@ -48,7 +48,7 @@ export class GraphicalVoiceEntry extends GraphicalObject {
         for (let i: number = 0; i < this.notes.length; i++) {
             const note: GraphicalNote = this.notes[i];
 
-            let noteheadColor: string = note.sourceNote.NoteheadColorXml;
+            let noteheadColor: string = note.sourceNote.NoteheadColor;
 
             // DEBUG runtime coloring test
             /*const testColor: string = "#FF0000";
@@ -83,7 +83,7 @@ export class GraphicalVoiceEntry extends GraphicalObject {
         }
 
         // color stems
-        let stemColor: string = this.parentVoiceEntry.StemColorXml;
+        let stemColor: string = this.parentVoiceEntry.StemColor;
         if (!stemColor && defaultColorStem) {
             stemColor = defaultColorStem;
         }

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -111,7 +111,7 @@ export class VexFlowConverter {
         const acc: string = Pitch.accidentalVexflow(pitch.Accidental);
         // The octave seems to need a shift of three FIXME?
         const octave: number = pitch.Octave - note.Clef().OctaveOffset + 3;
-        const notehead: Notehead = note.sourceNote.NoteHead;
+        const notehead: Notehead = note.sourceNote.Notehead;
         let noteheadCode: string = "";
         if (notehead !== undefined) {
             noteheadCode = this.NoteHeadCode(notehead);
@@ -200,8 +200,8 @@ export class VexFlowConverter {
                 break;
             }
 
-            if (note.sourceNote.NoteHead) {
-                if (note.sourceNote.NoteHead.Shape === NoteHeadShape.SLASH) {
+            if (note.sourceNote.Notehead) {
+                if (note.sourceNote.Notehead.Shape === NoteHeadShape.SLASH) {
                     slashNoteHead = true;
                     // if we have slash heads and other heads in the voice entry, this will create the same head for all.
                     // same problem with numDots. The slash case should be extremely rare though.
@@ -248,7 +248,7 @@ export class VexFlowConverter {
 
         if (EngravingRules.Rules.ColoringEnabled) {
             const defaultColorStem: string = EngravingRules.Rules.DefaultColorStem;
-            let stemColor: string = gve.parentVoiceEntry.StemColorXml;
+            let stemColor: string = gve.parentVoiceEntry.StemColor;
             if (!stemColor && defaultColorStem) {
                 stemColor = defaultColorStem;
             }

src/MusicalScore/ScoreIO/VoiceGenerator.ts

@@ -419,15 +419,18 @@ export class VoiceGenerator {
     note.PrintObject = printObject;
     note.IsCueNote = isCueNote;
     note.StemDirectionXml = stemDirectionXml; // maybe unnecessary, also in VoiceEntry
-    note.NoteheadColorXml = noteheadColorXml;
-    note.PlaybackInstrumentId = playbackInstrumentId;
     if (noteheadShapeXml !== undefined && noteheadShapeXml !== "normal") {
-      note.NoteHead = new Notehead(note, noteheadShapeXml, noteheadFilledXml);
+      note.Notehead = new Notehead(note, noteheadShapeXml, noteheadFilledXml);
     } // if normal, leave note head undefined to save processing/runtime
+    note.NoteheadColorXml = noteheadColorXml; // color set in Xml, shouldn't be changed.
+    note.NoteheadColor = noteheadColorXml; // color currently used
+    note.PlaybackInstrumentId = playbackInstrumentId;
     this.currentVoiceEntry.Notes.push(note);
     this.currentVoiceEntry.StemDirectionXml = stemDirectionXml;
     if (stemColorXml) {
       this.currentVoiceEntry.StemColorXml = stemColorXml;
+      this.currentVoiceEntry.StemColor = stemColorXml;
+      note.StemColorXml = stemColorXml;
     }
     if (node.elements("beam") && !chord) {
       this.createBeam(node, note);
@@ -447,6 +450,7 @@ export class VoiceGenerator {
     restNote.PrintObject = printObject;
     restNote.IsCueNote = isCueNote;
     restNote.NoteheadColorXml = noteheadColorXml;
+    restNote.NoteheadColor = noteheadColorXml;
     this.currentVoiceEntry.Notes.push(restNote);
     if (this.openBeam !== undefined) {
       this.openBeam.ExtendedNoteList.push(restNote);

src/MusicalScore/VoiceData/Note.ts

@@ -54,11 +54,22 @@ export class Note {
     private isCueNote: boolean;
     /** The stem direction asked for in XML. Not necessarily final or wanted stem direction. */
     private stemDirectionXml: StemDirectionType;
-    /** Color of the stem given in the XML Stem tag. RGB Hexadecimal, like #00FF00. */
+    /** Color of the stem given in the XML Stem tag. RGB Hexadecimal, like #00FF00.
+     * This is not used for rendering, which takes VoiceEntry.StemColor.
+     * It is merely given in the note's stem element in XML and stored here for reference.
+     * So, to read or change the stem color of a note, modify note.ParentVoiceEntry.StemColor.
+     */
     private stemColorXml: string;
-    /** Color of the notehead given in the XML Notehead tag. RGB Hexadecimal, like #00FF00. */
+    /** Color of the notehead given in the XML Notehead tag. RGB Hexadecimal, like #00FF00.
+     * This should not be changed, instead noteheadColor is used and modifiable for Rendering.
+     * Needs to be stored here and not in Note.Notehead,
+     * because Note.Notehead is undefined for normal Noteheads to save space and time.
+     */
     private noteheadColorXml: string;
-    /** Color of the notehead currently set. RGB Hexadecimal, like #00FF00. */
+    /** Color of the notehead currently set. RGB Hexadecimal, like #00FF00.
+     * Needs to be stored here and not in Note.Notehead,
+     * because Note.Notehead is undefined for normal Noteheads to save space and time.
+     */
     private noteheadColor: string;
 
     public get ParentVoiceEntry(): VoiceEntry {
@@ -88,6 +99,12 @@ export class Note {
     public set NoteBeam(value: Beam) {
         this.beam = value;
     }
+    public set Notehead(value: Notehead) {
+        this.notehead = value;
+    }
+    public get Notehead(): Notehead {
+        return this.notehead;
+    }
     public get NoteTuplet(): Tuplet {
         return this.tuplet;
     }
@@ -112,12 +129,6 @@ export class Note {
     public set PlaybackInstrumentId(value: string) {
         this.playbackInstrumentId = value;
     }
-    public set NoteHead(value: Notehead) {
-        this.notehead = value;
-    }
-    public get NoteHead(): Notehead {
-        return this.notehead;
-    }
     public get PrintObject(): boolean {
         return this.printObject;
     }

src/MusicalScore/VoiceData/Notehead.ts

@@ -22,6 +22,7 @@ export class Notehead {
     private filled: boolean;
     /** the [[Note]] this NoteHead belongs to. */
     private sourceNote: Note;
+    // note that color is stored in the sourceNote, because note.Notehead is undefined for normal noteheads.
 
     /** Sets the note head's shape from XML parameters.
      * @param shapeTypeXml The XML shape.