@real-music-packages/web-core 0.25.0 → 0.26.0

package/dist/scene/index.d.ts

@@ -1793,6 +1793,9 @@ interface CountdownProps {
     centerFrac?: number;
     /** Draw a draining ring around the number. Default true. */
     ring?: boolean;
+    /** Ring radius in px. Default = fontPx*0.62. Set explicitly to align the ring
+     *  with another circular element (e.g. whozart's radial ring / portrait). */
+    ringRadius?: number;
 }
 declare const countdownFactory: LayerFactory<CountdownProps>;
 

package/dist/scene/index.js

@@ -3813,6 +3813,7 @@ function countdownLayer() {
   let fontPx = DEFAULTS6.fontPx;
   let centerFrac = DEFAULTS6.centerFrac;
   let ring = DEFAULTS6.ring;
+  let ringRadiusProp;
   return {
     key: "countdown",
     init(_ctx, props) {
@@ -3823,6 +3824,7 @@ function countdownLayer() {
       fontPx = props.fontPx ?? DEFAULTS6.fontPx;
       centerFrac = props.centerFrac ?? DEFAULTS6.centerFrac;
       ring = props.ring ?? DEFAULTS6.ring;
+      ringRadiusProp = props.ringRadius;
     },
     draw(ctx, tMs) {
       const elapsed = tMs - startMs;
@@ -3841,7 +3843,7 @@ function countdownLayer() {
       const fade = 1 - Math.max(0, (tickFrac - 0.7) / 0.3) * 0.85;
       c.save();
       if (ring) {
-        const r = fontPx * 0.62;
+        const r = ringRadiusProp ?? fontPx * 0.62;
         c.lineWidth = 10;
         c.lineCap = "round";
         c.strokeStyle = rgba6(col, 0.18 * fade);
@@ -3877,6 +3879,7 @@ var countdownFactory = {
     if (p.fontPx != null && (typeof p.fontPx !== "number" || p.fontPx <= 0)) errs.push("countdown.fontPx must be a positive number");
     if (p.centerFrac != null && (typeof p.centerFrac !== "number" || p.centerFrac < 0 || p.centerFrac > 1)) errs.push("countdown.centerFrac must be in [0,1]");
     if (p.ring != null && typeof p.ring !== "boolean") errs.push("countdown.ring must be a boolean");
+    if (p.ringRadius != null && (typeof p.ringRadius !== "number" || p.ringRadius <= 0)) errs.push("countdown.ringRadius must be a positive number");
     return errs;
   }
 };
@@ -4030,14 +4033,26 @@ function scaleHighlightLayer() {
       const layout = getKeyboardLayout(ctx);
       if (layout) {
         c.save();
-        c.globalAlpha = alpha;
         for (let m = layout.lowMidi; m <= layout.highMidi; m++) {
           if (!inRange(layout, m)) continue;
           const pc = pitchClass(m);
           if (!inScale.has(pc)) continue;
           const r = keyRect(layout, m);
-          c.fillStyle = pc === root ? tc : sc;
-          c.fillRect(r.x, r.y, r.w, r.h);
+          const isTonic = pc === root;
+          const cx = r.x + r.w / 2;
+          const pipR = (r.black ? r.w * 0.5 : r.w * 0.32) * (isTonic ? 1.25 : 1);
+          const cy = r.y + r.h - pipR - (r.black ? 8 : 16);
+          c.globalAlpha = Math.min(1, alpha + 0.4);
+          c.fillStyle = isTonic ? tc : sc;
+          c.beginPath();
+          c.arc(cx, cy, pipR, 0, Math.PI * 2);
+          c.fill();
+          if (isTonic) {
+            c.fillStyle = "#ffffff";
+            c.beginPath();
+            c.arc(cx, cy, pipR * 0.42, 0, Math.PI * 2);
+            c.fill();
+          }
         }
         c.restore();
       }