add label support to pianoroll

packages/core/pianoroll.mjs

@@ -50,6 +50,7 @@ Pattern.prototype.pianoroll = function ({
   timeframe: timeframeProp,
   fold = 0,
   vertical = 0,
+  labels = 0,
 } = {}) {
   const ctx = getDrawContext();
   const w = ctx.canvas.width;
@@ -114,6 +115,14 @@ Pattern.prototype.pianoroll = function ({
           ];
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
+        if (labels) {
+          const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
+          ctx.font = `${barThickness * 0.75}px monospace`;
+          ctx.strokeStyle = 'black';
+          ctx.fillStyle = isActive ? 'white' : 'black';
+          ctx.textBaseline = 'top';
+          ctx.fillText(label, ...coords);
+        }
       });
       ctx.globalAlpha = 1; // reset!
       const playheadPosition = scale(-from / timeExtent, ...timeRange);
@@ -181,6 +190,7 @@ export function pianoroll({
   timeframe: timeframeProp,
   fold = 0,
   vertical = 0,
+  labels = false,
   ctx,
 } = {}) {
   const w = ctx.canvas.width;
@@ -267,6 +277,14 @@ export function pianoroll({
         ];
       }
       isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
+      if (labels) {
+        const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
+        ctx.font = `${barThickness * 0.75}px monospace`;
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = isActive ? 'white' : 'black';
+        ctx.textBaseline = 'top';
+        ctx.fillText(label, ...coords);
+      }
     });
   ctx.globalAlpha = 1; // reset!
   const playheadPosition = scale(-from / timeExtent, ...timeRange);

packages/react/src/components/MiniRepl.jsx

@@ -21,6 +21,7 @@ export function MiniRepl({
   onTrigger,
   drawTime,
   punchcard,
+  punchcardLabels,
   onPaint,
   canvasHeight = 200,
   fontSize = 18,
@@ -28,6 +29,7 @@ export function MiniRepl({
   hideHeader = false,
   theme,
   keybindings,
+  isLineNumbersDisplayed,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -61,7 +63,7 @@ export function MiniRepl({
       if (onPaint) {
         pat = pat.onPaint(onPaint);
       } else if (punchcard) {
-        pat = pat.punchcard();
+        pat = pat.punchcard({ labels: punchcardLabels });
       }
       return pat;
     },
@@ -160,6 +162,7 @@ export function MiniRepl({
             fontFamily={fontFamily}
             fontSize={fontSize}
             keybindings={keybindings}
+            isLineNumbersDisplayed={isLineNumbersDisplayed}
           />
         )}
         {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}

website/src/docs/MiniRepl.jsx

@@ -32,6 +32,7 @@ export function MiniRepl({
   tune,
   drawTime,
   punchcard,
+  punchcardLabels = true,
   span = [0, 4],
   canvasHeight = 100,
   hideHeader,
@@ -39,7 +40,7 @@ export function MiniRepl({
   claviatureLabels,
 }) {
   const [Repl, setRepl] = useState();
-  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
   const [activeNotes, setActiveNotes] = useState([]);
   useEffect(() => {
     // we have to load this package on the client
@@ -55,6 +56,7 @@ export function MiniRepl({
         hideOutsideView={true}
         drawTime={claviature ? [0, 0] : drawTime}
         punchcard={punchcard}
+        punchcardLabels={punchcardLabels}
         span={span}
         canvasHeight={canvasHeight}
         theme={themes[theme]}
@@ -62,6 +64,7 @@ export function MiniRepl({
         keybindings={keybindings}
         fontFamily={fontFamily}
         fontSize={fontSize}
+        isLineNumbersDisplayed={isLineNumbersDisplayed}
         onPaint={
           claviature
             ? (ctx, time, haps, drawTime) => {