@real-music-packages/web-core 0.30.0 → 0.32.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,
@@ -1296,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 ?? 360;
+      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) {
@@ -4646,6 +4765,212 @@ var endCardFactory = {
   }
 };
 
+// src/scene/layers/imageReveal.ts
+var DEFAULTS11 = {
+  mode: "pixelate",
+  startMs: 0,
+  durationMs: 6e3,
+  difficulty: 0.5
+};
+function clamp017(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function fitRect(iW, iH, bx, by, bw, bh) {
+  const scale = Math.min(bw / iW, bh / iH);
+  const dw = iW * scale;
+  const dh = iH * scale;
+  return { dx: bx + (bw - dw) / 2, dy: by + (bh - dh) / 2, dw, dh };
+}
+function blockSizeAt(p, maxBlock) {
+  return Math.max(1, Math.round(maxBlock * (1 - p) + 1 * p));
+}
+function tileHash(i) {
+  let x = i * 2654435761 >>> 0;
+  x ^= x << 13;
+  x ^= x >>> 17;
+  x ^= x << 5;
+  return (x >>> 0) / 4294967295;
+}
+function tileHashSigned(i, salt) {
+  return tileHash(i * 1013904223 + salt * 22695477 | 0) * 2 - 1;
+}
+function imageRevealLayer() {
+  let mode = DEFAULTS11.mode;
+  let startMs = DEFAULTS11.startMs;
+  let durationMs = DEFAULTS11.durationMs;
+  let difficulty = DEFAULTS11.difficulty;
+  let image = null;
+  let offscreen = null;
+  let offCtx = null;
+  let imgW = 0;
+  let imgH = 0;
+  function ensureOffscreen(w, h) {
+    const needNew = !offscreen || offscreen.width !== w || offscreen.height !== h;
+    if (needNew) {
+      if (typeof OffscreenCanvas !== "undefined") {
+        offscreen = new OffscreenCanvas(w, h);
+        offCtx = offscreen.getContext("2d");
+      } else {
+        const el = typeof document !== "undefined" ? document.createElement("canvas") : null;
+        if (!el) {
+          offscreen = null;
+          offCtx = null;
+          return null;
+        }
+        el.width = w;
+        el.height = h;
+        offscreen = el;
+        offCtx = el.getContext("2d");
+      }
+    }
+    return offCtx;
+  }
+  return {
+    key: "image-reveal",
+    init(_ctx, props) {
+      mode = props.mode ?? DEFAULTS11.mode;
+      startMs = props.startMs ?? DEFAULTS11.startMs;
+      durationMs = props.durationMs ?? DEFAULTS11.durationMs;
+      difficulty = props.difficulty ?? DEFAULTS11.difficulty;
+      image = props.image;
+      const src = props.image;
+      imgW = src["naturalWidth"] ?? src["displayWidth"] ?? src["width"] ?? 0;
+      imgH = src["naturalHeight"] ?? src["displayHeight"] ?? src["height"] ?? 0;
+    },
+    draw(ctx, tMs) {
+      if (!image || imgW === 0 || imgH === 0) return;
+      const p = clamp017((tMs - startMs) / (durationMs > 0 ? durationMs : 1));
+      const sb = ctx.safeBox;
+      const fit = fitRect(imgW, imgH, sb.left, sb.top, sb.w, sb.h);
+      const c = ctx.ctx2d;
+      c.save();
+      c.beginPath();
+      c.rect(fit.dx, fit.dy, fit.dw, fit.dh);
+      c.clip();
+      if (mode === "pixelate") {
+        drawPixelate(c, image, fit, p, difficulty, imgW, imgH, ensureOffscreen);
+      } else if (mode === "blur") {
+        drawBlur(c, image, fit, p, difficulty, imgW, imgH, ensureOffscreen);
+      } else {
+        drawShuffle(c, image, fit, p, difficulty, imgW, imgH);
+      }
+      c.restore();
+    },
+    dispose() {
+      image = null;
+      offscreen = null;
+      offCtx = null;
+    }
+  };
+}
+function drawPixelate(c, image, fit, p, difficulty, imgW, imgH, getOffCtx) {
+  const maxBlock = Math.max(2, Math.round(fit.dw * (0.03125 + difficulty * 0.21875)));
+  const blockSize = blockSizeAt(p, maxBlock);
+  if (blockSize <= 1) {
+    c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+    return;
+  }
+  const smallW = Math.max(1, Math.ceil(fit.dw / blockSize));
+  const smallH = Math.max(1, Math.ceil(fit.dh / blockSize));
+  const oc = getOffCtx(smallW, smallH);
+  if (!oc) {
+    c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+    return;
+  }
+  oc.clearRect(0, 0, smallW, smallH);
+  oc.drawImage(image, 0, 0, imgW, imgH, 0, 0, smallW, smallH);
+  const prev = c.imageSmoothingEnabled;
+  c.imageSmoothingEnabled = false;
+  const off = oc.canvas;
+  c.drawImage(off, 0, 0, smallW, smallH, fit.dx, fit.dy, fit.dw, fit.dh);
+  c.imageSmoothingEnabled = prev;
+}
+function drawBlur(c, image, fit, p, difficulty, imgW, imgH, getOffCtx) {
+  const maxBlur = 8 + difficulty * 72;
+  const blurPx = maxBlur * (1 - p);
+  const cAny = c;
+  const hasFilter = "filter" in c && cAny["filter"] !== void 0;
+  if (hasFilter && blurPx > 0) {
+    const prev = cAny["filter"];
+    cAny["filter"] = `blur(${blurPx.toFixed(1)}px)`;
+    c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+    cAny["filter"] = prev ?? "none";
+  } else if (blurPx > 0) {
+    const passes = Math.min(6, Math.round(blurPx / 8));
+    if (passes > 0) {
+      let w = Math.max(1, Math.round(fit.dw / Math.pow(2, passes)));
+      let h = Math.max(1, Math.round(fit.dh / Math.pow(2, passes)));
+      const oc = getOffCtx(w, h);
+      if (oc) {
+        oc.clearRect(0, 0, w, h);
+        oc.drawImage(image, 0, 0, imgW, imgH, 0, 0, w, h);
+        c.drawImage(oc.canvas, 0, 0, w, h, fit.dx, fit.dy, fit.dw, fit.dh);
+      } else {
+        c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+      }
+    } else {
+      c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+    }
+  } else {
+    c.drawImage(image, 0, 0, imgW, imgH, fit.dx, fit.dy, fit.dw, fit.dh);
+  }
+}
+function drawShuffle(c, image, fit, p, difficulty, imgW, imgH) {
+  const cols = 8;
+  const rows = 14;
+  const tileW = fit.dw / cols;
+  const tileH = fit.dh / rows;
+  const srcTileW = imgW / cols;
+  const srcTileH = imgH / rows;
+  const maxOffX = tileW * difficulty * 1.5;
+  const maxOffY = tileH * difficulty * 1.5;
+  const ease = 1 - (1 - p) * (1 - p);
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const i = row * cols + col;
+      const offX = tileHashSigned(i, 0) * maxOffX * (1 - ease);
+      const offY = tileHashSigned(i, 1) * maxOffY * (1 - ease);
+      const sx = col * srcTileW;
+      const sy = row * srcTileH;
+      const dxHome = fit.dx + col * tileW;
+      const dyHome = fit.dy + row * tileH;
+      const dx = dxHome + offX;
+      const dy = dyHome + offY;
+      c.drawImage(
+        image,
+        sx,
+        sy,
+        srcTileW,
+        srcTileH,
+        dx,
+        dy,
+        tileW,
+        tileH
+      );
+    }
+  }
+}
+var VALID_MODES = ["pixelate", "shuffle", "blur"];
+var imageRevealFactory = {
+  key: "image-reveal",
+  create: imageRevealLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["image-reveal: props must be an object"];
+    const p = props;
+    const errs = [];
+    if (p["image"] == null) errs.push("image-reveal.image is required");
+    if (p["mode"] != null && !VALID_MODES.includes(p["mode"]))
+      errs.push(`image-reveal.mode must be one of: ${VALID_MODES.join(", ")}`);
+    if (p["startMs"] != null && typeof p["startMs"] !== "number")
+      errs.push("image-reveal.startMs must be a number");
+    if (p["durationMs"] != null && (typeof p["durationMs"] !== "number" || p["durationMs"] <= 0))
+      errs.push("image-reveal.durationMs must be a positive number");
+    if (p["difficulty"] != null && (typeof p["difficulty"] !== "number" || p["difficulty"] < 0 || p["difficulty"] > 1))
+      errs.push("image-reveal.difficulty must be a number in [0, 1]");
+    return errs;
+  }
+};
+
 // src/scene/registry.ts
 var REGISTRY = /* @__PURE__ */ new Map();
 function registerLayer(factory) {
@@ -4662,6 +4987,7 @@ registerLayer(captionFactory);
 registerLayer(notationFactory);
 registerLayer(scrollCursorFactory);
 registerLayer(keyboardFactory);
+registerLayer(fretboardFactory);
 registerLayer(fallingNotesFactory);
 registerLayer(hookFactory);
 registerLayer(revealFactory);
@@ -4693,6 +5019,7 @@ registerLayer(tensionGraphFactory);
 registerLayer(textureFactory);
 registerLayer(statCounterFactory);
 registerLayer(endCardFactory);
+registerLayer(imageRevealFactory);
 
 // src/scene/audioLayers.ts
 function countInSchedule(opts) {
@@ -5503,6 +5830,7 @@ export {
   followWindowStart,
   fracSlotPoint,
   frameRect,
+  fretboardFactory,
   functionColor,
   functionalHarmonyFactory,
   getKeyboardLayout,
@@ -5512,6 +5840,7 @@ export {
   highlightIntensity,
   hookFactory,
   identityCamera,
+  imageRevealFactory,
   inRange,
   intervalArcsFactory,
   invLerp,