fix(Bbox/Cursor): fix bbox and cursor position for whole rests (#383)

* fix(bbox): fix whole rest bbox, add GraphicalNotes, VoiceEntries to Demo Show Bbox options

* demo: rename all Show Bbox options to be similar to their class names

* WholeRests: create EngravingRule for spacing, works for any spacing

fix #380

demo/index.html

@@ -82,11 +82,13 @@
             <option value="none">None</option>
             <option value="all">All</option>
             <option value="VexFlowMeasure">Measures</option>
-            <option value="VexFlowStaffEntry">Staff entries</option>
+            <option value="VexFlowGraphicalNote">GraphicalNotes</option>
+            <option value="VexFlowVoiceEntry">VoiceEntries</option>
+            <option value="VexFlowStaffEntry">StaffEntries</option>
             <option value="GraphicalLabel">Labels</option>
-            <option value="VexFlowStaffLine">Staff lines</option>
-            <option value="SystemLine">System lines</option>
-            <option value="StaffLineActivitySymbol">Activity symbols</option>
+            <option value="VexFlowStaffLine">StaffLines</option>
+            <option value="SystemLine">SystemLines</option>
+            <option value="StaffLineActivitySymbol">ActivitySymbols</option>
         </select>
     </div>
     <div class="column">

src/MusicalScore/Graphical/EngravingRules.ts

@@ -69,7 +69,7 @@ export class EngravingRules {
     private distanceOffsetBetweenTwoHorizontallyCrossedWedges: number;
     private wedgeMinLength: number;
     private distanceBetweenAdjacentDynamics: number;
-    private tempoChangeMeasureValitidy: number;
+    private tempoChangeMeasureValidity: number;
     private tempoContinousFactor: number;
     private staccatoScalingFactor: number;
     private betweenDotsDistance: number;
@@ -140,6 +140,7 @@ export class EngravingRules {
     private minNoteDistance: number;
     private subMeasureXSpacingThreshold: number;
     private measureDynamicsMaxScalingFactor: number;
+    private wholeRestXShiftVexflow: number;
     private maxInstructionsConstValue: number;
     private noteDistances: number[] = [1.0, 1.0, 1.3, 1.6, 2.0, 2.5, 3.0, 4.0];
     private noteDistancesScalingFactors: number[] = [1.0, 2.0, 4.0, 8.0, 16.0, 32.0, 64.0, 128.0];
@@ -218,7 +219,7 @@ export class EngravingRules {
         this.graceNoteScalingFactor = 0.6;
         this.graceNoteXOffset = 0.2;
 
-        // GraceNote Variables
+        // Wedge Variables
         this.wedgeOpeningLength = 1.2;
         this.wedgeMeasureEndOpeningLength = 0.75;
         this.wedgeMeasureBeginOpeningLength = 0.75;
@@ -230,8 +231,8 @@ export class EngravingRules {
         this.wedgeMinLength = 2.0;
         this.distanceBetweenAdjacentDynamics = 0.75;
 
-        // GraceNote Variables
-        this.tempoChangeMeasureValitidy = 4;
+        // Tempo Variables
+        this.tempoChangeMeasureValidity = 4;
         this.tempoContinousFactor = 0.7;
 
         // various
@@ -316,6 +317,7 @@ export class EngravingRules {
         this.minNoteDistance = 2.0;
         this.subMeasureXSpacingThreshold = 35;
         this.measureDynamicsMaxScalingFactor = 2.5;
+        this.wholeRestXShiftVexflow = -2.5; // VexFlow draws rest notes too far to the right
 
         this.populateDictionaries();
         try {
@@ -708,11 +710,11 @@ export class EngravingRules {
     public set DistanceBetweenAdjacentDynamics(value: number) {
         this.distanceBetweenAdjacentDynamics = value;
     }
-    public get TempoChangeMeasureValitidy(): number {
-        return this.tempoChangeMeasureValitidy;
+    public get TempoChangeMeasureValidity(): number {
+        return this.tempoChangeMeasureValidity;
     }
-    public set TempoChangeMeasureValitidy(value: number) {
-        this.tempoChangeMeasureValitidy = value;
+    public set TempoChangeMeasureValidity(value: number) {
+        this.tempoChangeMeasureValidity = value;
     }
     public get TempoContinousFactor(): number {
         return this.tempoContinousFactor;
@@ -1128,6 +1130,12 @@ export class EngravingRules {
     public set MeasureDynamicsMaxScalingFactor(value: number) {
         this.measureDynamicsMaxScalingFactor = value;
     }
+    public get WholeRestXShiftVexflow(): number {
+        return this.wholeRestXShiftVexflow;
+    }
+    public set WholeRestXShiftVexflow(value: number) {
+        this.wholeRestXShiftVexflow = value;
+    }
     public get MaxInstructionsConstValue(): number {
         return this.maxInstructionsConstValue;
     }

src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -161,7 +161,7 @@ export abstract class MusicSheetCalculator {
         }
         this.handleStaffEntries();
         this.calculateVerticalContainersList();
-        this.setIndecesToVerticalGraphicalContainers();
+        this.setIndicesToVerticalGraphicalContainers();
     }
 
     /**
@@ -1454,7 +1454,7 @@ export abstract class MusicSheetCalculator {
         }
     }
 
-    private setIndecesToVerticalGraphicalContainers(): void {
+    private setIndicesToVerticalGraphicalContainers(): void {
         for (let i: number = 0; i < this.graphicalMusicSheet.VerticalGraphicalStaffEntryContainers.length; i++) {
             this.graphicalMusicSheet.VerticalGraphicalStaffEntryContainers[i].Index = i;
         }

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -21,6 +21,8 @@ import { SystemLinePosition } from "../SystemLinePosition";
 import { GraphicalVoiceEntry } from "../GraphicalVoiceEntry";
 import { OrnamentEnum, OrnamentContainer } from "../../VoiceData/OrnamentContainer";
 import { NoteHead, NoteHeadShape } from "../../VoiceData/NoteHead";
+import { unitInPixels } from "./VexFlowMusicSheetDrawer";
+import { EngravingRules } from "../EngravingRules";
 
 /**
  * Helper class, which contains static methods which actually convert
@@ -228,7 +230,8 @@ export class VexFlowConverter {
                     // https://github.com/0xfe/vexflow/issues/579 The author reports that he needs to add some negative x shift
                     // if the measure has no modifiers.
                     alignCenter = true;
-                    xShift = -25; // TODO: Either replace by EngravingRules entry or find a way to make it dependent on the modifiers
+                    xShift = EngravingRules.Rules.WholeRestXShiftVexflow * unitInPixels; // TODO find way to make dependent on the modifiers
+                    // affects VexFlowStaffEntry.calculateXPosition()
                 }
                 duration += "r";
                 break;

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -3,6 +3,8 @@ import {VexFlowMeasure} from "./VexFlowMeasure";
 import {SourceStaffEntry} from "../../VoiceData/SourceStaffEntry";
 import {unitInPixels} from "./VexFlowMusicSheetDrawer";
 import { VexFlowVoiceEntry } from "./VexFlowVoiceEntry";
+import { Note } from "../../VoiceData/Note";
+import { EngravingRules } from "../EngravingRules";
 
 export class VexFlowStaffEntry extends GraphicalStaffEntry {
     constructor(measure: VexFlowMeasure, sourceStaffEntry: SourceStaffEntry, staffEntryParent: VexFlowStaffEntry) {
@@ -29,6 +31,13 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
                 gve.vfStaveNote.setStave(stave);
                 gve.applyBordersFromVexflow();
                 this.PositionAndShape.RelativePosition.x = gve.vfStaveNote.getBoundingBox().x / unitInPixels;
+                const sourceNote: Note = gve.notes[0].sourceNote;
+                if (sourceNote.isRest() && sourceNote.Length.WholeValue === 1) { // whole rest
+                    this.PositionAndShape.RelativePosition.x +=
+                        EngravingRules.Rules.WholeRestXShiftVexflow - 0.1; // xShift from VexFlowConverter
+                    gve.PositionAndShape.BorderLeft = -0.7;
+                    gve.PositionAndShape.BorderRight = 0.7;
+                }
                 if (gve.PositionAndShape.BorderLeft < lastBorderLeft) {
                     lastBorderLeft = gve.PositionAndShape.BorderLeft;
                 }