Move live input playback into own class

Author: zOadT

editor/LiveInput.ts

@@ -0,0 +1,30 @@
+import {SongDocument} from "./SongDocument";
+
+export class LiveInput {
+	constructor(private _doc: SongDocument) {
+		this._doc.notifier.watch(this._documentChanged);
+		this._documentChanged();
+	}
+	private _playingPitches: number[] = [];
+	public addNote(pitch: number) {
+		this._playingPitches = [...this._playingPitches, pitch];
+		this.updateSound();
+	}
+	public removeNote(pitch: number) {
+		this._playingPitches = this._playingPitches.filter(p => p !== pitch);
+		this.updateSound();
+	}
+	private updateSound() {
+		if(this._playingPitches.length == 0) {
+			this._doc.synth.liveInputDuration = 0;
+		} else {
+			this._doc.synth.liveInputDuration = Number.MAX_SAFE_INTEGER;
+			this._doc.synth.liveInputPitches = this._playingPitches;
+			this._doc.synth.liveInputStarted = true;
+		}
+	}
+	private _documentChanged = (): void => {
+		this._doc.synth.liveInputChannel = this._doc.channel;
+		this._doc.synth.liveInputInstruments = this._doc.recentPatternInstruments[this._doc.channel];
+	}
+}

editor/Piano.ts

@@ -4,6 +4,7 @@ import {Config} from "../synth/SynthConfig";
 import {SongDocument} from "./SongDocument";
 import {HTML} from "imperative-html/dist/esm/elements-strict";
 import {ColorConfig} from "./ColorConfig";
+import {LiveInput} from "./LiveInput";
 
 export class Piano {
 	private readonly _pianoContainer: HTMLDivElement = HTML.div({style: "width: 100%; height: 100%; display: flex; flex-direction: column-reverse; align-items: stretch;"});
@@ -31,7 +32,7 @@ export class Piano {
 	private _renderedKey: number = -1;
 	private _renderedPitchCount: number = -1;
 
-	constructor(private _doc: SongDocument) {
+	constructor(private _doc: SongDocument, private _liveInput: LiveInput) {
 		for (let i: number = 0; i < Config.drumCount; i++) {
 			const scale: number = (1.0 - (i / Config.drumCount) * 0.35) * 100;
 			const brightness: number = 1.0 + ((i - Config.drumCount / 2.0) / Config.drumCount) * 0.5;
@@ -83,15 +84,14 @@ export class Piano {
 		const octaveOffset: number = this._doc.getBaseVisibleOctave(this._doc.channel) * Config.pitchesPerOctave;
 		const currentPitch: number = this._cursorPitch + octaveOffset;
 		if (this._playedPitch == currentPitch) return;
+		this._liveInput.removeNote(this._playedPitch);
 		this._playedPitch = currentPitch;
-		this._doc.synth.liveInputDuration = Number.MAX_SAFE_INTEGER;
-		this._doc.synth.liveInputPitches = [this._playedPitch];
-		this._doc.synth.liveInputStarted = true;
+		this._liveInput.addNote(currentPitch);
 	}
 
 	private _releaseLiveInput(): void {
+		this._liveInput.removeNote(this._playedPitch);
 		this._playedPitch = -1;
-		this._doc.synth.liveInputDuration = 0;
 	}
 
 	private _whenMouseOver = (event: MouseEvent): void => {
@@ -181,8 +181,6 @@ export class Piano {
 		this._pitchHeight = this._editorHeight / this._pitchCount;
 		this._updateCursorPitch();
 		if (this._mouseDown) this._playLiveInput();
-		this._doc.synth.liveInputChannel = this._doc.channel;
-		this._doc.synth.liveInputInstruments = this._doc.recentPatternInstruments[this._doc.channel];
 
 		if (!this._doc.showLetters) return;
 		if (this._renderedScale == this._doc.song.scale && this._renderedKey == this._doc.song.key && this._renderedDrums == isDrum && this._renderedPitchCount == this._pitchCount) return;

editor/SongEditor.ts

@@ -21,6 +21,7 @@ import {SpectrumEditor} from "./SpectrumEditor";
 import {HarmonicsEditor} from "./HarmonicsEditor";
 import {BarScrollBar} from "./BarScrollBar";
 import {OctaveScrollBar} from "./OctaveScrollBar";
+import {LiveInput} from "./LiveInput";
 import {Piano} from "./Piano";
 import {BeatsPerBarPrompt} from "./BeatsPerBarPrompt";
 import {MoveNotesSidewaysPrompt} from "./MoveNotesSidewaysPrompt";
@@ -126,7 +127,8 @@ export class SongEditor {
 	private readonly _trackEditor: TrackEditor = new TrackEditor(this._doc);
 	private readonly _loopEditor: LoopEditor = new LoopEditor(this._doc);
 	private readonly _octaveScrollBar: OctaveScrollBar = new OctaveScrollBar(this._doc);
-	private readonly _piano: Piano = new Piano(this._doc);
+	private readonly _liveInput: LiveInput = new LiveInput(this._doc);
+	private readonly _piano: Piano = new Piano(this._doc, this._liveInput);
 	private readonly _playButton: HTMLButtonElement = button({style: "width: 80px;", type: "button"});
 	private readonly _prevBarButton: HTMLButtonElement = button({class: "prevBarButton", style: "width: 40px;", type: "button", title: "Previous Bar (left bracket)"});
 	private readonly _nextBarButton: HTMLButtonElement = button({class: "nextBarButton", style: "width: 40px;", type: "button", title: "Next Bar (right bracket)"});