fix(Beams): fix beams with bad slopes by always recalculating beams. (#843)

we tried to save some performance here (a few ms) by not always recalculating beams,
but we'd need to check for every possible setting change that can affect beams
to check for the case that we don't need to recalculate beams.
some cases weren't detected, see #843

we could also make this an option to not recalculate beams, as before

fix #843

src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -20,6 +20,8 @@ export abstract class VexFlowBackend {
   /** The GraphicalMusicPage the backend is drawing from. Each backend only renders one GraphicalMusicPage, to which the coordinates are relative. */
   public graphicalMusicPage: GraphicalMusicPage;
   protected rules: EngravingRules;
+  public width: number; // read-only
+  public height: number; // read-only
 
   public abstract initialize(container: HTMLElement): void;
 
@@ -74,8 +76,10 @@ public abstract getContext(): Vex.IRenderContext;
 
   public abstract scale(k: number): void;
 
-  public resize(x: number, y: number): void {
-    this.renderer.resize(x, y);
+  public resize(width: number, height: number): void {
+    this.renderer.resize(width, height);
+    this.width = width;
+    this.height = height;
   }
 
   public abstract clear(): void;

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -96,7 +96,9 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
           (<VexFlowStaffEntry>staffEntry).calculateXPosition();
         }
         // const t0: number = performance.now();
-        if (this.beamsNeedUpdate) { // finalizeBeams takes a few milliseconds, so we can save some performance here
+        if (true || this.beamsNeedUpdate) {
+          // finalizeBeams takes a few milliseconds, so we can save some performance here sometimes,
+          // but we'd have to check for every setting change that would affect beam rendering.
           (measure as VexFlowMeasure).finalizeBeams(); // without this, when zooming a lot (e.g. 250%), beams keep their old, now wrong slope.
           // totalFinalizeBeamsTime += performance.now() - t0;
           // console.log("Total calls to finalizeBeams in VexFlowMusicSheetCalculator took " + totalFinalizeBeamsTime + " milliseconds.");