fix(Cursor): attach to correct page HTMLElement (canvas) (#817)

refactor: delete unnecessary yPositioning workaround

src/OpenSheetMusicDisplay/Cursor.ts

@@ -128,23 +128,11 @@ export class Cursor {
       return;
     }
 
-    // add the height of previous pages to the y position
-    //   this is unfortunately necessary right now, because MusicPages all have RelativePosition and AbsolutePosition y=0.
-    //   without this, the cursor wouldn't be y-positioned correctly at page numbers > 1.
-    let canvasHeight: number = 0;
-    for (let i: number = 1; i < this.currentPageNumber; i++) {
-      const canvasHeightHTML: number = this.openSheetMusicDisplay.Drawer.Backends[i - 1]?.getCanvasSize();
-      if (canvasHeightHTML > 0) {
-        canvasHeight += canvasHeightHTML / 10;
-      }
-    }
 
     y = musicSystem.PositionAndShape.AbsolutePosition.y + musicSystem.StaffLines[0].PositionAndShape.RelativePosition.y;
-    y += canvasHeight;
     const bottomStaffline: StaffLine = musicSystem.StaffLines[musicSystem.StaffLines.length - 1];
-    let endY: number = musicSystem.PositionAndShape.AbsolutePosition.y +
+    const endY: number = musicSystem.PositionAndShape.AbsolutePosition.y +
     bottomStaffline.PositionAndShape.RelativePosition.y + bottomStaffline.StaffHeight;
-    endY += canvasHeight;
     height = endY - y;
 
     // The following code is not necessary (for now, but it could come useful later):
@@ -262,7 +250,17 @@ export class Cursor {
     for (const page of this.graphic.MusicPages) {
       const lastSystemTimestamp: Fraction = page.MusicSystems.last().GetSystemsLastTimeStamp();
       if (lastSystemTimestamp.gt(timestamp)) {
-        return this.currentPageNumber = page.PageNumber;
+        // gt: the last timestamp of the last system is equal to the first of the next page,
+        //   so we do need to use gt, not gte here.
+        const newPageNumber: number = page.PageNumber;
+        if (newPageNumber !== this.currentPageNumber) {
+          this.container.removeChild(this.cursorElement);
+          this.container = document.getElementById("osmdCanvasPage" + newPageNumber);
+          this.container.appendChild(this.cursorElement);
+          // alternatively:
+          // this.openSheetMusicDisplay.enableOrDisableCursor(true);
+        }
+        return this.currentPageNumber = newPageNumber;
       }
     }
     return 1;

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -698,7 +698,7 @@ export class OpenSheetMusicDisplay {
     /** Enable or disable (hide) the cursor.
      * @param enable whether to enable (true) or disable (false) the cursor
      */
-    public enableOrDisableCursor(enable: boolean, switchedPage: boolean = false): void {
+    public enableOrDisableCursor(enable: boolean): void {
         this.drawingParameters.drawCursors = enable;
         if (enable) {
             // save previous cursor state
@@ -706,6 +706,7 @@ export class OpenSheetMusicDisplay {
             const previousIterator: MusicPartManagerIterator = this.cursor?.Iterator;
             this.cursor?.hide();
 
+            // check which page/backend to draw the cursor on (the pages may have changed since last cursor)
             let backendToDrawOn: VexFlowBackend = this.drawer?.Backends[0];
             if (backendToDrawOn && this.rules.RestoreCursorAfterRerender && this.cursor) {
                 const newPageNumber: number = this.cursor.updateCurrentPage();
@@ -720,14 +721,12 @@ export class OpenSheetMusicDisplay {
             }
 
             // restore old cursor state
-            if (this.rules.RestoreCursorAfterRerender || switchedPage) {
+            if (this.rules.RestoreCursorAfterRerender) {
                 this.cursor.hidden = hidden;
                 if (previousIterator) {
                     this.cursor.iterator = previousIterator;
                     this.cursor.updateCurrentPage();
-                }
-                if (switchedPage && !hidden) {
-                    this.cursor.show();
+                    this.cursor.update();
                 }
             }
         } else { // disable cursor