feat(color): can set defaultColorLabel, defaultColorTitle

part of #440

src/MusicalScore/Graphical/EngravingRules.ts

@@ -180,6 +180,8 @@ export class EngravingRules {
     private defaultColorNotehead: string;
     private defaultColorRest: string;
     private defaultColorStem: string;
+    private defaultColorLabel: string;
+    private defaultColorTitle: string;
     /** Whether to render a label for the composer of the piece at the top of the sheet. */
     private renderComposer: boolean;
     private renderTitle: boolean;
@@ -386,9 +388,11 @@ export class EngravingRules {
         this.coloringEnabled = true;
         this.colorBeams = true;
         this.colorFlags = true;
-        this.defaultColorNotehead = undefined;
+        this.defaultColorNotehead = undefined; // undefined colors mean black
         this.defaultColorRest = undefined;
         this.defaultColorStem = undefined;
+        this.defaultColorLabel = undefined;
+        this.defaultColorTitle = undefined;
         this.renderComposer = true;
         this.renderTitle = true;
         this.renderSubtitle = true;
@@ -1344,6 +1348,18 @@ export class EngravingRules {
     public set DefaultColorStem(value: string) {
         this.defaultColorStem = value;
     }
+    public get DefaultColorLabel(): string {
+        return this.defaultColorLabel;
+    }
+    public set DefaultColorLabel(value: string) {
+        this.defaultColorLabel = value;
+    }
+    public get DefaultColorTitle(): string {
+        return this.defaultColorTitle;
+    }
+    public set DefaultColorTitle(value: string) {
+        this.defaultColorTitle = value;
+    }
     public get RenderComposer(): boolean {
         return this.renderComposer;
     }

src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -1589,8 +1589,10 @@ export abstract class MusicSheetCalculator {
 
     protected calculateSheetLabelBoundingBoxes(): void {
         const musicSheet: MusicSheet = this.graphicalMusicSheet.ParentMusicSheet;
+        const defaultColorTitle: string = EngravingRules.Rules.DefaultColorTitle; // can be undefined => black
         if (musicSheet.Title !== undefined && EngravingRules.Rules.RenderTitle) {
             const title: GraphicalLabel = new GraphicalLabel(musicSheet.Title, this.rules.SheetTitleHeight, TextAlignmentEnum.CenterBottom);
+            title.Label.colorDefault = defaultColorTitle;
             this.graphicalMusicSheet.Title = title;
             title.setLabelPositionAndShapeBorders();
         } else if (!EngravingRules.Rules.RenderTitle) {
@@ -1598,6 +1600,7 @@ export abstract class MusicSheetCalculator {
         }
         if (musicSheet.Subtitle !== undefined && EngravingRules.Rules.RenderSubtitle) {
             const subtitle: GraphicalLabel = new GraphicalLabel(musicSheet.Subtitle, this.rules.SheetSubtitleHeight, TextAlignmentEnum.CenterCenter);
+            subtitle.Label.colorDefault = defaultColorTitle;
             this.graphicalMusicSheet.Subtitle = subtitle;
             subtitle.setLabelPositionAndShapeBorders();
         } else if (!EngravingRules.Rules.RenderSubtitle) {
@@ -1605,6 +1608,7 @@ export abstract class MusicSheetCalculator {
         }
         if (musicSheet.Composer !== undefined && EngravingRules.Rules.RenderComposer) {
             const composer: GraphicalLabel = new GraphicalLabel(musicSheet.Composer, this.rules.SheetComposerHeight, TextAlignmentEnum.RightCenter);
+            composer.Label.colorDefault = defaultColorTitle;
             this.graphicalMusicSheet.Composer = composer;
             composer.setLabelPositionAndShapeBorders();
         } else if (!EngravingRules.Rules.RenderComposer) {
@@ -1612,6 +1616,7 @@ export abstract class MusicSheetCalculator {
         }
         if (musicSheet.Lyricist !== undefined && EngravingRules.Rules.RenderLyricist) {
             const lyricist: GraphicalLabel = new GraphicalLabel(musicSheet.Lyricist, this.rules.SheetAuthorHeight, TextAlignmentEnum.LeftCenter);
+            lyricist.Label.colorDefault = defaultColorTitle;
             this.graphicalMusicSheet.Lyricist = lyricist;
             lyricist.setLabelPositionAndShapeBorders();
         } else if (!EngravingRules.Rules.RenderLyricist) {

src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -55,14 +55,18 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         this.canvasRenderingCtx.translate(x, y);
     }
     public renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
-                      heightInPixel: number, screenPosition: PointF2D): void  {
+                      heightInPixel: number, screenPosition: PointF2D, color: string = undefined): void  {
         const old: string = this.canvasRenderingCtx.font;
+        this.canvasRenderingCtx.save();
         this.canvasRenderingCtx.font = VexFlowConverter.font(
             fontHeight,
             fontStyle,
             font
         );
+        this.canvasRenderingCtx.fillStyle = color;
+        this.canvasRenderingCtx.strokeStyle = color;
         this.canvasRenderingCtx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
+        this.canvasRenderingCtx.restore();
         this.canvasRenderingCtx.font = old;
     }
     public renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number = 1): void {

src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -50,9 +50,13 @@ export class SvgVexFlowBackend extends VexFlowBackend {
         // TODO: implement this
     }
     public renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
-                      heightInPixel: number, screenPosition: PointF2D): void {
+                      heightInPixel: number, screenPosition: PointF2D, color: string = undefined): void {
         this.ctx.save();
 
+        if (color) {
+            this.ctx.attributes.fill = color;
+            this.ctx.attributes.stroke = color;
+        }
         this.ctx.setFont("Times New Roman", fontHeight, VexFlowConverter.fontStyle(fontStyle));
         // font size is set by VexFlow in `pt`. This overwrites the font so it's set to px instead
         this.ctx.attributes["font-size"] = `${fontHeight}px`;

src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -43,7 +43,7 @@ export abstract class VexFlowBackend {
 
   public abstract translate(x: number, y: number): void;
   public abstract renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
-                             heightInPixel: number, screenPosition: PointF2D): void;
+                             heightInPixel: number, screenPosition: PointF2D, color?: string): void;
   /**
    * Renders a rectangle with the given style to the screen.
    * It is given in screen coordinates.

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -341,7 +341,14 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
                           bitmapHeight: number, heightInPixel: number, screenPosition: PointF2D): void {
         const height: number = graphicalLabel.Label.fontHeight * unitInPixels;
         const { fontStyle, font, text } = graphicalLabel.Label;
-        this.backend.renderText(height, fontStyle, font, text, heightInPixel, screenPosition);
+        let color: string;
+        if (EngravingRules.Rules.ColoringEnabled) {
+            color = graphicalLabel.Label.colorDefault;
+            if (!color) {
+                color = EngravingRules.Rules.DefaultColorLabel;
+            }
+        }
+        this.backend.renderText(height, fontStyle, font, text, heightInPixel, screenPosition, color);
     }
 
     /**

src/MusicalScore/Label.ts

@@ -17,6 +17,7 @@ export class Label {
 
     public text: string;
     public color: OSMDColor;
+    public colorDefault: string; // TODO this is Vexflow format, convert to OSMDColor. for now convenient for default colors.
     public font: Fonts;
     public fontStyle: FontStyles;
     public fontHeight: number;

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -18,6 +18,10 @@ export interface IOSMDOptions {
     defaultColorStem?: string;
     /** Default color for rests. Default black (undefined). */
     defaultColorRest?: string;
+    /** Default color for Labels like title or lyrics. Default black (undefined). */
+    defaultColorLabel?: string;
+    /** Default color for labels in the title. Overrides defaultColorLabel for title labels like composer. Default black (undefined). */
+    defaultColorTitle?: string;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
     /** Broad Parameters like compact or preview mode. */

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -288,6 +288,12 @@ export class OpenSheetMusicDisplay {
         if (options.defaultColorStem) {
             EngravingRules.Rules.DefaultColorStem = options.defaultColorStem;
         }
+        if (options.defaultColorLabel) {
+            EngravingRules.Rules.DefaultColorLabel = options.defaultColorLabel;
+        }
+        if (options.defaultColorTitle) {
+            EngravingRules.Rules.DefaultColorTitle = options.defaultColorTitle;
+        }
         if (options.tupletsRatioed) {
             EngravingRules.Rules.TupletsRatioed = true;
         }