Reimplement playback backed with unit tests

README.md

@@ -93,8 +93,8 @@ const cursorComponent = vexml.SimpleCursor.render(score.getOverlayElement());
 cursorModel.addEventListener(
   'change',
   (e) => {
-    cursorComponent.update(e.cursorRect);
-    // The model infers its visibility via the cursorRect. It assumes you've updated appropriately.
+    cursorComponent.update(e.rect);
+    // The model infers its visibility via the rect. It assumes you've updated appropriately.
     if (!cursorModel.isFullyVisible()) {
       cursorModel.scrollIntoView(scrollBehavior);
     }

package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "jszip": "3.10.1",
-    "vexflow": "5.0.0-beta.1"
+    "vexflow": "5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",

site/src/components/Vexml.tsx

@@ -66,7 +66,7 @@ export const Vexml = ({ musicXML, config, onResult, onClick, onLongpress, onEnte
     if (!cursor.isFullyVisible()) {
       cursor.scrollIntoView(scrollBehavior);
     }
-    const currentTimeMs = cursor.getState().sequenceEntry.durationRange.start.ms;
+    const currentTimeMs = cursor.getCurrentState().frame.tRange.start.ms;
     player.seek(currentTimeMs, false);
     setProgress(currentTimeMs / durationMs);
   };
@@ -79,7 +79,7 @@ export const Vexml = ({ musicXML, config, onResult, onClick, onLongpress, onEnte
     if (!cursor.isFullyVisible()) {
       cursor.scrollIntoView(scrollBehavior);
     }
-    const currentTimeMs = cursor.getState().sequenceEntry.durationRange.start.ms;
+    const currentTimeMs = cursor.getCurrentState().frame.tRange.start.ms;
     player.seek(currentTimeMs, false);
     setProgress(currentTimeMs / durationMs);
   };
@@ -147,7 +147,7 @@ export const Vexml = ({ musicXML, config, onResult, onClick, onLongpress, onEnte
       cursor.addEventListener(
         'change',
         (e) => {
-          simpleCursor.update(e.cursorRect);
+          simpleCursor.update(e.rect);
           if (!cursor.isFullyVisible()) {
             cursor.scrollIntoView(scrollBehavior);
           }

src/elements/note.ts

@@ -3,6 +3,7 @@ import { Config } from '@/config';
 import { Logger } from '@/debug';
 import { Rect } from '@/spatial';
 import { Fraction } from '@/util';
+import { Pitch } from './types';
 
 export class Note {
   private constructor(
@@ -24,6 +25,19 @@ export class Note {
     return this.noteRender.rect;
   }
 
+  getPitch(): Pitch {
+    const note = this.document.getNote(this.noteRender.key);
+    return {
+      step: note.pitch.step,
+      octave: note.pitch.octave,
+      accidentalCode: note.accidental?.code ?? null,
+    };
+  }
+
+  sharesACurveWith(note: Note): boolean {
+    return this.noteRender.curveIds.some((curveId) => note.noteRender.curveIds.includes(curveId));
+  }
+
   /** Returns the measure beat that this note starts on. */
   getStartMeasureBeat(): Fraction {
     return Fraction.fromFractionLike(this.document.getVoiceEntry(this.noteRender.key).measureBeat);

src/elements/part.ts

@@ -37,6 +37,11 @@ export class Part {
     return this.partRender.key.partIndex;
   }
 
+  /** Returns the system index. */
+  getSystemIndex(): number {
+    return this.partRender.key.systemIndex;
+  }
+
   /** Returns the start measure beat for the part. */
   getStartMeasureBeat(): Fraction {
     return (

src/elements/score.ts

@@ -75,11 +75,15 @@ export class Score {
     util.assert(0 <= span.toPartIndex && span.toPartIndex < partCount, 'toPartIndex out of bounds');
     util.assert(span.fromPartIndex <= span.toPartIndex, 'fromPartIndex must be less than or equal to toPartIndex');
 
-    const sequence = this.getSequences().find((sequence) => sequence.getPartIndex() === partIndex);
-    util.assertDefined(sequence);
+    const timeline = this.getTimelines().find((timeline) => timeline.getPartIndex() === partIndex);
+    util.assertDefined(timeline);
+
+    const frames = playback.CursorFrame.create(this.log, this, timeline, span);
+    const path = new playback.CursorPath(partIndex, frames);
+    const cursor = playback.Cursor.create(path, this.getScrollContainer());
 
-    const cursor = playback.Cursor.create(this.root.getScrollContainer(), this, sequence, span);
     this.cursors.push(cursor);
+
     return cursor;
   }
 
@@ -100,7 +104,7 @@ export class Score {
 
   /** Returns the duration of the score in milliseconds. */
   getDurationMs(): number {
-    return Math.max(0, ...this.getSequences().map((sequence) => sequence.getDuration().ms));
+    return Math.max(0, ...this.getTimelines().map((timeline) => timeline.getDuration().ms));
   }
 
   /** Returns the max number of parts in this score. */
@@ -347,9 +351,8 @@ export class Score {
   }
 
   @util.memoize()
-  private getSequences(): playback.Sequence[] {
-    const sequences = new playback.SequenceFactory(this.log, this).create();
-    return sequences;
+  private getTimelines(): playback.Timeline[] {
+    return playback.Timeline.create(this.log, this);
   }
 
   @util.memoize()
@@ -359,6 +362,18 @@ export class Score {
 
   @util.memoize()
   private getTimestampLocator(): playback.TimestampLocator {
-    return playback.TimestampLocator.create(this, this.getSequences());
+    const paths = new Array<playback.CursorPath>();
+    const timelines = this.getTimelines();
+
+    for (let partIndex = 0; partIndex < this.getPartCount(); partIndex++) {
+      const timeline = timelines.find((timeline) => timeline.getPartIndex() === partIndex);
+      util.assertDefined(timeline);
+      const span = { fromPartIndex: partIndex, toPartIndex: partIndex };
+      const frames = playback.CursorFrame.create(this.log, this, timeline, span);
+      const path = new playback.CursorPath(partIndex, frames);
+      paths.push(path);
+    }
+
+    return playback.TimestampLocator.create(this, paths);
   }
 }

src/elements/types.ts

@@ -8,6 +8,7 @@ import { Score } from './score';
 import { Stave } from './stave';
 import { System } from './system';
 import { Voice } from './voice';
+import { Enum, EnumValues } from '@/util';
 
 /**
  * Represents a rendered musical element.
@@ -21,6 +22,15 @@ export type VexmlElement = Score | System | Measure | Fragment | Part | Stave |
  */
 export type VoiceEntry = Note | Rest;
 
+export type AccidentalCode = EnumValues<typeof ACCIDENTAL_CODES>;
+export const ACCIDENTAL_CODES = new Enum(['#', '##', 'b', 'bb', 'n', 'd', '_', 'db', '+', '++'] as const);
+
+export type Pitch = {
+  step: string;
+  octave: number;
+  accidentalCode: AccidentalCode | null;
+};
+
 export type EventMap = {
   click: ClickEvent;
   enter: EnterEvent;

src/playback/bsearchcursorframelocator.ts

@@ -0,0 +1,37 @@
+import * as util from '@/util';
+import { CursorFrameLocator } from './types';
+import { Duration } from './duration';
+import { CursorPath } from './cursorpath';
+
+/**
+ * A CursorFrameLocator that uses binary search to locate the frame at a given time.
+ */
+export class BSearchCursorFrameLocator implements CursorFrameLocator {
+  constructor(private path: CursorPath) {}
+
+  locate(time: Duration): number | null {
+    const frames = this.path.getFrames();
+
+    let left = 0;
+    let right = frames.length - 1;
+
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      const entry = frames.at(mid);
+
+      util.assertDefined(entry);
+
+      if (entry.tRange.includes(time)) {
+        return mid;
+      }
+
+      if (entry.tRange.end.isGreaterThanOrEqual(time)) {
+        right = mid - 1;
+      } else {
+        left = mid + 1;
+      }
+    }
+
+    return null;
+  }
+}