fix beams: only update them when zoom was changed, to save performance (#655)

closes #655

demo/index.js

@@ -693,7 +693,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     function scale() {
         disable();
         window.setTimeout(function () {
-            openSheetMusicDisplay.zoom = zoom;
+            openSheetMusicDisplay.Zoom = zoom;
             openSheetMusicDisplay.render();
             enable();
         }, 0);

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -887,7 +887,11 @@ export class VexFlowMeasure extends GraphicalMeasure {
             }
         }
 
+        // const t0: number = performance.now();
         this.finalizeBeams();
+        // const t1: number = performance.now();
+        // console.log("Call to finalizeBeams in VexFlowMeasure took " + (t1 - t0) + " milliseconds.");
+
         this.finalizeTuplets();
 
         const voices: Voice[] = this.getVoicesWithinMeasure();

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -52,6 +52,7 @@ import { VexFlowStaffLine } from "./VexFlowStaffLine";
 export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
   /** space needed for a dash for lyrics spacing, calculated once */
   private dashSpace: number;
+  public beamsNeedUpdate: boolean = false;
 
   constructor() {
     super();
@@ -69,6 +70,7 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
   }
 
   protected formatMeasures(): void {
+    // let totalFinalizeBeamsTime: number = 0;
     for (const verticalMeasureList of this.graphicalMusicSheet.MeasureList) {
       const firstMeasure: VexFlowMeasure = verticalMeasureList[0] as VexFlowMeasure;
       // first measure has formatting method as lambda function object, but formats all measures. TODO this could be refactored
@@ -77,11 +79,15 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
         for (const staffEntry of measure.staffEntries) {
           (<VexFlowStaffEntry>staffEntry).calculateXPosition();
         }
-        // how much performance does this cost? finalizeBeams generates new Vexflow beams etc.
-        // TODO only do when zoom has changed
-        (measure as VexFlowMeasure).finalizeBeams(); // without this, when zooming a lot (e.g. 250%), beams keep their old, now wrong slope.
+        // const t0: number = performance.now();
+        if (this.beamsNeedUpdate) { // finalizeBeams takes a few milliseconds, so we can save some performance here
+          (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.");
+        }
       }
     }
+    this.beamsNeedUpdate = false;
   }
 
   //protected clearSystemsAndMeasures(): void {

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -64,6 +64,7 @@ export class OpenSheetMusicDisplay {
 
     public cursor: Cursor;
     public zoom: number = 1.0;
+    private zoomUpdated: boolean = false;
 
     private container: HTMLElement;
     private backendType: BackendType;
@@ -236,6 +237,7 @@ export class OpenSheetMusicDisplay {
             // Update the cursor position
             this.cursor.update();
         }
+        this.zoomUpdated = false;
         //console.log("[OSMD] render finished");
     }
 
@@ -816,6 +818,12 @@ export class OpenSheetMusicDisplay {
         this.autoResizeEnabled = value;
     }
 
+    public set Zoom(value: number) {
+        this.zoom = value;
+        this.zoomUpdated = true;
+        (this.graphic.GetCalculator as VexFlowMusicSheetCalculator).beamsNeedUpdate = this.zoomUpdated;
+    }
+
     public set FollowCursor(value: boolean) {
         this.followCursor = value;
     }