Fix misplaced pulse markers in grid view mode

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

Author: mike-lischke

src/core/serialisation/migration/ArrangementMigrator.ts

@@ -13,7 +13,7 @@ import type {
     IArrangementSnapshot, IMeasureStep, ISubdivision, ITrackMeasureSnapshot, ITrackSnapshot
 } from "../../types/general.js";
 import { greatestCommonDivisor } from "../numeric-functions.js";
-import { createBeatGroups, primeFactors } from "../../utils.js";
+import { primeFactors } from "../../utils.js";
 import { tryParsePackedArrangement } from "../snapshot-packing.js";
 import { arrangementSnapshotVersion } from "../snapshots.js";
 import { BananaDrumUrlImporter, LegacyArrangement, LegacyNote, LegacyTrack } from "./BananaDrumUrlImporter.js";
@@ -253,9 +253,7 @@ export class ArrangementMigrator {
                     beats: metrics.beatsPerBar,
                     beatUnits: metrics.beatUnit,
                     stepResolution: stepsPerBar,
-                    beatGroups: createBeatGroups(
-                        metrics.beatsPerBar, metrics.beatUnit, stepsPerBar,
-                    ),
+                    beatGroups: metrics.beatGroups,
                 },
                 steps,
                 subdivisions,

src/player/TimeCoordinator.ts

@@ -6,6 +6,7 @@
 import type { ISbDmNoteEvent, ITiming, RealTime } from "../core/ScoreBookDataModel.js";
 import type { ITimeParamsBase } from "../core/types/general.js";
 import type { IRealtimeProvider } from "../ui/AnimationEngine.js";
+import { createBeatGroups } from "../core/utils.js";
 
 /**
  * Timing details about the score, such as how long a bar is, or how many pulses there are in a bar.
@@ -32,13 +33,24 @@ export interface IScoreMetrics {
     /** What note value represents one beat? (e.g. 4 for 4/4, 8 for 6/8 etc.) */
     beatUnit: number,
 
-    /** How many pulses are in a bar? */
+    /** How many pulses are in a bar? (= beatGroups.length) */
     pulsesPerBar: number,
 
     /** How many steps are in a bar? */
     stepsPerBar: number,
 
-    /** How many steps are in a pulse? */
+    /**
+     * Beat group sizes in steps, summing to {@link stepsPerBar}.
+     * E.g. `[4, 4, 4, 4]` for 4/4 or `[3, 2, 2]` for 7/8.  Irregular meters have
+     * varying group sizes; this array captures the exact pulse boundaries.
+     */
+    beatGroups: number[],
+
+    /**
+     * How many steps are in a pulse, when beat groups are uniform.
+     * For irregular meters this is the average (may be fractional);
+     * prefer {@link beatGroups} for precise pulse-boundary work.
+     */
     stepsPerPulse: number,
 }
 
@@ -143,16 +155,18 @@ export class TimeCoordinator {
         // And produce our actually useful values.
         const secondsPerStep = secondsPerPulse / stepsPerPulse;
         const secondsPerBar = secondsPerStep * stepsPerBar;
+        const beatGroups = createBeatGroups(beatsPerBar, beatUnit, stepsPerBar);
 
         return {
             realTimeLength: secondsPerBar * this.timeParams.length,
             secondsPerBar,
             secondsPerStep,
             bars: this.timeParams.length,
-            pulsesPerBar: stepsPerBar / stepsPerPulse,
+            pulsesPerBar: beatGroups.length,
             beatsPerBar,
             beatUnit,
             stepsPerBar,
+            beatGroups,
             stepsPerPulse,
         };
     }

tests/e2e/polyrhythm-bananadrum-import.spec.ts

@@ -62,7 +62,8 @@ test.describe("BananaDrum polyrhythm import", () => {
                 return null;
             }
 
-            const directChildren = Array.from(row.children);
+            const directChildren = Array.from(row.children)
+                .filter((c) => { return !c.classList.contains("grid-beat-overlay"); });
 
             return directChildren.map((child) => {
                 const isSubdivision = child.classList.contains("subdivision");
@@ -166,7 +167,9 @@ test.describe("BananaDrum polyrhythm import", () => {
                 return null;
             }
 
-            return Array.from(row.children).map((child) => {
+            return Array.from(row.children)
+                .filter((c) => { return !c.classList.contains("grid-beat-overlay"); })
+                .map((child) => {
                 if (child.classList.contains("subdivision")) {
                     return {
                         type: "subdivision",
@@ -199,7 +202,9 @@ test.describe("BananaDrum polyrhythm import", () => {
                 return null;
             }
 
-            return Array.from(row.children).map((child) => {
+            return Array.from(row.children)
+                .filter((c) => { return !c.classList.contains("grid-beat-overlay"); })
+                .map((child) => {
                 if (child.classList.contains("subdivision")) {
                     return {
                         type: "subdivision",
@@ -230,7 +235,9 @@ test.describe("BananaDrum polyrhythm import", () => {
                 return null;
             }
 
-            return Array.from(row.children).map((child) => {
+            return Array.from(row.children)
+                .filter((c) => { return !c.classList.contains("grid-beat-overlay"); })
+                .map((child) => {
                 if (child.classList.contains("subdivision")) {
                     return {
                         type: "subdivision",

tests/e2e/structure-checks.spec.ts

@@ -40,7 +40,9 @@ test.describe("Beija Flor I-Break: Agogô DOM structure", () => {
                 return null;
             }
 
-            return Array.from(row.children).map((child) => {
+            return Array.from(row.children)
+                .filter((c) => { return !c.classList.contains("grid-beat-overlay"); })
+                .map((child) => {
                 if (child.classList.contains("subdivision")) {
                     return {
                         type: "subdivision",

tests/player/ArrangementPlayer.spec.ts

@@ -59,6 +59,7 @@ vi.mock("../../src/player/TimeCoordinator.js", () => {
                 beatUnit: 4,
                 pulsesPerBar: 4,
                 stepsPerBar: 16,
+                beatGroups: [4, 4, 4, 4],
                 stepsPerPulse: 4,
             };
         }

tests/player/TrackPlayer.spec.ts

@@ -28,6 +28,7 @@ const makeTimeCoordinator = (realTimeLength: RealTime = 4): TimeCoordinator => {
             bars: 1,
             beatsPerBar: 4,
             stepsPerBar: 16,
+            beatGroups: [2, 2, 2, 2, 2, 2, 2, 2],
             stepsPerPulse: 2,
             beatUnit: 4,
             pulsesPerBar: 8,

tests/ui/Minimap.spec.tsx

@@ -180,6 +180,7 @@ const makeScoreMetrics = (): IScoreMetrics => {
         beatUnit: 4,
         pulsesPerBar: 4,
         stepsPerBar: 8,
+        beatGroups: [2, 2, 2, 2],
         stepsPerPulse: 2,
     };
 };