The arrangement player now takes over what the singleton event engine did

Also removed the read only version of ITimeParams (use the Readonly type instead).

Author: mike-lischke

src/App.tsx

@@ -17,6 +17,8 @@ import { ProgressIndicator } from "./components/ui/framework/ProgressIndicator.j
 import { ChildAlignment, Orientation } from "./components/ui/framework/ui-types.js";
 import { UIComponent } from "./components/ui/framework/UIComponent.js";
 
+import { ArrangementPlayControls } from "./components/ui/Arrangement/ArrangementPlayControls.js";
+import { ArrangementTitle } from "./components/ui/Arrangement/ArrangementTitle.js";
 import { ArrangementViewer } from "./components/ui/Arrangement/ArrangementViewer.js";
 import { ValueEditorEntryType, type IValueEditorValueEntry } from "./components/ui/composites/ValueDialog.js";
 import { Codicon } from "./components/ui/framework/Codicon.js";
@@ -36,17 +38,13 @@ import type { ISerialisedArrangement } from "./core/types/snapshots.js";
 import { UndoManager } from "./core/UndoManager.js";
 import { convertErrorToString } from "./core/utils.js";
 import { ArrangementPlayer } from "./player/ArrangementPlayer.js";
-import { EventEngine } from "./player/EventEngine.js";
-import { AnimationEngine } from "./ui/AnimationEngine.js";
+import type { ScoreBookUiServices } from "./player/types.js";
 import { DialogHost } from "./ui/DialogHost.js";
 import { emptySongString } from "./ui/index.js";
 import { ModeManager } from "./ui/ModeManager.js";
 import { MouseHandler } from "./ui/MouseHandler.js";
 import { ScoreLibrary } from "./ui/ScoreLibrary.js";
 import { SelectionManager } from "./ui/SelectionManager.js";
