feat: cleaned up mouse behaviour and saving

src/Beat.ts

@@ -2,7 +2,12 @@ import { deserialise as deserialiseTrack, type TrackInitOptions, createTrack, is
 import { greatestCommonDivisor, isPosInt } from "@/utils";
 import { watch, computed, effectScope, ref, shallowRef, triggerRef } from "vue";
 
+export interface BeatManager {
+    notifyChange(): void;
+}
+
 type BeatGroupInitOptions = {
+    manager: BeatManager,
     barCount: number;
     isLooping: boolean;
     timeSigUp: number;
@@ -33,11 +38,12 @@ function isBeatSerial(serial: Record<string, unknown>): serial is BeatSerial {
         typeof serial.barSettingsLocked === "boolean";
 }
 
-export function deserialise(serial: {}) {
+export function deserialise(serial: {}, manager: BeatManager) {
     if (!isBeatSerial(serial)) {
         throw new Error("Not a valid beat serial");
     }
     const newBeat = createBeat({
+        manager,
         loopLength: serial.globalLoopLength,
         barCount: serial.barCount,
         isLooping: serial.globalIsLooping,
@@ -46,7 +52,7 @@ export function deserialise(serial: {}) {
         useAutoBeatLength: serial.useAutoBeatLength,
     });
     serial.tracks.forEach(trackSerial => {
-        const track = deserialiseTrack(trackSerial);
+        const track = deserialiseTrack(trackSerial, manager);
         if (track) newBeat.tracks.value.push(track);
     });
     return newBeat;
@@ -55,6 +61,7 @@ export function deserialise(serial: {}) {
 export function createBeat(opts: BeatGroupInitOptions) {
     const scope = effectScope();
     return scope.run(() => {
+        const manager = opts.manager;
         const tracks = shallowRef<Track[]>([]);
         const barCountInternal = ref<number>(opts.barCount ?? 4);
         const barCount = computed({
@@ -124,17 +131,18 @@ export function createBeat(opts: BeatGroupInitOptions) {
             tracks.value[trackIndex2] = track1;
         }
 
-        function addTrack(options?: TrackInitOptions): Track | null {
+        function addTrack(opts?: Omit<TrackInitOptions, 'manager'>): Track | null {
             let newTrack: Track | null;
-            options = {
+            const options: TrackInitOptions = {
+                manager, 
                 bars: barCount.value,
                 isLooping: globalIsLooping.value,
                 loopLength: globalLoopLength.value,
-                ...options,
+                ...opts,
                 timeSig: {
                     up: timeSigUp.value,
                     down: 4,
-                    ...options?.timeSig ?? {},
+                    ...opts?.timeSig ?? {},
                 },
             };
             newTrack = createTrack(options) ?? null;
@@ -172,6 +180,10 @@ export function createBeat(opts: BeatGroupInitOptions) {
             } as const;
         }
 
+        watch(tracks, () => {
+            manager.notifyChange();
+        });
+
         watch([barCount, timeSigUp], ([newBarCount, newTimeSigUp]) => {
             for (const track of tracks.value) {
                 track.barCount.value = newBarCount;