@real-music-packages/web-core 0.29.0 → 0.31.0

package/dist/scene/index.js

@@ -1,6 +1,8 @@
 import {
+  STRING_COUNT,
+  buildPlacementMap,
   intervalBySemitones
-} from "../chunk-N56UTMWA.js";
+} from "../chunk-ILIXNGPE.js";
 import {
   getScaleDegree,
   getStability,
@@ -666,7 +668,7 @@ function audioPlayheadLine(layout, onsetsMs, tMs, barDurMs, noteCols) {
   if (alpha <= 0.02) return null;
   return { x, y0, y1, alpha };
 }
-function vstackAudioPlayheadLine(layout, onsetsMs, tMs, nBars) {
+function vstackAudioPlayheadLine(layout, onsetsMs, tMs, nBars, noteCols) {
   const padV = 10;
   const cols = measureColumnsFromLayout(layout.measures);
   if (!cols.length || !onsetsMs.length || nBars <= 0) return null;
@@ -674,40 +676,59 @@ function vstackAudioPlayheadLine(layout, onsetsMs, tMs, nBars) {
   const first = onsetsMs[0];
   const last = onsetsMs[n - 1];
   const span = last - first;
-  let progress;
-  if (tMs <= first || n === 1) progress = 0;
-  else if (tMs >= last || last <= first) progress = 1;
-  else {
+  const colX = (m, f) => {
+    const sx = Math.min(m.noteStartX, m.x + m.w);
+    return sx + Math.min(1, Math.max(0, f)) * (m.x + m.w - sx);
+  };
+  const useEng = !!noteCols && noteCols.length === n;
+  const anchorFor = (k) => {
+    const pos = useEng ? noteCols[k] : (n === 1 ? 0 : k / (n - 1)) * cols.length;
+    const i = Math.min(cols.length - 1, Math.max(0, Math.floor(pos)));
+    const m = cols[i];
+    return { x: colX(m, pos - i), rowY: m.y, rowH: m.h };
+  };
+  const sameRow = (ya, yb) => Math.abs(ya - yb) < Math.max(8, ya * 0 + 8);
+  const rowRightEdge = (rowY2) => Math.max(...cols.filter((c) => sameRow(c.y, rowY2)).map((c) => c.x + c.w));
+  const rowLeftEdge = (rowY2) => Math.min(...cols.filter((c) => sameRow(c.y, rowY2)).map((c) => Math.min(c.noteStartX, c.x)));
+  let a, b, frac;
+  if (tMs <= first || n === 1) {
+    a = b = anchorFor(0);
+    frac = 0;
+  } else if (tMs >= last) {
+    a = b = anchorFor(n - 1);
+    frac = 0;
+  } else {
     let lo = 0, hi = n - 1;
     while (lo < hi) {
       const mid = lo + hi + 1 >> 1;
       if (onsetsMs[mid] <= tMs) lo = mid;
       else hi = mid - 1;
     }
-    const segFrac = (tMs - onsetsMs[lo]) / (onsetsMs[lo + 1] - onsetsMs[lo]);
-    progress = (lo + segFrac) / (n - 1);
-  }
-  const colX = (m2, f) => {
-    const sx = Math.min(m2.noteStartX, m2.x + m2.w);
-    return sx + Math.min(1, Math.max(0, f)) * (m2.x + m2.w - sx);
-  };
-  const posBars = Math.min(nBars - 1e-6, Math.max(0, progress * nBars));
-  const i = Math.min(cols.length - 1, Math.floor(posBars));
-  const barFrac = posBars - i;
-  const m = cols[i];
-  let x = colX(m, barFrac);
-  let y0 = m.y - padV;
-  let y1 = m.y + m.h + padV;
-  if (i + 1 < cols.length) {
-    const nxt = cols[i + 1];
-    const crossesSystem = Math.abs(nxt.y - m.y) > m.h * 1.5;
-    if (crossesSystem) {
-      const s = cubicEaseInOut(Math.min(1, Math.max(0, (barFrac - 0.66) / 0.34)));
-      x = x + (colX(nxt, 0) - x) * s;
-      y0 = y0 + (nxt.y - padV - y0) * s;
-      y1 = y1 + (nxt.y + nxt.h + padV - y1) * s;
+    a = anchorFor(lo);
+    b = anchorFor(lo + 1);
+    frac = (tMs - onsetsMs[lo]) / (onsetsMs[lo + 1] - onsetsMs[lo]);
+  }
+  let x, rowY, rowH;
+  if (sameRow(a.rowY, b.rowY)) {
+    x = a.x + (b.x - a.x) * frac;
+    rowY = a.rowY;
+    rowH = a.rowH;
+  } else {
+    if (frac < 0.5) {
+      const s = frac / 0.5;
+      x = a.x + (rowRightEdge(a.rowY) - a.x) * s;
+      rowY = a.rowY;
+      rowH = a.rowH;
+    } else {
+      const s = (frac - 0.5) / 0.5;
+      const nl = rowLeftEdge(b.rowY);
+      x = nl + (b.x - nl) * s;
+      rowY = b.rowY;
+      rowH = b.rowH;
     }
   }
+  let y0 = rowY - padV;
+  let y1 = rowY + rowH + padV;
   const bandY0 = layout.rect.dy;
   const bandY1 = layout.rect.dy + layout.rect.dh;
   const h = Math.max(1, y1 - y0);
@@ -935,7 +956,7 @@ function scrollCursorLayer() {
       const onsets = onsetsFor(ctx);
       let line;
       if (scrollMode === "vstack") {
-        line = vstackAudioPlayheadLine(layout, onsets, tMs, measureCount(eng.rendered));
+        line = vstackAudioPlayheadLine(layout, onsets, tMs, measureCount(eng.rendered), noteColsFor(ctx));
       } else {
         line = audioPlayheadLine(layout, onsets, tMs, barDurMs, noteColsFor(ctx));
       }
@@ -1277,6 +1298,123 @@ var keyboardFactory = {
   }
 };
 
+// src/scene/layers/fretboard.ts
+var INLAY_FRETS = [3, 5, 7, 9, 12];
+var NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+function fretboardLayer() {
+  let placement = /* @__PURE__ */ new Map();
+  let visibleFrets = 12;
+  let hands = { R: "#7b2436", L: "#c8a55b" };
+  let showLabels = false;
+  let rect = { x: 0, y: 0, w: 0, h: 0 };
+  return {
+    key: "fretboard",
+    init(ctx, props) {
+      hands = props.handColors ?? { R: ctx.theme.accent, L: ctx.theme.gold };
+      showLabels = props.showLabels ?? false;
+      const midis = (ctx.score?.notes ?? []).map((n) => n.pitchMidi);
+      placement = buildPlacementMap(midis);
+      let maxFret = 0;
+      for (const p of placement.values()) maxFret = Math.max(maxFret, p.fret);
+      visibleFrets = props.visibleFrets ?? Math.min(15, Math.max(5, maxFret + 1));
+      const sb = ctx.safeBox;
+      const height = props.height ?? 220;
+      const bottomY = props.bottomY ?? sb.bottom;
+      rect = { x: sb.left, y: bottomY - height, w: sb.w, h: height };
+    },
+    draw(ctx, tMs) {
+      const c = ctx.ctx2d;
+      const { x, y, w, h } = rect;
+      const nutW = Math.max(6, w * 0.012);
+      const boardX = x + nutW;
+      const boardW = w - nutW;
+      const fretW = boardW / visibleFrets;
+      const stringGap = h / (STRING_COUNT - 1);
+      const stringY = (s) => y + h - s * stringGap;
+      const fretX = (f) => boardX + f * fretW;
+      const dotX = (f) => f === 0 ? x + nutW / 2 : fretX(f) - fretW / 2;
+      c.save();
+      c.fillStyle = "#f1e7d6";
+      c.fillRect(x, y, w, h);
+      c.fillStyle = "#2a2420";
+      c.fillRect(x, y, nutW, h);
+      c.strokeStyle = "#b8a98c";
+      c.lineWidth = 2;
+      for (let f = 1; f <= visibleFrets; f++) {
+        c.beginPath();
+        c.moveTo(fretX(f), y);
+        c.lineTo(fretX(f), y + h);
+        c.stroke();
+      }
+      c.fillStyle = "rgba(60,50,40,0.28)";
+      for (const f of INLAY_FRETS) {
+        if (f > visibleFrets) continue;
+        const cx = dotX(f);
+        const r = Math.min(stringGap, fretW) * 0.18;
+        if (f === 12) {
+          c.beginPath();
+          c.arc(cx, stringY(STRING_COUNT - 1) + stringGap * 0.5, r, 0, Math.PI * 2);
+          c.fill();
+          c.beginPath();
+          c.arc(cx, stringY(0) - stringGap * 0.5, r, 0, Math.PI * 2);
+          c.fill();
+        } else {
+          c.beginPath();
+          c.arc(cx, y + h / 2, r, 0, Math.PI * 2);
+          c.fill();
+        }
+      }
+      c.strokeStyle = "#5c5345";
+      for (let s = 0; s < STRING_COUNT; s++) {
+        c.lineWidth = 1 + (STRING_COUNT - 1 - s) * 0.5;
+        c.beginPath();
+        c.moveTo(x, stringY(s));
+        c.lineTo(x + w, stringY(s));
+        c.stroke();
+      }
+      const dotR = Math.min(stringGap, fretW) * 0.42;
+      for (const n of ctx.score?.notes ?? []) {
+        if (!(tMs >= n.onsetMs && tMs < n.onsetMs + n.durMs)) continue;
+        const pos = placement.get(n.pitchMidi);
+        if (!pos || pos.fret > visibleFrets) continue;
+        const cx = dotX(pos.fret);
+        const cy = stringY(pos.string);
+        c.fillStyle = n.hand === "L" ? hands.L : hands.R;
+        c.beginPath();
+        c.arc(cx, cy, dotR, 0, Math.PI * 2);
+        c.fill();
+        if (showLabels) {
+          c.fillStyle = "#fff";
+          c.font = `${Math.round(dotR * 1.1)}px sans-serif`;
+          c.textAlign = "center";
+          c.textBaseline = "middle";
+          c.fillText(NOTE_NAMES[n.pitchMidi % 12], cx, cy);
+        }
+      }
+      c.restore();
+    },
+    dispose() {
+      placement = /* @__PURE__ */ new Map();
+    }
+  };
+}
+var fretboardFactory = {
+  key: "fretboard",
+  create: fretboardLayer,
+  validateProps(props) {
+    const errs = [];
+    if (props == null || typeof props !== "object") return ["fretboard: props must be an object"];
+    const p = props;
+    if (p.visibleFrets != null && (typeof p.visibleFrets !== "number" || p.visibleFrets < 1 || p.visibleFrets > 24))
+      errs.push("fretboard.visibleFrets must be a number in 1..24");
+    if (p.height != null && (typeof p.height !== "number" || p.height <= 0))
+      errs.push("fretboard.height must be a positive number");
+    if (p.bottomY != null && typeof p.bottomY !== "number") errs.push("fretboard.bottomY must be a number");
+    if (p.showLabels != null && typeof p.showLabels !== "boolean") errs.push("fretboard.showLabels must be a boolean");
+    return errs;
+  }
+};
+
 // src/scene/layers/fallingNotes.ts
 var DEFAULT_LEAD_MS = 2e3;
 function rgba(color, a) {
@@ -4643,6 +4781,7 @@ registerLayer(captionFactory);
 registerLayer(notationFactory);
 registerLayer(scrollCursorFactory);
 registerLayer(keyboardFactory);
+registerLayer(fretboardFactory);
 registerLayer(fallingNotesFactory);
 registerLayer(hookFactory);
 registerLayer(revealFactory);
@@ -5484,6 +5623,7 @@ export {
   followWindowStart,
   fracSlotPoint,
   frameRect,
+  fretboardFactory,
   functionColor,
   functionalHarmonyFactory,
   getKeyboardLayout,