Merge tag '0.6.2'

Release 0.6.2

CHANGELOG.md

@@ -1,3 +1,15 @@
+<a name="0.6.2"></a>
+## [0.6.2](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/compare/0.6.1...0.6.2) (2018-10-25)
+
+### Bug Fixes
+
+* **noteheadshape:** add color attribute null check ([3d8da1e](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/3d8da1e))
+
+
+### Features
+
+* **color:** enable defaultColor options for notehead, stem, rest, ([3323664](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/3323664)), closes [#438](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/438), ([f1b33ab](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/f1b33ab))
+
 <a name="0.6.1"></a>
 ## [0.6.1](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/compare/0.6.0...0.6.1) (2018-10-25)
 

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,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opensheetmusicdisplay",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An open source JavaScript engine for displaying MusicXML based on VexFlow.",
   "main": "build/opensheetmusicdisplay.min.js",
   "typings": "build/dist/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay",
@@ -97,7 +97,7 @@
     "underscore-template-loader": "^1.0.0",
     "webpack": "^4.18.1",
     "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "3.1.9",
+    "webpack-dev-server": "3.1.10",
     "webpack-merge": "^4.1.2",
     "webpack-visualizer-plugin": "^0.1.11"
   },

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,9 @@ export class EngravingRules {
     private coloringEnabled: boolean;
     private colorFlags: boolean;
     private colorBeams: boolean;
+    private defaultColorNotehead: string;
+    private defaultColorRest: 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 +386,9 @@ export class EngravingRules {
         this.coloringEnabled = true;
         this.colorBeams = true;
         this.colorFlags = true;
+        this.defaultColorNotehead = undefined;
+        this.defaultColorRest = undefined;
+        this.defaultColorStem = undefined;
         this.renderComposer = true;
         this.renderTitle = true;
         this.renderSubtitle = true;
@@ -1320,6 +1326,24 @@ 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 DefaultColorRest(): string {
+        return this.defaultColorRest;
+    }
+    public set DefaultColorRest(value: string) {
+        this.defaultColorRest = 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,25 @@ 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;
+                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});
+                    noteheadStyles.push({ fillStyle: noteheadColor, strokeStyle: noteheadColor });
+                    note.sourceNote.NoteheadColor = noteheadColor;
                 } else {
                     noteheadStyles.push(undefined);
                 }
@@ -287,9 +295,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 +307,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/ScoreIO/InstrumentReader.ts

@@ -267,17 +267,19 @@ export class InstrumentReader {
           const noteheadNode: IXmlElement = xmlNode.element("notehead");
           if (noteheadNode) {
             const colorAttr: Attr = noteheadNode.attribute("color");
-            const colorValue: string = colorAttr.value;
-            if (colorValue.length === 7) { // #RGB hexa
-              noteheadColorXml = colorValue;
-            } else if (colorValue.length === 9) { // #ARGB hexa, first part alpha channel
-              noteheadColorXml = colorValue.substr(2);
+            if (colorAttr) {
+              const colorValue: string = colorAttr.value;
+              if (colorValue.length === 7) { // #RGB hexa
+                noteheadColorXml = colorValue;
+              } else if (colorValue.length === 9) { // #ARGB hexa, first part alpha channel
+                noteheadColorXml = colorValue.substr(2);
+              }
             }
           }
 
           let noteColorXml: string;
           const noteColorAttr: Attr = xmlNode.attribute("color");
-          if (noteColorAttr) {
+          if (noteColorAttr) { // can be undefined
             const noteColorValue: string = noteColorAttr.value;
             if (noteColorValue.length === 7) { // #RGB hexa
               noteColorXml = noteColorValue;

src/MusicalScore/ScoreIO/VoiceGenerator.ts

@@ -401,8 +401,7 @@ export class VoiceGenerator {
           if (noteElement.firstAttribute !== undefined) {
             playbackInstrumentId = noteElement.firstAttribute.value;
           }
-        }
-        if (noteElement.name === "notehead") {
+        } else if (noteElement.name === "notehead") {
           noteHeadShapeXml = noteElement.value;
           if (noteElement.attribute("filled") !== null) {
             noteHeadFilledXml = noteElement.attribute("filled").value === "yes";

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,12 @@ 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;
+    /** Default color for rests. Default black (undefined). */
+    defaultColorRest?: string;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
     /** Broad Parameters like compact or preview mode. */
@@ -51,10 +57,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

@@ -279,11 +279,14 @@ export class OpenSheetMusicDisplay {
         if (options.setWantedStemDirectionByXml !== undefined) {
             EngravingRules.Rules.SetWantedStemDirectionByXml = options.setWantedStemDirectionByXml;
         }
-        if (options.defaultColorNoteHead) {
-            this.drawingParameters.defaultColorNoteHead = options.defaultColorNoteHead;
+        if (options.defaultColorNotehead) {
+            EngravingRules.Rules.DefaultColorNotehead = options.defaultColorNotehead;
+        }
+        if (options.defaultColorRest) {
+            EngravingRules.Rules.DefaultColorRest = options.defaultColorRest;
         }
         if (options.defaultColorStem) {
-            this.drawingParameters.defaultColorStem = options.defaultColorStem;
+            EngravingRules.Rules.DefaultColorStem = options.defaultColorStem;
         }
         if (options.tupletsRatioed) {
             EngravingRules.Rules.TupletsRatioed = true;