Persist current selection and restore on app load

Bug fix: could not select more than one note group using the selection rectangle

Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

src/components/ui/Bar/Staff/StaffBarViewer.tsx

@@ -256,26 +256,30 @@ export class StaffBarViewer extends UIComponent<IBarViewerProps, IBarViewerState
                 }
             }
 
-            // If no individual notes/rests were hit, try beam → NoteGroup.
+            // If no individual notes/rests were hit, try beams → NoteGroup entries.
             if (noteEntries.filter((e) => {
                 return e.trackId === trackId;
             }).length === 0) {
                 const beamElements = row.querySelectorAll<HTMLElement>(".staff-note-viewer-beam");
-                let hitBeamStep: number | undefined;
+                const hitBeamSteps = new Set<number>();
 
                 for (const beam of beamElements) {
                     const beamRect = beam.getBoundingClientRect();
                     if (rectsIntersect(rect, beamRect.left, beamRect.top, beamRect.right, beamRect.bottom, 0)) {
-                        const runParent = beam.closest<HTMLElement>(".staff-note-viewer-run[data-step-index]");
+                        const runParent = beam.closest<HTMLElement>(
+                            ".staff-note-viewer-run[data-step-index]",
+                        );
+
                         if (runParent) {
-                            hitBeamStep = parseInt(runParent.getAttribute("data-step-index") ?? "", 10);
+                            const step = parseInt(runParent.getAttribute("data-step-index") ?? "", 10);
+                            if (!isNaN(step)) {
+                                hitBeamSteps.add(step);
+                            }
                         }
-
-                        break;
                     }
                 }
 
-                if (hitBeamStep !== undefined && !isNaN(hitBeamStep)) {
+                if (hitBeamSteps.size > 0) {
                     const allRuns = row.querySelectorAll<HTMLElement>(
                         ".staff-note-viewer-run[data-step-index]",
                     );
@@ -310,24 +314,37 @@ export class StaffBarViewer extends UIComponent<IBarViewerProps, IBarViewerState
                         reverseConnections.set(to, from);
                     }
 
-                    let groupStart = hitBeamStep;
-                    while (reverseConnections.has(groupStart)) {
-                        groupStart = reverseConnections.get(groupStart)!;
-                    }
+                    // Collect distinct beam groups from all hit steps.
+                    const beamGroups = new Set<string>();
+
+                    for (const hitStep of hitBeamSteps) {
+                        let groupStart = hitStep;
+                        while (reverseConnections.has(groupStart)) {
+                            groupStart = reverseConnections.get(groupStart)!;
+                        }
 
-                    let groupEnd = hitBeamStep;
-                    while (beamConnections.has(groupEnd)) {
-                        groupEnd = beamConnections.get(groupEnd)!;
+                        let groupEnd = hitStep;
+                        while (beamConnections.has(groupEnd)) {
+                            groupEnd = beamConnections.get(groupEnd)!;
+                        }
+
+                        beamGroups.add(`${groupStart}-${groupEnd}`);
                     }
 
-                    noteEntries.push({
-                        granularity: SelectionGranularity.NoteGroup,
-                        bar: barNumber,
-                        trackId: trackId,
-                        startStep: groupStart,
-                        endStep: groupEnd,
-                    });
-                    rowHasSoundingNotes = true;
+                    for (const groupKey of beamGroups) {
+                        const [startStr, endStr] = groupKey.split("-");
+                        const groupStart = parseInt(startStr, 10);
+                        const groupEnd = parseInt(endStr, 10);
+
+                        noteEntries.push({
+                            granularity: SelectionGranularity.NoteGroup,
+                            bar: barNumber,
+                            trackId: trackId,
+                            startStep: groupStart,
+                            endStep: groupEnd,
+                        });
+                        rowHasSoundingNotes = true;
+                    }
                 }
             }
 

src/core/AppStorage.ts

@@ -29,6 +29,12 @@ export interface IArrangementViewSettings {
 export interface IViewSettings {
     /** Settings related to the arrangement viewer. */
     arrangementViewSettings?: IArrangementViewSettings;
+
+    /**
+     * Serialised selection state for the current arrangement, stored as a JSON string.
+     * Maintained by the SelectionManager so the selection survives page reloads.
+     */
+    selectionState?: string;
 }
 
 export interface IUISettings {

src/player/ArrangementPlayer.ts

@@ -129,7 +129,7 @@ export class ArrangementPlayer {
      */
     public onStop = (): void => {
         this.timing = undefined;
-        void requisitions.execute("playerStateChanged", undefined);
+        void requisitions.execute("playerStateChanged", this.#state);
         for (const player of this.trackPlayers.values()) {
             player.onStop();
         }
@@ -196,7 +196,7 @@ export class ArrangementPlayer {
 
         this.#state = "counting";
         if (this.dataModel.arrangement!.countIn) {
-            void requisitions.execute("playerStateChanged", undefined);
+            void requisitions.execute("playerStateChanged", this.#state);
             this.offset = this.audioContext.currentTime;
             await this.countIn();
         }
@@ -216,7 +216,7 @@ export class ArrangementPlayer {
         // Pretend we have covered all events before the interval start.
         this.timeCovered = interval?.start ?? 0;
 
-        void requisitions.execute("playerStateChanged", undefined);
+        void requisitions.execute("playerStateChanged", this.#state);
         void this.iteration();
     }
 
@@ -417,7 +417,7 @@ export class ArrangementPlayer {
         }
 
         if (somethingChanged) {
-            void requisitions.execute("playerStateChanged", undefined);
+            void requisitions.execute("playerStateChanged", this.#state);
         }
     };
 
@@ -451,7 +451,6 @@ export class ArrangementPlayer {
                 realTime: this.timeCoordinator.convertToRealTime(timing),
                 callback: () => {
                     this.timing = timing;
-                    void requisitions.execute("playerStateChanged", undefined);
                 },
                 identifier: timing
             };

src/supplement/Requisitions.ts

@@ -21,7 +21,7 @@ export interface IRequestTypeMap {
     // --- Playback topics ---
     "playRangeChanged": (range?: { from: number; to: number; }) => Promise<boolean>;
     "animationStateChanged": (state: PlayerPlayState) => Promise<boolean>;
-    "playerStateChanged": SimpleCallback;
+    "playerStateChanged": (state: PlayerPlayState) => Promise<boolean>;
 
     // --- Core model topics ---
     "instrumentLoaded": (instrumentId: number) => Promise<boolean>;