fix cursor.update() ignoring changed color/alpha, add osmd.Cursor getter

fixes osmd.cursor.CursorOptions.color or alpha change not showing after cursor.update()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osmd-extended",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "Private / sponsor exclusive OSMD mirror/audio player.",
   "main": "build/opensheetmusicdisplay.min.js",
   "types": "build/dist/src/index.d.ts",

src/OpenSheetMusicDisplay/Cursor.ts

@@ -109,6 +109,7 @@ export class Cursor implements IPlaybackListener {
   public hidden: boolean = false;
   public currentPageNumber: number = 1;
   private cursorOptions: CursorOptions;
+  private cursorOptionsRendered: CursorOptions;
   private skipInvisibleNotes: boolean = true;
   /** Where to scroll to when FollowCursor is enabled.
    *  Default center (will scroll so that the current cursor position is in the center of the screen),
@@ -371,9 +372,12 @@ export class Cursor implements IPlaybackListener {
         break;
     }
 
-    if (newWidth !== cursorElement.width) {
-      cursorElement.width = newWidth;
+    // if (newWidth !== cursorElement.width) { // this `if` is unnecessary and prevents updating color
+    cursorElement.width = newWidth;
+    if (this.cursorOptionsRendered !== this.cursorOptions) {
       this.updateStyle(newWidth, this.cursorOptions);
+      // only update style (creating new cursor element) if options changed.
+      //   For width, it seems to be enough to update cursorElement.width, see osmd#1519
     }
   }
 
@@ -446,6 +450,7 @@ export class Cursor implements IPlaybackListener {
     }
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, 1);
+    this.cursorOptionsRendered = {...this.cursorOptions}; // clone, otherwise !== doesn't work
     // Set the actual image
     this.cursorElement.src = c.toDataURL("image/png");
   }

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -15,7 +15,7 @@ import log from "loglevel";
 import { DrawingParameters } from "../MusicalScore/Graphical/DrawingParameters";
 import { DrawingParametersEnum } from "../Common/Enums/DrawingParametersEnum";
 import { ColoringModes } from "../Common/Enums/ColoringModes";
-import { IOSMDOptions, OSMDOptions, AutoBeamOptions, BackendType, CursorOptions } from "./OSMDOptions";
+import { IOSMDOptions, OSMDOptions, AutoBeamOptions, BackendType, CursorOptions, CursorType } from "./OSMDOptions";
 import { EngravingRules, PageFormat } from "../MusicalScore/Graphical/EngravingRules";
 import { AbstractExpression } from "../MusicalScore/VoiceData/Expressions/AbstractExpression";
 import { Dictionary } from "typescript-collections";
@@ -37,7 +37,7 @@ import { DynamicsCalculator } from "../MusicalScore/ScoreIO/MusicSymbolModules/D
  * After the constructor, use load() and render() to load and render a MusicXML file.
  */
 export class OpenSheetMusicDisplay {
-    private version: string = "1.8.6-audio-extended"; // getter: this.Version
+    private version: string = "1.8.7-audio-extended"; // getter: this.Version
     // at release, bump version and change to -release, afterwards to -dev again
 
     /**
@@ -79,6 +79,9 @@ export class OpenSheetMusicDisplay {
     public get cursor(): Cursor { // lowercase for backwards compatibility since cursor -> cursors change
         return this.cursors[0];
     }
+    public get Cursor(): Cursor {
+        return this.cursor;
+    }
     public zoom: number = 1.0;
     protected zoomUpdated: boolean = false;
     /** Timeout in milliseconds used in osmd.load(string) when string is a URL. */
@@ -726,7 +729,12 @@ export class OpenSheetMusicDisplay {
         if (options.cursorsOptions !== undefined) {
             this.cursorsOptions = options.cursorsOptions;
         } else {
-            this.cursorsOptions = [{type: 0, color: this.EngravingRules.DefaultColorCursor, alpha: 0.5, follow: true}];
+            this.cursorsOptions = [{
+                type: CursorType.Standard,
+                color: this.EngravingRules.DefaultColorCursor,
+                alpha: 0.5,
+                follow: true
+            }];
         }
         if (options.preferredSkyBottomLineBatchCalculatorBackend !== undefined) {
             this.rules.PreferredSkyBottomLineBatchCalculatorBackend = options.preferredSkyBottomLineBatchCalculatorBackend;