-import { ArrangementTitle } from "./components/ui/Arrangement/ArrangementTitle.js";
-import { ArrangementPlayControls } from "./components/ui/Arrangement/ArrangementPlayControls.js";
-import type { ScoreBookUiServices } from "./player/types.js";
 
 interface IAppState {
     ready: boolean;
@@ -84,7 +82,6 @@ export class App extends UIComponent<{}, IAppState> {
 
         const selectionManager = new SelectionManager();
         this.services = {
-            animationEngine: new AnimationEngine(EventEngine.instance),
             selectionManager,
             modeManager: new ModeManager(selectionManager),
         };
@@ -539,10 +536,12 @@ export class App extends UIComponent<{}, IAppState> {
             }
 
             case " ": {
-                if (EventEngine.instance.state === "stopped") {
-                    void EventEngine.instance.play();
-                } else {
-                    EventEngine.instance.stop();
+                if (this.arrangementPlayer) {
+                    if (this.arrangementPlayer.currentTiming === null) {
+                        this.arrangementPlayer.play();
+                    } else {
+                        this.arrangementPlayer.stop();
+                    }
                 }
                 event.preventDefault(); // This is to prevent spaces getting written in number inputs
 

src/components/ui/Arrangement/ArrangementPlayControls.tsx

@@ -7,7 +7,6 @@ import type { ComponentChild } from "preact";
 
 import type { UndoManager } from "../../../core/UndoManager.js";
 import type { ArrangementPlayer } from "../../../player/ArrangementPlayer.js";
-import { EventEngine } from "../../../player/EventEngine.js";
 import type { ScoreBookUiServices } from "../../../player/types.js";
 import { Button } from "../framework/Button.js";
 import { Codicon } from "../framework/Codicon.js";
@@ -37,7 +36,7 @@ export class ArrangementPlayControls extends UIComponent<IArrangementControlsTop
         super(props);
 
         this.state = {
-            playing: EventEngine.instance.state === "playing",
+            playing: props.arrangementPlayer.currentTiming !== null,
             editingTitle: false,
             title: props.arrangementPlayer.arrangementView.title,
         };
@@ -46,7 +45,7 @@ export class ArrangementPlayControls extends UIComponent<IArrangementControlsTop
     public override componentDidMount(): void {
         const { arrangementPlayer } = this.props;
 
-        this.addSubscription(EventEngine.instance, this.onPlaybackStateChange);
+        this.addSubscription(arrangementPlayer, this.onPlaybackStateChange);
         const arrangement = arrangementPlayer.arrangementView;
         this.addSubscription(arrangement, this.titleChangeSubscription);
     }
@@ -64,7 +63,7 @@ export class ArrangementPlayControls extends UIComponent<IArrangementControlsTop
                     imageOnly
                     id="playbackButton"
                     onClick={() => {
-                        EventEngine.instance.stop();
+                        arrangementPlayer.stop();
                     }}>
                     <Icon src={Codicon.DebugPause} />
                 </Button>
@@ -75,7 +74,7 @@ export class ArrangementPlayControls extends UIComponent<IArrangementControlsTop
                     imageOnly
                     id="playbackButton"
                     onClick={() => {
-                        void EventEngine.instance.play();
+                        arrangementPlayer.play();
                     }}>
                     <Icon src={Codicon.DebugStart} />
                 </Button>
@@ -139,7 +138,8 @@ export class ArrangementPlayControls extends UIComponent<IArrangementControlsTop
     };
 
     private onPlaybackStateChange = () => {
-        this.setState({ playing: EventEngine.instance.state === "playing" });
+        const { arrangementPlayer } = this.props;
+        this.setState({ playing: arrangementPlayer.currentTiming !== null });
     };
 
     private startRecording = () => {

src/components/ui/Arrangement/ArrangementViewer.tsx

@@ -7,7 +7,7 @@ import { createRef, type JSX } from "preact";
 
 import { Publisher } from "../../../core/Publisher.js";
 import type { RealTime } from "../../../core/ScoreBookDataModel.js";
-import type { ITimeParamsView } from "../../../core/types/general.js";
+import type { ITimeParams } from "../../../core/types/general.js";
 import type { UndoManager } from "../../../core/UndoManager.js";
 import type { ArrangementPlayer } from "../../../player/ArrangementPlayer.js";
 import type { ScoreBookUiServices } from "../../../player/types.js";
@@ -74,7 +74,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
     }
 
     public override componentDidMount(): void {
-        const { arrangementPlayer, services } = this.props;
+        const { arrangementPlayer } = this.props;
         const { autoFollowIsOn } = this.state;
 
         setTimeout(this.handleResize, 0);
@@ -85,10 +85,10 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
 
         // If desired, turn on auto-follow like so.
         if (autoFollowIsOn) {
-            services.animationEngine.connect(this.autoFollow);
+            arrangementPlayer.animationEngine.connect(this.autoFollow);
         } else {
             // Otherwise, set up the subscription which will turn it on again.
-            this.addSubscription(services.animationEngine, this.animationEngineSubscription);
+            this.addSubscription(arrangementPlayer.animationEngine, this.animationEngineSubscription);
         }
 
         this.updateScrollShadows();
@@ -102,10 +102,10 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
     public override componentWillUnmount(): void {
         super.componentWillUnmount();
 
-        const { services } = this.props;
+        const { arrangementPlayer } = this.props;
 
         this.resizeObserver.disconnect();
-        services.animationEngine.disconnect(this.autoFollow);
+        arrangementPlayer.animationEngine.disconnect(this.autoFollow);
     }
 
     public override render(): JSX.Element {
@@ -195,7 +195,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
      * @param timeParams The time params of the arrangement.
      * @returns The width of the entire note line  in pt.
      */
-    private getNoteLineMinWidth = (timeParams: ITimeParamsView): number => {
+    private getNoteLineMinWidth = (timeParams: Readonly<ITimeParams>): number => {
         const widthFromNotes = baseNoteWidth * timeParams.timings.length;
         const extraWidthBetweenBars = (timeParams.length - 1) * 4;
 
@@ -304,8 +304,9 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
     };
 
     private animationEngineSubscription = () => {
-        const { services } = this.props;
-        if (services.animationEngine.state === "playing") {
+        const { arrangementPlayer } = this.props;
+
+        if (arrangementPlayer.animationEngine.state === "playing") {
             this.setState({ autoFollowIsOn: true });
         }
     };

src/components/ui/GuideRail/GuideRail.tsx

@@ -5,7 +5,7 @@
 
 import { type ComponentChild } from "preact";
 
-import type { IArrangement, ITimeParamsView } from "../../../core/types/general.js";
+import type { IArrangement, ITimeParams } from "../../../core/types/general.js";
 import { UIComponent, type ICommonUIProperties } from "../framework/UIComponent.js";
 import { TimingViewer } from "./TimingViewer.js";
 import { Container } from "../framework/Container.js";
@@ -55,7 +55,7 @@ export class GuideRail extends UIComponent<IGuideRailProps, IGuideRailState> {
         );
     }
 
-    private getBarDivisibility(timeParams: ITimeParamsView): BarDivisibility {
+    private getBarDivisibility(timeParams: Readonly<ITimeParams>): BarDivisibility {
         const beatsPerBar = Number(timeParams.timeSignature.split("/")[0]);
         if (beatsPerBar % 4 === 0) {
             return 4;

src/components/ui/GuideRail/TimingViewer.tsx

@@ -6,7 +6,7 @@
 import type { ComponentChild } from "preact";
 
 import type { ITiming } from "../../../core/ScoreBookDataModel.js";
-import type { ITimeParams, ITimeParamsView } from "../../../core/types/general.js";
+import type { ITimeParams } from "../../../core/types/general.js";
 import { UIComponent, type ICommonUIProperties } from "../framework/UIComponent.js";
 import { NoteViewer } from "../Note/NoteViewer.js";
 import { type BarDivisibility } from "./GuideRail.js";
@@ -40,7 +40,7 @@ export class TimingViewer extends UIComponent<ITimingViewerProperties> {
         );
     }
 
-    private getTimingText(timeParams: ITimeParamsView, barDivisibility: BarDivisibility, timing: ITiming,
+    private getTimingText(timeParams: Readonly<ITimeParams>, barDivisibility: BarDivisibility, timing: ITiming,
         isStartOfBar: boolean): string {
         const { timeSignature, stepResolution } = timeParams;
 

src/components/ui/Track/TrackViewer.tsx

@@ -108,6 +108,7 @@ export class TrackViewer extends UIComponent<ITrackViewerProperties, ITrackViewe
     };
 
     private audibleChanged = () => {
+        // XXX: this is called way too often. Need a callback only when the audible state of this track changes.
         const { trackPlayer, arrangementPlayer } = this.props;
 
         this.setState({

src/core/TimeParams.ts

@@ -76,6 +76,7 @@ export class TimeParams extends Publisher implements ISbDmTimeParams {
         if (!this.validateTimeSignature(newTimeSignature)) {
             throw new Error("Invalid time signature");
         }
+
         if (newTimeSignature !== this.signature) {
             this.signature = newTimeSignature;
             this.regenerateTimings();
@@ -101,6 +102,7 @@ export class TimeParams extends Publisher implements ISbDmTimeParams {
         if (!this.validateTempo(newTempo)) {
             throw new Error("Invalid tempo");
         }
+
         if (newTempo !== this.usedTempo) {
             this.usedTempo = newTempo;
             this.regenerateTimings();

src/core/serialisation/serialisers.ts

@@ -41,6 +41,8 @@ const serialiseNotes = (trackSnapshot: ITrackSnapshot): string => {
     const notesStylesAsNumbers = trackSnapshot.notes.map((noteChar) => {
         return urlCharacterToNumber[noteChar];
     });
+
+    throw new Error("Move serialization to the data model.");
     const base = 2n; // XXX BigInt(getNoteStyleCount(trackSnapshot.instrumentId));
     const notesAsNumber = interpretAsBaseN(notesStylesAsNumbers, base);
 

src/core/types/edit_commands.ts

@@ -4,7 +4,7 @@
 */
 
 import type { ISbDmInstrument, ISbDmNote, ISbDmTrack } from "../ScoreBookDataModel.js";
-import type { IArrangement, INoteStyle, IPolyrhythm, ITimeParamsView } from "./general.js";
+import type { IArrangement, INoteStyle, IPolyrhythm, ITimeParams } from "./general.js";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -67,21 +67,21 @@ export interface EditCommand_Note {
 
 export interface EditCommand_TimeParamsTimeSignature {
     type: "EditCommand_TimeParamsTimeSignature";
-    timeParams: ITimeParamsView;
+    timeParams: Readonly<ITimeParams>;
     timeSignature: string;
     pulse: string;
     stepResolution: number;
 }
 
 export interface EditCommand_TimeParamsTempo {
     type: "EditCommand_TimeParamsTempo";
-    timeParams: ITimeParamsView;
+    timeParams: Readonly<ITimeParams>;
     tempo: number;
 }
 
 export interface EditCommand_TimeParamsLength {
     type: "EditCommand_TimeParamsLength";
-    timeParams: ITimeParamsView;
+    timeParams: Readonly<ITimeParams>;
     length: number;
 }
 

src/core/types/general.ts

@@ -72,23 +72,15 @@ export interface IArrangement extends ISubscribable {
     removeTrack(track: ISbDmTrack): void;
 }
 
-export interface ITimeParamsView extends ISubscribable {
-    readonly timeSignature: string;
-    readonly tempo: number;
-    readonly length: number;
-    readonly pulse: string;
-    readonly stepResolution: number;
-    readonly timings: ITiming[];
-
-    isValid(timing: ITiming): boolean;
-}
-
-export interface ITimeParams extends ITimeParamsView {
+export interface ITimeParams extends ISubscribable {
     timeSignature: string;
     tempo: number;
     length: number;
     pulse: string;
     stepResolution: number;
+    timings: ITiming[];
+
+    isValid(timing: ITiming): boolean;
 }
 
 export interface IPolyrhythm {