Feat(Drawer): add drawer.DrawBoundingBox() as standalone method (#969, #961)

squash merge pr #969

* drawBoundingBox as standalone method (#961)

src/MusicalScore/Graphical/GraphicalLine.ts

@@ -3,17 +3,21 @@ import {OutlineAndFillStyleEnum} from "./DrawingEnums";
 import {PointF2D} from "../../Common/DataObjects/PointF2D";
 
 export class GraphicalLine {
-    constructor(start: PointF2D, end: PointF2D, width: number = 0, styleEnum: OutlineAndFillStyleEnum = OutlineAndFillStyleEnum.BaseWritingColor) {
+    constructor(start: PointF2D, end: PointF2D, width: number = 0,
+        styleEnum: OutlineAndFillStyleEnum = OutlineAndFillStyleEnum.BaseWritingColor,
+        colorHex: string = undefined) {
         this.start = start;
         this.end = end;
         this.width = width;
         this.styleId = <number>styleEnum;
+        this.colorHex = colorHex;
     }
     public styleId: number;
 
     private start: PointF2D;
     private end: PointF2D;
     private width: number;
+    public colorHex: string; // will override styleId if not undefined
 
     public get Start(): PointF2D {
         return this.start;

src/MusicalScore/Graphical/MusicSheetDrawer.ts

@@ -103,7 +103,7 @@ export abstract class MusicSheetDrawer {
     public drawLineAsHorizontalRectangle(line: GraphicalLine, layer: number): void {
         let rectangle: RectangleF2D = new RectangleF2D(line.Start.x, line.End.y - line.Width / 2, line.End.x - line.Start.x, line.Width);
         rectangle = this.applyScreenTransformationForRect(rectangle);
-        this.renderRectangle(rectangle, layer, line.styleId);
+        this.renderRectangle(rectangle, layer, line.styleId, line.colorHex);
     }
 
     public drawLineAsVerticalRectangle(line: GraphicalLine, layer: number): void {
@@ -218,7 +218,7 @@ export abstract class MusicSheetDrawer {
         // empty
     }
 
-    protected renderRectangle(rectangle: RectangleF2D, layer: number, styleId: number, alpha: number = 1): void {
+    protected renderRectangle(rectangle: RectangleF2D, layer: number, styleId: number, colorHex: string = undefined, alpha: number = 1): void {
         throw new Error("not implemented");
     }
 
@@ -531,32 +531,44 @@ export abstract class MusicSheetDrawer {
             }
         }
         if (typeMatch || dataObjectString === type) {
-            let tmpRect: RectangleF2D = new RectangleF2D(startBox.AbsolutePosition.x + startBox.BorderMarginLeft,
-                                                         startBox.AbsolutePosition.y + startBox.BorderMarginTop,
-                                                         startBox.BorderMarginRight - startBox.BorderMarginLeft,
-                                                         startBox.BorderMarginBottom - startBox.BorderMarginTop);
+            this.drawBoundingBox(startBox, undefined, true, dataObjectString, layer);
+        }
+        layer++;
+        startBox.ChildElements.forEach(bb => this.drawBoundingBoxes(bb, layer, type));
+    }
+
+    public drawBoundingBox(bbox: BoundingBox,
+        color: string = undefined, drawCross: boolean = false, labelText: string = undefined, layer: number = 0
+    ): void {
+        let tmpRect: RectangleF2D = new RectangleF2D(bbox.AbsolutePosition.x + bbox.BorderMarginLeft,
+            bbox.AbsolutePosition.y + bbox.BorderMarginTop,
+            bbox.BorderMarginRight - bbox.BorderMarginLeft,
+            bbox.BorderMarginBottom - bbox.BorderMarginTop);
+        if (drawCross) {
             this.drawLineAsHorizontalRectangle(new GraphicalLine(
-                                                             new PointF2D(startBox.AbsolutePosition.x - 1, startBox.AbsolutePosition.y),
-                                                             new PointF2D(startBox.AbsolutePosition.x + 1, startBox.AbsolutePosition.y),
-                                                             0.1,
-                                                             OutlineAndFillStyleEnum.BaseWritingColor),
-                                               layer - 1);
+                new PointF2D(bbox.AbsolutePosition.x - 1, bbox.AbsolutePosition.y),
+                new PointF2D(bbox.AbsolutePosition.x + 1, bbox.AbsolutePosition.y),
+                0.1,
+                OutlineAndFillStyleEnum.BaseWritingColor,
+                color),
+                layer - 1);
 
             this.drawLineAsVerticalRectangle(new GraphicalLine(
-                                                                 new PointF2D(startBox.AbsolutePosition.x, startBox.AbsolutePosition.y - 1),
-                                                                 new PointF2D(startBox.AbsolutePosition.x, startBox.AbsolutePosition.y + 1),
-                                                                 0.1,
-                                                                 OutlineAndFillStyleEnum.BaseWritingColor),
-                                             layer - 1);
-
-            tmpRect = this.applyScreenTransformationForRect(tmpRect);
-            this.renderRectangle(tmpRect, <number>GraphicalLayers.Background, layer, 0.5);
-            const label: Label = new Label(dataObjectString);
+                new PointF2D(bbox.AbsolutePosition.x, bbox.AbsolutePosition.y - 1),
+                new PointF2D(bbox.AbsolutePosition.x, bbox.AbsolutePosition.y + 1),
+                0.1,
+                OutlineAndFillStyleEnum.BaseWritingColor,
+                color),
+                layer - 1);
+        }
+
+        tmpRect = this.applyScreenTransformationForRect(tmpRect);
+        this.renderRectangle(tmpRect, <number>GraphicalLayers.Background, layer, color, 0.5);
+        if (labelText) {
+            const label: Label = new Label(labelText);
             this.renderLabel(new GraphicalLabel(label, 0.8, TextAlignmentEnum.CenterCenter, this.rules),
-                             layer, tmpRect.width, tmpRect.height, tmpRect.height, new PointF2D(tmpRect.x, tmpRect.y + 12));
+                layer, tmpRect.width, tmpRect.height, tmpRect.height, new PointF2D(tmpRect.x, tmpRect.y + 12));
         }
-        layer++;
-        startBox.ChildElements.forEach(bb => this.drawBoundingBoxes(bb, layer, type));
     }
 
     private drawMarkedAreas(system: MusicSystem): void {

src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -112,9 +112,13 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         this.CanvasRenderingCtx.restore();
         this.CanvasRenderingCtx.font = old;
     }
-    public renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number = 1): void {
+    public renderRectangle(rectangle: RectangleF2D, styleId: number, colorHex: string, alpha: number = 1): void {
         const old: string | CanvasGradient | CanvasPattern = this.CanvasRenderingCtx.fillStyle;
-        this.CanvasRenderingCtx.fillStyle = VexFlowConverter.style(styleId);
+        if (colorHex) {
+            this.CanvasRenderingCtx.fillStyle = colorHex;
+        } else {
+            this.CanvasRenderingCtx.fillStyle = VexFlowConverter.style(styleId);
+        }
         this.CanvasRenderingCtx.globalAlpha = alpha;
         this.ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
         this.CanvasRenderingCtx.fillStyle = old;

src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -124,9 +124,13 @@ export class SvgVexFlowBackend extends VexFlowBackend {
         this.ctx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
         this.ctx.restore();
     }
-    public renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number = 1): void {
+    public renderRectangle(rectangle: RectangleF2D, styleId: number, colorHex: string, alpha: number = 1): void {
         this.ctx.save();
-        this.ctx.attributes.fill = VexFlowConverter.style(styleId);
+        if (colorHex) {
+            this.ctx.attributes.fill = colorHex;
+        } else {
+            this.ctx.attributes.fill = VexFlowConverter.style(styleId);
+        }
         this.ctx.attributes["fill-opacity"] = alpha;
         this.ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
         this.ctx.restore();

src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -99,7 +99,7 @@ public abstract getContext(): Vex.IRenderContext;
    * @param styleId the style id
    * @param alpha alpha value between 0 and 1
    */
-  public abstract renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number): void;
+  public abstract renderRectangle(rectangle: RectangleF2D, styleId: number, colorHex: string, alpha: number): void;
 
   public abstract renderLine(start: PointF2D, stop: PointF2D, color: string, lineWidth: number): void;
 

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -88,7 +88,6 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         this.backend = this.backends[page.PageNumber - 1]; // TODO we may need to set this in a couple of other places. this.pageIdx is a bad solution
         super.drawPage(page);
         this.pageIdx += 1;
-        this.backend = this.backends[this.pageIdx];
     }
 
     public clear(): void {
@@ -446,8 +445,8 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
      * @param styleId the style id
      * @param alpha alpha value between 0 and 1
      */
-    protected renderRectangle(rectangle: RectangleF2D, layer: number, styleId: number, alpha: number): void {
-        this.backend.renderRectangle(rectangle, styleId, alpha);
+    protected renderRectangle(rectangle: RectangleF2D, layer: number, styleId: number, colorHex: string, alpha: number): void {
+        this.backend.renderRectangle(rectangle, styleId, colorHex, alpha);
     }
 
     /**